jQuery进阶
jQuery文档处理
进一步对DOM操作深入,包括元素的创建,插入,删除,替换,复制
创建节点
$(htmlCode)
htmlCode
,动态创建DOM元素的HTML字符串- 函数根据
htmlCode
参数创建一个DOM元素,并返回由该元素封装后的jQuery对象
//创建三个元素节点
var span1=$("<span></span>"); //创建一个元素节点
var span2=$("<span>具有文本内容的节点</span>"); //创建一个文本节点
var span3=$("<span title='属性节点'></span>"); //创建一个属性节点
节点动态创建之后,不会自动添加到文档中,需要使用append()
等方法,插入到文档的指定位置
//将节点添加到父节点中
$("#containDiv").append(span1); //将span1节点添加到父节点中
$("#containDiv").append(span2); //将span2节点添加到父节点中
$("#containDiv").append(span3); //将span3节点添加到父节点中
alert($("#contianerDiv span").length); //显示父节点中span元素的个数
插入节点
动态创建HTML元素节点后,还需将节点插入到文档中才有用
类型 | 方法 | 描述 |
---|---|---|
内部插入 | append() |
向每个匹配的元素内部追加,由参数指定的内容 |
appendTo() |
把所有匹配的元素追加到指定的元素中 | |
prepend() |
向每个匹配的元素内部前置内容 | |
prependTo() |
把所有匹配的元素前置到指定的元素中 | |
外部插入 | after() |
把每个匹配的元素之后插入内容 |
before() |
在每个匹配的元素之前插入内容 | |
insertAfter() |
把所有匹配的元素插入到指定的元素的后面 | |
InsertAfter() |
把所有匹配的元素插入到指定的元素的前面 |
-
append()
方法向匹配元素的尾部追加指定的内容
$(selecotr).append(content) $(selector).append(function(index,oldHtmlCode))
-
$(selector)
,表示要追加的内容的元素 -
content
,追加的内容 -
function(index,oldHtmlCode)
,将函数的返回值作为追加的内容index
,当前元素在集合中的索引位置oldHtmlCode
,当前元素在修改前的HTML内容
//在appendDiv尾部追加一幅图像 $("#appendDiv").append($("<img src='images/pic1.jpg' />")); //根据ID进行匹配,将ID以"append"开头的div元素内容及索引,在控制台中打印出来 $("idv[id^=append]").append(function(index,oldHtmlCode){ console.log(index+" "+oldHtmlCode); });
-
-
appendTo()
方法将匹配元素追加到指定元素的尾部
与
append()
不同的是:内容和匹配元素的位置不同#(content).appendTo(selector)
$(content)
,追加的内容selector
,追加内容的元素
//创建一个图像节点,并追加到appendToDiv尾部 $("<img src='images/pic3.jpg' />").appendTo($("#appendToDiv")); //使用选择器选取匹配的元素,然后追加到appendToDiv尾部 $("div~img").appendTo($("#appendToDiv"));
-
prepend()
方法向匹配元素的头部插入指定的内容
$(selector).prepend(content) $(selector).prepend(function(index,oldHtmlCode))
-
$(selector)
,要插入内容的元素 -
content
,要插入的内容 -
function(index,oldHtmlCode)
,将函数的返回值作为插入的内容index
,当前元素在集合中的索引位置oldHtmlCode
,当前元素在修改前的HTML内容
//在prependDiv的头部追加一幅图像 $("#prependDiv").prepend($("<img scr='images/pic3.jpg'/>")); //根据ID进行匹配,将ID以"append"开头的div元素内容及索引在控制台打印出来 $("div[id^=prepend]").prepend(function(index,oldHtmlCode){ console.log("prepend()方法:下标"+index+",原有内容:"+oldHtmlCode); });
-
-
prependTo()
方法将匹配元素插入指定的元素的头部
$(content).prependTo(selector)
$(content)
,插入的内容selector
,插入内容的元素
//创建一个图像节点,并插入到prependToDiv头部 $("<img src='images/pic5.jpg' />").prependTo($("#prependToDiv")); //使用选择器选取插入的元素,然后将其插入到appendToDiv头部 $("div~img").appendTo($("#prependToDiv"));
-
after()
方法所匹配的元素之后插入内容
$(selector).after(content) $(selectot).after(function(index[,htmlCode]))
-
$(selector)
,所匹配的元素 -
content
,被插入的内容 -
function(index,htmlCode)
,将函数的返回值作为要插入的内容index
,当前元素在集合中的索引位置htmlCode
,可选,当前元素的HTML内容,当插入内容时,不会改变该元素的HTML内容
//在afterDiv元素的后面插入一幅图像 $("#afterDiv").after($("<img src='images/pic1.jpg'/>")); //根据ID进行匹配,在控制台输出元素的下标和内容 $("div[id*=after]").after(function(index,htmlCode){ console.log("after()方法:下标"+index+",元素的内容:"+htmlCode); });
-
-
insertAfter()
方法在所匹配元素之后插入内容
$(content).insertAfter(selector)
$(content)
,被插入的内容selector
,匹配的元素
$("<img src='images/pic3.jpg' />").insertAfter($("#insertAfterDiv")); $("div~img").insetAfter($("#insertAfterDiv"));
-
before()
方法在所匹配的元素之前插入内容
$(selector).before(content) $(selector).before(function(index[,htmlCode]))
-
$(selector)
,匹配的元素 -
content
,被插入的内容 -
function(index,htmlCode)
,函数的返回值作为插入的内容index
,当前元素的索引位置htmlCode
,可选,当前的HTML内容
$("#beforeDiv").before($("<img src='images/pic4.jpg'/>")); $("div[id*=before]").before(function(index,htmlCode){ console.log("before()方法:下标"+index+",元素的内容:"+htmlCode); });
-
- <