jQuery筛选器及练习
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")
2.找到本页面中所有的
i1
的标签$("#i1")
2.找到本页面中所有的
h2
标签 $("h2")
3.找到本页面中所有的
3.找到本页面中所有的
input
标签 $("input")
4.找到本页面所有样式类中有
4.找到本页面所有样式类中有
c1
的标签 $(".c1")
5.找到本页面所有样式类中有
5.找到本页面所有样式类中有
btn-default
的标签 $(".btn-default")
6.找到本页面所有样式类中有
6.找到本页面所有样式类中有
c1
的标签和所有h2
标签 $(".c1,h2")
7.找到本页面所有样式类中有
7.找到本页面所有样式类中有
c1
的标签和id是p3
的标签 $(".c1,#p3")
8.找到本页面所有样式类中有
8.找到本页面所有样式类中有
c1
的标签和所有样式类中有btn
的标签 $(".c1,btn")
9.找到本页面中
9.找到本页面中
form
标签中的所有input
标签 $("form input")
10.找到本页面中
10.找到本页面中
label
标签下的input
标签子标签 $("label>input")
11.找到本页面中紧挨着
11.找到本页面中紧挨着
label
标签的input
标签 $("label+input")
12.找到本页面中id为
12.找到本页面中id为
p2
的标签后面所有和它同级的li
标签 $("#p2~li")
13.找到id值为
13.找到id值为
f1
的标签下面的第一个input标签 $("#f1 input:first")
14.找到id值为
14.找到id值为
my-checkbox
的标签下面最后一个input标签 $("#my-checkbox input:last")
15找到id值为
15找到id值为
my-checkbox
的标签下面没有被选中的那个input标签 $("#my-checkbox input:not(':checked')")
16.找到所有含有
$("label:has(input)")
16.找到所有含有
input
标签的label
标签$("label:has(input)")