【樣式操作】
html程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="JQ.js"></script> 7 </head> 8 <body> 9 <div class="c1 c2 c3"></div> 10 <p>111</p> 11 <p>222</p> 12 <p>333</p> 13 </body> 14 </html>
js樣式操作
css操作
需求：一行程式碼將第一個p標籤變成紅色，第二個p標籤變成綠色(鏈式操作)
。
。
【位置操作】
位置操作：
offset() 返回或設定匹配元素相對於文件的偏移（位置）
position() 返回匹配元素相對於父元素的偏移（位置）
scrollLeft() 設定或返回匹配元素相對捲軸左側的偏移
scrollTop() 設定或返回匹配元素相對捲軸頂部的偏移***
html程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="JQ.js"></script> 7 <style> 8 body { 9 margin: 0; 10 } 11 12 p { 13 position: relative; 14 top: 100px; 15 left: 100px; 16 } 17 </style> 18 </head> 19 <body> 20 <p>ppp</p> 21 </body> 22 </html>
【尺寸】
【文字操作】
【獲取值操作】
【屬性操作】
總結：對於標籤上有的能夠看得到的屬性和自定義屬性用attr
對於返回布林值比如checkbox、radio、option是否被選中用prop
。
。
【文件處理】
html程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="JQ.js"></script> 7 </head> 8 <body> 9 <div id="d1">div 10 <p id="d2">div>p</p> 11 <span>div>span</span> 12 <p>div>p</p> 13 </div> 14 </body> 15 </html>
1 //建立標籤 2 let $pEle=$('<p>') 3 4 //設定值 5 $pEle.text('一年過去一半啦') 6 7 //設定屬性 8 $pEle.attr('id','d1') 9 10 //檢視屬性 11 $pEle 12 13 //獲取值 14 $pEle[0] 15 <p id="d1">一年過去一半啦</p> 16 17 //將p標籤新增到div裡面 18 $('#d1').append($pEle) 19 20 //往哪裡新增內容 21 $pEle.appendTo($('#d1')) 22 23 //前面新增 24 $('#d1').prepend($pEle) 25 26 $pEle.prependTo($('#d1')) 27 28 //後面新增 29 $('#d2').after($pEle) 30 31 //同級別插入 32 $pEle.insertAfter($('#d1')) 33 34 //在某個標籤前面新增 35 $('#d1').before($pEle) 36 37 $pEle.insertBefore($('#d2')) 38 39 //刪除某個標籤 40 $('#d1').remove() 41 42 //清空標籤內部所有的內容 43 $('#d1').empty()
。
。
【事件】
（繫結事件的兩種方式）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="JQ.js"></script> 7 </head> 8 <body> 9 <button id="d1">看我</button> 10 <button id="d2">別看我</button> 11 12 <script> 13 // 第一種 14 $("#d1").click(function () { 15 alert("我出來了") 16 }); 17 // 第二種(功能更加強大，還支援事件委託) 18 $("#d2").on("click", function () { 19 alert("快走啊") 20 }) 21 </script> 22 </body> 23 </html>
（克隆事件）
補充：this代指的是當前被操作的標籤物件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="JQ.js"></script> 7 <style> 8 #d1 { 9 width: 100px; 10 height: 100px; 11 background-color: aqua; 12 border: 1px solid blue; 13 } 14 </style> 15 </head> 16 <body> 17 <button id="d1">屠龍寶刀，點選就送</button> 18 19 <script> 20 $('#d1').on('click', function () { 21 // console.log(this) this 指代的是當前被操作的標籤物件 22 // $(this).clone().insertAfter($('body')) //只能克隆html和css樣式，不能克隆事件 23 $(this).clone(true).insertAfter($('body')) //可以克隆html和css樣式，也可以克隆事件 24 }) 25 </script> 26 </body> 27 </html>
（自定義模態框事件）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="JQ.js"></script> 7 <style> 8 .cover { 9 position: fixed; 10 top: 0; 11 left: 0; 12 right: 0; 13 bottom: 0; 14 background-color: rgba(128, 128, 128, 0.5); 15 z-index: 99; 16 } 17 18 .modal { 19 position: fixed; 20 height: 400px; 21 width: 600px; 22 background-color: white; 23 top: 50%; 24 left: 50%; 25 margin-left: -300px; 26 margin-top: -200px; 27 z-index: 1000; 28 } 29 30 .hide { 31 display: none; 32 } 33 </style> 34 </head> 35 <body> 36 <div>我是最下面的</div> 37 <button id="d1">給我出來</button> 38 <div class="cover hide"></div> 39 <div class="modal hide"> 40 <p>username:<input type="text"></p> 41 <p>password:<input type="password"></p> 42 <input type="button" value="確認" id="d3"> 43 <input type="button" value="取消" id="d2"> 44 </div> 45 46 <script> 47 let $coverEle = $('.cover'); 48 let $modalEle = $('.modal'); 49 $('#d1').click(function () { 50 //將兩個div標籤的hide類屬性移除 51 $coverEle.removeClass('hide'); 52 $modalEle.removeClass('hide'); 53 }) 54 55 $('#d2').on('click', function () { 56 $coverEle.addClass('hide'); 57 $modalEle.addClass('hide'); 58 }) 59 </script> 60 </body> 61 </html>
（左側選單事件）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="JQ.js"></script> 7 <style> 8 .left { 9 float: left; 10 background-color: darkgray; 11 width: 20%; 12 height: 100%; 13 position: fixed; 14 } 15 16 .title { 17 font-size: 36px; 18 color: white; 19 text-align: center; 20 } 21 22 .items { 23 border: 1px solid black; 24 } 25 26 .hide { 27 display: none; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="left"> 33 <div class="menu"> 34 <div class="title">選單一 35 <div class="items">111</div> 36 <div class="items">222</div> 37 <div class="items">333</div> 38 </div> 39 <div class="title">選單二 40 <div class="items">111</div> 41 <div class="items">222</div> 42 <div class="items">333</div> 43 </div> 44 <div class="title">選單三 45 <div class="items">111</div> 46 <div class="items">222</div> 47 <div class="items">333</div> 48 </div> 49 </div> 50 </div> 51 52 <script> 53 $(".title").click(function () { 54 //先給所有的items加hide(隱藏) 55 $(".items").addClass("hide"); 56 //再給當前的items去hide 57 $(this).children().removeClass("hide"); 58 }) 59 </script> 60 </body> 61 </html>
（返回頂部事件）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="JQ.js"></script> 7 <style> 8 .hide { 9 display: none; 10 } 11 12 #d1 { 13 position: fixed; 14 background-color: orange; 15 bottom: 20px; 16 right: 20px; 17 width: 50px; 18 height: 50px; 19 20 } 21 </style> 22 </head> 23 <body> 24 <a href="" id="d1"></a> 25 <div style="height: 500px;background-color: red"></div> 26 <div style="height: 500px;background-color: greenyellow"></div> 27 <div style="height: 500px;background-color: blue"></div> 28 <a href="#d1" class="hide">回到頂部</a> 29 30 <script> 31 $(window).scroll(function () { 32 if ($(window).scrollTop() > 300) { 33 $("#d1").removeClass("hide") 34 } else { 35 $("#d1").addClass("hide") 36 } 37 }) 38 </script> 39 </body> 40 </html>
（自定義登入校驗提示資訊事件）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="JQ.js"></script> 7 </head> 8 <body> 9 <p>username: 10 <input type="text" id="username"> 11 <span style="color: red"></span> 12 </p> 13 <p>password: 14 <input type="text" id="password"> 15 <span style="color: orange"></span> 16 </p> 17 <button id="d1">提交</button> 18 19 <script> 20 let $userName = $('#username'); 21 let $passWord = $('#password'); 22 $('#d1').click(function () { 23 //獲取使用者輸入的使用者名稱和密碼，做校驗 24 let userName = $userName.val(); 25 let passWord = $passWord.val(); 26 if (!userName) { 27 $userName.next().text('使用者名稱不能為空'); 28 return false; 29 } 30 if (!passWord) { 31 $passWord.next().text('密碼不能為空'); 32 return false; 33 } 34 }) 35 36 //失去焦點時，清空錯誤提示 37 $('input').focus(function () { 38 $(this).next().text('') 39 }) 40 </script> 41 </body> 42 </html>
（input實時監控事件）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="JQ.js"></script> 7 </head> 8 <body> 9 <input type="text" id="d1"> 10 11 <script> 12 $("#d1").on("input", function () { 13 console.log(this.value) 14 }) 15 16 </script> 17 </body> 18 </html>
（hover事件）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="JQ.js"></script> 7 </head> 8 <body> 9 <p id="d1">到家了就是幹活</p> 10 11 <script> 12 // $('#d1').hover(function () { 13 // alert('換圍裙') 14 // //滑鼠懸浮+滑鼠移開就觸發 15 // }) 16 $('#d1').hover( 17 function () { 18 alert('好吧') 19 }, 20 function () { 21 alert('不吧') 22 }) 23 </script> 24 </body> 25 </html>
(按鍵按下事件：就是我敲了哪些鍵盤，反饋給我的數字)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="JQ.js"></script> 7 </head> 8 <body> 9 <script> 10 $(window).keydown(function (event) { 11 console.log(event.keyCode) 12 if (event.keyCode === 13) { 13 alert.log("你按了Enter鍵") 14 } 15 }) 16 </script> 17 </body> 18 </html>
