经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery(二)、核心
来源：cnblogs　　作者：(普通人)　　时间：2019/4/11 9:03:00　　对本文有异议

1、#id

根据给定的ID匹配一个元素，如果选择器中包含特殊字符，可以用双斜杆(\\) 转义

如：

查找ID 为 myDiv[bar] 的元素

HTML 代码:

  1. <div id="notMe">
  2.     <p>id="notMe"</p>
  3. </div>
  4. <div id="myDiv[bar]">
  5.     id="myDiv[bar]"
  6. </div>

jQuery 代码:

  1. $("#myDiv\\[bar\\]");

结果:

  1. [ <div id="myDiv[bar]">id="myDiv[bar]"</div> ]

2、element

根据给定元素名匹配所有元素

如：

查找一个 DIV 元素。

HTML 代码:

  1. <div>DIV1</div>
  2. <div>DIV2</div>
  3. <span>SPAN</span>

jQuery 代码:

  1. $("div");

结果:

  1. [ <div>DIV1</div>, <div>DIV2</div> ]

3、 .class

根据类名进行匹配元素，一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。（多个类 jquery代码为：$(".class1.class2.class3"),且顺序可以为乱序 ）

如：

查找所有类是 "myClass" 的元素.

HTML 代码:

  1. <div class="notMe myClass1">div class="notMe"</div>
  2. <div class="myClass a1 a3">div class="myClass"</div>
  3. <span class="myClass a2 a4">span class="myClass"</span>

jQuery 代码:

  1. $(".myClass");

