jQuery筆記

0. `JS`框架

JS框架其實就是把已經定義好的js代碼放到一個js文件中，我們只需要引入這個外部的js文件，就可以使用里面已經定義好的函數。

學習jQuery，學習的是其對原生js事件和DOM操作的封裝。

1. `JQuery`

早期的JS框架。

formObject.onsubmit(function())

1.1 快速入門

<body>
    <div id="xxx">我是div</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // js方式和jq方式獲取的對象不一樣，API不兼容
    
    // JS方式，通過id屬性值來獲取div元素
    let jsDiv = document.getElementById("xxx");
    alert(jsDiv);
    alert(jsDiv.innerHTML);

    // jQuery方式，通過id屬性值來獲取div元素，通過選擇器類獲取元素的（和CSS基本一致）
    let jqDiv = $("#xxx");
    alert(jqDiv);
    alert(jqDiv.html());
</script>
</html>

2 基礎語法-事件

2.1 `js`原生對象&`jQuery`對象

<body>
    <div id="div">我是div</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // jq對象可以看做是對js對象進行包裝的一個容器（可以理解成數組/集合）
    // js  ---> jq
    //      操作 jqObject =  $(jsObject)
    // jq  ---> js
    //      數組思路：jsObject = jqObject[index]
    //      集合思路：jsObject = jqObject.get(index)



    // JS方式，通過id屬性值獲取div元素
    let jsDiv = document.getElementById("div");
    // alert(jsDiv.innerHTML);
    //alert(jsDiv.html());  JS對象無法使用jQuery里面的功能

    // 將 JS 對象轉換為jQuery對象
    let jq = $(jsDiv);
    // alert(jq.html());

    // jQuery方式，通過id屬性值獲取div元素
    let jqDiv = $("#div");
    // alert(jqDiv.html());
    // alert(jqDiv.innerHTML);   jQuery對象無法使用JS里面的功能

    // 將 jQuery對象轉換為JS對象(數組思路）
    let js = jqDiv[0];
    // alert(js.innerHTML);

 // 將 jQuery對象轉換為JS對象（集合思路）
    let js1 = jqDiv.get(0);
    alert(js1.innerHTML);
</script>

2.2 `jQuery` 常見事件

在 jQuery 中將事件封裝成了對應的方法。去掉了 JS 中的 .on 語法。

常見的事件

click()、dblclick()、change()、focus()、blur()、keyup()、mouseout()、mouseover()、scroll()、submit()、$(document).ready()/$()

<body>
    <input type="button" id="btn" value="點我">
    <br>
    <input type="text" id="input">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //js 寫法
    /*document.getElementById("btn").onclick = function () {
        alert("點我干嘛?");
    }*/


  /*  //1.  jq的事件方法有兩個功能：綁定事件 + 觸發事件
    //綁定單擊事件，jq寫法
    $("#btn").click(function(){
        alert("點我干嘛?");
    });

    // 觸發事件：如果事件的參數位置未傳遞任何內容，就是在觸發該事件
    $("#btn").click();

    */


    //獲取焦點事件
    // $("#input").focus(function(){
    //     alert("你要輸入數據啦...");
    // });

    //失去焦點事件
    /*$("#input").blur(function(){
        alert("你輸入完成啦...");
    });*/
</script>

2.3 頁面載入事件

   /*
        // 2. js入口      window.onload = function(){}
              是一個屬性，只能有一個取值，多次賦值，后面的會覆蓋前面的，所以為入口綁定多個函數的時候，只有最后一個生效，之前所有的都被覆蓋了。
        //    jq入口函數   $(document).ready(function(){})
              是一個方法，可以多次調用，每次調用都會執行，不會產生覆蓋的情況
              簡化寫法     $(function(){})
    */
    // js方式
    // window.onload = function(){
    //     alert("ok js!");
    // }
    // window.onload = function(){
    //     alert("ok js 2!");
    // }
    // window.onload = function(){
    //     alert("ok js 3!");
    // }
   /* // jq方式
    $(document).ready(function(){
        alert("ok jq!");
    });
    $(document).ready(function(){
        alert("ok jq again!");
    });
    $(document).ready(function(){
        alert("ok jq again again!");
    });*/

    // jq入口函數簡化寫法
    $(function(){
        alert("ok jq!");
    })

2.4 事件綁定

基本綁定方式

