1.3入口函数
一般代码写在页面底部，等元素加载完，才能执行 jQuery 代码，或者可以使用下方入口函数解决
方式一 :
~~~html <script src="./jquery-3.6.0.js"></script> <script> $(document).ready(function () { // }); </script> ~~~
等待页面 DOM 加载完毕后执行，相当于原生 js 中 DOMContentLoaded
方式二 ：
在这里插入代码片~~~html <script src="./jquery-3.6.0.js"></script> <script> $(function(){ // }) </script> ~~~
方式三 ：
~~~html <script src="./jquery-3.6.0.js"></script> <script> $().ready(function() { // }); </script> ~~~
1.4 入口函数与window.onload的对比
- JavaScript 的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
- jQuery 的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
三 、选择器
jQuery 选择器是 jQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素
1.1 基本选择器
| 名称 | 用法 | 描述 |
| ID选择器 | $(‘#id’); | 获取指定ID的元素 |
| 类选择器 | $(‘.class’); | 获取同一类class的元素 |
| 标签选择器 | $(‘div’); | 获取同一类标签的所有元素 |
| 并集选择器 | $(‘div,p,li’); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $(‘div.redClass’); | 获取class为redClass的div元素 |
| 属性选择器 | $(‘input[name=username]’) | 获取 input 标签中 name 属性为 username 的元素 |
注意：jQuery选择器返回的是jQuery对象。
案例：使用基本选择器，改变元素的背景颜色和字体颜色（div、p、span）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 导入jquery文件 --> <script src="../JQuery_01/js/jquery-3.6.4.min.js"></script> <script> $(function(){ //设置按钮点击事件 $("button").click(function(){ //1.获取div修改css(直接获取元素) $("div").css("background","skyblue") //2.获取id $("#mydiv").css() }) }) </script> </head> <body> <div id="mydiv" style="background-color: aquamarine; height: 200px; width: 200px;"></div> <button>点我改变颜色</button> </body> </html>
1.2 层次选择器
| 名称 | 用法 | 描述 |
| 子代选择器 | $(‘ul > li’); | 使用 > 号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(‘ul li’); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
1.3 过滤选择器
这类选择器都带冒号:
| 名称 | 用法 | 描述 |
| :eq（index） | $(‘li:eq(2)’).css(‘color’, ‘red’); | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $(‘li:odd’).css(‘color’, ‘red’); | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(‘li:even’).css(‘color’, ‘red’); | 获取到的li元素中，选择索引号为偶数的元素 |
1.4 jQuery 筛选方法
- 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
| 名称 | 用法 | 描述 |
| children(selector) | $(‘ul’).children(‘li’) | 相当于$(‘ul>li’)，子类选择器 |
| find(selector) | $(‘ul’).find(‘li’); | 相当于$(‘ul li’),后代选择器 |
| siblings(selector) | $(‘#first’).siblings(‘li’); | 查找兄弟节点，不包括自己本身。 |
| parent() | $(‘#first’).parent(); | 查找父亲 |
| parents() | $(‘li’).parents(); | 查找祖先元素 |
| eq(index) | $(‘li’).eq(2); | 相当于$(‘li:eq(2)’),index从0开始 |
| next() | $(‘li’).next() | 找下一个兄弟 |
| prev() | $(‘li’).prev() | 找上一次兄弟 |
| closest | $(‘li’).closest(‘ul’) | 找最近一个祖先元素 |
1.5 this 和 当前索引
在对象的事件中，( t h i s ) 表示当前操作的 j Q u e r y 对象， (this) 表示当前操作的 jQuery 对象，(this)表示当前操作的jQuery对象，(this).index() 表示当前元素的索引号
$("li").click(function () { console.log($(this).index()); } • 1 • 2 • 3
JQuery支持链式编程哦
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 导入jquery文件 --> <script src="../JQuery_01/js/jquery-3.6.4.min.js"></script> <script> $(function(){ //设置按钮点击事件 //1.获取div修改css(直接获取元素) $("div>p").css("color","blue") }) </script> </head> <body> <div id="mydiv" style="background-color: aquamarine; height: 200px; width: 200px;"> <p> 姬霓太美 </p> </div> </body> </html>
四、JS与JQuery转换
概述：
- $类似java中的类
- $() 类似java中的类的构造方法
JS与JQuery转换
- JS转换JQuery
$(js对象) 将js对象放入 $( )中即可 - JQuery转换js
- 可以通过下标转换成js对象
var $oDiv = $(“#oDiv”);
console.log( $oDiv[0].innerHTML)
console.log( $oDiv.innerHTML);
- 可以通过get方法+下标获取
console.log($oDiv.get(0).innerHTML);
五、$工具方法与JQuery属性
1. $工具方法
| 方法 | 作用 |
| $.each() | 遍历数组、对象、对象数组中的数据 |
| $.trim() | 去除字符串两边的空格 |
| $.type() | 得到数据的类型 |
| $.isArray( obj ) | 判断是否是数组 |
| $.isFuntion( obj ) | 判断是否是函数 |
| $.parseJSon( obj ) | 解析json字符串转换为js对象/数组 |
//each方法 遍历元素的方法 //使用$.each(obj,function(){})方法的形式来遍历输出 var arr = ["小黑","吉尼","钛镁"]; i 为下标 n 为元素值 $.each(arr,function(i,n){ console.log(i,n); // 0 '小黑' // 1 '吉尼' // 2 '钛镁' }) //遍历对象案例 var stu = {"name": "坤坤","sex": "男","age": 26}; // a代表属性名称 b代表属性值 $.each(stu, function(a, b) { console.log(a, b); // name 坤坤 // sex 男 // age 26 }); //遍历对象数组案例 var stus = [{"name": "坤坤","sex": "男","age": 26}, {"name": "小鸡仔","sex": "公","age": 3}]; $.each(stus,function(index,stu){ console.log(index,stu); //index 为下标 stu为对象(object) $.each(stu,function(name,value){ //name 属性名称 value属性值 }) }) //2.2去除字符串两边的空格trim var str = "hello 靓仔 "; console.log($.trim(str).length); // 返回 7 //2.3得到数据的类型 type console.log($.type(str)); //string //2.4判断是否是数组 console.log($.isArray(arr)) //true //2.5判断是否是函数 console.log($.isFunction())
2. JQuery属性使用
| 方法 | 作用 |
| $().attr() | 获取某个标签属性的值 |
| $().removeAttr() | 删除某个标签属性 |
| $.addClass() | 给某个标签添加class属性值 |
| $.removeClass() | 删除某个标签class属性值 |
| $.prop() | 和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选 |
| $().html() | 获取某一个标签体的内容（包括子标签） |
| $().val() | 主要用户获取/设置输入框的值 |
// 1.attr()：获取某个标签属性的值，或设置某个标签属性的值 $("#btn").click(function(){ $("img").attr("src","img/瞳瞳.jpg"); }) // 2.removeAttr()：删除某个标签属性 $("img").removeAttr("alt"); // 3.addClass()：给某个标签添加class属性值 //addClass 不会覆盖 但是attr会覆盖-重新赋值 $("img").addClass("abc"); $("img").attr("class","123"); // 4.removeClass():删除某个标签class属性值 $("img").removeClass("abc"); // 5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选 $("img").prop("src","img/瞳瞳.jpg"); $("input:checkbox").prop("checked",true); $("input:checkbox").attr("checked",true); // 6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签） console.log($("#tab").html()) //打印的是改标签的和子标签的所有内容包括标签 // 7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签) console.log($("#tab").text()) // 8.val()：主要用户获取/设置输入框的值 $("#btn").click(function(){ console.log($("input").val()); })
六、JQuery筛选
1. 过滤
| 方法 | 功能 |
| first() | 获取匹配元素的第一个元素 |
| last() | 获取匹配的最后一个元素 |
| qe(N) | 获取匹配的第N或-N哥元素 |
| filter(selector) | 筛选出指定表达式匹配的元素集合 |
| has(selector) | 筛选出包含特定特点的元素的集合 |
| not(selector) | 筛选出不含特定特点的元素集合 |
//1.从元素数组中找到第一个元素 first() console.log($("li").first()); //2.从元素数组中找到第一个元素 last() console.log($("li").last()); //3.从元素数组中找到指定的某一个元素 eq() console.log($("li").eq(2).text()); //4.从元素数组中找到属性titlt为a的元素 //filter 筛选出指定表达式匹配的元素集合 console.log($("li").filter("[title=a]")); //5.筛选出包含特定特点的元素的集合 has() console.log($("li").has("p").text()) //6.筛选出不包含特定特点的元素的集合 not() console.log($("ul>li").not("p").text())
