jQuery--DOM操作(一)

千与千寻

通过jQuery的选择器可以方便的获取页面上的元素，通过选择器获取到的，不管是多个元素、零个元素还是一个元素，都会被封装到类数组的jQuery对象中，也称为jQuery对象集合或jQuery元素集合等。

jQuery对象集合

一、创建HTML

1.DOM对象和jQuery对象
区别：
• 检测DOM Object：

if ( obj.nodeType )

• 检测jQuery Object：

if ( obj.jquery )

• 转换：

var jqueryObj = $(domObj);
var domObj = jqueryObj.get([index]);

代码示例：


    
    DOM Object vs jQuery Object



    div

DOM对象和jQuery对象

2.创建元素

 $('Hello');

设置属性:


    
    create HTML

3.检查和提取元素

检查和提取元素.jpg

(1)检查元素：

①检查元素数量

$('xxx').length

(2)提取元素

①[index] 返回DOM元素
②get([index]) 返回DOM元素或元素集合
③eq(index) 返回jQuery对象
④first()
⑤last()
⑥toArray()



    item-1
    item-2
    item-3
    item-4
    item-5
    item-6
    item-7
    item-8
    item-9

二、通过关系查找jQuery对象




    
        
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?

通过关系查找jQuery对象的方法：
• children([selector])：直接子元素
• contents()：直接子元素
• find(selector)：包含子元素和孙子元素
• parent([selector])：返回直接父元素
• parents([selector])：返回所有父元素
• parentsUntil([selector])：获取到具体层级的父元素（不包含最后一个）
• closest(selector)：从元素本身开始，逐级向上进行元素的匹配，并返回最先匹配的元素。会首先检查当前元素是否匹配，如果匹配则返回元素本身，不匹配时向上逐级寻找，都没找到则返回一个空的jQuery对象。
• next([selector])：获取当前元素之后紧邻的同辈元素
• nextAll([selector])：当前元素之后的所有同辈元素
• nextUntil([selector])：查找当前元素之后的所有同辈元素，直到遇到匹配的元素为止。
• prev([selector])：往前查找同辈元素。
• prevAll([selector])
• prevUntil([selector])
• siblings([selector])：取得元素的所有同辈元素的元素集合，即把该元素的兄弟姐妹全部取出来。


    
        
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?
            
                item1
                item2
                item3
                item4
                item5
                item6
                item7
                item8
                item9

三、筛选和遍历jQuery对象

(1)添加元素
• add(selector)

(2)过滤元素
• not(selector):删除掉该元素。
• filter(selector)：筛选出和指定表达式匹配的元素集合，把选择器匹配到的返回。
• has(selector)：保留包含特定后代的元素

(3)获取子集
• slice(start[, end])

(4)转换元素
• map(callback)：将一个jQuery对象转换成另一个jQuery对象

(5)遍历元素
• each(iterator)




    
        
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?
            
                item1
                item2
                item3
                item4
                item5
                item6
                item7
                item8
                    
                
                item9

四、jQuery对象的其他操作

• is(selector)
• end():回到最近的一个破坏性操作之前，将匹配的元素集合变为前一次状态
• addBack([selector])：

破坏性操作.png

注意：如果不是破坏性操作，调用end会返回空


    
        
            
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?
                
                    item1
                    item2
                    item3
                    item4
                    item5
                    item6
                    item7
                    item8
                        
                    
                    item9

jQuery--DOM操作(一)

一、创建HTML

二、通过关系查找jQuery对象

三、筛选和遍历jQuery对象

四、jQuery对象的其他操作

你可能感兴趣的:(jQuery--DOM操作(一))