13 -3 jquery選擇器和 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
相關文章
- 1. 13 -3 jquery選擇器和 jquery動畫
- 2. jquery-3 jquery選擇器
- 3. jQuery--(3)選擇器
- 4. jQuery選擇器3
- 5. jQuery和jQuery選擇器
- 6. JQuery：選擇器、動畫、AJAX請求
- 7. jQuery-jQuery選擇器
- 8. jQuery 3教程(二)：jQuery選擇器
- 9. jQuery選擇器和事件
- 10. css選擇器和jQuery選擇器
- 更多相關文章...
- • jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
- • XQuery 選擇 和 過濾 - XQuery 教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
歡迎關注本站公眾號,獲取更多信息
相關文章