jquery-2 jQuery原理和核心方法（多看學習視頻）

時間 2020-05-22

原文原文鏈接

jquery-2 jQuery原理和核心方法（多看學習視頻）

1、總結

一句話總結：jQuery就是普通的js對象，只不過方法比較多而已，屬性就length一個。

一、jquery的鏈式操做的底層原理是什麼？

一個方法執行完以後返回自己對象javascript

28     obj.say=function(){
29         alert('my name is :'+this.username);
30         return this;
31     }

40 // 對象鏈式結構
41 $('imgid').say().eat();

二、全部鏈式操做的原理是什麼（jquery，thinkphp）？

方法執行完返回對象php

三、jquery函數體中和js函數體中地位是否同樣？

徹底同樣，jquery只不過是對js進行了一些輕量級的封裝而已css

21 <script>
22 imgobj=document.getElementById('imgid');
23 // imgobj.onclick=function(){
24 //     this.src='b.png';
25 // }
26 
27 $(imgobj).click(function(){
28     this.src='b.png'; 
29 });
30 </script>

四、dom對象如何轉成jquery對象？

在dom對象上面加上$()，$(dom)html

五、this對象和$(this)的區別？

二者都是指向當前對象，只不過this對象是dom對象，$(this)是jquery對象，區別是dom對象指行dom的方法，jquery對象執行jquery的方法java

六、jquery選擇器選擇出來的東西的本質是什麼，好比$('h1')？

dom對象數組，而這個dom對象數組是一個jquery對象，因此jquery選擇器選出來的東西均可以執行jquery的方法，而且加上下標能轉化爲dom對象jquery

23 val=$('h1')[1].outerHTML;

七、jquery對象（本質是dom對象列表）如何轉化成dom對象？

$('h1')[1];
$('h1').get(1);linux

23 val=$('h1').get(1).outerHTML;

八、jquery的get()方法獲得的是什麼，好比$('h1').get()？

dom對象數組thinkphp

22 <script>
23 arr=$('h1').get();
24 alert(arr[0].outerHTML);
25 alert(arr[1].outerHTML);
26 </script>

九、jquery中的惟一屬性？

length數組

十、jquery中獲取jquery對象的兩種方法？

size()方法和length屬性框架

十一、jquery中attr()方法的實質是什麼？

js中的setAttribute()和getAttribute

26 $('h1').each(function(i){ 27  $('h1').get()[i].setAttribute('num',i+1); 28 }); 29 30 $('h1').click(function(){ 31 this.innerHTML=this.getAttribute('num'); 32 });

十二、each方法做用？

由於jquery對象多爲dom的數組，因此就是遍歷

26 $('h1').each(function(i){ 27  $(this).attr({'num':i+1}); 28 });

1三、jquery如何獲取當前元素的索引值？

index方法

76  idx=$(this).index('.menu li');

1四、jquery除什麼以外的方法？

not方法

79  $('.info p').not($('.info p').eq(idx)).hide();

1五、js對象和jquery對象的區別是什麼?

jquery就是js中的new Object生成的普通對象

1六、js對象和jquery對象的方法能不能共用?

不能共用

1七、js對象和jquery對象能不能互換?(能)

1.js對象->jquery對象
$(dom);

2.jquery對象->js對象
$('h1')[1];
$('h1').get(1);

1八、jquery核心方法有哪些？

size();
length;
get();
get(index);
each();
index();
data();

2、jQuery原理和核心方法

一、相關知識點

jQuery框架:
1.js對象和jquery對象的區別
2.js對象和jquery對象的轉換
3.核心方法
4.選擇器
5.篩選
6.屬性選擇器
7.文檔處理
8.CSS處理
9.事件
10.效果
11.Ajax無刷新
12.工具

js對象和jquery對象的區別是什麼?
jquery就是js中的new Object生成的普通對象

js對象和jquery對象的方法能不能共用?
不能共用

js對象和jquery對象能不能互換?(能)
1.js對象->jquery對象
$(dom);

2.jquery對象->js對象
$('h1')[1];
$('h1').get(1);

核心方法:
size();
length;
get();
get(index);
each();
index();
data();

二、代碼

jquery對象原型開發

 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>aaaaaaaaaaaaaaa</h1>
20     <h1>aaaaaaaaaaaaaaa</h1>
21     <h1>aaaaaaaaaaaaaaa</h1>
22     <h1>aaaaaaaaaaaaaaa</h1>
23 </body>
24 <script>
25 function $(attr){ 26  obj=new Object(); 27  obj.username='user123'; 28  obj.say=function(){ 29  alert('my name is :'+this.username); 30         return this; 31  } 32 
33  obj.eat=function(){ 34  alert('my am eating!'); 35  } 36 
37     return obj; 38 } 39 
40 // 對象鏈式結構
41 $('imgid').say().eat(); 42 </script>
43 </html>

把dom對象轉成jquery對象

 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     <img src="a.png" id="imgid">    
20 </body>
21 <script>
22 imgobj=document.getElementById('imgid'); 23 // imgobj.onclick=function(){
24 // this.src='b.png';
25 // }
26 
27 $(imgobj).click(function(){ 28     this.src='b.png'; 29 }); 30 </script>
31 </html>

js對象和jquery對象互換

 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     <img src="a.png" id="imgid">    
20 </body>
21 <script>
22 imgobj=document.getElementById('imgid'); 23 
24 $(imgobj).click(function(){ 25     this.src='b.png'; 26     // $(this).attr({'src':'b.png'});
27 }); 28 </script>
29 </html>

jquery對象轉成js對象

 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>aaaaaaaaaaaaaaaaaaa</h1>
