欢迎访问 生活随笔！
TAG聚合

生活随笔

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

编程问答

jquery-1 jquery几个小实例

发布时间：2025/4/16 编程问答 1 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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几个小实例的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。