jQuery之DOM

1.jQuery属性。

获取元素属性的语法:

attr(name)                   例子：$("#img1").attr("src");

设置元素单个属性的语法:

attr(key,value)             例子：$("#img1").attr("src","2.jpg");

设置元素多个属性的语法：

attr({key0:value0,key1:value1})     例子：$("#img1").attr({src:"3.jpg",title:"jQuery换了一张图片"});

通过绑定方法设置元素的属性

attr(key,function(index))               例子$：("#img1").attr("src",function(){ Math.floor(Math.random())+".jpg" });

删除元素的属性

removeAttr(name)                       例子：("#img1").removeAttr("title");

2.jQuery内容。

      获取元素的HTML内容：

      html()

     设置元素的HTML内容：

     html(value)

     获取元素的文本内容：

     text()

     设置元素的文本内容：

     text(value) 

     text()与html()获取到的内容有什么区别呢？   text()获取只获取文本，当该元素下有html代码时会被自动去除。

     如对于代码：<div id="div1"><p>测试文本</p></div>    

     $("#div1").text();      获取到的是："测试文本"

     而$("#div1").html();   获取到的是："<p>测试文本</p>"

     对于设置而言:

     $("#div1").html("<p>测试文本</p>");   实际在浏览器显示的是："测试文本"。也就是说，<p></p>会被浏览器解释。

     $("#div1").text("<p>测试文本</p>");   实际在浏览器显示得是："<p>测试文本</p>"。也就是说，<p></p>也会当做文本显示出来。

3.jQuery value.

     获取value：

     val()                          例子：$("#input1").val();

     设置value:

     val(value)                   例子：$("#input1").val("确认提交");

4.jQuery css

     jQuery设置单一CSS样式语法：

     css(name,value)    

    例子：$("#div1").css("background-color","blue");     生成的代码为  <div id="div1" style=""></div>

　　　　 $("#div1").css({ "background-color":"red",color:"wihte" });　　生成的代码为<div id="div1" style="color:white"></div>

　　　　//注意一次过设置多个CSS样式时有"-"横线的css要用双引号括起来

     jQuery追加CSS类别语法:   注意它还会保留原有的CSS类别

     addClass(class)

     例子：$("#div1").addClass("css1");    生成的代码为 <div id="div1" class="css1"></div>  生成的样式会被浏览器解释显示。

             若继续执行:

              $("#div1").addClass("css2");    生成的代码为 <div id="div1" class="css1 css2"></div> 

      jQuery切换类别语法：当元素已含有同名称的className的CSS类别时，删除该类别。如果没有则增加一个该名称的类别。

      toggleClass(className)  toggleClass对于参数className的样式有则删除，无则添加。

      例子1:$("#div1").toggleClass("css_1");   生成的代码为<div id="div1" class="css_1"></div>

          当再次执行同样的代码$("#div1").toggleClass("css_1");  生成的代码为<div id="div1" class=""></div>

      例子2：$("#div1").toggleClass("css_1");   生成的代码为<div id="div1" class="css_1"></div>

          再执行：$("#div1").toggleClass("css_2");  生成的代码为<div id="div1" class="css_1 css_2"></div>    注意此处不是将css_1替换为css_2

          再执行$("#div1").toggleClass("css_1");   生成的代码为<div id="div1" class="css_2"></div>

      jQuery删除类别语法:   可以删除1个 多个 或 全部删除

      removeClass([class])

      例子：有这样一段代码<div id="div1" class="css_1"></div>

               执行   $("#div1").removeClass("css_1");   执行后的代码为:  <div id="div1" class=" "></div>

               有这样一段代码<div id="div1" class="css_1 css_2"></div>

               执行   $("#div1").removeClass("css_1 css_2")</div>     执行后的代码为 <div id="div1" class=" "></div>

               有这样一段代码<div id="div1" class="css_1 css_2"></div>

               执行$("#div1").removeClass();   执行后的代码为<div id="div1" class></div>

     

5.jQuery创建节点

      jQuery创建节点语法：

       $(html)

       例子：  $("<div>jQuery创建的节点</div>");    这样就创建了一个div节点。 

                执行一下两行代码

                       var dom = $("<span>jQuery创建的节点</span>");

                        $("#div1").append(dom);    //注意仅仅创建是无效的，必须要插入到页面内部才会生效。

                执行后的结果为: <div id="div1"><span>jQuery创建的节点</span></div>

6.jQuery插入节点

        内部插入节点：

        append(content)    content表示追加到目标的内容

        例子1:  原有代码: <div id="div1"></div>

        执行  $("#div1").append("<p>jQuery插入节点</p>");  生成的代码为：<div><p>jQuery插入节点</p></div>   

        此处插入的是新建的节点。如果是将页面上原有的节点append()会怎么样呢？

        例子2:   原有代码:

<div id="div1">第一个DIV1</div>

