CH04-JQuery的DOM操作一

本章目标

掌握jQuery操作DOM节点——创建、插入、替换、复制、包裹、删除节点的使用
掌握jQuery遍历DOM节点的使用

一、jQuery 中的 DOM 操作

1、DOM

DOM(Document Object Model—文档对象模型)：是 W3C（万维网联盟）的标准，可以将任何HTML、XML文档描绘成一个多层次的节点树。例：HTML DOM 节点树

树中的所有节点均可通过 JavaScript 进行操作。包括节点修改，创建或删除等。

2、DOM操作分为三类

DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
HTML-DOM：用于处理HTML文档，如document.forms
CSS-DOM：用于操作CSS，如element.style.color=”green”

JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

3、jQuery 中的 DOM 操作分类

jQuery对JavaScript中的DOM操作进行了封装，使用起来将更加简便

jQuery中的DOM操作可分为：

节点操作
节点遍历
样式操作
内容及Value属性值操作
节点属性操作
CSS-DOM操作

二、操作DOM节点

1、创建节点

创建如下无序列表(节点操作公共HTML代码)：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //工厂函数$()：用于获取或创建节点
            var $node = $("<li>JQuery</li>");
        })
</script>
<ul id="course">
        <li style="background-color:blue;">html</li>             
        <li class="li">css</li>
        <li>js</li>
</ul>
<ul id="kecheng">
            <li>网页</li>
            <li>样式表</li>
            <li>脚本</li>
</ul>
<ul id="code">
        <li style="background-color:greenyellow"> c#</li>
        <li>java</li>
        <li>c</li>
</ul>

注：动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中

2、插入子节点

元素内部插入子节点

在course元素中插入node节点

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //创建一个li节点
            var $node = $("<li>JQuery</li>");
    		//将$node节点追加到#course后面
            $("#course").append($node);
        })
</script>

在course元素中前置插入node节点

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //创建一个li节点
            var $node = $("<li>JQuery</li>");
    	   //将$node节点追加到#course前面
            $("#course").prepend($node);
        })
</script>

3、插入同辈节点

元素外部插入同辈节点

在course元素后插入node节点

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //创建一个li节点
            var $node = $("<li>JQuery</li>");
    		//在#course后插入node节点
             $("#course").after($node);
        })
</script>

在course元素前插入node节点

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //创建一个li节点
            var $node = $("<li>JQuery</li>");
    	   //在#course前插入node节点 
            $("#course").before($node);
        })
</script>

3、复制和替换节点

replaceWith() 用于替换某个节点

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //创建一个li节点
            var $node = $("<li>JQuery</li>");
    	    //将索引为2的li元素替换为node节点
            $("ul li:eq(2)").replaceWith($node);
        })
</script>

clone()用于复制某个节点

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //创建一个li节点
            var $node = $("<li>JQuery</li>");
    	    //将node节点复制两次追加到#course后面
            $("#course").append($node.clone(true));
            $("#course").append($node.clone(true));
        })
</script>

clone：将克隆生成的副本移动到新的位置

参数true表示：连同节点中的事件一起克隆

4、包裹删除节点

wrap()：把所有匹配的元素用其他元素标记包裹起来。也就是给它增加一个父元素

创建一个div节点，在每一个li元素外面包裹div

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //创建一个li节点
            var $node = $("<li>JQuery</li>");
    	    //创建一个div节点设置背景颜色，在每一个li元素外面包裹div
            var $div = $("<div style='background-color:yellow'></div>");
            $("#course li").wrap($div);
        })
</script>

unwrap()：移出元素的父元素，取消wrap()方法的效果

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //创建一个li节点
            var $node = $("<li>JQuery</li>");
    	    //点击取消按钮移出course li的父元素 取消wrap()方法的效果
            $("#cancel").click(function () {
                $("#course li").wrap();
            });
        })
</script>

wrapInner()：将每一个匹配的元素的子内容(包括文本节点)用其他标记包裹起来

例：给所有匹配的li元素内部增加一个a包裹

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
           //将指定li元素添加一个a标签
            var $a = $("<a href='#'></a>");
            $("#kecheng li").wrapInner($a);
        })
</script>

5、删除节点

获取course列表中的第一个li节点，并给该节点添加一个点击事件

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //获取course索引为0的li元素 添加一个点击事件弹出文本
            var $first = $("#course li:eq(0)");
            $first.click(function () {
                        alert($(this).html());
            });
})
</script>

jQuery提供了三种删除节点的方法

**remove()**：删除整个节点（连同节点的事件及附加数据一同删除）

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //点击删除 删除course索引为0的li元素
            $("#rem").click(function () {
                $first.remove();
            });
})
</script>
<input type="button" id="rem" value="删除remove" />

恢复该节点后，事件丢失

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //点击恢复 可以恢复刚才删除的li元素
            $("#rem1").click(function () {
                $("#course").prepend($first);
            });
})
</script>
<input type="button" id="rem1" value="恢复remove" />

**detach()**：删除整个节点，保留元素的绑定事件、附加的数据
**empty()**：清空节点中的内容（属性、事件依然保留）

三、遍历DOM节点

1、遍历子元素

children()方法：用来获取元素的所有直接子元素

获取course列表中所有子元素

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
           //获取course下面的所有子元素 循环遍历弹出来
            var $c = $("#course").children();
            for (var i = 0; i < $c.length; i++) {
                        alert($c[i].innerText);
                }
})
</script>

设置course列表中class为li的子元素的字体颜色

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            //设置course列表中class为li的子元素的字体颜色
            $("#course").children(".li").css("color","red");
})
</script>

2、遍历后代元素

find() 方法：获取元素的后代元素

<ul>
	<li>li (子节点)
		<span>span (孙节点)</span>
	</li>
	<li>li (子节点)
		<span>span (孙节点)</span>
	</li>
</ul>

设置ul下的后代span的样式

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
          //找到ul下面的后代span标签设置样式
          $("ul").find("span").css({"color":"red","border":"2px solid red"});	
})
</script>