jQuery第二章选择器

jQuery第二章 选择器

jQuery选择器：

作用: 用来选择标签的

 

jQuery中的选择器借鉴了CSS中选择器的思想，CSS中选择器选择出标签以后只能给标签加样式，而jQuery中的选择器选择出标签(或元素)后可以做任意操作。

 

一、基础选择器----- 五个

id选择器 #id       

根据给定的id匹配一个元素        返回单个元素

 

$("#myDiv")选取id为myDiv的元素

 

演示代码:

 

var $obj = $("#myDiv");

$obj.css("background-color","burlywood");  

 

$()函数会消除使用for循环访问一组元素的需求，因为放到圆括号中的任何元素都将自动执行循环遍历，并且会被保存到一个jQuery对象中。

 不需要遍历即可改变

标签选择器element

返回集合元素

$("p")选取所有的<p>元素

类选择器 .class

根据给定的类名匹配元素  集合元素

 

$(".test")选取所有class为test的元素

通配符选择器  *  

匹配所有元素 集合元素

$("*")选取所有的元素

组合选择器  .select1,select2,….selectN   

将每一个选择器匹配       集合元素

$("div,span,p.myClass")选取所有<div>、<span>和拥有class为myClass的<p>标签的一组元素

 

二、

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

 

二、层次选择器----- 4个

1.子级(子代选择器和后代选择器)

子代选择器: 儿子结点

$("parent>child") 选取parent元素下的child(子代元素)  返回集合元素

$("div>span")     选取div下的儿子结点span

 

后代选择器: 儿子和孙子结点

$("div span")    选取div里的所有的span元素

2.同级(下一个和下面所有、上一个和上面所有同级兄弟)

$('prev+next') 选取紧接在prev元素后的next元素  返回集合元素 +

$('.one+div')    选取class属性为one的下一个<div>元素

 

与$(".one").next("div")等价

$('prev~siblings') 选取prev元素之后的所有siblings元素   返回集合元素

$('#two~div')选取id值为two的后面的所有<div>兄弟元素,

与$("#two").nextAll("div")等价

$("#prev").siblings("div") 选取和id值为prev的元素同级的div元素  

上一个 prev()   上面所有  prevAll();  

三过滤选择器-----6类-----用时查帮助文档

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，该选择器都已":"开头;按照不同的过滤规则

 

过滤选择器可以分为：

1基本过滤 10个

2.内容过滤 4个

3.可见性过滤 2个

4.属性过滤   7个

5.子元素过滤   4个

6.表单对象属性过滤 4个

选择器选择原则：

选择什么样的选择器要根据需求来定；

如果针对文档内容，则使用内容选择器；

如果是选择父子（祖先，后代）元素则使用层次选择器；

如果是根据id/class/tagname则使用基本选择器；

如果是选择表单中的元素，则使用表单选择器，表单对象属性选择器；

根据可见性选择元素，则使用可见性选择器；

如果是选择某个元素中包含某个属性（属性值），则使用属性选择器；

如果考虑对选中的元素，要进行过滤，则使用过滤选选择器，（有三种方法）

$("div:contains('di')"); //内容

$("div[type]"); //属性

$("div .one");  //选中div中含class为.one的div元素；

 

部分常用选择器

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id=lastname 的第一个元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class=intro 且 class=demo 的元素
:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素
:header	$(":header")	所有标题元素 <h1><h2>...
:animated		所有动画元素
:contains(text)	$(":contains('W3School')")	包含文本的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格
s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含 ".jpg" 的元素
:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素