jquery-2  jQuery原理和核心方法（多看学习视频）

一、总结

一句话总结：jQuery就是普通的js对象，只不过方法比较多而已，属性就length一个。

 

1、jquery的链式操作的底层原理是什么？

一个方法执行完之后返回本身对象

28     obj.say=function(){
29         alert('my name is :'+this.username);
30         return this;
31     }
40 // 对象链式结构
41 $('imgid').say().eat();


 

2、所有链式操作的原理是什么（jquery，thinkphp）？

方法执行完返回对象

 

3、jquery函数体中和js函数体中地位是否一样？

完全一样，jquery只不过是对js进行了一些轻量级的封装而已

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>


 

4、dom对象如何转成jquery对象？

在dom对象上面加上$()，$(dom)

 

5、this对象和$(this)的区别？

两者都是指向当前对象，只不过this对象是dom对象，$(this)是jquery对象，区别是dom对象指行dom的方法，jquery对象执行jquery的方法

 

6、jquery选择器选择出来的东西的本质是什么，比如$('h1')？

dom对象数组，而这个dom对象数组是一个jquery对象，所以jquery选择器选出来的东西都可以执行jquery的方法，并且加上下标能转化为dom对象

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


 

7、jquery对象（本质是dom对象列表）如何转化成dom对象？

$('h1')[1];

$('h1').get(1);

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


8、jquery的get()方法得到的是什么，比如$('h1').get()？

dom对象数组

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


 

9、jquery中的唯一属性？

length

 

10、jquery中获取jquery对象的两种方法？

size()方法和length属性

 

11、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 });


 

12、each方法作用？

因为jquery对象多为dom的数组，所以就是遍历

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


 

13、jquery如何获取当前元素的索引值？

index方法

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


 

14、jquery除什么之外的方法？

not方法

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


 

15、js对象和jquery对象的区别是什么?

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

 

16、js对象和jquery对象的方法能不能共用?

不能共用

 

17、js对象和jquery对象能不能互换?(能)

1.js对象->jquery对象

$(dom);


2.jquery对象->js对象

$('h1')[1];

$('h1').get(1);


18、jquery核心方法有哪些？

size();

length;

get();

get(index);

each();

index();

data();

 

二、jQuery原理和核心方法

1、相关知识点

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();

 

 

2、代码

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>


 

 

 

 

 

 

 

 

 

 


 


我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站： ​​fanrenyi.com​​；有各种前端、后端、算法、大数据、人工智能等课程。

​​版权申明：欢迎转载，但请注明出处​​

一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。

博主25岁，前端后端算法大数据人工智能都有兴趣。