结果:

  1. [ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

4、*

匹配所有元素，多用于结合上下文来搜索

如：

找到每一个元素

HTML 代码:

  1. <div>DIV</div>
  2. <span>SPAN</span>
  3. <p>P</p>

jQuery 代码:

  1. $("*")

结果:

  1. [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

5、selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回（你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内）

如：

找到匹配任意一个类的元素。

HTML 代码:

  1. <div>div</div>
  2. <p class="myClass">p class="myClass"</p>
  3. <span>span</span>
  4. <p class="notMyClass">p class="notMyClass"</p>

jQuery 代码:

  1. $("div,span,p.myClass")

结果:

  1. [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

6、ancestor descendant

在给定的祖先元素下匹配 所有(包括子元素的子元素) 的后代元素

参数：ancestor 任何有效选择器;descendant 用以匹配元素的选择器，并且它是第一个选择器的后代元素

如：

找到表单中所有的input 元素

HTML 代码:

  1. <form>
  2.   <label>Name:</label>
  3.   <input name="name" />
  4.   <fieldset>
  5.       <label>Newsletter:</label>
  6.       <input name="newsletter" />
  7.  </fieldset>
  8. </form>
  9. <input id="inp1" name="none" />

jQuery 代码:

  1. $("#inp1,form *")

结果:

  1. [ <label>Name:</label>,<input name="name" />, <fieldset>, <label>Newsletter:</label>,<input name="newsletter" />,<input id="inp1" name="none" /> ]

7、parent > child

在给定的父元素下匹配所有的子元素（第一层级子元素，并且自身满足匹配结果，也会返回）

如：

匹配表单中所有当前表单的子元素

HTML 代码:

  1. <form>
  2.   <label>Name:</label>
  3.   <input name="name" />
  4.   <fieldset>
  5.       <label>Newsletter:</label>
  6.       <input name="newsletter" />
  7.  </fieldset>
  8. </form>
  9. <input id="inp1" name="none" />

jQuery 代码:

  1. $("#inp1,form > input")

结果:

  1. [ <input name="name" />,<input id="inp1" name="none" /> ]

8、prev + next

匹配所有紧跟在 prev 之后的 next 元素

参数：prev 任何选择器;next 一个有效选择器并且紧接着第一个选择器

如：

匹配所有跟在lable后面的input和p元素

HTML 代码：

  1. <form>
  2.   <label>Name:</label>
  3.   <input name="name" />
  4.   <fieldset>
  5.       <label>Newsletter:</label>
  6.       <input name="newsletter" />
  7.  </fieldset>
  8.   <label>Newsletter2:</label>
  9.   <p>p:</p>
  10.   <input name="newsletter2" />
  11. </form>
  12. <input id="inp1" name="none" />

jQuery 代码:

  1. $("label + input,p")

结果：

  1. [ <input name="name" />,<input name="newsletter" />,<p>p:</p> ]

9、prev ~ siblings

匹配prev元素之后的所有siblings 元素

参数：prev 任何有效选择器； siblings 一个选择器，并且它作为第一个选择器的同级

如：

找到所有与表单下所有label子集同辈的 input元素、p元素

HTML 代码：

  1. <form>
  2.   <label>Name:</label>
  3.   <input name="name" />
  4.   <fieldset>
  5.       <label>Newsletter:</label>
  6.       <input name="newsletter" />
  7.  </fieldset>
  8.   <label>Newsletter2:</label>
  9.   <p>p:</p>
  10.   <input name="newsletter2" />
  11. </form>
  12. <input id="inp1" name="none" />

jQuery 代码:

  1. $("form label ~ input,p")

结果：

  1. [ <input name="name" />, <input name="newsletter" />, <p>p:</p>,<input name="newsletter2" />,<p>p:</p> ]

10、prev:first

获取prev选择器下的第一个元素

参数：prev 任何有效选择器

如：

获取form下所有label子元素后跟p的第一个p元素

  1. $("form label + p:first")

11、prev:last

获取prev选择器下的最后一个元素

参数：prev 任何有效选择器

如：

获取form下所有label子元素后跟input的最后一个input元素

  1. $("form label + input:last")

12、prev：not（selector1,selector2,selectorN）

去除所有prev选择器下的 给定选择器selector1，selector2,selectorN 的元素(在jquery1.3 之后才支持)

如：

查找所有form元素下所有子元素后跟input元素的input元素，并且input 元素class 属性不包含 .a1.a2

  1. $("form label + input:not(.a2.a1)")

13、prev：even

匹配prev选择器下所有索引值为 偶数 的元素，从 0 开始计数

如：

查找表格的1/3/5...行（即索引值为0,2,4...）

  1. $("table tr:even")

14、prev：odd

匹配prev选择器下所有索引值为 奇数 的元素，从 0 开始计数

如：查找表格的2/4/6...行（即索引值为1,3,5...）

  1. $("table tr:odd")

15、prev:eq(index)

匹配prev选择器下给定index索引值的元素

如：

查找table的第三行

  1. $("table tr:eq(2)")

16、prev：gt(index)

匹配prev选择器下 大于 给定 index 索引值的元素

如：

查找table下第二行以后的行

  1. $("table tr:gt(1)");

17、prev:lt(index)

匹配prev选择器下 小于 给定 index 索引值的元素

如：

查找table下第1行、第二行

  1. $("table tr:lt(2)")

18、prev:header

匹配prev选择器下所有如h1/h2/h3/h4...子类的标题元素

如：

匹配form下所有标题元素

  1. $("form *:header")

19、prev:animated

匹配prev选择器下所有正在执行动画效果的元素

如：

只有对不在执行动画效果的元素执行一个动画特效

  1. $("#run").click(function(){
  2.   $("div:not(:animated)").animate({ left: "+=20" }, 1000);
  3. });

20、:focus

触发每一个匹配元素的focus事件(这将触发所有绑定的focus函数，注意：某些对象不支持focus方法)

如：

当页面加载后将 id 为 'login' 的元素设置焦点:

  1. $("#login:focus");

21、prev:contains(text)

匹配prev选择器下所有 包含 给定文本的元素

如：查找所有包含“A”文本的div元素

  1. $("div:contains('A')")

22、prev:empty

匹配prev选择器下所有 不包含子元素或者文本 的空元素

23、prev:has(selector1,selector2,selectorN)

匹配prev选择器下所有含有selector1||selector||selectorN的元素的元素

如：

匹配所有子元素包含class为 .a1或.a3 的fieldset元素

HTML 代码：

  1.  <fieldset>
  2.       <label>Newsletter:</label>
  3.       <input name="newsletter" class="a1 a2" />
  4.         <h3>h3:</h3>
  5.  </fieldset>
  6.   <fieldset>
  7.       <label class="a3">Newsletter:</label>
  8.  </fieldset>

jQuery 代码：

  1. $("fieldset:has(.a1,.a3)")

结果:

  1. [
  2.     <fieldset>
  3.       <label>Newsletter:</label>
  4.       <input name="newsletter" class="a1 a2" />
  5.         <h3>h3:</h3>
  6.  </fieldset>,
  7.   <fieldset>
  8.       <label class="a3">Newsletter:</label>
  9.  </fieldset>
  10. ]

24、prev:parent

匹配prev选择器下所有包含子元素或文本的元素(存在子元素或文本的元素)

25、prev:hidden

匹配prev选择器下所有不可见元素(display:none)，或者type为hidden的元素(<input type='hidden' />)

26、prev:visible

匹配prev选择器下所有可见元素

27、prev[attribute]

匹配prev选择器下所有包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。

28、prev[attribute = 'value']

匹配prev选择器下所有包含给定的属性是某个特定值的元素

29、prev[attribute! = 'value']

匹配prev选择器下所有不包含给定属性，或者属性不等于特定值的元素 ( 此选择器等价于:not([attr=value]);要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value]) )

30、prev[attribute ^= 'value']

匹配prev选择器下给定的属性是以某些值开始的元素

如：

匹配所有id以mydiv 开头的div

  1. $("div[id ^= 'mydiv']")

31、prev[attribute $= 'value']

匹配prev选择器下给定的属性是以某些值结束的元素

如：

匹配所有id以mydiv 结束的div

  1. $("div[id $= 'mydiv']")

32、prev[attribute *= 'value']

匹配prev选择器下给定属性是包含某些值的元素

如：

匹配所有id包含div 的div

  1. $("div[id *= 'div']")

33、[selector1][selector2][selectorN]

复核属性选择器，需要同时满足多个条件时使用。

如：

  1. $("input[id][name$='man']")

34、prev:nth-child(index)

匹配prev选择器下所有元素的子元素的第N个子或奇偶元素
':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从 1 开始的，而:eq()是从0算起的！可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

参数：index 要匹配元素的序号，从1开始

如：

在每个 ul 查找第 2 个li

HTML 代码:

  1. <ul>
  2.   <li>John</li>
  3.   <li>Karl</li>
  4.   <li>Brandon</li>
  5. </ul>
  6. <ul>
  7.   <li>Glen</li>
  8.   <li>Tane</li>
  9.   <li>Ralph</li>
  10. </ul>

jQuery 代码:

  1. $("ul li:nth-child(2)")

结果:

  1. [ <li>Karl</li>,   <li>Tane</li> ]

35、prev:first-child

匹配prev选择器下的所有元素的第一个子元素

36、prev:last-child

匹配prev选择器下的所有元素的最后一个子元素

37、prev:only-child

匹配prev选择器下中某个只有唯一一个子元素的元素。如果含有其他元素，将不会被匹配

38、prev:input

匹配prev选择器下所有的input、textarea、select和button元素

39、prev:text

匹配prev选择器下所有 单行文本框<input type='text' />

40、prev:password

匹配prev选择器下所有 密码框<input type='password' />

41、prev:radio

匹配prev选择器下所有 单选按钮<input type='radio' />

42、prev:checkbox

匹配prev选择器下所有 复选按钮<input type='checkbox' />

43、prev:submit

匹配prev选择器下所有 提交按钮<input type='submit' />

44、prev:image

匹配prev选择器下所有 图片域<input type='image' />

45、prev:reset

匹配prev选择器下所有 重置按钮<input type='reset' />

46、prev:button

匹配prev选择器下所有 按钮<input type='buttton' />、<button></button>

47、prev:file

匹配prev选择器下所有 文件域<input type='file' />

48、prev:enabled

匹配prev选择器下所有 可用元素(disabled)

49、prev:disabled

匹配prev选择器下所有 不可用元素

50、prev:checked

匹配prev选择器下所有选择的被选中元素(复选框、单选框等，不包括 select中的option)

51、prev:selected

匹配prev选择器下所有选中的option元素

原文链接：http://www.cnblogs.com/www-123456/p/10679559.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号