jQuery 选择器 个人总结

原创 2013年12月01日 22:20:35

jQuery 选择器


一、CSS选择器

1、元素选择器

1.   *   :所有元素选择器(某层次下所有标签)

2.   .  :类

3.   #  :id选择器

4.     :  并列选择器(对分隔的元素均进行选取)

5.   空格:  后代选择器(可后代的后代,多层选择)

6.   >  :子元素选择器.它与后代选择器不同之处是,子元素选择器只对子元素生效,而不会影响其它后代元素.(只能是一层)

7.   +   :相邻兄弟元素(只能选取一个)

2、CSS属性选择器[]

[]是属性的标志。只顾其名不顾其值。

1. 简易属性匹配

基本语法:element[attr]

例:h1[class]{color:Red;}

<h1 class=”class1”>第一个</h1>

<h1 class=”class2”>第二个</h1>

<h1 class=”class3”>第三个</h1>

这些h1标签都会受影响。

2.     精确值匹配 “=”

具体属性值的匹配。例如:input[type=”radio”][name=”sex”]

3.     部分属性值匹配 “~=”

 

例如:div[class~=”warning”]{color:Red;} 可以让div字体变红色

<div class=”bodyDiv urgent  warning ”>错误提示,红色显示!</div>

二、JQuery选择器

jquery选择器是建立在CSS选择器的基础上的。

1、基本选择器

1.   *   :所有元素选择器(某层次下所有标签)

2.   .  : 类

3.   #  : id选择器

4.     :  并列选择器(对分隔的元素均进行选取)

5.   空格:  后代选择器(可后代的后代,多层选择)

6.   >   :  子元素选择器.它与后代选择器不同之处是,子元素选择器   只对子元素生效,而不会影响其它后代元素.(只能是一层)

7.   +   :相邻兄弟元素(只能选取一个)

 

 

2、滤镜选择器

1)   :first  :第一个

2)   :last   :最后一个

3)   :even  :偶数

4)   :odd   :奇数

5)   :hidden :隐藏的

6)   :visible :显示的

7)   :eq(index) :序数等于index的元素

8)   :gt(index) :序数大于index的元素

9)   :lt(index)  :序数小于index的元素

10) :not  :不满足选择条件的元素

对表单操作的

11) :enabled:可用的

12) :disabled:禁用的

13) :checked:选中的

14) :selected:选择的

层次选择器 .

15) .next()  下一个同级元素

16) .nextAll() 下面所有的同级元素

17) .prev()  上一个

18) .prevAll()  上面所有同级元素

19) .siblings() 所有同级元素(同胞、相邻元素)

20) .parent() 父级元素

21) .children  子级元素

22) .find()  查寻所有后代元素

23)this.prevAll().children(":first");   //同级上面第一个元素

24)return this.prevAll().children(":last"); //同级上面最后一个元素


 



选择器 实例 选取
* $("*") 所有元素
#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> - <h6>
: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 元素


jQuery 选择器总结

一、jQuery选择器优势 1、简洁的写法: $(“选择器”); 2、支持css1 到 css3 所有选择器; 3、完善的处理机制,无需判断引用的元素是否存在。二、jQ...
  • Dylan_l
  • Dylan_l
  • 2015年12月17日 10:18
  • 158

JQuery 选择器总结

主要分为一下几类 一、基本选择器 (1)#id $("#id") 返回单个元素 (2).class $(".demo") 返回集合元素 (3)element $("p") 返回集合...

jquery 选择器的强大总结

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个i...
  • shimiso
  • shimiso
  • 2012年12月27日 14:47
  • 5872

jquery 选择器的强大总结

原文转载自http://blog.csdn.net/shimiso/article/details/8443594 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 ...

Jquery 选择器总结

/*基本选择器*/        /*******************************/        //ID匹配元素  选择ID为divOne的元素        $("#divOne...

jQuery 选择器大全总结

本文转载于http://www.html5wd.com/archives/2232.html,谢谢
  • bdbql
  • bdbql
  • 2017年02月20日 13:26
  • 267

jquery 选择器总结

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法   $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档...

Jquery 选择器整理

  • 2015年12月23日 11:27
  • 1.23MB
  • 下载

jquery 选择器 描述

  • 2012年03月09日 11:47
  • 2KB
  • 下载

jquery 选择器(name,属性,元素)大全

基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色。(id选择器返单个元素) $(document).ready(function () {    ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery 选择器 个人总结
举报原因:
原因补充:

(最多只允许输入30个字)