<script>
    $("#div").click(function(){})
</script>

on/off/one方式綁定

<body>
    <input type="button" id="btn1" value="點我">
    <input type="button" id="btn2" value="解綁">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
/*    //給btn1按鈕綁定單擊事件
    $("#btn1").on("click",function(){
        alert("點我干嘛?");
    });

    //通過btn2解綁btn1的單擊事件
    $("#btn2").on("click",function(){
        $("#btn1").off("click");
    });*/

    // 添加一次性的事件綁定
    $("#btn1").one("click",function(){
        alert("點我干嘛?");
    });
</script>

綁定多個事件

<script>
    /*    
    // 通過手動為元素添加多個事件的方式實現事件切換 方式一 單獨定義
    // 添加鼠標懸停事件
    $("#div").mouseover(function(){
        //背景色：紅色
        //$("#div").css("background","red");
        //  this代表的是當前函數綁定的元素對象
        $(this).css("background","red");
    });
    // 添加鼠標移出事件
    $("#div").mouseout(function(){
        //背景色：藍色
        //$("#div").css("background","blue");
        $(this).css("background","blue");
    });*/

    /*    // 通過手動為元素添加多個事件的方式實現事件切換 方式二 鏈式定義
    $("#div").mouseover(function(){
        $(this).css("background","red");
    }).mouseout(function(){
        $(this).css("background","blue");
    });
    */
</script>

2.5 事件切換

通過一個函數，綁定多個事件

事件切換1：hover 懸停-移出

<body>
<div id="div">我是div</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<!-- 遷移插件要放在主的jq的js文件下面 -->
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script>
    /*
         hover
         在鼠標懸停和鼠標移出兩個事件之間切換
     */
  /*  $("#div").hover(function () {
        $(this).css("background", "red");
    }, function () {
        $(this).css("background", "blue");
    })*/


    /*
        toggle
        在多個點擊事件之間切換

        注意：
            從1.0開始，有兩個功能： 元素點擊事件切換 + 元素顯示隱藏，1.9棄用了第一個功能
    */
    $("#div").toggle(function () {
        $(this).css("background", "pink");
    },function () {
        $(this).css("background", "green");
    },function () {
        $(this).css("background", "yellow");
    },)
</script>

事件切換2：toggle 點擊切換(jq-1.9之前)/

<body>
<div id="div">我是div</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<!-- 遷移插件要放在主的jq的js文件下面 -->
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script>
    /*
         hover
         在鼠標懸停和鼠標移出兩個事件之間切換
     */
  /*  $("#div").hover(function () {
        $(this).css("background", "red");
    }, function () {
        $(this).css("background", "blue");
    })*/


    /*
        toggle
        在多個點擊事件之間切換

        注意：
            從1.0開始，有兩個功能： 元素點擊事件切換 + 元素顯示隱藏，1.9棄用了第一個功能；
            如果想使用該功能，就需要導入遷移插件。
    */
    $("#div").toggle(function () {
        $(this).css("background", "pink");
    },function () {
        $(this).css("background", "green");
    },function () {
        $(this).css("background", "yellow");
    },)
</script>

2.6 事件委派

偽概念：可以為當前標簽對象的子標簽對象綁定事件，后續動態添加的新子標簽同樣生效

<ul id="list">
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>
<script type="text/javascript">
    /*
        事件委派
            偽概念：可以為當前標簽對象的子標簽對象綁定事件
            on實現事件委派，需要傳遞三個參數
            on(eventName, sonElementSelector, fun)
                第一個參數：要綁定的事件名字
                第二個參數：選定字標簽的選擇器，一般是用字標簽的標簽名。字符串形式選擇器
                第三個參數：改事件要綁定的函數對象

     */
    $("#list").on("mouseover","li",function () {
        // this 代表的是被選中的子標簽對象
        // css()方法是jq的方法，所以需要把js的this對象封裝成jq的對象
        $(this).css("background","red");
    })

    $("#list").on("mouseout","li",function () {
        $(this).css("background","white");
    })

    //添加了新的子標簽，同樣自動綁定了上述事件
    // [0] 是把jq對象轉換成js對象
    $("#list")[0].innerHTML += "<li>555555</li>";
</script>

3. 基礎語法-遍歷

注意：

所有 jQuery對象遍歷出來的元素都是js對象

推薦使用第二、三種方式

