13 -3 jquery选择器和 jquery动画

时间 2021-04-13

标签 javascript css html java jquery json ide 函数 post 动画栏目 JQuery 繁體版

原文原文链接

一选择器：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 Codejava

2 层级选择器jquery

例子：json

 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 基本过滤选择器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: none10         }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 Codepost

4 属性选择器动画

例子：

 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 :last14         $('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>

View Code