欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery(二)、核心

程序员文章站 2022-10-23 21:28:26
1、#id 根据给定的ID匹配一个元素,如果选择器中包含特殊字符,可以用双斜杆(\\) 转义 如: 查找ID 为 myDiv[bar] 的元素 HTML 代码: jQuery 代码: 结果: 2、element 根据给定元素名匹配所有元素 如: 查找一个 DIV 元素。 HTML 代码: jQuer ......

1、#id

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

如:

查找id 为 mydiv[bar] 的元素

html 代码:

<div id="notme">
    <p>id="notme"</p>
</div>
<div id="mydiv[bar]">
    id="mydiv[bar]"
</div>

jquery 代码:

$("#mydiv\\[bar\\]");

结果:

[ <div id="mydiv[bar]">id="mydiv[bar]"</div> ]

2、element

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

如:

查找一个 div 元素。

html 代码:

<div>div1</div>
<div>div2</div>
<span>span</span>

jquery 代码:

$("div");

结果:

[ <div>div1</div>, <div>div2</div> ]

3、 .class

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

如:

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

html 代码:

<div class="notme myclass1">div class="notme"</div>
<div class="myclass a1 a3">div class="myclass"</div>
<span class="myclass a2 a4">span class="myclass"</span>

jquery 代码:

$(".myclass");

结果:

[ <div class="myclass">div class="myclass"</div>, <span class="myclass">span class="myclass"</span> ]

4、*

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

如:

找到每一个元素

html 代码:

<div>div</div>
<span>span</span>
<p>p</p>

jquery 代码:

$("*")

结果:

[ <div>div</div>, <span>span</span>, <p>p</p> ]

5、selector1,selector2,selectorn

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

如:

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

html 代码:

<div>div</div>
<p class="myclass">p class="myclass"</p>
<span>span</span>
<p class="notmyclass">p class="notmyclass"</p>

jquery 代码:

$("div,span,p.myclass")

结果:

[ <div>div</div>, <p class="myclass">p class="myclass"</p>, <span>span</span> ]

6、ancestor descendant

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

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

如:

找到表单中所有的input 元素

html 代码:

<form>
  <label>name:</label>
  <input name="name" />
  <fieldset>
      <label>newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input id="inp1" name="none" />

jquery 代码:

$("#inp1,form *")

结果:

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

7、parent > child

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

如:

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

html 代码:

<form>
  <label>name:</label>
  <input name="name" />
  <fieldset>
      <label>newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input id="inp1" name="none" />

jquery 代码:

$("#inp1,form > input")

结果:

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

8、prev + next

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

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

如:

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

html 代码:

<form>
  <label>name:</label>
  <input name="name" />
  <fieldset>
      <label>newsletter:</label>
      <input name="newsletter" />
 </fieldset>
  <label>newsletter2:</label>
  <p>p:</p>
  <input name="newsletter2" />
</form>
<input id="inp1" name="none" />

jquery 代码:

$("label + input,p")

结果:

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

9、prev ~ siblings

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

参数:prev 任何有效选择器; siblings 一个选择器,并且它作为第一个选择器的同级

如:

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

html 代码:

<form>
  <label>name:</label>
  <input name="name" />
  <fieldset>
      <label>newsletter:</label>
      <input name="newsletter" />
 </fieldset>
  <label>newsletter2:</label>
  <p>p:</p>
  <input name="newsletter2" />
</form>
<input id="inp1" name="none" />

jquery 代码:

$("form label ~ input,p")

结果:

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

10、prev:first

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

参数:prev 任何有效选择器

如:

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

$("form label + p:first")

11、prev:last

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

参数:prev 任何有效选择器

如:

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

$("form label + input:last")

12、prev:not(selector1,selector2,selectorn)

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

如:

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

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

13、prev:even

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

如:

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

$("table tr:even")

14、prev:odd

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

如:查找表格的2/4/6...行(即索引值为1,3,5...)

$("table tr:odd")

15、prev:eq(index)

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

如:

查找table的第三行

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

16、prev:gt(index)

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

如:

查找table下第二行以后的行

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

17、prev:lt(index)

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

如:

查找table下第1行、第二行

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

18、prev:header

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

如:

匹配form下所有标题元素

$("form *:header")

19、prev:animated

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

如:

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

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

20、:focus

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

如:

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

$("#login:focus");

21、prev:contains(text)

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

如:查找所有包含“a”文本的div元素

$("div:contains('a')")

22、prev:empty

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

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

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

如:

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

html 代码:

 <fieldset>
      <label>newsletter:</label>
      <input name="newsletter" class="a1 a2" />
        <h3>h3:</h3>
 </fieldset>
  <fieldset>
      <label class="a3">newsletter:</label>
 </fieldset>

jquery 代码:

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

结果:

[
    <fieldset>
      <label>newsletter:</label>
      <input name="newsletter" class="a1 a2" />
        <h3>h3:</h3>
 </fieldset>,
  <fieldset>
      <label class="a3">newsletter:</label>
 </fieldset>
]

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

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

31、prev[attribute $= 'value']

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

如:

匹配所有id以mydiv 结束的div

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

32、prev[attribute *= 'value']

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

如:

匹配所有id包含div 的div

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

33、[selector1][selector2][selectorn]

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

如:

$("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 代码:

<ul>
  <li>john</li>
  <li>karl</li>
  <li>brandon</li>
</ul>
<ul>
  <li>glen</li>
  <li>tane</li>
  <li>ralph</li>
</ul>

jquery 代码:

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

结果:

[ <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元素