第二、三種方式還可以遍歷js數組

<body>
    <input type="button" id="btn" value="遍歷列表項">
    <ul>
        <li>傳智播客</li>
        <li>黑馬程序員</li>
        <li>傳智專修學院</li>
    </ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>

    /*
        jQuery對象是一個容器對象，可以理解成一個集合/數組
        遍歷可以獲取其中的每一個元素，類型為js對象類型
    */

    //方式一：傳統方式
    /*
    $("#btn").click(function(){
        let lis = $("li");
        let length = lis.length;
        for(let i = 0 ; i < length; i++) {
            alert(i + ":" + lis[i].innerHTML);
        }
    });
    */


    //方式二：對象.each()方法
    // 遍歷jQuery對象/js數組
    $("#btn").click(function(){
        let lis = $("li");
        // 第一個參數用于接收元素（js對象）的索引，
        // 第二個參數用于接收元素（js對象）
        lis.each(function(index,yyy){
            alert(index + ":" + yyy.innerHTML);
        });
        // lis.each(function(index,ele){
        //     alert(index + ":" + ele.innerHTML);
        // });
    });

    //方式三：$.each()方法
    /*
    $("#btn").click(function(){
        let lis = $("li");
        $.each(lis,function(index,ele){
            alert(index + ":" + ele.innerHTML);
        });
    });
    */

    //方式四：for of 語句遍歷
    // 增強for循環  不能獲取索引值
   /* $("#btn").click(function(){
        let lis = $("li");
        for(ele of lis){
            alert(ele.innerHTML);
        }
    });*/
</script>

4. DOM操作

jQuery對DOM的封裝，也就是對元素相關的操作進行了封裝。

4.1 元素的查找和獲取

jQuery通過選擇器獲取元素對象的語法格式：

$("選擇器的字符串表示形式")

其中選擇器字符串中的寫法與CSS中基本一致。

4.1.1 基本選擇器

包括：標簽選擇器、類選擇器、id選擇器

<body>
    <div id="div1">div1</div>
    <div class="cls">div2</div>
    <div class="cls">div3</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>

    /*
        獲取的都是jQuery對象， 本質是一個包裝了js對象的集合或者數據
        通過標簽、class獲取的jQuery對象可能包含多個js對象
        通過id獲取的jQuery對象只能包含1個js對象
    *
    * */
    //1.元素/標簽選擇器   $("元素的名稱")
    let divs = $("div");
    //alert(divs.length);
    alert(divs);

    //2.id選擇器    $("#id的屬性值")
    let div1 = $("#div1");
    //alert(div1);
    alert(div1.length);

    //3.類選擇器     $(".class的屬性值")
    let cls = $(".cls");
    // alert(cls.length);

	// 4. 統配 *

	// 5. 并集選擇器  選擇器1,選擇器2,....	只要滿足任意一個選擇器即可

	// 6. 交集選擇器  選擇器1選擇器2,....	同時滿足所有選擇器才行

</script>

4.1.2 層級選擇器（理解）

包括后臺選擇器、子選擇器、兄弟選擇器、同輩選擇器。

對應的是chm文檔中的選擇器》層級

后代選擇器 $("A B")

子選擇器 $("A > B")

兄弟選擇器 $("A + B")

同輩選擇器 $("A ~ B")

<body>
<!--    <div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
        <span>s2</span>
    </div>-->

    <img src="02-層級選擇器.html">
    <p>p1</p>
    <div></div>
    <p>p2</p>
    <img src="02-層級選擇器.html">
    <p>p3</p>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1. 后代選擇器 $("A B");      A下的所有B(包括B的子級)
    let spans1 = $("div span");
    //alert(spans1.length);

    // 2. 子選擇器   $("A > B");    A下的所有B(不包括B的子級)
    let spans2 = $("div > span");
    //alert(spans2.length);

    // 3. 兄弟選擇器 $("A + B");    A相鄰的下一個B，要求：同輩，相鄰，下一個
    let ps1 = $("div + p");
    // alert(ps1[0].innerHTML);

    // 4. 同輩選擇器 $("A ~ B");    A相鄰的所有B，要求：同輩、后面的
    let ps2 = $("div ~ p");
    alert(ps2.length);
    alert(ps2[0].innerHTML);
    alert(ps2[1].innerHTML);

</script>

4.1.3 屬性選擇器

