jQuery选择器

最新推荐文章于 2019-01-05 13:17:44 发布

nchu_laizhibing

最新推荐文章于 2019-01-05 13:17:44 发布

阅读量476

点赞数

分类专栏： jquery

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

（4）jQuery选择器

1.标签选择器

$(“element”); 如:$(“div”);

2.ID选择器

$(“id”); 如: $(“#users”).val();

3.类选择器

$(“.t”).css(“border”,”2px solid blue”);

4.通用选择器

$(“*”); 如:$(“*”).css(“color”,”red”);

5.群组选择器

$(“div,span,p.styleClass”).css(“border”,”1px solid red”);

.one{border:1px solid #03F;

float: left;

margin: 1em; padding: 1.5em; width: 106px;

}

.two{

background-color: #FC0;

}

.three{

background-color: #FCF;

}

</style>

$(document).ready(function(){

$("*").css("font-size","12px");

$("div").addClass("one");

$("#div1").addClass("two");

$("#div2,#div3").addClass("three");

$("h3,p").css("color","red").attr("align","center");

$("#span1").html("本页中同时应用one类的元素一共有"+$(".one").length+"个;同时应用one和three类的元素共有"+$(".one.three").length+"个。");

});

</script>

</head>

<body>

<h3>这是标题中的文本</h3>

<div id="div1">div元素，id属性为div1</div>

<div id="div2">div元素，id属性为div2</div>

<div id="div3">div元素，id属性为div3</div>

</body>

6.层级选择器

（1）子元素选择器:用于在给定的父元素下查找这个父元素下面的所有子元素。

$(“parent>child”)

匹配表单中所有的子级input元素，： $(“form > input”);

(2) 后代元素选择器

$(“ancestor descendant”);

找到form元素的后代元素中为input的标记

$(“form input”);

(3)紧邻同辈元素选择器:用于匹配所有紧跟在prev元素后的next元素

$(“prev+next”); 如:$(“div+span”);匹配所有紧跟在div元素后的span元素。

（4）相邻同辈元素选择器:用于选择元素后面的所有同辈元素。

$(“perv~siblings”);

7.表单域选择器

(1) :input选择器:用于选择所有input、textarea、select和button元素

$(“:input”)

(2) :text选择器：用于选择所有的单行文本框

$(“:text”);

(3) ：password选择器:用于选择所有密码框（<input type=”password”>）

$(“:password”);

(4) :radio选择器用于选择所有单选按钮（<input type=”radio”>）.

$(“:radio”);

............还有的表单依次类推.

8.过滤选择器

A):first选择器：对当前jQuery集合进行过滤并选择出第一个匹配元素。

$(“select :frist”);

将第一列的边框颜色设置为blue

$(“td:first”).css(“border”,”2px solid blue”);

B):last选择器：对当前jQuery集合进行过滤并选择出最后一个匹配元素

C):odd选择器用于选择索引为奇数（从0开始计数）的所有元素

$(”selector:odd”);

$(“td:odd”).css(“background”,”red”);

D):even选择器:用于选择索引为偶数(从0开始计数)的所有元素。

E):eq()选择器：用于从匹配的集合中选择索引等于给定值的元素。

$(“selector:eq(index)”);

将列表中索引值为1的列字体颜色设置为蓝色

$(“li:eq(1)”);.css(“color”,”blue”);

F):gt()选择器：用于从匹配的集合中选择索引大于给定值的所有元素。

$(“li:gt(0)”).css(“border”,”green”);

G):lt()选择器：用于从匹配的集合中选择索引小于给定值的所有元素。

H):not()选择器：用于从匹配的集合中去除所有与给定选择器匹配的元素。

除了第一个单元格和最后一个单元格，其它单元格的背景颜色都设置为#FCF

$(“td:not(:first,:last)”).css(“backgroud”,”#FCF”);

I):header选择器:用于选择所有诸如h1,h2,h3之类的标题元素。

$(“:header”);

J):animated选择器:用于选择所有正在执行动画效果的元素。

9.内容过滤选择器

(1):contains()选择器:用于选择包含给定文本的所有元素.

