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

2021-11-20 12:08:39

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");
   }
})