【jQuery】之DOM操作

jQuery

DOM操作

查找节点

查找元素节点

以选择器来查找元素节点

查找文本节点

以text()方法来查找文本节点

查找属性节点

以attr()方法来查找属性节点

---

获取父节点

selector:便是jQurery中的选择器 另外parent()：获取父级元素 parents()：获取祖先级元素 closest():匹配上级元素，并返回相同的元素

    

        
端游
        
单机
        
手游
    

获取子节点

children()只获取子级元素（不获取后代元素）

    
端游
        
联盟
        
地下城
        
火线
    
    
手游
    
页游

获取兄弟节点

next()：获取元素的下一个相邻兄弟元素 prev()：获取元素的上一个相邻兄弟元素 siblings：获取元素所有兄弟元素

    

        
端游
        
单机
        
手游
    

查找后代元素

以find：获取所有匹配其元素的选择器

    

        
端游
        
单机
        
手游
        
掌机
    

3.创建节点

工厂函数：以attr()该属性来建立属性节点

    
端游
    
单机
    
手游
    
掌机

4.插入节点

插入内部节点

append()方法
表示插入到指定节点列表中的最后面
appendTo()方法
表示插入到指定节点列表中的最后面
prepend()方法
表示插入到指定节点列表中的最前面
prependTo()方法
表示插入到指定节点列表中的最前面

   



    
端游
    
单机
    
手游
    
掌机

插入外部节点

before()方法
表示插入到指定元素节点前一个位置
insertBefore()方法
表示插入到指定元素节点前一个位置
after()方法
表示插入到指定元素节点后一个位置
insertAfter()方法
表示插入到指定元素节点后一个位置

    
端游
    
单机
    
手游

5.删除节点

remove():用来删掉DOM所有的元素 empty():用来删除DOM的所有子节点

    



    
联盟
    
火线
    
地下城

6.替换节点`

replaceWith()方法将所有匹配元素替换成HTML和DOM元素

   



    
联盟
    
火线
    
地下城

7.复制节点

jQuery的clone方法 - 参数表示是否复制事件
DOM的cloneNode方法 - 参数表示是否复制后代节点

    


按钮

8.属性节点

    



    
联盟
    
火线
    
地下城

9.样式操作

10.HTML操作

      



    
联盟
    
火线
    
地下城