JQuery04

6.jQuery的DOM操作02

6.9常用遍历节点方法

1. 取得匹配元素的所有子元素组成的集合：children()，该方法只考虑子元素而不考虑任何后代元素

2. 取得匹配元素后面的同辈元素的集合：next()/nextAll()

   如果是next方法，就是拿到指定元素后面的一个元素，如果是nextAll，就是后面所有的元素。下面同理

3. 取得匹配元素前面的同辈元素的集合：prev()/prevAll()

4. 取得匹配元素前后所有的同辈元素的集合：siblings()

5. 获取指定的第几个元素：nextAll().eq(index)

6. 对获取到的同辈元素进行过滤：nextAll().filter("标签")

应用实例

    
    
    
    
    














    ccccccc


    

        XXXXXXXXX one
    
    

        XXXXXXXXX two
    
    

        XXXXXXXXX three
    
    

        XXXXXXXXX four
    


    tttttttttt


    aaaaaaa

bbbbbb

6.10CSS-DOM操作

1. 获取和设置元素的样式属性: css()

2. 获取和设置元素透明度: opacity 属性

3. 获取和设置元素高度, 宽度: height(), width()

   在设置值时, 若只传递数字, 则默认单位是px。如需要使用其他单位则需传递一个字符串, 例如$("p:first").height("2em");

4. 获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效

应用实例

    
    
    
    






Hello,World!!  
获取图片信息

7.多选框应用-练习

1. 点击->把左边选中的移动到右边

2. 点击==> 把左边全部移动到右边

3. 双击左边或者右边的某个选项，将其自动移动到另外一边

应用实例

思路：(1) 绑定事件 (2) 选择对应的对象 (3) 插入[内部插入]

    
    
    
    



    

        

            

                
                
                    选项 1
                    选项 2
                    选项 3
                    选项 4
                    选项 5
                    选项 6
                    选项 7
                    选项 8
                
            
            

                
                
                
                
            
            

                
                    选项 9