掌握前兩個

對應的是chm文檔中的選擇器》屬性

[attribute] 含有該屬性

[attribute=value] 含有該屬性且值為value

[attribute!=value] 含有該屬性且值不能為value

[attribute^=value] 含有該屬性且值以value開頭

[attribute$=value] 含有該屬性且值以value結束

[attribute*=value] 含有該屬性且值中包含value

[attrSel1][attrSel2][attrSelN] 交集選擇器 //$("input[id][name$='man']")

<body>
    <input type="text">
    <input type="password">
    <input type="password">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.屬性名選擇器   $("元素[屬性名]")
    let in1 = $("input[type]");
    //alert(in1.length);


    //2.屬性值選擇器   $("元素[屬性名=屬性值]")
    // let in2 = $("input[type='password']");
    // 屬性值可以省略引號
    let in2 = $("input[type=password]");
    alert(in2.length);

</script>

4.1.4 表單項標簽選擇器（理解）

格式：:表單項類型

Eg：:input、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file

<body>
    <form>
        <input type="text" value="textttt"/>
        <input type="checkbox" />
        <input type="radio" />
        <input type="image" />
        <input type="file" />
        <input type="submit" />
        <input type="reset" />
        <input type="password" />
        <input type="button" />
        <select><option/></select>
        <textarea></textarea>
        <button></button>
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // :input   選擇 input textarea  select button

    // :text  選中單行文本輸入框
    alert($(":text")[0].value);

    /*
        其他一樣使用
        :password
        :radio
        :checkbox
        :submit
        :image
        :reset
        :button
        :file
     */
</script>

4.1.5 表單對象選擇器（理解）

對應的是chm文檔中屬性里面的表單對象屬性，根據表單項的狀態匹配篩選

<body>
    <input type="text" disabled>
    <input type="text" >
    <input type="radio" name="gender" value="men" checked>男
    <input type="radio" name="gender" value="women">女
    <input type="checkbox" name="hobby" value="study" checked>學習
    <input type="checkbox" name="hobby" value="sleep" checked>睡覺
    <select>
        <option>---請選擇---</option>
        <option selected>本科</option>
        <option>?？?lt;/option>
    </select>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.可用元素選擇器  $("A:enabled");
    let ins1 = $("input:enabled");
    //alert(ins1.length);

    // 2.不可用元素選擇器  $("A:disabled");
    let ins2 = $("input:disabled");
    //alert(ins2.length);

    // 3.單選/復選框被選中的元素  $("A:checked");
    let ins3 = $("input:checked");
    //alert(ins3.length);
    //alert(ins3[0].value);
    //alert(ins3[1].value);
    //alert(ins3[2].value);

    // 4.下拉框被選中的元素   $("A:selected");
    let select = $("select option:selected");
    alert(select.html());

4.1.6 過濾選擇器（理解）

分為兩類

基于索引的基本過濾選擇器 -- 對應chm中選擇器中基本選擇器
基于內容的內容過濾選擇器 -- 對應chm中選擇器中內容

基于索引的基本過濾選擇器

<body>
    <div>div1</div>
    <div id="div2">div2</div>
    <div>div3</div>
    <div>div4</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.首元素選擇器	$("A:first");
    let div1 = $("div:first");
    //alert(div1.html());

    // 2.尾元素選擇器	$("A:last");
    let div4 = $("div:last");
    //alert(div4.html());

    // 3.非元素選擇器	$("A:not(B)");   A和B是同一級
    let divs1 = $("div:not(#div2)");
    //alert(divs1.length);

    // 4.偶數選擇器	    $("A:even");
    let divs2 = $("div:even");
    //alert(divs2.length);
    //alert(divs2[0].innerHTML);
    //alert(divs2[1].innerHTML);

    // 5.奇數選擇器	    $("A:odd");
    let divs3 = $("div:odd");
    //alert(divs3.length);
    //alert(divs3[0].innerHTML);
    //alert(divs3[1].innerHTML);

    // 6.等于索引選擇器	 $("A:eq(index)");
    let div3 = $("div:eq(2)");
    alert(div3[0].innerHTML);
    //alert(div3.html());

    // 7.大于索引選擇器	 $("A:gt(index)");
    let divs4 = $("div:gt(1)");
    //alert(divs4.length);
    //alert(divs4[0].innerHTML);
    //alert(divs4[1].innerHTML);

    // 8.小于索引選擇器	 $("A:lt(index)");
    let divs5 = $("div:lt(2)");
    // alert(divs5.length);
    // alert(divs5[0].innerHTML);
    // alert(divs5[1].innerHTML);
    