20     <h1>bbbbbbbbbbbbbbbbbbb</h1>
21 </body>
22 <script>
23 val=$('h1')[1].outerHTML; 24 alert(val); 25 </script>
26 </html>

jquery對象轉成js對象2

 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>aaaaaaaaaaaaaaaaaaa</h1>
20     <h1>bbbbbbbbbbbbbbbbbbb</h1>
21 </body>
22 <script>
23 val=$('h1').get(1).outerHTML; 24 alert(val); 25 </script>
26 </html>

把jquery對象轉成js對象數組

 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>aaaaaaaaaaaaaaaaaaa</h1>
20     <h1>bbbbbbbbbbbbbbbbbbb</h1>
21 </body>
22 <script>
23 arr=$('h1').get(); 24 alert(arr[0].outerHTML); 25 alert(arr[1].outerHTML); 26 </script>
27 </html>

size和length獲取jquery對象中dom對象的個數

 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>aaaaaaaaaaaaaaaaaaa</h1>
20     <h1>bbbbbbbbbbbbbbbbbbb</h1>
21 </body>
22 <script>
23 alert($('h1').size()); 24 alert($('h1').length); 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  select{
12  width:100px;
13  height:150px;
14         }
15     </style>
16     <script src="jquery.js"></script>
17 </head>
18 <body>
19     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
20     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
21     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
22     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
23     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
24 </body>
25 <script>
26 $('h1').each(function(i){ 27  $('h1').get()[i].setAttribute('num',i+1); 28 }); 29 
30 $('h1').click(function(){ 31     this.innerHTML=this.getAttribute('num'); 32 }); 33 </script>
34 </html>

each遍歷jquery對象

 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>aaaaaaaaaaaaaaaaaaaaaa</h1>
20     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
21     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
22     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
23     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
24 </body>
25 <script>
26 $('h1').each(function(i){ 27  $(this).attr({'num':i+1}); 28 }); 29 
30 $('h1').click(function(){ 31  $(this).html($(this).attr('num')); 32 }); 33 </script>
34 </html>

index搜索匹配的元素,並返回相應元素的索引值

 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  margin:0px;
10  padding:0px;
11         }
12         
13  .menu{
14  height:50px;
15  background: #272822;
16  line-height: 50px;
17         }        
18 
19  .menu ul{
20  list-style:none;
21         }
22 
23  .menu ul li{
24  float: left;
25  color:#fff;
26  margin-left:15px;
27  line-height: 50px;
28  width:100px;
29  text-align:center;
30         }
31 
32  .menu ul li:hover{
33  cursor: pointer;
34  background: #ccc;    
35         }
36 
37  .info{
38  height:200px;
39  background: #ccc;
40  overflow: hidden;
41  padding:15px;
42         }
43 
44  .info p{
45  display: none;
46         }
47 
48  .info p:first-child{
49  display: block;
50         }
51 
52  .menu a:hover{
53  background: #ccc;
54         }
55     </style>
56     <script src="jquery.js"></script>
57 </head>
58 <body>
59     <div class='menu'>
60         <ul>
61             <li>linux</li>
62             <li>php</li>
63             <li>javascript</li>
64         </ul>    
65     </div>
66 
67     <div class='info'>
68         <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!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!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>    
69 
70         <p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>    
71         <p>javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!</p>    
72     </div>
73 </body>
74 <script>
75 $('.menu li').mouseenter(function(){ 76  idx=$(this).index('.menu li'); 77 
78  $('.info p').eq(idx).show(); 79  $('.info p').not($('.info p').eq(idx)).hide(); 80 }); 81 </script>
82 </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  margin:0px;
10  padding:0px;
11         }
12         
13  .menu{
14  height:50px;
15  background: #272822;
16  line-height: 50px;
17         }        
18 
19  .menu ul{
20  list-style:none;
21         }
22 
23  .menu ul li{
24  float: left;
25  color:#fff;
26  margin-left:15px;
27  line-height: 50px;
28  width:100px;
29  text-align:center;
30         }
31 
32  .menu ul li:hover{
33  cursor: pointer;
34  background: #ccc;    
35         }
36 
37  .info{
38  height:200px;
39  background: #ccc;
40  overflow: hidden;
41  padding:15px;
42         }
43 
44  .info p{
45  display: none;
46         }
47 
48  .info p:first-child{
49  display: block;
50         }
51 
52  .menu a:hover{
53  background: #ccc;
54         }
55     </style>
56     <script src="jquery.js"></script>
57 </head>
58 <body>
59     <div class='menu'>
60         <ul>
61             <li>linux</li>
62             <li>php</li>
63             <li>javascript</li>
64         </ul>    
65     </div>
66 
67     <div class='info'>
68         <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!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!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>    
69 
70         <p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>    
71         <p>javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!javascript is very much!</p>    
72     </div>
73 </body>
74 <script>
75 $('.menu li').eq(0).css({'background':'#ccc'}); 76 
77 $('.menu li').mouseenter(function(){ 78  $(this).css({'background':'#ccc'}); 79  $('.menu li').not($(this)).css({'background':'#272822'}); 80 
81 
82  idx=$(this).index('.menu li'); 83 
84  $('.info p').eq(idx).show(); 85  $('.info p').not($('.info p').eq(idx)).hide(); 86 }); 87 </script>
88 </html>

data往jquery對象身上賦值

 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>aaaaaaaaaaaaaaaaaaaaaa</h1>
20     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
21     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
22     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
23     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
24 </body>
25 <script>
26 $('h1').each(function(i){ 27  $(this).data({'num':i+1}); 28 }); 29 
30 $('h1').click(function(){ 31  $(this).html($(this).data('num')); 32 }); 33 </script>
34 </html>