zoukankan      html  css  js  c++  java
  • 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");
    

      

     

      

      

  • 相关阅读:
    tinymce富文本的实践(vue)
    package.json 版本号说明
    Java注解代码生成
    swagger注释API :@ApiModel ....
    Vue的生命周期函数和beforeRouteEnter()/beforeRouteLeave()函数
    各类程序员学习路线图
    mock.js的使用方法
    推荐使用rpx替代upx的公告
    DispatcherServlet解读
    学会fetch的用法
  • 原文地址:https://www.cnblogs.com/lonecloud/p/5551412.html
Copyright © 2011-2022 走看看