</script>

基于索引的基本過濾器

:header			//標題元素h1~h6
:animated		//動畫元素
:focus			//獲取焦點的元素
:root1.9+		//根元素--html
:target1.9+		//含有url的打開目標的元素

基于內容的內容過濾選擇器

A:contains(text)		//所有A元素中包含指定文本的元素
A:empty					//所有A元素中沒有標簽體或子標簽的元素
A:has(selector)			//所有A元素中包含selector匹配元素的元素  A和selector不是同一級
A:parent				//匹配含有子元素或者文本的元素

4.2 元素文本/value值的操作

html([val|fn])			//獲取|設置標簽元素的文本內容，解析HTML標簽，相當于innerHtml屬性
text([val|fn])			//獲取|設置標簽元素的文本內容，不解析HTML標簽，相當于innerText屬性
val([val|fn|arr])		//獲取|設置標簽元素的value值

演示代碼

<body>
    <div id="div">我是div</div>
    <input type="text" name="" id="inputt" value="柳巖">
    <input type="button" id="btn1" value="獲取div的文本">
    <input type="button" id="btn2" value="設置div的文本">
    <input type="button" id="btn3" value="input的value值">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
     //1. html()   獲取標簽的文本內容
     $("#btn1").click(function(){
         //獲取div標簽的文本內容
         let value = $("#div").html();
         alert(value);
     });

     /*//2. html(value)   設置標簽的文本內容，解析標簽
     // 對應的是js對象的innerHtml屬性
     $("#btn2").click(function(){
         //設置div標簽的文本內容
         //$("#div").html("我真的是div");
         $("#div").html("<b>我真的是div</b>");
     });*/

     //3. text(value)   設置標簽的文本內容，不解析標簽
     // 對應的是js對象的innerText屬性
    /* $("#btn2").click(function(){
         //設置div標簽的文本內容
         // $("#div").text("我真的是div");
         $("#div").text("<b>我真的是div</b>");
     });*/


     //4. val(value)   設置標簽的文本內容，不解析標簽
     // 對應的是js對象的innerText屬性
     $("#btn3").click(function(){
         //設置div標簽的文本內容
         // alert($("#inputt").val());
         $("#inputt").val("球星柳巖");
     });
</script>

4.3 屬性的操作(理解)

首選使用的是prop，無效時，選用attr。

<body>
    <input type="text" id="username"> 
    <br>
    <input type="button" id="btn1" value="獲取輸入框的id屬性">  &nbsp;&nbsp;
    <input type="button" id="btn2" value="給輸入框設置value屬性">
    <br><br>

    <input type="radio" id="gender1" name="gender">男
    <input type="radio" id="gender2" name="gender">女
    <br>
    <input type="button" id="btn3" value="選中女">
    <br><br>
    
    <select>
        <option>---請選擇---</option>
        <option id="bk">本科</option>
        <option id="zk">專科</option>
    </select>
    <br>
    <input type="button" id="btn4" value="選中本科">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.attr(name,[value])   獲得/設置屬性的值
    //按鈕一：獲取輸入框的id屬性
    $("#btn1").click(function(){
        alert($("#username").attr("id"));
    });
    
    //按鈕二：給輸入框設置value屬性
    $("#btn2").click(function(){
        // $("#username").attr("value","hello...");
        // $("#username").prop("value","hello...");
        $("#username").val("hello...");

    });
    

    // 2.prop(name,[value])   獲得/設置屬性的值(checked，selected)
    //按鈕三：選中女
    $("#btn3").click(function(){
        $("#gender2").prop("checked",true);
    });

    //按鈕四：選中本科
    $("#btn4").click(function(){
        $("#bk").prop("selected",true);
    });
</script>

4.4 元素的增刪改(理解)

對應的是chm文檔中的文檔處理

內部插入，添加子元素
append(content|fn)	$(A).append(B) 把B添加到A子元素最后位置
appendTo(content)   與append()相反
prepend(content|fn) $(A).prepend(B) 把B添加到A子元素第一位置
prependTo(content)  與prepend()相反

