jquery中的选择器

对于标签的名进行选择的话直接输入就好

对于id需要加入#

对于class需要加入.

对于想对于某个元素包含的子元素都实行所有的属性加入 *

<!DOCTYPE html>
<html>
    <head>
        <title>*选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    </head>
    
    <body>
        <form action="#">
        <input id="Button1" type="button" value="button" />
        <input id="Text1" type="text" />
        <input id="Radio1" type="radio" />
        <input id="Checkbox1" type="checkbox" />
        </form>
        
        <script type="text/javascript">
            $("form *").attr("disabled", "true");
        </script>
    </body>
</html>

对于多个标签同时

 $(".red,.green,.blue").html("hi,我们的样子很美哦!");

对于某个div下的某个子元素例如p则是$("div p")包括孙子

            $("div label").css("border", "solid 5px red");

对于某个div下的某个子元素例如p则是$("div p")不包括孙子  

 $("div>label").css("border", "solid 5px red");

对于某个标签的下一个标签

           $("p+label").css("background-color","red");

prev ~ siblings选择器也是查找prev 元素之后的相邻元素,但前者只获取第一个相邻的元素,而后者则获取prev 元素后面全部相邻的元素,它的调用格式如下

 

            $("p~label").css("border", "solid 1px red");
            $("p~label").html("我们都是p先生的粉丝");

某个标签的第几个

            $("li:last").css("background-color", "red");
            $("li:first").css("background-color", "red");

如果想从一组标签元素数组中,灵活选择任意的一个标签元素,我们可以使用

:eq(index)

其中参数index表示索引号(即:一个整数),它从0开始,如果index的值为3,表示选择的是第4个元素

            $("li:eq(2)").css("background-color", "#60F");

我们可能希望按照文本内容来查找一个或多个元素,那么使用:contains(text)选择器会更加方便, 它的功能是选择包含指定字符串的全部元素,它通常与其他元素结合使用,获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。

            $("li:contains('jQuery')").css("background", "green");

使用包含的元素名称来过滤,:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素,其中selector参数就是包含的元素名称,是被包含元素。 

            $("li:has('label')").css("background-color", "blue");

  

 

  

  

 

posted @ 2016-06-01 22:49  lonecloud  阅读(181)  评论(0编辑  收藏  举报
我的博客即将同步至 OSCHINA 社区,这是我的 OSCHINA ID:lonecloud,邀请大家一同入驻:https://www.oschina.net/sharing-plan/apply