jQuery選擇器及操作類名方法

jQuery選擇器

  • css2.1和css3選擇器

    • 參數(shù)：必須是字符串格式的選擇器
<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 選擇器
    //參數(shù)必須是字符串格式的選擇器
   //基礎(chǔ)選擇器
   $("*")
   $("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標(biāo)簽
$("input:enabled").css("background-color","skyblue");//選中沒有被禁用的, enabled的
$(":input").css("background-color","pink");//選中所有的input標(biāo)簽
$(":text").css("background-color","pink");//只會改變input表單里的type=text的文本框的css樣式

  • 篩選選擇器

    • 也叫過濾選擇器，jQuery中新增的自己的選擇器

      使用方法：在基礎(chǔ)選擇器后面增加一些篩選的單詞，篩選出前面選擇器選中內(nèi)容中的一部分，也可作為高級選擇器的一部分

//篩選選擇器
$("p:first").css("background-color","purple");
$("p:last").css("background-color", "purple");
//選擇任意位置
$("p:eq(5)").css("background-color", "purple");

//選擇大于下標(biāo)為5的項
$("p:gt(5)").css("background-color", "purple");

//選中 下標(biāo) 為奇數(shù)的項,下標(biāo)為1,3,5,7的項
$("p:odd").css("background-color", "skyblue");

//選中 下標(biāo) 為奇數(shù)的項,下標(biāo)為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)")            下標(biāo)為index的項

    $(":gt(index)")             大于下標(biāo)為index的項  

    $(":lt(index)")              小于下標(biāo)為index的項

    $(":odd")                     下標(biāo)為奇數(shù)的項

    $(":even")                    下標(biāo)為偶數(shù)的項

    $(":not(selector)")      去除所有與給定選擇器匹配的元素
篩選方法

過濾方法，jQuery中除了用選擇器選擇元素，jQuery對象內(nèi)還封裝了一些對應(yīng)的篩選方法

  • 常用：
    $("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應(yīng)用

jQuery操作標(biāo)簽的內(nèi)容

  • html()方法,相當(dāng)于原生Js中的innerHTML屬性,用來獲取或設(shè)置標(biāo)簽內(nèi)部的內(nèi)容

  • text()方法,相當(dāng)于原生Js中的innerText屬性,用來獲取或設(shè)置標(biāo)簽內(nèi)部文字,僅僅是文字

  • val()方法,相當(dāng)于Js中的value屬性,用來獲取或設(shè)置表單元素內(nèi)容

  • jQuery操作標(biāo)簽的屬性

    • attr()方法,用來獲取或設(shè)置標(biāo)簽的屬性值

      設(shè)置標(biāo)簽的屬性值:jQuery對象.attr(name,value);

      獲取標(biāo)簽屬性值:jQuery對象.attr(name);

    • removeAttr()方法:移除標(biāo)簽的屬性

    • prop()方法,針對selected\checked\disabled等表單元素的屬性,這類屬性的屬性值與屬性名相同

      獲取:$("input").prop("屬性名");

      設(shè)置:$("input").prop("屬性名",值);

  • jQuery操作樣式方法

    • css()方法,用于調(diào)用css屬性值或者更改css屬性值,jQuery對象.css(css樣式屬性名,想要設(shè)置或更改的屬性值)

      • 注意
        ? 一個參數(shù)：表示調(diào)用 css 屬性的值，得到的是某個元素的最終計算后樣式，值為字符串格式。
        ? 兩個參數(shù)：表示設(shè)置 css 樣式屬性，第二個參數(shù)可以是字符串格式的屬性值，如果帶單位的數(shù)字的屬性值，可以寫成帶單位的字符串格式、不帶單位的字符串、純數(shù)字、帶 += 等賦值運(yùn)算的字符串。
$pic.css("width","400px");
$pic.css("width","400");
$pic.css("width",400);
$pic.css("width","+=100");
//有些屬性值可以直接寫,或者省略px單位,還可以寫+=

? css() 方法的第一個參數(shù)，復(fù)合屬性的單一屬性寫法可以是駝峰命名法，也可以是橫線寫法。

//復(fù)合屬性的單一屬性寫法,可以是橫線-寫法,也可以是駝峰命名法
console.log("background-color")
console.log("backgroundColor")

? 可以給同一個對象同時設(shè)置多條 css 屬性，將多條屬性的屬性和屬性值寫成對象格式，傳給 css() 的參數(shù)

//設(shè)置多條屬性,使用對象形式的參數(shù)
$pic.css({
"width":200,
"height":100,
"border":1
})

  • jQuery操作類名方法

    • addClass()添加類名
    • removeClass()移除類名,不傳參數(shù)的話,表示刪除所有的類名
    • 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()//不傳參數(shù) 默認(rèn)刪除所有類名
           })
           //在jQuery中類名的控制方法，它只會操作指定的類名，不會影響其他類名
           // removeClass("box")，在div的標(biāo)簽上，class="box"仍然存在，原有的類名不會影響
           //添加類名 addClass()
           $add_btn.click(function(){
           $box.addClass("blue")
       })
    
       //切換類名  toggleClass()
       $change_btn.click(function(){
       //讓元素在一個類名中進(jìn)行添加和刪除的自動切換
       $box.toggleClass("blue");//有就刪除，沒有就添加
    })
  </script>
</body>

這三個方法只操作參數(shù)部分的類名,不影響原有的其他類名

  • hasClass()檢測類名是否存在,返回值是布爾值
 // hasClass（）
consol.console.log($box.hasClass("blue"));//布爾值,true/false
$change_btn.click(function(){
// hasClass（）
//實(shí)現(xiàn)切換效果---toggleClass()
   if ($box.hasClass("blue")) {
      $box.removeClass("blue");
   } else {
     $box.addClass("blue");
   }
})
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容