jquery-1 jquery几个小实例
生活随笔
收集整理的這篇文章主要介紹了
jquery-1 jquery几个小实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jquery-1? jquery幾個小實例
一、總結
一句話總結：jquery真的是簡單加簡便。
1、jquery中改變多個css屬性怎么整？
可以鏈式連接方式，也可以大括號整多個。中間是鍵值對加引號的形式，和在css中寫很像。css中寫左邊沒有引號。右邊也沒有引號
64 function(){ 65 $(this).animate({ 66 'margin-left':'0px' 67 },500); 68 }?
?
二、jquery幾個小實例
toggle循環單擊
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微軟雅黑; 9 } 10 </style> 11 <script src="jquery.js"></script> 12 </head> 13 <body> 14 <img src="a.png" alt=""> 15 </body> 16 <script> 17 $('img').toggle( 18 function(){ 19 this.src='b.png'; 20 }, 21 function(){ 22 this.src='a.png'; 23 } 24 ); 25 </script> 26 </html>hover鼠標循環移入移出
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微軟雅黑; 9 } 10 </style> 11 <script src="jquery.js"></script> 12 </head> 13 <body> 14 <img src="a.png" alt=""> 15 </body> 16 <script> 17 $('img').hover( 18 function(){ 19 this.src='b.png'; 20 }, 21 function(){ 22 this.src='a.png'; 23 } 24 ); 25 </script> 26 </html>酒仙網左滑右滑特效
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微軟雅黑; 9 } 10 11 .jiu{ 12 width:180px; 13 overflow: hidden; 14 float: left; 15 margin-left:35px; 16 margin-top:15px; 17 } 18 19 </style> 20 <script src="jquery.js"></script> 21 </head> 22 <body> 23 <div class='jiu'> 24 <img src="jiu.jpg" alt=""> 25 </div> 26 <div class='jiu'> 27 <img src="jiu.jpg" alt=""> 28 </div> 29 <div class='jiu'> 30 <img src="jiu.jpg" alt=""> 31 </div> 32 <div class='jiu'> 33 <img src="jiu.jpg" alt=""> 34 </div> 35 <div class='jiu'> 36 <img src="jiu.jpg" alt=""> 37 </div> 38 <div class='jiu'> 39 <img src="jiu.jpg" alt=""> 40 </div> 41 <div class='jiu'> 42 <img src="jiu.jpg" alt=""> 43 </div> 44 <div class='jiu'> 45 <img src="jiu.jpg" alt=""> 46 </div> 47 <div class='jiu'> 48 <img src="jiu.jpg" alt=""> 49 </div> 50 <div class='jiu'> 51 <img src="jiu.jpg" alt=""> 52 </div> 53 <div class='jiu'> 54 <img src="jiu.jpg" alt=""> 55 </div> 56 </body> 57 <script> 58 $('img').hover( 59 function(){ 60 $(this).animate({ 61 'margin-left':'-100px' 62 },500); 63 }, 64 function(){ 65 $(this).animate({ 66 'margin-left':'0px' 67 },500); 68 } 69 ); 70 </script> 71 </html>單擊標題切換內容
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微軟雅黑; 9 } 10 11 </style> 12 <script src="jquery.js"></script> 13 </head> 14 <body> 15 <h1>linux</h1> 16 <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p> 17 18 <h1>linux</h1> 19 <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p> 20 21 <h1>linux</h1> 22 <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p> 23 24 <h1>linux</h1> 25 <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p> 26 </body> 27 <script> 28 $('h1').click(function(){ 29 $(this).next().toggle(1000); 30 }); 31 </script> 32 </html>水果復制選擇
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微軟雅黑; 9 } 10 11 select{ 12 width:100px; 13 height:150px; 14 } 15 </style> 16 <script src="jquery.js"></script> 17 </head> 18 <body> 19 <h1>水果選擇:</h1> 20 <form action="javascript:"> 21 <select name="" id="s1" size='2'> 22 <option value="">西瓜</option> 23 <option value="">冬瓜</option> 24 <option value="">蘋果</option> 25 <option value="">南瓜</option> 26 </select> 27 28 <input type="button" value=">>" id='btn'> 29 30 <select name="" id="s2" size='2'> 31 </select> 32 </form> 33 </body> 34 <script> 35 $('#btn').click(function(){ 36 $('#s1 option:selected').clone().appendTo('#s2'); 37 }); 38 </script> 39 </html>水果移動選擇
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微軟雅黑; 9 } 10 11 select{ 12 width:100px; 13 height:150px; 14 } 15 </style> 16 <script src="jquery.js"></script> 17 </head> 18 <body> 19 <h1>水果選擇:</h1> 20 <form action="javascript:"> 21 <select name="" id="s1" size='2'> 22 <option value="">西瓜</option> 23 <option value="">冬瓜</option> 24 <option value="">蘋果</option> 25 <option value="">南瓜</option> 26 </select> 27 28 <input type="button" value=">>" id='btn'> 29 30 <select name="" id="s2" size='2'> 31 </select> 32 </form> 33 </body> 34 <script> 35 $('#btn').click(function(){ 36 $('#s1 option:selected').appendTo('#s2'); 37 }); 38 </script> 39 </html>?
?
?
?
?
?
?
總結
以上是生活随笔為你收集整理的jquery-1 jquery几个小实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php实现 明明的随机数
- 下一篇： 无监督学习：从基本概念到四种实现模型