第三章 jQuery中的DOM操作

#jQuery中的DOM操作
##查找结点
###1.查找元素结点

var $li = $("ul :li:eq(1)");//获取<ul>里第二个<li>结点
alert($li.text());

###2.查找属性结点

var $para = $("p");//获取<p>结点
var p_txt = $para.attr("title");//获取<p>元素结点属性title
alert(p_area);

###3.创建结点
####3.1创建元素结点

var $li_1 = $("<li></li>");//创建一个li元素
$("ul").append($li_1);//添加到<ul>结点中，使之能在网页中显示

####3.2创建文本结点

var $li_1 = $("<li>香蕉</li>");
$("ul").append($li_1);

####3.3创建属性结点

var $li_1 = $("<li title='香蕉'>香蕉</li>");//注意属性结点内容用单引号
$("ul").append($li_1);

#####插入结点的方法

方法|内容
--|--
append|目标内部追加元素
appendTo|将元素追加到目标中内部
prepend|匹配元素前置内容
prependTo|...
after|元素后插入内容
before|元素前插入内容

####4.删除结点
######4.1 remove
删除选择内容
$("#myDiv").remove();//移除div
######4.2 empty
清空结点内容
$("myDiv").empty();//清空div内部元素

####5 复制结点
clone

$("ul li").click(function(){
$(this).clone().appendTo("ul");//复制当前结点,并将它追加到<ul>元素中
})

clone(true)
复制元素的同时复制所绑定的事件
####6 替换结点
#####6.1 replaceWith

$(“p”).replace("<strong>你最喜欢的水果是</strong>")

####7 包裹结点

wrapall

$("strong").wrapall("<b></b>");