美文网首页我爱编程
jQuery原型上的属性和方法

jQuery原型上的属性和方法

作者: miner敏儿 | 来源:发表于2017-03-30 19:59 被阅读0次

jQ原型上的核心方法和属性:
1、jquery 获取jQ版本号
2、selector 实例默认的选择器取值
3、length 实例默认的长度
4、toArray 把实例转换为数组返回
5、get 获取指定下标的元素,获取的是原生DOM
6、eq 获取指定下标的元素,获取的是jQuery类型的实例对象
7、first 获取实例中的第一个元素,是jQuery类型的实例对象
8、last 获取实例中的最后一个元素,是jQuery类型的实例对象
9、splice 按照指定下标指定数量删除元素,也可以替换删除的元素
11、push 给实例添加新元素
12、sort 对实例中的元素进行排序
13、each 遍历实例,把遍历到的数据传给回调使用
14、map 遍历实例,把遍历到的数据传给回调使用,然后把回调的返回值收集起来组成一个新的数组返回

  • 属性和方法的测试函数
 console.log($().jquery);//2.0.0
 console.log($().selector);//''
 console.log($().length);//0
 //4、toArray 把实例转换为数组返回
 $(function(){
console.log($('div'));//init {0: div, 1: div, 2: div, length: 3}
console.log($("div").toArray());//Array:(3)
             })
  • jq中封装
 jquery:'2.0.0' ,
selector:"",
 length:0,
 toArray:function(){
        return [].slice.call(this)
    },
  • 5.get 获取指定下标的元素,获取的是原生DOM
$(function(){
 console.log($('div'));//init {0: div, 1: div, 2: div, length: 3}
 console.log($('div').get()); //[div, div, div]                 console.log($('div').get(1));//<div>div2</div>
console.log($('div').get(-1));//<div>div3</div>
console.log($('div').get("ads"));//undefined
              })
  get:function(index){
        //1.没有传入参数,返回数组
        if(arguments.length==0){
            return this.toArray();
        }
        //2.传入一个正数
        if(index>0){
            return this[index];
        }
        //3.传入一个负数
        if(index<0){
            return this[this.length+index]
        }
    },
  • 返回的是数组

  • 6.eq 获取指定下标的元素,获取的是jQuery类型的实例对象

               $(function(){
                   console.log($("div"));
                   //如果没有传递参数,会返回一个空的jq实例
                   console.log($('div').eq());
                   //会将指定索引的元素包装为一个jQ实例之后返回
                   console.log($('div').eq(1));
                   console.log($('div').eq(-2));
                   console.log($('div').eq('abc'));
               })
-   1.如果没有传递参数,会返回一个空的jq实例
- 2.会将指定索引的元素包装为一个jQ实例之后返回
eq:function(index){
            //1.没有传递参数, 返回所有实例
            if(arguments.length==0){
                return this;
            }
            //传入index的正负情况和get方法一样,只是eq返回的是实例,而get返回的是数组,只需要用$()包装成实例即可
             return $(this.get(index));
        },
  • 返回的都是jq实例
  • 没有传递参数, 返回所有实例
  • 传入index的正负情况和get方法一样,只是eq返回的是实例,而get返回的是数组,只需要用$()包装成实例即可
  • 7.first 获取实例中的第一个元素,是jQuery类型的实例对象
        $(function () {
            console.log($("div").first());
        });
  • 8.last 获取实例中的最后一个元素,是jQuery类型的实例对象
        $(function () {
     console.log($("div").last());
        });
  $(function () {
         var oBtn = document.createElement("button");
          var temp = $("div");
           console.log(temp);//打印出3个div和 1个button(没添加的时候没有) 都是jq类型的实例对象
            temp.push(oBtn);
            console.log(temp);//打印出3个div和 1个button 都是jq类型的实例对象
       });
  • 11、push 给实例添加新元素
$(function () {
            var oBtn = document.createElement("button");
            var temp = $("div");
            console.log(temp);  //打印出3个div 都是jq类型的实例对象
            temp.push(oBtn);
            console.log(temp);//打印出3个div和 1个button 都是jq类型的实例对象
        });
  • 上面几个方法的jQuery结构
 first:function(){
            return this.eq(0);
        },
        last:function(){
            return this.eq(-1);
        },
        sort:[].sort,
        splice:[].splice,
        push:[].push,
        slice:[].slice,

相关文章

  • jQuery原型上的属性和方法

    jQ原型上的核心方法和属性:1、jquery 获取jQ版本号2、selector 实例默认的选择器取值3、leng...

  • 原型继承

    一、原型判断方法*术语解释:成员=属性+方法实例成员:实例属性和实例方法原型成员:原型对象属性和原型对象方法1、原...

  • jQuery核心技术

    立即执行函数 模块化开发 jQuery对象继承原型链上的方法 jQuery.fn.entend和jQuery.ex...

  • 静态成员

    原型成员:原型对象上的属性或者是方法。实例成员:实例对象上的属性或者方法。静态成员:直接添加在构造函数上的属性和方...

  • jQuery

    jQuery语法: jQuery获取内容和属性 : AJAX load()方法: jQuery ajax() 方法...

  • jQuery HTML

    jQuery - 获取内容和属性 jQuery 拥有可操作 HTML 元素和属性的强大方法。 jQuery DOM...

  • jQuery HTML

    jQuery - 获得内容和属性 jQuery 拥有可操作 HTML 元素和属性的强大方法。 jQuery DOM...

  • es5构造函数&原型链

    原型链上的属性和方法能被多个实例共享

  • 原型与继承

    什么是继承? 继承父级的属性和方法和共享(原型链)的属性和方法 组合继承 通过原型链继承共享的方法和属性;通过构造...

  • 原型链模式-拓展

    批量设置原型上的原型和方法方法一 方法二重构原型对象的方式 -> 自己新开辟一个堆内存,存储公有属性和方法,把浏览...

网友评论

    本文标题:jQuery原型上的属性和方法

    本文链接:https://www.haomeiwen.com/subject/clauottx.html