$(“selector:contains(text)”);

如:$(“p:contains(‘laizhibing’)”).css(“background”,”#FCF”);

(2):has()选择器:用于选择含有给定子元素的元素.

$(“selecotor:has(selector2)”);

对包含p元素的列表项背景色设置为蓝色

$(“li:has(p)”).css(“backgroud”,”blue”);

(3):empty选择器:用于选择不包含子元素或文本的所有空元素。

$(“selector:empty”);

将所有的空白单元格的背景色设置为红色.

$(“td:empty”).css(“background”,”red”);

(4):parent选择器：用于选择包含子元素或文本的元素，与empty选择器的作用相反。

10.属性过滤选择器

(1)包含属性选择器：用于选择包含给定属性的所有元素。

$(“selector]attribute]”);

$(“div[id]”);可以从文档中选择包含id属性的所有div元素.

(2)属性等于选择器:用于选择给定属性等于某特定值的所有元素。

$(“selector[attribute=value]”);

其中,参数attribue表示属性名,value表示属性值,当属性值包含“]”时，需要加引号。

$(“input[name=’accept’]”).attr(“checked”,”true”);

(3)属性包含选择器:用于选择指定属性值包含给定子字符串的所有元素.

$(“selector[attribute*=value]”);

给name中包含 “news”的文本框添加文本值

$(“input[name*=’news’]”).val(“name中包含news的元素”);

(4)属性包含单词选择器：用于选择指定属性值中包含给定单词的元素。

$(“selector[attribute~=value]”);

$(“input[name~=’news’]”).val(“name包含news单词的元素”);

(5)属性不等于选择器:用于选择不包含指定属性、或者包含指定属性但该属性不等于某个值的所有元素。

$(“selector[attribute!=value]”);

(6)属性开始选择器:用于选择给定属性是以某特定值开始的所有元素。

$(“selector[attribute^=value]”);

(7)属性结尾选择器:用于选择给定属性是以某特定值结束的所有元素。

$(“selector[attribute$=value]”);

(8)复合属性选择器:用于选择同时满足多个条件的所有元素。

$(“selector[selector1][selector2][selector3]”);

$(“input[id][name^=’news’]”).val(“符合条件”);

10子元素过滤选择器

子元素选择器必须与某个选择器一起使用。

(1) :first-child选择器用于选择其父级的第一个子元素的所有元素。

$(“selector:first-child”);

第一个列表的文本都添加了下划线

$(“ul:first-child”).css(“text-decoration”,”underline”).css(“color”,”blue”);

(2):last-child选择器用于选择其父级的最后一个子元素的所有元素。

$(“selector:last-child”);

最后列表的文本都添加了下划线

$(“ul:lat-child”).css(“text-decoration”,”underline”).css(“color”,”red”);

(3):nth-child选择器:用于选择父元素下的第N个元素或奇偶元素

$(“selector:nth-child(index/even/odd/equation)”);

$(“ul li:nth-child(4)”).css(“color”,”red”);

(4):only-child选择器:用于选择某元素的唯一选择器

$(“selector:only-child”);

11.表单域属性过滤选择器

1. :checked选择器:用于选择所有被选中的表单域.

$(“selector:checked”);

2. :enabled选择器：用于选择所有可用的选择器.

$（“selector:enabled”）；

3. :disabled选择器:用于选择所有禁用的表单域

$(“selector:disabled”);

4. :selected选择器:用于选择从列表框选择所有选中的option元素。

$(“selector:selected”);

12. 可见性过滤选择器

1. :hidden 选择器:用于选择所有的不可见的元素.

$(“selector:hidden”);

2. :visible选择器：用于选择所有可见的元素

$(“selector:visible”);

nchu_laizhibing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器

（4）jQuery选择器1.标签选择器$(“element”); 如:$(“div”);2.ID选择器$(“id”); 如: $(“#users”).val();3.类选择器$(“.t”).css(“border”,”2px solid blue”);4.通用选择器$(“*”); 如:$(“*”).css(
复制链接

扫一扫

专栏目录