一、初识jQuery（了解）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-初识jQuery</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; border: 1px solid #000; } </style> <script src="js/jquery-1.12.4.js"></script> <script> window.onload = function (ev) { // 1.利用原生的JS查找DOM元素 var div1 = document.getElementsByTagName("div")[0]; var div2 = document.getElementsByClassName("box1")[0]; var div3 = document.getElementById("box2"); // console.log(div1); // console.log(div2); // console.log(div3); // 2.利用原生的JS修改背景颜色 // div1.style.backgroundColor = "red"; // div2.style.backgroundColor = "blue"; // div3.style.backgroundColor = "yellow"; } $(function () { var $div1 = $("div"); var $div2 = $(".box1"); var $div3 = $("#box2"); // console.log($div1); // console.log($div2); // console.log($div3); $div1.css({ background: "red", "200px", height: "200px" }); $div2.css({ background: "blue" }); $div3.css({ background: "yellow" }); }); </script> </head> <body> <div></div> <div class="box1"></div> <div id="box2"></div> </body> </html>
二、jQuery——HelloWord
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02-jQuery-HelloWorld</title> <script src="js/jquery-1.12.4.js"></script> <script> // 1.原生JS的固定写法 window.onload = function (ev) { } // 2.jQuery的固定写法 $(document).ready(function () { alert("hello lnj"); }); </script> </head> <body> </body> </html>
三、jQuery和JS入口函数的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03-jQuery和JS入口函数的区别</title> <script src="js/jquery-1.12.4.js"></script> <script> /* window.onload = function (ev) { // 1.通过原生的JS入口函数可以拿到DOM元素 var images = document.getElementsByTagName("images")[0]; console.log(images); // 2.通过原生的JS入口函数可以拿到DOM元素的宽高 var width = window.getComputedStyle(images).width; console.log("onload", width); } */ /* * 1.原生JS和jQuery入口函数的加载模式不同 * 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行 * jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行 * */ /* $(document).ready(function () { // 1.通过jQuery入口函数可以拿到DOM元素 var $images = $("images"); console.log($images); // 2.通过jQuery入口函数不可以拿到DOM元素的宽高 var $width = $images.width(); console.log("ready", $width); }); */ /* 1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的 2.jQuery中编写多个入口函数,后面的不会覆盖前面的 */ // window.onload = function (ev) { // alert("hello lnj1"); // } // window.onload = function (ev) { // alert("hello lnj2"); // } $(document).ready(function () { alert("hello lnj1"); }); $(document).ready(function () { alert("hello lnj2"); }); </script> </head> <body> <img src="https://img.alicdn.com/tfs/TB1P_MofwmTBuNjy1XbXXaMrVXa-190-140.gif" alt=""> </body> </html>
四、jQuery入口函数的其它写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04-jQuery入口函数的其它写法</title> <script src="js/jquery-1.12.4.js"></script> <script> // 1.第一种写法 $(document).ready(function () { // alert("hello lnj"); }); // 2.第二种写法 jQuery(document).ready(function () { // alert("hello lnj"); }); // 3.第三种写法(推荐) $(function () { // alert("hello lnj"); }); // 4.第四种写法 jQuery(function () { alert("hello lnj"); }); </script> </head> <body> </body> </html>
五、jQuery使用$符号的冲突问题
test.js
var $ = 123;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05-jQuery冲突问题</title> <script src="js/jquery-1.12.4.js"></script> <script src="js/test.js"></script> <script> // 1.释放$的使用权 // 注意点: 释放操作必须在编写其它jQuery代码之前编写 // 释放之后就不能再使用$,改为使用jQuery // jQuery原理.noConflict(); // 2.自定义一个访问符号 var nj = jQuery.noConflict(); nj(function () { alert("hello lnj"); }); </script> </head> <body> </body> </html>
六、jQuery核心函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06-jQuery核心函数</title> <script src="js/jquery-1.12.4.js"></script> <script> // $();/jQuery原理();就代表调用jQuery的核心函数 // 1.接收一个函数 $(function () { alert("hello lnj"); // 2.接收一个字符串 // 2.1接收一个字符串选择器 // 返回一个jQuery对象, 对象中保存了找到的DOM元素 var $box1 = $(".box1"); var $box2 = $("#box2"); console.log($box1); console.log($box2); // 2.2接收一个字符串代码片段 // 返回一个jQuery对象, 对象中保存了创建的DOM元素 var $p = $("<p>我是段落</p>"); console.log($p); $box1.append($p); // 3.接收一个DOM元素 // 会被包装成一个jQuery对象返回给我们 var span = document.getElementsByTagName("span")[0]; console.log(span); var $span = $(span); console.log($span); }); </script> </head> <body> <div class="box1"></div> <div id="box2"></div> <span>我是span</span> </body> </html>
七、jQuery对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-jQuery对象</title> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { /* * 1.什么是jQuery对象 * jQuery对象是一个伪数组 * * 2.什么是伪数组? * 有0到length-1的属性, 并且有length属性 */ var $div = $("div"); console.log($div); var arr = [1, 3, 5]; console.log(arr); }); </script> </head> <body> <div>div1</div> <div>div2</div> <div>div3</div> </body> </html>
八、静态方法和实例方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08-静态方法和实例方法</title> <script> // 1.定义一个类 function AClass() { } // 2.给这个类添加一个静态方法 // 直接添加给类的就是静态方法 AClass.staticMethod = function () { alert("staticMethod"); } // 静态方法通过类名调用 AClass.staticMethod(); // 3.给这个类添加一个实例方法 AClass.prototype.instanceMethod = function () { alert("instanceMethod"); } // 实例方法通过类的实例调用 // 创建一个实例(创建一个对象) var a = new AClass(); // 通过实例调用实例方法 a.instanceMethod(); </script> </head> <body> </body> </html>
九、静态方法each方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>09-静态方法each方法</title> <script src="js/jquery-1.12.4.js"></script> <script> var arr = [1, 3, 5, 7, 9]; var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}; /* 第一个参数: 遍历到的元素 第二个参数: 当前遍历到的索引 注意点: 原生的forEach方法只能遍历数组, 不能遍历伪数组 */ // arr.forEach(function (value, index) { // console.log(index, value); // }); // obj.forEach(function (value, index) { // console.log(index, value); // }); // 1.利用jQuery的each静态方法遍历数组 /* 第一个参数: 当前遍历到的索引 第二个参数: 遍历到的元素 注意点: jQuery的each方法是可以遍历伪数组的 */ // $.each(arr, function (index, value) { // console.log(index, value); // }); $.each(obj, function (index, value) { console.log(index, value); }); </script> </head> <body> </body> </html>
十、静态方法map方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10-静态方法map方法</title> <script src="js/jquery-1.12.4.js"></script> <script> var arr = [1, 3, 5, 7, 9]; var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}; // 1.利用原生JS的map方法遍历 /* 第一个参数: 当前遍历到的元素 第二个参数: 当前遍历到的索引 第三个参数: 当前被遍历的数组 注意点: 和原生的forEach一样,不能遍历的伪数组 */ // arr.map(function (value, index, array) { // console.log(index, value, array); // }); // obj.map(function (value, index, array) { // console.log(index, value, array); // }); /* 第一个参数: 要遍历的数组 第二个参数: 每遍历一个元素之后执行的回调函数 回调函数的参数: 第一个参数: 遍历到的元素 第二个参数: 遍历到的索引 注意点: 和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组 */ // $.map(arr, function (value, index) { // console.log(index, value); // }); var res = $.map(obj, function (value, index) { console.log(index, value); return value + index; }); var res2 = $.each(obj, function (index, value) { console.log(index, value); return value + index; }); /* jQuery中的each静态方法和map静态方法的区别: each静态方法默认的返回值就是, 遍历谁就返回谁 map静态方法默认的返回值是一个空数组 each静态方法不支持在回调函数中对遍历的数组进行处理 map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回 */ console.log(res); console.log(res2); </script> </head> <body> </body> </html>
十一、jQuery中其它静态方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>11-jQuery中的其它静态方法</title> <script src="js/jquery-1.12.4.js"></script> <script> /* $.trim(); 作用: 去除字符串两端的空格 参数: 需要去除空格的字符串 返回值: 去除空格之后的字符串 */ /* var str = " lnj "; var res = $.trim(str); console.log("---"+str+"---"); console.log("---"+res+"---"); */ // 真数组 var arr = [1, 3, 5, 7, 9]; // 伪数组 var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}; // 对象 var obj = {"name":"lnj", age:"33"}; // 函数 var fn = function(){}; // window对象 var w = window; /* $.isWindow(); 作用: 判断传入的对象是否是window对象 返回值: true/false */ /* var res = $.isWindow(w); console.log(res); */ /* $.isArray(); 作用: 判断传入的对象是否是真数组 返回值: true/false */ /* var res = $.isArray(w); console.log(res); */ /* $.isArray(); 作用: 判断传入的对象是否是一个函数 返回值: true/false 注意点: jQuery框架本质上是一个函数 (function( window, undefined ) { })( window ); */ var res = $.isFunction(jQuery); console.log(res); </script> </head> <body> </body> </html>
十二、静态方法holdReady方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12-静态方法holdReady方法</title> <script src="js/jquery-1.12.4.js"></script> <script> // $.holdReady(true); 作用: 暂停ready执行 $.holdReady(true); $(document).ready(function () { alert("ready"); }); </script> </head> <body> <button>回复ready事件</button> <script> var btn = document.getElementsByTagName("button")[0]; btn.onclick = function () { $.holdReady(false); } </script> </body> </html>