JQuery中DOM操作示例代码
Jquery的DOM操作
1、插入节点代码示例：
<p title=”选择你喜欢的水果”>你最喜欢的水果是？</p>
<ul>
<li title=”苹果”>苹果</li>
<li title=”橘子”>橘子</li>
<li title=”菠萝”>菠萝</li>
</ul>
<script language=”javascript”>
var $li_1=$(“<li title=’香蕉’>香蕉</li>”);
var $li_2=$(“<li title=’雪梨’>雪梨</li>”);
$(“ul”).append($li_1).append($li_2);
//插入节点
$(“p”).append(“<b>这里的追加的内容。</b>”);
$(“<b>这是要增加的内容</b>”).appendTo(“p”);
$(“p”).prepend(“<b>在前面添加内容</b>”);
$(“<span>这是前置的内容</span>”).prependTo(“p”);//如果没有span包含，这内容无法前置
$(“p”).after(“<i>在p结束之后添加内容</i>”);
$(“<i>这个内容也是在p之后<br></i>”).insertAfter(“p”);
$(“p”).before(“<font color=’red’>这内容是在p标签之前</font>”);
$(“<i>这是在最前的</i>”).insertBefore(“font”);
</script>
2、删除节点代码示例：
<p title=”选择你喜欢的水果”>你最喜欢的水果是？</p>
<ul>
<li title=”苹果”>苹果</li>
<li title=”橘子”>橘子</li>
<li title=”菠萝”>菠萝</li>
</ul>
<script language=”javascript”>
var $li=$(“ul li:eq(1)”).remove();
$li.appendTo(“ul”);
$(“ul li:eq(1)”).detach();//如果再重新追加上，原来的事件还在，而remove不会存在
$(“ul li:eq(1)”).empty();//这个是清空元素内容
</script>
3、复制节点代码示例：
<p title=”选择你喜欢的水果”>你最喜欢的水果是？</p>
<ul>
<li title=”苹果”>苹果</li>
<li title=”橘子”>橘子</li>
<li title=”菠萝”>菠萝</li>
</ul>
<script language=”javascript”>
$(“ul li:eq(1)”).clone(true).appendTo(“ul”);
</script>
4、替换节点代码示例：
<p title=”选择你喜欢的水果”>你最喜欢的水果是？</p>
<ul>
<li title=”苹果”>苹果</li>
<li title=”橘子”>橘子</li>
<li title=”菠萝”>菠萝</li>
</ul>
<p title=”第二个会替换的”>第二个会替换的？</p>
<script language=”javascript”>
$(“p”).replaceWith(“<strong>你最不喜欢的水果是?</strong>”);
//也可以用下面的，注意替换是所有元素都会替换
$(“<i>这是又一次替换</i>”).replaceAll(“strong”);
</script>
5、包裹节点示例代码：
<strong>第一部分</strong>
<b>这点会包裹起来吗?</b>
<strong>第二部分</strong>
<script language=”javascript”>
$(“strong”).wrap(“<i></i>”);
// 每个strong都被包裹，而wrapAll是对整体包裹,如果中间有其他元素会放在包裹元素之后
$(“strong”).wrapAll(“<i></i>”);
$(“strong”).wraplnner(“<i></i>”);//这个是包裹了strong元素的子内容
</script>
6、属性操作示例代码：
<p title=”第一个标题属性”>第一个文章标点</p>
<script language=”javascript”>
var $p=$(“p”);
var p_text=$p.attr(“title”);//获取属性title的内容
//设置一个属性可以这样用
$(“p”).attr(“title”,”新的属性值”);
//如果设置多个属性，可以用下面的方法
$(“p”).attr({“title”:”标题属性”,”id”:”myid”});//后面传递多个参数也是这样的
//删除属性
$(“p”).removeAttr(“title”);
</script>
9、样式操作代码示例：
<p>样式操作例子</p>
<script language=”javascript”>
$(“p”).attr(“class”)//读取样式
$(“p”).attr(“class”,”newclass”);//这样会把原来样式去掉换成新的样式
$(“p”).addClass(“addclass”);//这里是追加样式，这样样式就成了原样式和追加样式的叠加
$(“p”).removeClass(“newclass”);//移除newclass样式，如果不带参数，那么将会清空class的值
var t=$(“p”).hasClass(“addclass”);//等价$(“p”).is(“.addclass”);
</script>