jquery强大的选择器---来源《锋利的jquery》

一、基本选择器

1、#id  根据给定的id匹配一个元素

2、.class  根据给定的类名匹配元素

3、element  根据给定的元素名匹配元素

4、*  匹配所有元素

5、selectore1,.selectore2,#selectore3  将每一个选择器匹配到的元素合并后一起返回

二、层次选择器

6、ancestor descendant  选取ancestor元素里的所有descendant(后代)元素

7、parent>child  选取parent元素下的child(子)元素,与ancestor descendant 有区别,ancestor descendant选择的是后代元素

8、prev+next  选取紧接在prev元素后的next元素

9、prev~siblings  选取prev元素之后的所有siblings元素

三、基本过滤选择器

10、:first  选取第一个元素

11、:last  选取最后一个元素

12、:not(selector)  去除所有与给定选择器匹配的元素

13、:even  选取索引为偶数的所有元素 索引从0开始

14、:odd  选取索引为奇数的所有元素 索引从0开始

15、:eq(index)  选取索引为index的元素(index从0开始)

16、:gt(index)  选取索引大于index的元素(index从0开始)

17、:lt(index)  选取索引小于index的元素(index从0开始)

18、:header  选取所有的标题元素,例如h1,h2,h3等

19、:animated  选取当前正在执行动画的元素

四、内容过滤选择器

20、:contains(text)  选取含有文本内容为"text"的元素

21、:empty  选取不包含子元素或者文本的空元素

22、:has(selector)  选取含有选择器所匹配的元素的元素

23、:parent  选取含有子元素或者文本的元素

五、可见性过滤选择器

24、:hidden  选取所有不可见的元素

25、:visible  选取所有可见的元素

六、属性过滤选择器

26、[attribute]  选取拥有此属性的选择器

27、[attribute=value]  选取属性的值为value的元素

28、[attribute!=value]  选取属性的值不为value的元素

29、[attribute^=value]  选取属性的值以value开始的元素

30、[attribute$=value]  选取属性的值以value结束的元素

31、[attribute*=value]  选取属性的值含有value的元素

32、[selector1][selector2][selectorN]  用属性选择器合并成一个复合属性选择器,满足多个条件,每选择一次,缩小一次范围

七、子元素过滤选择器

33、:nth-child(index/even/odd/equation)  选取每个父元素下的第index个子元素或者奇偶元素(注意:index从1算起)

34、:first-child  选取每个父元素的第一个子元素

35、:last-child  选取每个父元素的最后一个子元素

36、:only-child  如果某个元素是它父元素中唯一的子元素,那么将会被匹配,如果父元素中含有其他元素,将不会被匹配

八、表单对象属性过滤选择器

37、:enabled  选取所有可用元素

38、disabled  选取所有不可用元素

39、:checked  选取所有被选中的元素(单选框,复选框)

40、:selected  选取所有的被选中的选项元素(下拉列表)

九、表单选择器

41、:input  选取所有的<input>、<textarea>、<select>和<button>元素

42、:text  选取所有的单行文本框

43、:password  选取所有的密码框

44、:radio  选取所有的单选框

45、:checkbox  选取所有的多选框

46、:submit  选取所有的提交按钮

47、:image  选取所有的图像按钮

48、:reset  选取所有的重置按钮

49、:button  选取所有的按钮

50、:file  选取所有的上传域

时间: 2024-12-29 04:19:14

jquery强大的选择器---来源《锋利的jquery》的相关文章

jquery强大的选择器和javascript 的对比。

案列demo:http://codepen.io/tianzi77/pen/yNJVaM 首先写结构: <body> <ul id="nav"> <li class="current">tianzi</li> <li>tianzi</li> <li>tianzi</li> </ul> <div id="content"> <

《锋利的jQuery》插件的使用和写法

jQuery插件的种类 1.封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式“插”在内核上的,例如parent()方法,appendTo()方法等. 2.封装全局函数 可以将独立的函数加到jQuery命名空间下.如常用的jQuery.ajax()方法.去首尾空格的jQuery.trim()方法,都是jQuery内

jQuery插件开发精品教程(让你的jQuery更上一个台阶)

刘哇勇的部落格要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发

Jquery:强大的选择器&lt;一&gt;

今天回家之后,学习的是Jquery的选择器.选择器作为Jquery的优势之一,确实让我感觉到了它的强大.Jquery选择器分为基本选择器.层次选择器.过滤选择器和表单选择器,下面我一一介绍这四种选择器. 一.基本选择器 看了书中关于选择器的介绍,我才知道,自己平日里用的大部分都是基本选择器.基本选择器中包含id选择器.class选择器.标签选择器.复合选择器和"*"选择器. $("#id") 选取所有属性id等于"id"的元素. $("

锋利的jQuery读书笔记---选择器

前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所以笔记和代码也就写到一起了.下面是选择器的记录: <!DOCTYPE html> <html> <head lang="zh"> <meta charset="UTF-8"> <script type="t

jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: 隐式迭代: 行为层与结构层的分离: 丰富的插件支持: 完善的文档: 开源. jQuery对象就是通过jQuery包装DOM对象后产生的对象. 在jQuery对象中无法使用DOM对象的任何方法.同样,DOM对象也不能使用jQuery里的方法. jQuery对象和DOM对象的相互转换        如果

锋利的jQuery学习笔记之jQuery选择器

在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 td{font-size:10px;} a{tetx-decoration:none;} ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;} 类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{backgro

【学习笔记】锋利的jQuery(一)选择器

一.要点阐述 1,jQuery创建于2006年1月的一个开源项目,强调理念是“write less,do more”,压缩后大小30KB左右.. 2,jQuery里的方法都被设计程自动操作对象集合,而非单独的对象. 3,jq对象是jq对DOM对象进行包装后产生的对象,是一个类似数组的对象,可用[0]或get(0)方法转成DOM对象. 二.jQuery和其他js库的冲突解决 //jq库在其他库之前导入时需调用noConflict() 方式1(jQuery代替$): jQuery.noConflic

锋利的jQuery读书笔记 第6章、第9章 第10章

第六章 Ajax 全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形成的结合体.使用 Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户体验. 一.Ajax的优势和不足 (1)优势主要以下几点: 1.不需要插件支持(一般浏览器且默认开启 JavaScript 即可) 2.用户体验极佳(不刷新页面即可获取可更新的数据) 3.