jQuery選擇器及操作類名的方法-有解無憂

jQuery選擇器

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

<div  id="box">
<p>1</p>
<p>2</p>
</div>   
<p>hello</p>
<script src="https://www.cnblogs.com/dreamtown/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="https://www.cnblogs.com/dreamtown/p/btn1" disabled="disabled"><br>
<input type="button" value="https://www.cnblogs.com/dreamtown/p/btn2">
<script src="https://www.cnblogs.com/dreamtown/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="https://www.cnblogs.com/dreamtown/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="https://www.cnblogs.com/dreamtown/p/洗掉" id="btn1">
    <input type="button" value="https://www.cnblogs.com/dreamtown/p/添加" id="btn2">
    <input type="button" value="https://www.cnblogs.com/dreamtown/p/切換" id="btn3">
    <div id="box" ></div>
    
 <script src="https://www.cnblogs.com/dreamtown/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的標簽上，仍然存在，原有的類名不會影響
           //添加類名 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");
   }
})

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270857.html

標籤：jQuery

上一篇：了解jQuery

下一篇：jQuery常用事件方法——mouseenter、mouseleave、hover方法