我爱编程

jQuery原型上的属性和方法

2017-03-30  本文已影响0人  miner敏儿

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)
             })
 jquery:'2.0.0' ,
selector:"",
 length:0,
 toArray:function(){
        return [].slice.call(this)
    },
$(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]
        }
    },
               $(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));
        },
        $(function () {
            console.log($("div").first());
        });
        $(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类型的实例对象
       });
$(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类型的实例对象
        });
 first:function(){
            return this.eq(0);
        },
        last:function(){
            return this.eq(-1);
        },
        sort:[].sort,
        splice:[].splice,
        push:[].push,
        slice:[].slice,
上一篇 下一篇

猜你喜欢

热点阅读