jQuery筛选器及练习 jQuery初识
- 2019 年 10 月 4 日
- 笔记
jQuery初识
jQuery是什么？
jQuery是一个兼容多浏览器的JavaScript库。
jQuery能极大地简化JavaScript编程，它的宗旨就是："Write less,do more."
jQuery包含以下内容：
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM遍历和修改
- AJAX
下载链接：jQuery官网
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$(“#i1”).html()的意思是：获取id值为i1的元素的HTML代码，其中html()是jQuery里的方法。
相当于JavaScript中的document.getElementById("i1").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery也不能使用jQuery里的方法。
jQuery与JavaScript在申明变量的区别：
1 var $variable = jQuery对象 2 var variable = DOM对象 3 $variabl[0] //jQuery对象转换成DOM对象
拿上面的例子举例，jQuery对象和DOM对象的使用：
1 $("#i1").html(); //jQuery对象可以使用jQuery的方法 2 $("#i1")[0].innerHTML; //DOM对象使用DOM的方法
jQuery基础语法
$(selector).action()
查找标签>选择器
id选择器：
$("#id");
class选择器：
$(".className");
标签选择器：
$("tagName");
组合选择器：
$("#id,.className,tagName")
层级选择器：
$("#id a"); //查找id下方所有的a标签，中间的空格表示后代。 $("#id > a"); //查找第一个a标签
基本选择器：
:first //第一个 :eq(index) //索引等于index的那个元素 :last //最后一个
属性选择器：
<input type="text"> <input type="password"> <input type="checkbox"> $("input[type = 'checkbox']"); //取到checkbox类型的input标签
筛选器
下一个元素：
1 $("#id").next(); //筛选出下一个元素 2 $("#id").nextAll(); //筛选出下面所有的元素 3 $("#id").nextUntil("#i2"); //筛选出下面所有的元素，找到ID为i2终止
上一个元素：
$("#id").prev(); //筛选出上一个元素 $("#id").prevAll(); //筛选出上面所有的元素 $("#id").prevUntil("#i2"); //筛选出下面所有的元素，找到id为i2终止
父亲元素：
1 $("#id").parent(); //parent() 方法返回被选元素的直接父元素。 2 $("#id").parentsAll(); //parentsAll()返回被选元素的所有祖先元素 3 $("#id").parentsUntil(); //parentsUntil() 方法返回介于 selector 与 stop 之间的所有祖先元素。
子元素和同级元素：
$("#id").children(); //所有子元素 $("#id").siblings(); //所有同级元素
查找元素:
$("id").find()
操作>属性
用于自定义属性：
attr() removeAttr()
用于checkbox和radio
prop() removeProp()
注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr(“checked”, “checked”)。
练习题：
1.找到本页面中id是i1的标签 $("#i1") 2.找到本页面中所有的h2标签
$("h2") 3.找到本页面中所有的input标签
$("input") 4.找到本页面所有样式类中有c1的标签
$(".c1") 5.找到本页面所有样式类中有btn-default的标签
$(".btn-default") 6.找到本页面所有样式类中有c1的标签和所有h2标签
$(".c1,h2") 7.找到本页面所有样式类中有c1的标签和id是p3的标签
$(".c1,#p3") 8.找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签
$(".c1,btn") 9.找到本页面中form标签中的所有input标签
$("form input") 10.找到本页面中label标签下的input标签子标签
$("label>input") 11.找到本页面中紧挨着label标签的input标签
$("label+input") 12.找到本页面中id为p2的标签后面所有和它同级的li标签
$("#p2~li") 13.找到id值为f1的标签下面的第一个input标签
$("#f1 input:first") 14.找到id值为my-checkbox的标签下面最后一个input标签
$("#my-checkbox input:last") 15找到id值为my-checkbox的标签下面没有被选中的那个input标签
$("#my-checkbox input:not(':checked')") 16.找到所有含有input标签的label标签 $("label:has(input)")
