標籤：基礎 tle city 動畫 pac splay lin 選擇 cccccc
這一節將匯總前面的JQuery的基礎執行個體
1.選取器
1.$("this").hide()
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> 6 </script> 7 <script type="text/javascript"> 8 $(function(){ 9 $("button").click(function(){10 $("this").hide(); //this關鍵字隱藏當前對象11 });12 });13 </script>14 </head>15 <body>16 17 <button>點擊我</button>18 19 </body>20 </html>
2.分別通過元素，類和id實現函數
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> 6 </script> 7 <script type="text/javascript"> 8 $(function(){ 9 $(".button1").click(function(){10 $("p").hide(); //會隱藏所有p元素的內容，哪怕p元素含有類或者id11 });12 $(".button2").click(function(){13 $(".p1").hide();14 });15 $(".button3").click(function(){16 $("#p1").hide();17 });18 });19 </script>20 </head>21 <body>22 <p>this is a sentence</p>23 <h1 class="p1">this is a sentence</p>24 <h2 id="p1">this is a sentence</p>25 <button class="button1">通過元素</button>26 <button class="button2">通過類</button>27 <button class="button3">通過id</button>28 </body>29 </html>
2.JQuery事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> 6 </script> 7 <script type="text/javascript"> 8 $(function(){ 9 $(".link_p1").click(function(){ //點擊消失事件10 $("#p1").hide();11 });12 $(".link_p2").dblclick(function(){ //雙擊消失事件13 $("#p2").hide();14 });15 $("#p3").mouseenter(function(){ //滑鼠進入事件16 alert("您進入了");17 });18 $("#p3").mouseleave(function(){ //滑鼠離開事件 ps：hover實現的是mouseenter和mouseleave方法的集合19 alert("您離開了");20 });21 $("#p4").mousedown(function(){ //滑鼠按下事件22 alert("您按下了");23 });24 $("#p4").mouseuo(function(){ //滑鼠按起事件 25 alert("您按起了");26 });27 28 29 30 });31 </script>32 </head>33 <body>34 <p id="p1">點擊事件，點擊之後消失</p>35 <p id="p2">雙擊事件，雙擊之後消失</p>36 <p id="p3">實現滑鼠進入，離開的彈窗事件</p>37 <p id="p4">實現滑鼠按下，按起的彈窗事件</p>38 39 <button class="link_p1">點擊之後，id為p1的段落消失</button>40 <button class="link_p2">雙擊之後，id為p2的段落消失</button>41 42 </body>43 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>W3Cschool教程(w3cschool.cn)</title> 6 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> 7 </script> 8 <script> 9 $(document).ready(function(){10 $("input").focus(function(){ //聚焦事件11 $(this).css("background-color","#cccccc");12 });13 $("input").blur(function(){ //分散事件14 $(this).css("background-color","#000000");15 });16 });17 </script>18 </head>19 <body>20 21 Name: <input type="text" name="fullname"><br>22 Email: <input type="text" name="email">23 24 </body>25 </html>3.隱藏和顯示事件
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $(".hide").click(function(){ $("p").hide(); }); $(".show").click(function(){ $("p").show(); });});</script></head><body><input type="text" id="text"><br><p>如果你點擊“隱藏” 按鈕，我將會消失。</p><button class="hide">隱藏</button><button class="show">顯示</button></body></html>
toggle（）實現隱藏和顯示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> 6 </script> 7 <script> 8 $(document).ready(function(){ 9 $("button").click(function(){10 $("p").toggle("slow");11 });12 });13 </script>14 </head>15 <body>16 17 <button>隱藏/顯示</button>18 <p>這是一個文本段落。</p>19 <p>這是另外一個文本段落。</p>20 </body>21 </html>4.淡入和淡出
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $(".show").click(function(){ $("p").fadeIn(); //其中的參數:speed,easing,callback 其中fadeTo方法與這兩個方法類似，其作用是實現元素的樣式的改變 }); $(".hide").click(function(){ $("p").fadeOut(); //toggle()方法實現淡入和淡出的集合 });});</script><style type="text/css"> p{ display: none; }</style></head><body><p>這句話會淡入和淡出</p><button class="show">點擊淡入</button><button class="hide">點擊淡出</button></body></html>5.下拉和回收
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> 6 </script> 7 <script> 8 $(document).ready(function(){ 9 $(".drow_down").click(function(){10 $(".p2").slideDown(); //實現下拉11 });12 $(".shrink").click(function(){13 $(".p2").slideUp(); //實現收縮14 });15 16 });17 </script>18 19 <style type="text/css">20 .p2{21 display: none;22 }23 </style>24 </style>25 </head>26 <body>27 28 <p class="p1">這句話1</p>29 <p class="p2">這句話2</p>30 <button class="drow_down">點擊下拉</button>31 <button class="shrink">點擊收縮</button>32 33 </body>34 </html>6.動畫的實現
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> 6 </script> 7 <script> 8 $(document).ready(function(){ 9 $("button").click(function(){10 $("div").animate({left:‘250px‘, //值部分需要‘’，且使用逗號分開11 opacity: ‘0.5‘,12 width:‘400px‘,13 height: ‘+=150px‘, //自增部分14 });15 16 });17 });18 </script> 19 </head>20 21 <body>22 <button>開始動畫</button>23 <p> 我們需要將元素的 position 屬性設定為 relative, fixed, 或 absolute!</p>24 <div style="background:#98bf21;height:100px;width:100px;position:absolute;">25 </div>26 27 </body>28 </html>
(未完待續...)
JQuery的執行個體集合
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
