13 -3 jquery選擇器和 jquery動畫

時間 2019-11-29

原文原文鏈接

一選擇器：javascript

1 基本選擇器css

例子：html

 1 <!--id  類  標籤-->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>基本選擇器</title>
 7 </head>
 8 <body>
 9     <div></div>
10     <div id="box"></div>
11     <div class="box"></div>
12     <div class="box"></div>
13     <div></div>
14     <script src="jquery-3.3.1.min.js"></script>
15     <script>
16         $(function () {
17             //三種獲取方式
18             var jqbox1=$("#box");
19             var jqbox2=$(".box");
20             var jqbox3=$("div");
21             //操做標籤選擇器
22             jqbox3.css('width',100);
23             jqbox3.css('height',100);
24             jqbox3.css('backgroundColor','red');
25             jqbox3.css('margin-top',10);
26             //操做類選擇器
27             jqbox2.css({
28                 'background':'green'
29             });
30             jqbox2.text('哈哈哈');
31             //操做id選擇器
32             jqbox1.css('backgroundColor','yellow');
33      })
34 
35     </script>
36 
37 </body>
38 </html>

View Code

2 層級選擇器java

例子：jquery

 1 <!--$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")-->
 2 <!--層級選擇器就是選擇符後面的那個元素，好比div>p是選擇>後面的p元素-->
 3 <!DOCTYPE html>
 4 <html lang="en">
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>層級選擇器</title>
 8 </head>
 9 <body>
10 <script src="jquery-3.3.1.min.js"></script>
11 <script>
12     $(function () {
13         //後代選擇器，空格
14         var jqli=$("ul li");
15         jqli.css('margin',5);
16         jqli.css('background','pink');
17         //子代選擇器，只應用於親兒子
18         var jqli1=$('ul >li');
19         jqli1.css('background','red');
20         //緊鄰選擇器
21         var jqli2=$("ul + p");
22         jqli2.css('color','blue');
23         //兄弟選擇器
24         var jqli3=$('ul ~p');
25         jqli3.css('color','red');
26 
27     })
28 </script>
29 <ul>
30     <li>111</li>
31     <li>222</li>
32     <li>333</li>
33     <ol>
34         <li>aaa</li>
35         <li>bbb</li>
36         <li>ccc</li>
37     </ol>
38 </ul>
39 <p>我是p標籤</p>
40 <p>風捲殘雲</p>
41 </body>
42 </html>

3 基本過濾選擇器json

例子：ide

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>基本過濾選擇器</title>
 6     <style>
 7         li{
 8 
 9             list-style-type: none
10         }
11     </style>
12 </head>
13 <body>
14   <ul>
15             <li>哈哈哈哈，基本過濾選擇器</li>
16             <li>嘿嘿嘿</li>
17             <li>天王蓋地虎</li>
18             <li>小雞燉蘑菇</li>
19 
20   </ul>
21   <script src="jquery-3.3.1.min.js"></script>
22   <script>
23       $(function () {
24           //奇數
25           $('li:odd').css('color','red');
26           //選擇索引值爲0的元素
27           $('li:eq(0)').css('font-size','40px');
28           //選擇索引值大於1的
29           $('li:gt(1)').css('font-size','30px');
30           //選擇索引值小於1的
31            $('li:lt(1)').css('font-size','20px');
32 
33 
34       })
35   </script>
36 </body>
37 </html>

View Code

4 屬性選擇器函數

例子：post

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>屬性選擇器</title>
 6 </head>
 7 <body>
 8 <script src="jquery-3.3.1.min.js"></script>
 9 <script>
10     //標籤名[屬性名] 查找全部含有id屬性的該標籤名的元素
11     $(function () {
12         $('li[id]').css('color','red');
13         //匹配li標籤屬性是what的元素
14         $('li[class=what]').css('font-size','30px');
15         //匹配li標籤class 不等於waht的元素
16         $('li[class!=what]').css('font-size','40px');
17         //匹配以username開頭的元素
18         $('input[name^=username]').css('background','gray');
19         //匹配以222結尾的元素
20         $('input[name$=222]').css('background','greenyellow');
21          //匹配給定的屬性是以包含某些值的元素
22         $('button[class*=btn]').css('background','red')
23 
24 
25 
26     })
27 </script>
28 <div id="box">
29             <h2 class="title">屬性選擇器</h2>
30             <!--<p class="p1">我是一個段落</p>-->
31             <ul>
32                 <li id="li1">分手應該體面</li>
33                 <li class="what" id="li2">分手應該體面</li>
34                 <li class="what">分手應該體面</li>
35                 <li class="heihei">分手應該體面</li>
36 
37             </ul>
38 
39             <form action="" method="post">
40 
41                 <input name="username" type='text' value="1" checked="checked"></input>
42                 <input name="username1111" type='text' value="1"></input>
43                 <input name="username2222" type='text' value="1"></input>
44                 <input name="abcusername3333" type='text' value="1"></input>
45                 <button class="btn-default">按鈕1</button>
46                 <button class="btn-info">按鈕1</button>
47                 <button class="bt-success">按鈕1</button>
48                 <button class="btn-danger">按鈕1</button>
49 
50             </form>
51 </div>
52 
53 </body>
54 </html>