<div id="div2"><span id="span1">DIV2里的span1</span></div>

        执行  $("#div1").append($("#span1"));

        后的代码为:

            <div id="div1">第一个DIV1<span id="span1">DIV2里的span1</span></div>

            <div id="div2"></div>

        注意到:实际上相当于把第二个div里的span移到第一个div里面了。

        appendTo(content)   content表示被追加元素(一般是已经存在页面上的元素)

        例子1: 原有代码 <div id="div1"></div>

        $("<p>一个P元素<p>").appendTo($("#div1"));

         执行后的代码为:   <div id="div1"><p>一个P元素</p></div>

         例子2:原有代码:

           <div id="div1"></div>

           <div id="div2"><span id="span1">我是div2里的span1</span></div>

           执行： $("#span1").appendTo($("#div1"));

           执行后的代码为:  

           <div id="div1"><span id="span1">我是div2里的span1</span></div>

           <div id="div2"></div>

           append(function(index,html))    将一个function函数作为append方法的参数;

           例子：原有代码    <div id="div1"></div>

           执行:  $("#div1").append(getHtml());

           function getHtml(){ return "<p>jQuery通过调用函数生成了我!</p>"; }

           执行后的代码为    <div><p>jQuery通过调用函数生成了我!</p></div>    该方法常用于动态生成html再追加到页面元素中

           此外插入节点的方法还有

           prepend(content)

           prepend(function(index,html))

           prependTo(content)

           这三个方法的使用与append的三个方法大致一样。主要区别是prepend在插入的时候是插入到原有内容的前面，而append是插入到原有内容的后面。

           例子：

           原有代码：<div id="div1">原有内容</div>

           执行：$("#div1").prepend("<p>prepend插入的节点</p>").append("<p>append追加的节点</p>");

           之后代码为    <div><p>prepend插入的节点</p>原有内容<p>append追加的节点</p></div>

          外部插入节点：

          after(content)

          after(function)

          before(content)

          before(function)

          after before与append prepend的区别是，插入的时候，after与before与被插入元素是兄弟关系，而append和prepend与被插入元素是父子关系。

          例子:

          原有代码 <div id="div1"><p>我是原有的P元素</p></div>

          执行代码：$("#div1").prepend("<p>我是prepend函数插入的p元素</p>").append("<p>我是append函数插入的p元素</p>")

                        .after("<div id="div3">我是after函数插入的div元素</div>").before("<div id="div2">我是before插入的div元素</div>");

          执行后的实际代码为

<div id="div2">我是before插入的div元素</div>

<div id="div1">

       <p>我是prepend函数插入的p元素</p>

       <p>我是原有的p元素</p>

       <p>我是append函数插入的p元素</p>

</div>

<div id="div3">我是after函数插入的div元素</div>

外部插入节点方法2

insertAfter(content)

insertBefore(content)

例子：有如下代码

<div id="div1"><p id="p1">我是div1里面的p1里的内容</p></div>

执行代码：

$("<p>我是insertBefore方法插入的内容</p>").insertBefore($("#p1"));

$("<p>我是insertAfter方法插入的内容</p>").insertAfter($("#p1"));

执行后实际结果为

<div id="div1">

    <p>我是insertBefore方法插入的内容</p>

    <p id="p1">我是div1里面的p1里的内容</p>

    <p>我是insertAfter方法插入的内容</p>

</div>

也就是说，insertBefore,insertAfter与before,after基本一致，只是被插入元素与插入内容位置对调了而已。

7.复制节点

            clone()     复制节点元素，如果需要连元素的全部行为也进行复制，可以通过方法clone(true);

            例子：原有代码：

            <div id="div1"><img id="img1" src="1.jpg" /></div>

            $("#img1").click(function(){

                 $("#img1").clone().appendTo($("#div1"));

            })

            当点击图片后，HTML代码变为

            <div id="div1"><img id="img1" src="1.jpg"><img id="img1" src="1.jpg"></div>

            在此要注意的是，虽然同样的img标签id也一样，但是点击复制出来的图片的时候，不会触发原有事件，

            如果希望连事件也一样复制，只需将上面的代码clone()改为clone(true)即可，这样，复制的时候会连原有元素的行为事件也一起复制。

8.替换元素节点

            replaceWith(content)

            replaceAll(content)

            例子：原有代码：<div><p id="p1">我是div里的p里的内容</p></div>

            执行  $("#p1").replaceWith("<span>我是span里的内容</span>");

            执行后的HTML代码变为 <div><span>我是span里的内容</span></div>    

            可以看到div里的p元素已经被span替换了。

            replaceAll与replaceWith的区别不大，只是 被替换元素与替换内容倒过来而已。

            例子：<div><p id="p1">我是div里的p里的内容</p></div>

            执行  $("<span>我是span里的内容</span").replaceAll($("#p1"));

            执行后HTML代码变为<div><span>我是span里的内容</spam></div>