外部插入，添加兄弟元素
after(content|fn)	$(A).after(B)把B添加到A后面
before(content|fn)	$(A).before(B)把B添加到A前面
insertAfter(content)	與after()相反
insertBefore(content)   與before()相反

包裹/替換 -- 不常用

刪除
empty()			刪除匹配元素的所有子節點
remove([expr])	刪除自己，同時刪除綁定的所有事件、數據
detach([expr])	刪除自己，但是保留綁定的所有事件、數據

復制
clone([Even[,deepEven]]) 復制克隆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作對象</title>
</head>
<body>
    <div id="div"></div>
    <input type="button" id="btn1" value="添加一個span到div"> <br><br><br>

    <input type="button" id="btn2" value="將加油添加到城市列表最下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn3" value="將加油添加到城市列表最上方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn4" value="將雄起添加到上海下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn5" value="將雄起添加到上海上方"> &nbsp;&nbsp;&nbsp;
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">廣州</li>
        <li id="sz">深圳</li>
    </ul>
    <ul id="desc">
        <li id="jy">加油</li>
        <li id="xq">雄起</li>
    </ul>  <br><br><br>
    <input type="button" id="btn6" value="將雄起刪除"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn7" value="將描述列表全部刪除"> &nbsp;&nbsp;&nbsp;
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    /*
        1. $("元素")   創建指定元素
        2. append(element)   添加成最后一個子元素，由添加者對象調用
        3. appendTo(element) 添加成最后一個子元素，由被添加者對象調用
        4. prepend(element)  添加成第一個子元素，由添加者對象調用
        5. prependTo(element) 添加成第一個子元素，由被添加者對象調用
        6. before(element)    添加到當前元素的前面，兩者之間是兄弟關系，由添加者對象調用
        7. after(element)     添加到當前元素的后面，兩者之間是兄弟關系，由添加者對象調用
        8. remove()           刪除指定元素(自己移除自己)
        9. empty()            清空指定元素的所有子元素
    */
    
    // 按鈕一：添加一個span到div
    $("#btn1").click(function(){
        let span = $("<span>span</span>");
        $("#div").append(span);
    });
    

    //按鈕二：將加油添加到城市列表最下方
    $("#btn2").click(function(){
        //$("#city").append($("#jy"));
        $("#jy").appendTo($("#city"));
    });

    //按鈕三：將加油添加到城市列表最上方
    $("#btn3").click(function(){
        //$("#city").prepend($("#jy"));
        $("#jy").prependTo($("#city"));
    });
    

    //按鈕四：將雄起添加到上海下方
    $("#btn4").click(function(){
        $("#sh").after($("#xq"));
    });
    

    //按鈕五：將雄起添加到上海上方
    $("#btn5").click(function(){
        $("#sh").before($("#xq"));
    });

    //按鈕六：將雄起刪除
    $("#btn6").click(function(){
        $("#xq").remove();
    });
    

    //按鈕七：將描述列表全部刪除
    $("#btn7").click(function(){
        $("#desc").empty();
    });
    
</script>
</html>

4.5元素樣式的操作

高頻使用的是addClass和removeClass：

<body>
    <div style="border: 1px solid red;" id="div" >我是div</div>
    <input type="button" id="btn1" value="獲取div的樣式"> &nbsp;&nbsp;
    <input type="button" id="btn2" value="設置div的背景色為藍色">&nbsp;&nbsp;
    <br><br><br>
    <input type="button" id="btn3" value="給div設置cls1樣式"> &nbsp;&nbsp;
    <input type="button" id="btn4" value="給div刪除cls1樣式"> &nbsp;&nbsp;
    <input type="button" id="btn5" value="給div設置或刪除cls1樣式"> &nbsp;&nbsp;
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.css(name)   獲取css樣式
    $("#btn1").click(function(){
        alert($("#div").css("border"));
    });

    // 2.css(name,value)   設置CSS樣式
    // 相當于 js對象.style.background-color = 'red'
    // <div style="border: 1px solid red;" id="div" style="background-color: red">我是div</div>
    $("#btn2").click(function(){
        $("#div").css("background","blue");
    });

    // 3.addClass(value)   給指定的對象添加樣式類名
    // 相當于 js對象.className()
    $("#btn3").click(function(){
        $("#div").addClass("cls1");
    });

    // 4.removeClass(value)  給指定的對象刪除樣式類名
    $("#btn4").click(function(){
        $("#div").removeClass("cls1");
    });

    // 5.toggleClass(value)  如果沒有樣式類名，則添加。如果有，則刪除
    $("#btn5").click(function(){
        $("#div").toggleClass("cls1");
    });
    