View Code

5 篩選選擇器動畫

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>篩選選擇器</title>
 6 </head>
 7 <body>
 8 <script src="jquery-3.3.1.min.js"></script>
 9 <script>
10     $(function () {
11         //獲取第n個元素 數值從0開始
12         $('span').eq(1).css('color','green');
13           //獲取第一個元素和最後一個元素 :first :last
14         $('span').last().css('color','greenyellow');
15          $('span').first().css('color','black');
16          //查找span標籤的父元素（親的）
17          $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});
18          //選擇全部的兄弟元素（不包括本身）
19          $('.list').siblings('li').css('color','red');
20          //查找全部的後代元素
21         $('div').find('button').css('background','yellow');
22          //不寫參數表明獲取全部子元素。
23        $('ul').children().css("background", "green");
24        $('ul').children("li").css("margin-top", 10);
25 
26 
27     })
28 </script>
29   <div id="box">
30             <p class="p1">
31                 <span>我是第一個span標籤</span>
32                 <span>我是第二個span標籤</span>
33                 <span>我是第三個span標籤</span>
34             </p>
35             <button>按鈕</button>
36   </div>
37         <ul>
38             <li class="list">2</li>
39             <li>3</li>
40             <li>4</li>
41             <li>5</li>
42         </ul>
43 </body>
44 </html>

View Code

二動畫

1 顯示動畫

方式一：

  $("div").show();

解釋：無參數，表示讓指定的元素直接顯示出來。其實這個方法的底層就是經過display: block;實現的。

方式二：

$('div').show(3000);

解釋：經過控制元素的寬高、透明度、display屬性，逐漸顯示，2秒後顯示完畢。

方式三：

 $("div").show("slow");

參數能夠是：

slow 慢：600ms
normal 正常：400ms
fast 快：200ms

2 隱藏動畫

1 $(selector).hide();
2 
3     $(selector).hide(1000); 
4 
5     $(selector).hide("slow");
6 
7     $(selector).hide(1000, function(){});

例子：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #box{
 8                 width: 200px;
 9                 height: 200px;
10                 background-color: green;
11                 border: 1px solid red;
12                 display: none;
13             }
14         </style>
15     </head>
16     <body>
17         <div id="box">        
18         </div>
19         <button id="btn">隱藏</button>    
20     </body>
21     <script src="jquery-3.3.1.js"></script>
22     
23     <script type="text/javascript">
24         
25         //jquery 提供了一些方法 show() hide() 控制元素顯示隱藏
26         var isShow = true;
27         $('#btn').click(function(){
28             if(isShow){
29                 $('#box').show('slow',function(){
30                     $(this).text('盒子出來了');            
31                     $('#btn').text('顯示');
32                     isShow = false;
33                 })
34             }else{
35                 $('#box').hide(2000,function(){
36                     $(this).text('');    
37                     $('#btn').text('隱藏');
38                     isShow = true;
39                     
40                 })
41             }
42         })
43     
44         
45     </script>
46 </html>

View Code

3 開關式顯示隱藏動畫

$('#box').toggle(3000,function(){});

顯示和隱藏的來回切換採用的是toggle()方法：就是先執行show()，再執行hide()。

例子：

 1 $('#btn').click(function(){
 2             $('#box').toggle(3000,function(){
 3                 $(this).text('盒子出來了');    
 4                 if ($('#btn').text()=='隱藏') {
 5                     $('#btn').text('顯示');    
 6                 }else{
 7                     $('#btn').text('隱藏');    
 8                 }
 9             });
10         })

4 滑入滑出

$(selector).slideToggle(speed, 回調函數);

5 淡入淡出

$(selector).fadeToggle('fast', callback);

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>動畫效果</title>
 6     <style>
 7     .box{
 8              position: absolute;
 9             left: 20px;
10             top: 30px;
11             width: 100px;
12             height: 100px;
13             background-color: green;
14         display: none;
15         }
16     </style>
17 </head>
18 <body>
19 <button id="btn">顯示</button>
20 <div class="box"></div>
21 <script src="jquery-3.3.1.min.js"></script>
22 <script>
23     $(function () {
24         // var isShow =true;
25         // $('#btn').click(function () {
26         //     var _this=$(this);
27         //     if (isShow){
28         //          $('.box').show(2000,function () {
29         //               _this.text('隱藏');
30         //
31         //          });
32         //
33         //          isShow=false;
34         //     }else{
35         //         $('.box').hide(2000);
36             //         isShow = true;
37             //         $(this).text('顯示');
38         //     }
39         // })
40         //第二種簡單寫法
41         $('#btn').click(function () {
42             // // $('.box').stop().toggle('2000');
43             //滑入滑出
44             // $('.box').stop().slideToggle(2000,function () {
45             //
46             // })
47             //淡入淡出動畫效果
48             $('.box').stop().fadeToggle(1000, function() {
49 
50             });
51 
52 
53 
54 
55         })
56 
57     })
58 
59 </script>
60 
61 
62 </body>
63 </html>

