欢迎光临
我的个人博客网站

jQuery选择器及操作类名的方法


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()方法,针对selectedcheckeddisabled等表单元素的属性,这类属性的属性值与属性名相同

      获取:$(“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");    } }) 
赞(0) 打赏
未经允许不得转载:张拓的天空 » jQuery选择器及操作类名的方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