jquery-1 jquery幾個小實例

時間 2020-06-22

標籤 jquery 幾個實例欄目 JQuery 简体版

原文原文鏈接

jquery-1 jquery幾個小實例

1、總結

一句話總結：jquery真的是簡單加簡便。

一、jquery中改變多個css屬性怎麼整？

能夠鏈式鏈接方式，也能夠大括號整多個。中間是鍵值對加引號的形式，和在css中寫很像。css中寫左邊沒有引號。右邊也沒有引號javascript

64     function(){
65         $(this).animate({
66             'margin-left':'0px' 67 },500); 68 }

2、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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。