9.wrap包括元素

           语法：

           wrap(html), wrap(elem),wrap(function)   html代表自定义字符串代码,elem代表所选中DOM元素,function代表一个函数，用函数返回的代码作为包括代码。

           例子：原有的代码  <div id="div1"><p id="p1">我是div里的p元素的内容</p></div>

           执行代码： $("#p1").wrap("<span></span>");

           执行之后HTML代码变为<div id="div1"><span><p id="p1">我是div里的p元素的内容</p></span></div>

           注意到p元素已经被<span>标签包括起来了。

           例子2：原有代码：

          <div id="div1">

             <p id="p1">我是p1里的内容</p>

             <p id="p2">我是p2里的内容</p>

          </div>

          执行代码：  $("#p1").wrap($("#p2"));

          执行之后的结果为：

             <div id="div1">

                 <p id="p2">

                     我是p2里的内容<p id="p1">我是p1里的内容</p>

                 </p>

                 <p id="p2">我是p2里的内容</p>

              </div>

            注意到：当选择DOM元素用wrap包裹元素的时候，是另外复制一份包裹元素的。并不是将被包裹元素移动到包裹元素里。

            例子3：原有代码 <div id="div1"><p id="p1">我是p里的内容</p></div>

            执行代码：

            $("#p1").wrap(function(){

                 return "<div></div>";

            })

            执行之后HTML代码变为：<div id="div"><div><p>我是p里的内容</p></div></div>

            移除元素的包裹元素

            unwrap()  移除元素的父元素或包裹标记

            例子：<div><p><span id="span1">我是span里的元素</span></p></div>

            执行代码：  $("#span1").unwrap();

            HTML代码变为<div><span id="span1">我是span里的元素</span></div>

            注意到<span>标签外的p标签已经被移除了

            内包裹，将参数中的元素在里面包裹选中的内容

            语法:

            wrapInner(html),wrapInner(elem),wrap(function)  html为自定义字符串代码，elem为选中的DOM元素，function表示用函数返回值作为参数。

            例子：原有代码<div id="div1"><p id="p1">我是p里的内容</p></div>

            执行代码：  $("#p1").wrapInner("<b></b>");

            执行之后HTML变为 <div id="div1"><b><p id="p1">我是p里的内容</p></b></div>

            wrapInner(elem),wrapInner(function)与wrap(elem),wrap(function)大致相同，只是包裹选中元素里面的内容而已。

            语法:

            wrapAll(html),wrapAll(elem)  将所选中的元素及其所有兄弟元素用参数中的代码包裹起来。

            例子：

                 <div id="div1">

<p id="p1">我是p第一行</p>

<p>我是p第二行</p>

<p>我是p第三行</p>

</div>

执行代码:$("#p1").wrapAll("<div></div>");

执行后HTML代码变为：

<div id="div1">

      <div>

<p id="p1">我是p第一行</p>

 

<p>我是p第二行</p>

 

<p>我是p第三行</p>

</div>

 

</div>

如果wrapAll()改为wrap()

则生成的代码为

<div id="div1">

    <div><p id="p1">我是p第一行</p></div>

    <div><p>我是p第二行</p></div>

    <div><p>我是p第三行</p></div>

</div>

可以看到wrap()与wrapAll是不同的。wrap()是每个选中的元素都用参数中的代码包裹一次。而wrapAll是所选中的元素的所有兄弟元素都用参数中的代码包裹起来。

10.遍历元素

            语法：each(callback)

            例子：原有代码

                   <div id="div1">

                       <ul>

                            <li>第一个li</li>

                            <li>第二个li</li>

                            <li>第三个li</li>

                      </ul>

                   </div>

              执行代码:

  $("#div1 > ul > li").each(function(){

       $(this).text("我被jQuery改了");                    

  })

  执行后HTML代码为:

                   <div id="div1">

                       <ul>

                            <li>我被jQuery改了</li>

                            <li>我被jQuery改了</li>

                            <li>我被jQuery改了</li>

                      </ul>

                   </div>

11.删除元素 

              语法：remove([expr])

                      empty();

              例子：原有代码

                <div id="div1">

                     <ul>

                         <li>第一个li</li>

                         <li>第二个li</li>

                      </ul>

                 </div>

                事件：$("li").click(function(){

                              $(this).remove();

                         })

                 当点击第一个li时，生成的HTML为   

                <div id="div1">

                     <ul>

                         <li>第二个li</li>

                      </ul>

                 </div>

                注意到第一个<li>元素已经从HTML中删除了。

                如果将上面的remove()方法换成empty()方法生成的代码又是什么？

                <div id="div1">

                     <ul>

                         <li></li>

                         <li>第二个li</li>

                      </ul>

                 </div>

                 由此可以看出empty()与remove()的区别是empty()仅仅是清空所选中元素的内容，并不会讲元素从HTML代码中删除，仍然保留元素所占位置。

                 而remove()是将元素从HTML代码中删除，并其所占位置也会被删除。

               加参数的remove()例子:

               <div>

                   <ul>

                         <li title="1">第一个li</li>

                         <li title="2">第二个li</li>

                    </ul>

                    <input id"button1" type="button" value="删除第二个li">

              </div>

              执行代码：

$("#button1").click(function(){

      $("li").remove("li[title=2]");                    

})

  执行之后的HTML代码为：

 

               <div>

                   <ul>

                         <li title="1">第一个li</li>

                    </ul>

                    <input id"button1" type="button" value="删除第二个li">

              </div>