T O P

[资源分享]     jQuery选择器及操作类名的方法

  • By - 楼主

  • 2021-03-28 16:00:03
  • jQuery选择器
    • css2.1和css3选择器

      • 参数:必须是字符串格式的选择器
    <div class="box" id="box">
    <p>1</p>
    <p>2</p>
    </div>   
    <p>hello</p>
    <script src="../jq/jquery-1.12.4.min.js"></script>
    <script>
        //jQuery选择器
        //css2.1  css3 选择器
        //参数必须是字符串格式的选择器
       //基础选择器
       $("*")
       $("p")
       $(".box")
       $("#box")
    
       //高级选择器
       $(".box p").html("高级选择器")
       $(".box p").css("width" , 100);
    
    <input type="button" value="btn1" disabled="disabled"><br>
    <input type="button" value="btn2">
    <script src="../jq/jquery-1.12.4.min.js"></script>
    <script>
    //表单对象属性
    $("input:disabled").css("background-color","red");//选中被禁用的disabled的input标签
    $("input:enabled").css("background-color","skyblue");//选中没有被禁用的, enabled的
    $(":input").css("background-color","pink");//选中所有的input标签
    $(":text").css("background-color","pink");//只会改变input表单里的type=text的文本框的css样式
    
    • 筛选选择器

      • 也叫过滤选择器,jQuery中新增的自己的选择器

        使用方法:在基础选择器后面增加一些筛选的单词,筛选出前面选择器选中内容中的一部分,也可作为高级选择器的一部分

    //筛选选择器
    $("p:first").css("background-color","purple");
    $("p:last").css("background-color", "purple");
    //选择任意位置
    $("p:eq(5)").css("background-color", "purple");
    
    //选择大于下标为5的项
    $("p:gt(5)").css("background-color", "purple");
    
    //选中 下标 为奇数的项,下标为1,3,5,7的项
    $("p:odd").css("background-color", "skyblue");
    
    //选中 下标 为奇数的项,下标为1,3,5,7的项
    $("p:odd").css("background-color", "skyblue");
    
    //not 除了这些项,p的样式都是("background-color", "skyblue")的
    $("p:not(eq(3))").css("background-color", "skyblue");
    $("p:not(.p1)").css("background-color", "skyblue");
    
    常用的有:
        $(":first")                     第一个
    
        $(":last")                      最后一个
    
        $(":eq(index)")            下标为index的项
    
        $(":gt(index)")             大于下标为index的项  
    
        $(":lt(index)")              小于下标为index的项
    
        $(":odd")                     下标为奇数的项
    
        $(":even")                    下标为偶数的项
    
        $(":not(selector)")      去除所有与给定选择器匹配的元素
    
    筛选方法

    过滤方法,jQuery中除了用选择器选择元素,jQuery对象内还封装了一些对应的筛选方法

    • 常用:
      $("p").first()
      $("p").last()
      $("p").eq(3)
    $("p").first().css("background-color", "red");
    $("p").eq(4).css("background-color", "skyblue");
    
    案例 表格隔行变色

    原生Js方法:

    <head>
        <style>
            table{
                margin: 0 auto;
                border-collapse: collapse;
            }
            td,tr{
                width: 70px;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <table border="1">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
    
        </table>
    
    
        <script src="../jq/jquery-1.12.4.min.js"></script>
        <script>
            //原生方法
            var trs = document.getElementsByTagName("tr");
            for(var i = 0;i <trs.length;i ++){
                if(i %2 == 0){
                    trs[i].style.backgroundColor = "pink";
                }else{
                    trs[i].style.backgroundColor = "skyblue";
    
                }
            }
        </script>
    

    jQuery方法:

    //jquery 方法
    $("tr:even").css("background-color","rgb(245, 197, 231)");
    $("tr:odd").css("background-color","rgb(197, 216, 245)")
    

    jQuery应用

    jQuery操作标签的内容
    • html()方法,相当于原生Js中的innerHTML属性,用来获取或设置标签内部的内容

    • text()方法,相当于原生Js中的innerText属性,用来获取或设置标签内部文字,仅仅是文字

    • val()方法,相当于Js中的value属性,用来获取或设置表单元素内容

    • jQuery操作标签的属性

      • attr()方法,用来获取或设置标签的属性值

        设置标签的属性值:jQuery对象.attr(name,value);

        获取标签属性值:jQuery对象.attr(name);

      • removeAttr()方法:移除标签的属性

      • prop()方法,针对selected\checked\disabled等表单元素的属性,这类属性的属性值与属性名相同

        获取:$("input").prop("属性名");

        设置:$("input").prop("属性名",值);

    • jQuery操作样式方法

      • css()方法,用于调用css属性值或者更改css属性值,jQuery对象.css(css样式属性名,想要设置或更改的属性值)

        • 注意
          • 一个参数:表示调用 css 属性的值,得到的是某个元素的最终计算后样式,值为字符串格式。
          • 两个参数:表示设置 css 样式属性,第二个参数可以是字符串格式的属性值,如果带单位的数字的属性值,可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串。
    $pic.css("width","400px");
    $pic.css("width","400");
    $pic.css("width",400);
    $pic.css("width","+=100");
    //有些属性值可以直接写,或者省略px单位,还可以写+=
    

    • css() 方法的第一个参数,复合属性的单一属性写法可以是驼峰命名法,也可以是横线写法。

    //复合属性的单一属性写法,可以是横线-写法,也可以是驼峰命名法
    console.log("background-color")
    console.log("backgroundColor")
    

    • 可以给同一个对象同时设置多条 css 属性,将多条属性的属性和属性值写成对象格式,传给 css() 的参数

    //设置多条属性,使用对象形式的参数
    $pic.css({
    "width":200,
    "height":100,
    "border":1
    })
    
    • jQuery操作类名方法

      • addClass()添加类名
      • removeClass()移除类名,不传参数的话,表示删除所有的类名
      • toggleClass()类名切换:若这个类名存在,则移除这个类名,否则添加这个类名
    <style>
                .box{
                    background-color: pink;
                    width: 100px;
                    height: 100px;
                }
                .no{
                    background-color: white;
                }
                .blue{
                    background-color: skyblue;
                    width: 100px;
                    height: 100px;
                }
    </style>
    <body>
        <input type="button" value="删除" id="btn1">
        <input type="button" value="添加" id="btn2">
        <input type="button" value="切换" id="btn3">
        <div id="box" class="box"></div>
        
     <script src="../jq/jquery-1.12.4.min.js"></script>
     <script>
               var $del_btn = $("#btn1");
               var $add_btn = $("#btn2");
               var $change_btn = $("#btn3");
               var $box = $("#box");
        
               //删除类名   removeClass()
               $del_btn.click(function(){
                   //$box.removeClass("box")//删除指定类名
                   $box.removeClass()//不传参数 默认删除所有类名
               })
               //在jQuery中类名的控制方法,它只会操作指定的类名,不会影响其他类名
               // removeClass("box"),在div的标签上,class="box"仍然存在,原有的类名不会影响
               //添加类名 addClass()
               $add_btn.click(function(){
               $box.addClass("blue")
           })
        
           //切换类名  toggleClass()
           $change_btn.click(function(){
           //让元素在一个类名中进行添加和删除的自动切换
           $box.toggleClass("blue");//有就删除,没有就添加
        })
      </script>
    </body>
    

    这三个方法只操作参数部分的类名,不影响原有的其他类名

    • hasClass()检测类名是否存在,返回值是布尔值
     // hasClass()
    consol.console.log($box.hasClass("blue"));//布尔值,true/false
    $change_btn.click(function(){
    // hasClass()
    //实现切换效果---toggleClass()
       if ($box.hasClass("blue")) {
          $box.removeClass("blue");
       } else {
         $box.addClass("blue");
       }
    })
    

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册