11.5 jQuery 引入方式： 文檔就緒事件： DOM文檔載入的步驟 基本篩選器： 表單常用篩選： 表單對象狀態屬性篩選: 註意：$(":checked")選擇時連select中的帶有selected屬性的option標簽也會選上，所以要用$("input:checked") <head> <s ...
11.5 jQuery
引入方式：
方式一：本地引入 <script src="jquery-3.3.1.min.js"></script> <script> //註意，一定在引入jQuery之後，再使用jQuery提供的各種操作 code... </script> 方式二：直接使用CDN <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> code... </script>
文檔就緒事件：
DOM文檔載入的步驟
1. 解析HTML結構。 2. 載入外部腳本和樣式表文件。 3. 解析並執行腳本代碼。 4. DOM樹構建完成。 5. 載入圖片等外部文件。 6. 頁面載入完畢
11.51 選擇器
id選擇器： $("#i1") 標簽選擇器： $("p") class選擇器： $(".c1") 所有元素選擇器： $("*") 交集選擇器： $("div.c1") // 找到類為c1的div標簽 並集選擇器： $("#i1,.c1,p") // 找到所有id="i1"的標簽和class="c1"的標簽和p標簽 層級選擇器： $("x y"); // x的所有後代y（子子孫孫） $("x>y"); // x的所有兒子y（兒子） $("x+y") // 找到所有緊挨在x後面的兄弟y $("x~y") // x之後所有的兄弟y 屬性選擇器： $("input[type='checkbox']"); // 取到checkbox類型的input標簽 $("input[type!='text']"); // 取到類型不是text的input標簽
基本篩選器：
:first // 第一個 :last // 最後一個 :eq(index) // 索引等於index的那個元素 :even // 匹配所有索引值為偶數的元素，從 0 開始計數 :odd // 匹配所有索引值為奇數的元素，從 0 開始計數 :gt(index) // 匹配所有大於給定索引值的元素 :lt(index) // 匹配所有小於給定索引值的元素 :not(選擇器) // 過濾掉所有滿足not條件的標簽 :has(選擇器) // 過濾出所有後代中滿足has條件的父標簽 //例如 $("div:has(h1)") // 找到所有後代中有h1標簽的div標簽 $("div:has(.c1)") // 找到所有後代中有c1樣式類的div標簽 $("li:not(.c1)") // 找到所有不包含c1樣式類的li標簽 $("li:not(:has(a))") // 找到所有後代中不含a標簽的li標簽
11.52 表單常用篩選器
表單常用篩選：
:text :password :file :radio :checkbox :submit :reset :button 例： $(":checkbox") // 找到所有的checkbox
表單對象狀態屬性篩選:
:enabled
:disabled
:checked
:selected
註意：$(":checked")選擇時連select中的帶有selected屬性的option標簽也會選上，所以要用$("input:checked")
11.53 篩選器
下一個兄弟元素： $("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") //從id="id"的標簽開始往下選擇兄弟標簽直到id=i2的標簽(不包含id=i2的標簽) 上一個兄弟元素： $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") //從id="id"的標簽開始往上選擇兄弟標簽直到id=i2的標簽(不包含id=i2的標簽) 父親元素： $("#id").parent() $("#id").parents() // 查找當前元素的所有的父輩元素 $("#id").parentsUntil("某個父元素") // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。 兒子和兄弟元素： $("#id").children(); // 所有子標簽 $("#id").siblings(); // 兄弟標簽、 查找 $("div").find("p") <==> $("div p") //搜索所有與指定表達式匹配的元素,這個函數是找出正在處理的元素的後代元素的好方法。 篩選 $("div").filter(".c1") <==> $("div.c1") // 從結果集中過濾出有c1樣式類的 //篩選出與指定表達式匹配的元素集合,這個方法用於縮小匹配的範圍,用逗號分隔多個表達式。 .first() // 獲取匹配的第一個元素 .last() // 獲取匹配的最後一個元素 .not() // 從匹配元素的集合中刪除與指定表達式匹配的元素 .has() // 保留包含特定後代的父元素，去掉那些不含有指定後代的元素。 .eq() // 索引值等於指定值的元素
11.54 標簽操作之樣式操作
11.541 通過類屬性操作樣式
addClass(); // 添加指定的CSS類名。 removeClass(); // 移除指定的CSS類名。 hasClass(); // 判斷樣式存不存在 toggleClass(); // 切換CSS類名，如果有就移除，如果沒有就添加。
11.542 直接操作CSS樣式
css("color","red") //DOM操作：Elem.style.color="red"
$("p").css("color", "red"); //將所有p標簽的字體設置為紅色
$("#p1").css({"border":"1px solid black","color":"red"});//同時設置多個css樣式
11.543 jQuery版模態框
<head> <style> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.4); z-index: 999; } .modal { background-color: white; height: 300px; width: 500px; position: absolute; top: 50%; left: 50%; z-index:1000; margin-top: -150px; margin-left: -250px; } .hide { display: none; //不占空間，也不顯示 } </style> </head> <body> <div> <h1>海燕</h1> <p>在蒼茫的大海上，狂風捲積著烏雲，在烏雲和大海之間，海燕像黑色的閃電，在高傲的飛翔。</p> </div> <button id="b1">點我登錄</button> <div class="cover hide"></div> <div class="modal hide"> <form action=""> <p> <label>用戶名 <input type="text"> </label> </p> <p> <label>密碼 <input type="password"> </label> </p> <p> <input type="submit"> <input type="button" id="cancel" value="取消"> </p> </form> </div> <script src="jquery-3.3.1.min.js"></script> <script> // var b1Ele=document.getElementById("b1"); //原生DOM對象 // var b1Ele = $("#b1")[0]; //通過jQuery對象找到DOM對象,找到按鈕，給它綁定事件， // b1Ele.onclick = function () { //使用的是js對象 // $(".cover,.modal").removeClass("hide"); // 事件觸發後，找到那兩個div,移除它們的hide樣式類 // }; var b1Ele = $("#b1"); b1Ele.click(function () { $(".cover,.modal").removeClass("hide"); }); // var cancelButton = $("#cancel")[0]; //使用的是DOM對象 // cancelButton.onclick = ()=>{ // $(".cover,.modal").addClass("hide"); // 事件觸發後，找到那兩個div,給它們添加hide樣式類 // }; var cancelButton = $("#cancel"); cancelButton.click(function () { $(".cover,.modal").addClass("hide"); }); </script> </body>View Code
11.544 位置
offset() // 獲取匹配元素在當前視窗的相對偏移或設置元素位置，可設置 $(".c3").offset({top:284,left:400}) position() // 獲取匹配元素相對父元素的偏移,不可設置 $(window).scrollTop() // 獲取匹配元素相對滾動條頂部的偏移，可設置 $(window).scrollTop(0) //獲取當前視窗相對滾動條頂部的偏移，並且可設置 $(window).scrollLeft() // 獲取匹配元素相對滾動條左側的偏移，可設置
.offset()方法允許我們檢索一個元素相對於文檔（document）的當前位置。.position()的差別在於： .position()是相對於父級元素的位移。
11.545 尺寸
height() //獲取當前標簽內容高度，並且可設置高度 width() //獲取當前標簽內容寬度，並且可設置寬度 innerHeight() //內容+padding innerWidth() //內容+padding outerHeight() //內容+padding+border outerWidth() //內容+padding+border
11.55 標簽操作之文本內容操作
text() //只查看所有標簽內的文本 text(val) //先清空節點內容，再添加文本字元串:('<h1>我是h1</h1>') 註意：值為標簽的時候 不會被渲染為標簽元素 只會被當做值渲染到瀏覽器中 html() //查看所有子標簽，包括文本和子標簽 html(val) //先清空節點內容，可識別文本內的html標簽('<h1>我是h1</h1>') $('ul').html('<a href="#">百度一下</a>') $('ul').html(function(){ //可以使用函數來設置所有匹配元素的內容 return '哈哈哈' }) val // 用途：val()用於操作input、select、textarea的value值 // 示範一： <input type="text" name="username" > $('input[type=text]').val() //查看輸入框內的值或添加值 <input type="radio" name="sex" value="male"> <input type="radio" name="sex" value="female"> <input type="radio" name="sex" value="none"> $('input[type=radio]').val(['male',]) //查看所選選項或選擇選項，選擇選項時使用列表 // 示範二： <input type="checkbox" name="hobbies" value="basketball"> <input type="checkbox" name="hobbies" value="football"> <input type="checkbox" name="hobbies" value="doublecolorball"> $('input[type=checkbox]').val(['basketball','football']) //查看所選選項或選擇選項(選擇選項時使用列表)
11.551 登錄註冊示例
<style> .error {color: red;} </style> <body> <form action="" method=""> <p> <label for="username">用戶名</label> <input type="text" id="username" name="username"> <span class="error"></span> </p> <p> <label for="pwd">密碼</label> <input type="password" id="pwd" name="pwd"> <span class="error"></span> </p> <p> <input type="submit" id="b1" value="登錄"> </p> </form> <script src="jquery-3.3.1.min.js"></script> <script> $("#b1").click(function () { var flag = true; $(".error").text(""); var $username = $("#username"); var $pwd = $("#pwd"); if ($username.val().length === 0){ // 取input框的值(用戶名)判斷長度是否為0 $username.next().text("用戶名不能為空！"); //找到class="error"的span標簽添加提示信息 flag = false; //用戶名或密碼為空時不提交表單 } if ($pwd.val().length === 0){ //取input框的值(密碼)判斷長度是否為0 $pwd.next().text("密碼不能為空！"); //找到class="error"的span標簽添加提示信息 flag = false; } return flag; // 表單填寫有誤就會返回false，阻止submit按鈕預設的提交表單事件 }) </script> </body>View Code
11.56 標簽操作之屬性操作
用於id、class、name、value等或自定義屬性：
<images src="1.jpg" alt="圖片不見了" title="這絕對正常的圖片"> attr(屬性名) // 返回第一個匹配元素的屬性值 $('.box2 img').attr('title','美女') // 為所有匹配元素設置一個屬性值 $('.box2 img').attr({'title': '美女', 'alt':'圖片被狗吃了'}) // 為所有匹配元素設置多個屬性值 $('.box2 img').removeAttr('title') // 從每一個匹配的元素中刪除一個屬性
用於checkbox和radio：
<input type="radio" name="sex" value="male"> $(':radio[value=male]').prop('checked',true);// 設置屬性 <input type="checkbox" name="hobbies" value="basketball"> $("input :checkbox").prop('value') // 獲取value屬性的值 $("input :checkbox").prop('checked',true); // 設置屬性 $(':checkbox[value=football]').prop('checked',true); $("table :checkbox").removeProp('value') // 移除value屬性
註意：在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操作時會出bug，在3.x版本的jQuery中則沒有這個問題。為了相容性，我們在處理checkbox和radio的時候儘量使用特定的prop()，不要使用attr("checked", "checked")
總結：1. 對於標簽上有的能看到的屬性和自定義屬性都用attr 2. 對於返回布爾值的比如checkbox、radio和option的是否被選中都用prop。
11.561 全選反選取消
<body> <button id="b1">全選</button> <button id="b2">取消</button> <button id="b3">反選</button> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>愛好</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>Egon</td> <td>喊麥</td> </tr> <tr> <td><input type="checkbox"></td> <td>Alex</td> <td>吹牛逼</td> </tr> <tr> <td><input type="checkbox"></td> <td>Yuan</td> <td>不洗頭</td> </tr> </tbody> </table> <script src="jquery-3.3.1.min.js"></script> <script> // 全選 $("#b1").click(function () { $("table :checkbox").prop("checked", true)// 讓所有的checkbox選中 }); // 取消 $("#b2").click(function () { $("table :checkbox").prop("checked", false)// 讓所有的checkbox取消選中 }); // 反選 $("#b3").click(function () { //$("table input:not(:checked)").prop("checked", true); // 找到沒有選中的讓它們選中 //$("table input:checked").prop("checked", false); // 找到所有選中的讓它們取消選中 // 方法1：迴圈判斷 var $checkboxs = $("table input:checkbox"); for (let i=0;i<$checkboxs.length;i++){ var $currentCheckbox = $($checkboxs[i]); if ($currentCheckbox.prop("checked")){ // 如果之前是選中的，則取消選擇 $currentCheckbox.prop("checked", false); }else { $currentCheckbox.prop("checked", true);// 如果之前沒有選中，則選擇 } } //方法2：直接取當前標簽的checked屬性的相反值 for (let i=0;i<$checkboxs.length;i++){ var $currentCheckbox = $($checkboxs[i]); var flag = $currentCheckbox.prop("checked"); $currentCheckbox.prop("checked", !flag) } //
