首页 > Web开发 > 详细

jQuery 第一章 实例方法 DOM操作

时间:2019-05-07 22:33:07      阅读:201      评论:0      收藏:0      [点我收藏+]

进一步选择元素相关方法:

  .get()

  .eq()

  .find()

  .filter()

  .not()

  .is()

  .has()

 

  .add()集中操作  .end()回退操作

 

 

  .get()

  $(".class").get()   可以填 $()选择器选出来的dom 索引,  0  1  2  3   -1  -2 ,   不填  取全部dom, 但是

取出来的dom 不再是jquery的对象,而是原生dom, 用get()取出来的 dom  都为原生dom;

  技术分享图片

  现在会用了,但是咱们不能单单只会用,还要知道其原理,以下模仿其功能,写一个 .get() 方法。

  把上一篇写的 jQuery 函数全部抽出来, 建立一个单独文件为我们自己的 myJquery.js   ,

自己慢慢学,写成一个我们自己的jquery 库

   

 1 (function(){ 
 2     function jQuery(selector){
 3        return new jQuery.prototype.init(selector);
 4     }
 5     jQuery.prototype.init = function(selector){
 6     
 7         if( selector.indexOf(‘.‘) != -1 ){ 
 8             var dom = document.getElementsByClassName( selector.slice(1) );
 9         }else if( selector.indexOf(‘#‘) != -1 ){
10             var dom = document.getElementById( selector.slice(1) );
11         }else{
12             var dom = document.getElementsByTagName(selector);
13         }
14         this.length = 0;
15         if( dom.length == undefined ){
16             this[0] = dom;  
17             this.length ++; 
18         }else{
19             for( var i = 0; i < dom.length; i++ ){
20                 this[i] = dom[i];
21             }
22             this.length = dom.length;
23         }
24     }
25     jQuery.prototype.css = function(config){
26         for(var i = 0; i < this.length; i++){
27             for(var prop in config){
28                 this[i].style[prop] = config[prop];
29             }
30         }
31         return this;
32     }
33     //以下为我们本章的.get() 方法
34     jQuery.prototype.get = function(num) { 
35         if (num == null) { //判断用户有没有填参数。
36             return [].slice.call(this, 0); //空截,把类数组转成数组,借用Array.prototype.slice方法        
37         } else { 
38             if (num < 0) {//判断用户是否输入 负数。
39                 return this[num + this.length];
40                 //举个例子  [a, b, c]   此数组的长度为3
41                 // 用户输入-1  想要拿最后一位 c,如果你把-1 + 3该数组的长度, 你会发现 刚好等于 最后一位的索引
42             } else { 
43                 return this[num];//如果用户输入 0 1 2 3  直接返回this 中的 dom 即可 
44             }
45         }
46         //以下为简化版本  三目运算符 ↓ 
47         //return num == null ? [].slice.call(this, 0) : (num < 0 ? this[num + this.length] : this[num]);
48 
49     }
50     jQuery.prototype.init.prototype = jQuery.prototype; //$()运行的是init的函数 init的prototype上面没有css方法。
51                                                     //所以 我们把init的prototype指向jQuery.prototype
52     window.$ = window.jQuery = jQuery;
53 })()

技术分享图片

 

  .eq()

  这个方法和.get() 有点像,但是,获取的dom 并不是原生的dom 了,是 jquery对象的dom

除此之外,还有一个不同点,不传参数  .get() 是返回全部原生dom,.eq()是返回空。

技术分享图片

  模拟原理,往我们自己的myJquery.js 添加.eq() 方法,你会发现 此方法 和 get方法的原理一样,但是 有点不同,返回的

jquery对象的dom, 我们先在做另外一个功能, 往$() 传 dom   会把你传的dom包装成 jquery对象的dom。

  

 1 (function(){ 
 2     function jQuery(selector){
 3        return new jQuery.prototype.init(selector);
 4     }
 5     jQuery.prototype.init = function (selector) {
 6         //加上以下代码
 7         if (selector == null) { //判断 有没有传值,没有传值,直接返回 this  (jquery 对象)
 8             return this;
 9         }
10         //如果还按照以前selector.indexOf(‘.‘)的话,传入 dom,dom上面没.indexof方法,会报错,再加上一层判断
11         //typeof selector == ‘string‘  判断他是字符串 再执行, dom的话,就进不去了 &&运算符,遇到假就返回
12         if(typeof selector == ‘string‘ && selector.indexOf(‘.‘) != -1 ){ 
13             var dom = document.getElementsByClassName(selector.slice(1));
14             //      ↓  也要加上哦
15         }else if(typeof selector == ‘string‘ &&  selector.indexOf(‘#‘) != -1 ){
16             var dom = document.getElementById( selector.slice(1) );
17         }else if(typeof selector == ‘string‘){//zheli
18             var dom = document.getElementsByTagName(selector);
19         }
20        
21         this.length = 0;
22          // 主要在这里   加上以下代码 ↓   判断 传进来的值 是否是dom 元素, 是的话,就进去
23         if(selector instanceof Element || dom.length == undefined ){ 
24             this[0] = dom || selector;  // 把selector  直接挂到 this[0] 位上就OK了 
25             this.length ++; 
26         }else{
27             for( var i = 0; i < dom.length; i++ ){
28                 this[i] = dom[i];
29             }
30             this.length = dom.length;
31         }
32     }
33     jQuery.prototype.css = function(config){ 
34         for(var i = 0; i < this.length; i++){
35             for(var prop in config){
36                 this[i].style[prop] = config[prop];
37             }
38         }
39         return this;
40     }
41 
42     jQuery.prototype.get = function(num) { 
43     
44         return num == null ? [].slice.call(this, 0) : (num < 0 ? this[num + this.length] : this[num]);
45     }
46     // 跟 get方法原理差不多,差的就是, 传进去是空的话 返回 null 即可, 
47     jQuery.prototype.eq = function (num) { 
48        var dom =  num == null ? null : (num < 0 ? this[num + this.length] : this[num]);
49         return $(dom); //  如果直接返回 dom  就是返回原生的dom  我们要把他包装一下,变成jquery对象, 此方法
50                         // 在上面已经实现了。
51     }
52     jQuery.prototype.init.prototype = jQuery.prototype; 
53             
54     window.$ = window.jQuery = jQuery;
55 })()

 

 

 

  技术分享图片

 

jQuery 第一章 实例方法 DOM操作

原文:https://www.cnblogs.com/yanggeng/p/10823074.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!