JQ操作標籤--樣式操作、 位置操作、尺寸、 文字操作、 獲取值操作、 屬性操作、文件處理、事件

认真的六六發表於2024-06-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 </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>

相關文章