jquery往对象添加字段 jquery对象添加元素

jQuery添加插入元素技巧：
里面添加和外面添加两种：
 里面添加使用（append 和prepend）
 里面添加又分为在里面的前面添加和后面添加
 里面的前面添加使用
 append  或appendTo
 里面的后面添加使用
 prepend和prependTo
 
 外面添加使用（after和before）
 外面添加又分为在外面的前面添加和后面添加
 外面的前面添加使用
 before或insertBefore
 
 外面的后面添加使用
 after或insertAfter
 
 
 
 常用方法 

 
 
    1.查找元素节点 

 

       var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”); 

 
 
    2.查找元素属性 

 

  　　　利用jquery的attr()方法来获取元素的各种属性的值，attr()方法的参数可以是一个，也可以是两个。 

 

           当参数是一个时，则是要查询的属性名称。 

 

           当参数是两个时，则可以设置属性的值。 

 

        alert($(“#id”).attr(“title”)); //输出元素的title属性.一个参数 

 

        $(“#id”).attr(“title”,”改变title值”); //改变元素的title属性值.二个参数 

 
 
    3.添加元素节点 

 

        $(html) 简单说明一下$(html)方法会根据传入的html标记字符串创建一个dom对象，并将这个dom对象包装成一个jquery对象返回，总之就是把标记所有html代码都放到$()工厂里面就行了！ 

 

        例： 

 

           var $htmlLi = $(”  <li title=’香蕉’>香蕉</li>”);  //创建DOM对象 

 

           var $ul = $(“ul”);   //获取UL对象 

 

           $ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表 

 

        下面列出部分插入节点的方法 

 
 方法
 描述
 示例
 Append()
 向每个匹配的元素内追加内容
 
<ul></ul>
JQuery代码
$(“ul”).append(“<li>AA</li>”);
结果
<ul>
<li>AA</li>
</ul>
 
appendTo()
注意大小写，我试验时appendto没通过。
 该方法和Append()相反，a.Append(b)是将b追加到a中，而appendTo()是将b追求到a中
 
<ul></ul>
JQuery代码
$ (“<li>AA</li>”).appendTo (“ul”).;
结果
<ul>
<li>AA</li>
</ul>
 
 Prepend()
 向每个匹配的元素内部前置内容
 
<p>哈哈</p>
JQuery代码
$(“p”).prepend(“<b>ABC</b>”);
结果
<p><b>ABC</b>哈哈</p>
 prependTo()
 该方法和Prepend()相反，a. Prepend (b)是将b前置到a中，而prependTo ()是将b前置到a中
 
<p>哈哈</p>
JQuery代码
$(“<b>ABC</b>”).prependTo.(“p”);
结果
<p><b>ABC</b>哈哈</p>
 After()
 在每个匹配的元素之后插入内容，是之后
 
<p>AAA</p>
JQuery代码
$(“p”).After(“<b>cc</b>”);
结果
<p>AAA</p><b>cc</b>
 insertAfter()
 和After()相反
 
<p>AAA</p>
JQuery代码
$ (“<b>cc</b>”).After(“p”);
结果
<p>AAA</p><b>cc</b>
 Before()
 在每个匹配的元素之前插入内容
 
<p>AAA</p>
JQuery代码
$(“p”). Before (“<b>cc</b>”);
结果
<b>cc</b><p>AAA</p>
 insertBefore()
 和Before()相反
 
<p>AAA</p>
JQuery代码
$ (“<b>cc</b>”). insertBefore (“p”);
结果
<b>cc</b><p>AAA</p>
  
 

     好了，不要斋看，自己动手试试吧:) 

 
 
    4.删除元素节点 

 

     由于我们需要经常动态去改变DOM元素，因此Jquery提供了两种删除节点的方法，即remove()和empty(); 

 

      4.1 remove()方法 

 

       $(“p”).remove();//    我们可以获取到要删除的元素，然后调用remove()方法 

 

       $(“ul li:eq(0)”).remove().appendTo(“ul”);// 删除ul下面的第一个li标记，然后再把删除的li标记重新加到ul里面，remove()方法返回删除元素的引用，这时你可以继续使用 

 

       $(“ul li”).remove(“li[title!=ABC]“);//remove可以接受通过参数来选择性的删除符合条件的元素; 

 

     4.2 empty()方法 

 

       严格来讲，empty()方法并不是删除元素，而是清空 

 

       例： 

 

        HTML代码 

 

         <ul> 

 

            <li title=”AAA”>AAA</li> 

 

         </ul> 

 

        JQuery代码 

 

         $(“ul li:eq(0)”).empty(); 

 

        结果 

 

        <ul> 

 

            <li title=”AAA”></li> 

 

         </ul> 

 

         
 记住，只会清空内容，不会请空属性;