jQuery選擇器及操做類名的方法

時間 2021-04-01

標籤 javascript css html java jquery css3 code htm 對象欄目 JQuery 简体版

原文原文鏈接

jQuery選擇器

css2.1和css3選擇器javascript
- 參數：必須是字符串格式的選擇器

<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樣式

篩選選擇器css
- 也叫過濾選擇器，jQuery中新增的本身的選擇器html
  
  使用方法：在基礎選擇器後面增長一些篩選的單詞，篩選出前面選擇器選中內容中的一部分，也可做爲高級選擇器的一部分java

//篩選選擇器
$("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對象內還封裝了一些對應的篩選方法jquery

經常使用：
$("p").first()
$("p").last()
$("p").eq(3)

$("p").first().css("background-color", "red");
$("p").eq(4).css("background-color", "skyblue");

案例表格隔行變色

原生Js方法:css3

<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方法:code

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

jQuery應用

jQuery操做標籤的內容

html()方法,至關於原生Js中的innerHTML屬性,用來獲取或設置標籤內部的內容htm
text()方法,至關於原生Js中的innerText屬性,用來獲取或設置標籤內部文字,僅僅是文字對象
val()方法,至關於Js中的value屬性,用來獲取或設置表單元素內容ip
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");
   }
})