第三章 jQuery中的DOM操作

2019独角兽企业重金招聘Python工程师标准>>>

#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>");

转载于:https://my.oschina.net/u/2272593/blog/607976