View Code

三 自定義動畫

語法：

 $(selector).animate({params}, speed, callback);

做用：執行一組CSS屬性的自定義動畫。

第一個參數表示：要執行動畫的CSS屬性（必選）
第二個參數表示：執行動畫時長（可選）
第三個參數表示：動畫執行完後，當即執行的回調函數（可選）

例子：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div {
 8             position: absolute;
 9             left: 20px;
10             top: 30px;
11             width: 100px;
12             height: 100px;
13             background-color: green;
14         }
15     </style>
16     <script src="jquery-3.3.1.min.js"></script>
17     <script>
18         jQuery(function () {
19             $("button").click(function () {
20                 var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
21                 var json2 = {
22                     "width": 100,
23                     "height": 100,
24                     "left": 100,
25                     "top": 100,
26                     "border-radius": 100,
27                     "background-color": 'red'
28                 };
29 
30                 //自定義動畫
31                 $("div").animate(json, 1000, function () {
32                     $("div").animate(json2, 1000, function () {
33                         alert("動畫執行完畢！");
34                     });
35                 });
36 
37             })
38         })
39     </script>
40 </head>
41 <body>
42 <button>自定義動畫</button>
43 <div></div>
44 </body>
45 </html>

View Code

中止動畫

$(selector).stop(true, false);通常直接寫stop()
鼠標放上顯示下拉菜單
例子：

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style type="text/css">
  7         * {
  8             margin: 0;
  9             padding: 0;
 10         }
 11 
 12         ul {
 13             list-style: none;
 14         }
 15 
 16         .wrap {
 17             width: 330px;
 18             height: 30px;
 19             margin: 100px auto 0;
 20             padding-left: 10px;
 21             background-color: pink;
 22         }
 23 
 24         .wrap li {
 25             background-color: green;
 26         }
 27 
 28         .wrap > ul > li {
 29             float: left;
 30             margin-right: 10px;
 31             position: relative;
 32         }
 33 
 34         .wrap a {
 35             display: block;
 36             height: 30px;
 37             width: 100px;
 38             text-decoration: none;
 39             color: #000;
 40             line-height: 30px;
 41             text-align: center;
 42         }
 43 
 44         .wrap li ul {
 45             position: absolute;
 46             top: 30px;
 47             display: none;
 48         }
 49     </style>
 50     <script src="jquery-3.3.1.min.js"></script>
 51     <script>
 52         //入口函數
 53         $(document).ready(function () {
 54             //需求：鼠標放入一級li中，讓他裏面的ul顯示。移開隱藏。
 55             var jqli = $(".wrap>ul>li");
 56 
 57             //綁定事件
 58             jqli.mouseenter(function () {
 59                 $(this).children("ul").stop().slideDown(1000);
 60             });
 61 
 62             //綁定事件(移開隱藏)
 63             jqli.mouseleave(function () {
 64                 $(this).children("ul").stop().slideUp(1000);
 65             });
 66         });
 67     </script>
 68 
 69 </head>
 70 <body>
 71 <div class="wrap">
 72     <ul>
 73         <li>
 74             <a href="javascript:void(0);">一級菜單1</a>
 75             <ul>
 76                 <li><a href="javascript:void(0);">二級菜單2</a></li>
 77                 <li><a href="javascript:void(0);">二級菜單3</a></li>
 78                 <li><a href="javascript:void(0);">二級菜單4</a></li>
 79             </ul>
 80         </li>
 81         <li>
 82             <a href="javascript:void(0);">二級菜單1</a>
 83             <ul>
 84                 <li><a href="javascript:void(0);">二級菜單2</a></li>
 85                 <li><a href="javascript:void(0);">二級菜單3</a></li>
 86                 <li><a href="javascript:void(0);">二級菜單4</a></li>
 87             </ul>
 88         </li>
 89         <li>
 90             <a href="javascript:void(0);">三級菜單1</a>
 91             <ul>
 92                 <li><a href="javascript:void(0);">三級菜單2</a></li>
 93                 <li><a href="javascript:void(0);">三級菜單3</a></li>
 94                 <li><a href="javascript:void(0);">三級菜單4</a></li>
 95             </ul>
 96         </li>
 97     </ul>
 98 </div>
 99 </body>
100 </html>