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
                
            
        
    

8.页面加载完毕后的触发方法-入口函数

1. 在页面加载完毕后，浏览器会通过JavaScript为dom元素添加事件
2. 在常规的JavaScript代码中，通常使用window.onload方法，window.onload=function(){}
3. 在jQuery中使用$(document).ready()方法

jQuery 入口函数：

$(document).ready(function(){
    // 执行代码
});
//或者简写为：
$(function(){
    // 执行代码
});

JavaScript 入口函数：

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

• jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
• JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。