一、简述:
1、jQuery内部封装了原生JS的代码,通过jQuery的语法可以用更少的代码实现功能,另外jQuery还是有原生JS没有的额外功能。
2、像jQuery这种前端框架也叫“类库”,类似于python中的模块,所以使用前也必须先导入,但是jQuery本身只有几十kb,所以导入jQuery所花的时间微乎其微,可以通过本地文件和网络url两种方式导入。
3、jQuery可以兼容目前绝大度数浏览器。
4、write less do more:是jQuery的宗旨,用更少的代码完成更多功能。
5、jQuery的基本语法:jQuery(选择器).操作/属性(),为了简化书写,可以用“$”代替“jQuery”,即,jQuery() ===> $()。
二、查找标签:通过jQuery语法查找到的标签是jQuery对象。
1、基本选择器:
① $('#d1'):id选择器,id = d1的标签。
② $('.c1'):class选择器,继承了class = c1的标签。
③$('div'):标签选择器,所有div标签。
④$('*'):通用选择器,所有标签。
2、jQuery对象与标签对象的转换:
①$('#d1')[0] ===> jQuery对象转标签对象。
②$(document.getElementById('d1')) ===> 标签对象转jQuery对象。
3、组合/并列/关系选择器:
①$('div.c1'):继承了class = c1的div标签。
②$('span, #d1, div.c1'):并列选择器。
③$('#d1 p'):后代选择器,id = d1的标签的嵌套内的所有p标签。
④$('#d1>span'):儿子选择器,id = d1的标签的首级嵌套的所有span标签。
⑤$('#d1+p'):毗邻选择器,id = d1的标签的同级紧靠的下个p标签。
⑥$('#d1~span'):弟弟选择器,id = d1的标签的同级所有下方span标签。
4、基本筛选器:$(':条件'),冒号左侧是待选标签,右边是筛选条件。
①$('#d1>span:first'):第一个。
②$('#d1>span:last'):最后一个。
③$('#d1>span:eq(2)'):2号索引。
④$('#d1>span:even'):偶数号索引,0开始。
⑤$('#d1>span:odd'):奇数号索引,1开始。、
⑥$('#d1>span:gt(2)'):大于2号索引,即3号索引开始到最后。
⑦$('#d1>span:lt(5)'):从开头开始,到小于5号索引,即4号索引为止。
⑧$('#d1>span:not("#d2")'):除了id = d2的标签。
⑨$('div:has("p")'):再从中选出嵌套内有p标签的div标签。
5、属性选择器:
①$('[title]'):有“title”属性的所有标签。
②$('[title = "xxx"]'):有“title”属性,且属性值为"xxx"的所有标签。
③$('div[title = "xxx"]'):有“title”属性,且属性值为"xxx"的所有div标签
6、表单筛选器:
①表单中的标签,用属性选择器匹配筛选条件时,可以不写属性名,如,$('input[type="text"]') ===> $(':text')。
②特别说明:用“checked”属性去匹配,会同时把满足“selected”的标签也拿到,而反之不兼容,若只想拿"checked"的标签,可以写完整---$('input:checked')。
7、筛选器方法
①$('#d1').next():同级紧靠的下一个。
②$('#d1').nextAll():同级下方所有。
③$('#d1').nextUntil('#d2'):同级向下一直收入,直到d2之前。
④$('#d1').prev():同级紧靠的上一个。
⑤$('#d1').prevAll():同级上方所有。
⑥$('#d1').prevUntil('#d2'):同级向上一直收入,直到d2之前。
⑦$('#d1').parent():父标签。
⑧$('#d1').parent().parent():父标签的父标签。
⑨$('#d1').parents():一脉上的所有父标签。
⑩$('#d1').parentsUntil('#d2'):一脉上向上收入父标签,直到d2之前。
①①:$('#d1').children():所有儿子标签。
①②:$('#d1').siblings():所有同级标签,无论上下。
①③:$('#d1').find('p'):嵌套内的所有p标签,效果等于$('#d1 p'),类似的还有.first()和.last()和.not()等。