jQuery实例方法-DOM操作

最新推荐文章于 2024-12-25 10:37:17 发布

清水之昶

最新推荐文章于 2024-12-25 10:37:17 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/wq199909/article/details/95622562

jQuery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了jQuery的元素查找与筛选方法。查找方法包括.get()返回dom对象、.eq()和.find()返回jQuery对象；筛选方法有.filter()选存在的、.not()选不存在的、.has()选后代满足条件的、.is()判断是否满足条件；还有.add()添加元素和.end()返回上一级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、.get()在现有的dom元素中找第几个，返回dom对象

jQuery.prototype.get = function(num) {
    // if(num == null){
    //     return [].slice.call(this, 0);
    // }else {
    //     if(num >= 0){
    //         return this[num];
    //     }else {
    //         return this[this.length + num];
    //     }
    // }
    return num != null ? (num >= 0 ? this[num] : this[this.length + num]) : [].slice.call(this, 0);
}

2、.eq()在现有的dom元素中找第几个，返回jQuery对象

jQuery.prototype.eq = function(num) {
    var dom = num != null ? (num >= 0 ? this[num] : this[this.length + num]) : null;
    console.log(dom);
    return $(dom);
}
jQuery.prototype.init = function(selector) {
    // 选出 dom 并且包装成jQuery对象    返回
    // id class tag
    // null underfined dom
    console.log(selector)
    if(selector == null){
        return this;
    }
    this.length = 0;
    if(typeof selector == 'string' && selector.indexOf('.') != -1) {
        var dom = document.getElementsByClassName( selector.slice(1) );
    }else if(typeof selector == 'string' && selector.indexOf('#') != -1){
        var dom = document.getElementById( selector.slice(1) );
    }else if(typeof selector == 'string'){
        var dom = document.getElementsByTagName(selector);
    }
    // if(selector instanceof Element){
    //     this[0] = selector;
    //     this.length++;
    // }
    if(selector instanceof Element || dom.length == undefined) {
        this[0] = dom || selector;
        this.length ++;
    }else{
        for (var i = 0; i < dom.length; i++){
            this[i] = dom[i];
            this.length ++;
        }
    }
    return this;
}

3、 .find() 在子元素中查找返回jQuery对象

4、筛选

.filter() css selector 、jQuery unique selector 、function 选出存在的

.not() css selector 、jQuery unique selector 、function 选出不存在的

.has() 选出后代满足条件的jQuery对象

.is() 是否有个满足is中条件，返回true|false

5、

.add() 添加元素到匹配的元素集合

.end() 返回到上一级

jQuery.prototype.pushStack = function(dom) {
    // dom newObj
    if(dom.construcor != jQuery){
        dom = jQuery(dom);
    }
    dom.prevObject = this;
    return dom;
}
jQuery.prototype.add = function(selector){
    var curObj = jQuery(selector);
    var baseObj = this;
    var newObj = jQuery();
    for(var i = 0; i < curObj.length; i++){
        newObj[newObj.length++] = curObj[i];
    }
    for(var i = 0; i < baseObj.length; i++){
        newObj[newObj.length++] = curObj[i];
    }
    this.pushStack(newObj);
    return newObj;
}
jQuery.prototype.end = function(){
    return this.prevObject;
}