</script>

綜合案例1

代碼講解優化

<body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <th style="text-align: left">
                <input style="background:lightgreen" id="selectAll" type="button" value="全選">
                <input style="background:lightgreen" id="selectNone" type="button" value="全不選">
                <input style="background:lightgreen" id="reverse" type="button" value="反選">
            </th>
    
            <th>分類ID</th>
            <th>分類名稱</th>
            <th>分類描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>1</td>
            <td>手機數碼</td>
            <td>手機數碼類商品</td>
            <td><a href="">修改</a>|<a href="">刪除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>2</td>
            <td>電腦辦公</td>
            <td>電腦辦公類商品</td>
            <td><a href="">修改</a>|<a href="">刪除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包類商品</td>
            <td><a href="">修改</a>|<a href="">刪除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>4</td>
            <td>家居飾品</td>
            <td>家居飾品類商品</td>
            <td><a href="">修改</a>|<a href="">刪除</a></td>
        </tr>
    </table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //全選
    //1.為全選按鈕添加單擊事件
    $("#selectAll").click(function(){
        //2.獲取所有的商品復選框元素，為其添加checked屬性，屬性值true
        $(".item").prop("checked",true);
    });


    //全不選
    //1.為全不選按鈕添加單擊事件
    $("#selectNone").click(function(){
        //2.獲取所有的商品復選框元素，為其添加checked屬性，屬性值false
        $(".item").prop("checked",false);
    });


    //反選
    //1.為反選按鈕添加單擊事件
    $("#reverse").click(function(){
        //2.獲取所有的商品復選框元素，為其添加checked屬性，屬性值是目前相反的狀態
        let items = $(".item");
        items.each(function(){
            $(this).prop("checked",!$(this).prop("checked"));
        });
    });
</script>

綜合案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隨機圖片</title>
</head>
<body>
<!-- 小圖 -->
<div style="background-color:red;border: dotted; height: 50px; width: 50px">
    <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
</div>
<!-- 大圖 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
    <img src="" id="big" style="width: 400px; height: 400px; display:none;">
</div>

<!-- 開始和結束按鈕 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="開始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.準備一個數組
    let imgs = [
        "img/01.jpg",
        "img/02.jpg",
        "img/03.jpg",
        "img/04.jpg",
        "img/05.jpg",
        "img/06.jpg",
        "img/07.jpg",
        "img/08.jpg",
        "img/09.jpg",
        "img/10.jpg"];

    //2.定義計數器變量
    // let count = 0;

    //3.聲明定時器對象
    let time = null;

    //4.聲明圖片路徑變量
    let imgSrc = "";

    // 抽取圖片數組的長度
    let length = imgs.length;

    //5.為開始按鈕綁定單擊事件
    $("#startBtn").click(function () {
        let count = 0;
        //6.設置按鈕狀態
        //禁用開始按鈕
        // this --  當前js對象
        $(this).prop("disabled", true);
        //啟用停止按鈕
        $("#stopBtn").prop("disabled", false);

        //7.設置定時器，循環顯示圖片
        time = setInterval(function () {
            //8.循環獲取圖片路徑
            let index = count % length; // 0%10=0  1%10=1  2%10=2 .. 9%10=9  10%10=0

            //9.將當前圖片顯示到小圖片上
            imgSrc = imgs[index];
            $("#small").prop("src", imgSrc);

            //10.計數器自增
            count++;
        }, 1000);
    });


    //11.為停止按鈕綁定單擊事件
    $("#stopBtn").click(function () {
        //12.取消定時器
        clearInterval(time);

        //13.設置按鈕狀態
        //啟用開始按鈕
        $("#startBtn").prop("disabled", false);
        //禁用停止按鈕
        // this --  當前js對象
        $(this).prop("disabled", true);

        //14.將圖片顯示到大圖片上
        $("#big").prop("src", imgSrc);
        $("#big").prop("style", "width: 400px; height: 400px;");
    });


</script>
</html>

posted @ 2020-10-10 18:50 sonyan 閱讀(136) 評論(0) 收藏舉報

刷新頁面返回頂部