當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery-1 jquery几个小实例

發布時間：2025/4/16 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 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>

水果移動選擇

總結

以上是生活随笔為你收集整理的jquery-1 jquery几个小实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： php实现明明的随机数
下一篇：无监督学习：从基本概念到四种实现模型