jQuery进阶

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()	把所有匹配的元素插入到指定的元素的前面

1. 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);
   });
   

2. appendTo()方法

   将匹配元素追加到指定元素的尾部

   与append()不同的是：内容和匹配元素的位置不同

   #(content).appendTo(selector)
   

   • $(content)，追加的内容
   • selector，追加内容的元素

   //创建一个图像节点，并追加到appendToDiv尾部
   $("<img src='images/pic3.jpg' />").appendTo($("#appendToDiv"));
   //使用选择器选取匹配的元素，然后追加到appendToDiv尾部
   $("div~img").appendTo($("#appendToDiv"));
   

3. 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);
   });
   

4. prependTo()方法

   将匹配元素插入指定的元素的头部

   $(content).prependTo(selector)
   

   • $(content)，插入的内容
   • selector，插入内容的元素

   //创建一个图像节点，并插入到prependToDiv头部
   $("<img src='images/pic5.jpg' />").prependTo($("#prependToDiv"));
   //使用选择器选取插入的元素，然后将其插入到appendToDiv头部
   $("div~img").appendTo($("#prependToDiv"));
   

5. 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);
   });
   

6. insertAfter()方法

   在所匹配元素之后插入内容

   $(content).insertAfter(selector)
   

   • $(content)，被插入的内容
   • selector，匹配的元素

   $("<img src='images/pic3.jpg' />").insertAfter($("#insertAfterDiv"));
   $("div~img").insetAfter($("#insertAfterDiv"));
   

7. 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);
   });
   

8. <