jquery学习(二)选择器

来源:互联网 发布:重庆西南大学网络教育 编辑:程序博客网 时间:2024/06/06 09:08

1.基本选择器

*:代表所有元素#id:例如:$("#lastname"),id="lastname" 的元素.class:例如:$(".intro"),所有 class="intro" 的元素element:例如:$("p"),所有 <p> 元素

如果要同时选择多个元素,元素之间可以加逗号

$('.test, #test, h1')

2.层次选择器

$('parent child'):选择所有指定的子元素,不一定是直接子元素$('parent > child'):选择直接子元素$('prev + next'):选择下一个指定的兄弟元素,一定要是紧跟着的兄弟元素$('prev ~ siblings'):选择后面指定的所有兄弟元素,不一定要紧跟着

3.基本过滤选择器

:first:选择指定元素的第一个元素,例如:$("p:first"),选择第一个p元素:last:选择指定元素的最后一个元素,例如:$("p:last"),选择最后一个p元素:not(selector):取非元素:even:例如,$("tr:even"),所有偶数 <tr> 元素:odd:选择奇数个元素:eq(index):例如,$("ul li:eq(3)"),列表中的第四个元素(index 从 0 开始):gt(no):大于指定索引的元素:lt(no):小于指定索引的元素

4.内容过滤选择器

:contains(text):搜索包含指定字符串的元素,子元素包含字符串也可以。例如:
$("div:contains('zjoops')").css('backgroundColor', 'yellow');

div的子元素包含该字符串,也会被选中

:empty:空元素(内容为空,且不包含子元素) $("div:empty").css('backgroundColor', 'yellow');:has(selector):包含指定子元素

例如:

$("div:has(span)").css('backgroundColor', 'yellow');选择包含span子元素的div元素:parent:取包含子元素或文本的元素

5.可见性过滤选择器

 :hidden:取不可见元素(display:none) :visible:取可见元素

6.属性过滤选择器

[attribute]:拥有attribute属性的元素,例如:
$("div[class]").css('backgroundColor', 'yellow');
[attribute = value]:attribute属性值等于value的元素,也可以[attribute != value][attribute ^= value]:attribute属性值以value开头的元素[attribute $= value]:attribute属性值以value结尾的元素[attribute *= value]:attribute属性值包含value的元素[attribute][attribute = value]:还可以进行联合选择,是且的关系

7.子元素过滤选择器

:first-child:匹配父元素的第一个子元素,如果该元素是第一个元素,则选中。例如:
$("li:first-child").css('backgroundColor', 'yellow');
:last-child:匹配父元素的最后一个子元素:nth-child(n|even|odd|formula): 选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素。    n:要匹配的每个子元素的索引,必须是一个数字,第一个元素的索引号是 1。    even:选取每个偶数子元素。    odd:选取每个奇数子元素。    formula:规定哪个子元素需通过公式 (an + b) 来选取。 实例:p:nth-child(3n+2) 选取每个第三段,从第二个子元素开始。:only-child:选取属于其父元素的唯一子元素的每个元素。

8.表单元素选择器

:input:所有<input>元素:text:所有type="text"的<input>元素:password:所有type="password"的<input>元素:radio:所有type="radio"的<input>元素:checkbox:所有type="checkbox"的<input>元素:submit:所有type="submit"的<input>元素:reset:所有type="reset"的<input>元素:button:所有type="button"的<input>元素:image:所有type="image"的<input>元素:file:所有type="file"的<input>元素

9.表单元素过滤选择器

:enabled:所有激活的input元素:disabled:所有禁用的input元素:selected:所有被选取的input元素:checked:所有被选中的input元素
0 0
原创粉丝点击