jquery中的Dom操作

花了一些时间将jquery的Dom操作了看了一遍，这些用法可以根据自己使用的版本到jquery的网站去下载相应的手册查到，下面对一些操作简单的总结：

jquery 1.6 API下载：http://www.jb51.net/shouce/jQuery-1.6-api/

jquery 1.7 API下载：http://lab.julying.com/jQuery-api-1.7/

下面的总结基于一下的html  

     <ul>

          <li title="apple" οnclick="cloneDom()">apple</li>

          <li title="orange" οnclick="cloneDom()">orange</li>

           <li title="banana" οnclick="cloneDom()">banana</li>

       </ul>

 节点创建

  append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefor()这几个方法效果相似，只不过操作有所区别

可以分成两类：

第一类是给节点添加内容 $(节点标签).方法(添加的内容) append()   prepend()  after()  before()

               例如：$("#dom").append("<h4>追加的内容</h4>");在#dom上追加内容“<h4>追加的内容</h4>”

第二类是把内容添加到节点上 $(添加的内容).方法(节点标签)  appendTo()  prependTo()   insertAfter()   insertBefor()

              例如：$("<h4>追加的内容</h4>").appendTo("#dom");把“<h4>追加的内容</h4>”追加到#dom上

删除节点

  节点的移除remove():remove()是将节点删除，并能够返回一个指向已被删除的节点的引用 exa:$("ul li").remove()

  节点的清空empty():清空元素以及后代的所有节点，清空的值不可获得 exa:$("ul li:eq(1)").empty()

复制节点

            使用clone()方法

            html: <img  src="../css/img/footerbg.jpg" width="40px" height="30px" onClick="cloneDomimg(this)"/>

            jquery:

             function cloneDomimg(aa){

   $(aa).clone(true).prependTo("div[id='copy']");

                 };

当clone(true)设置成true时，复制的节点也将会具备原节点所绑定的事件

替换节点

          repalceWith()、replaceAll()两个方法的效果一样，只是操作的方式不同

          $("ul li:eq(1)").replaceWith("<li>noddles</li>");

          $("<li>noddles</li>").replaceAll("ul li:eq(1)");

属性操作

     属性的获取与设置

   attr()、val() 、text()、 html()、 css() 等方法，对于这些方法不带参数可以直接获取值

    设置参数  exa:$("ul li:eq(1)").attr({"title":“title”,"class":attr})；  用attr()设置多个参数

   样式操作

        追加addClass() 移除removeClass() 切换样式toggleClass()

      css样式：

        .high{ width:400px; color: #90F;}

        .rehigh{border:2px solid #C03;width:200px;}

      jquery: 

                   $("ul li:eq(1)").addClass("high").addClass("rehigh");  可以给一个元素同时追加两个样式

                   追加之后的ul li:eq(1)的html为   <li title="orange" οnclick="cloneDom()"class="high rehigh">orange</li>

                  $("ul li:eq(1)").removeClass("high")

     移除样式high后ul li:eq(1)的html为   <li title="orange" οnclick="cloneDom()" class="rehigh">orange</li>

     $("ul li:eq(1)").toggleClass("high")

     当点击切换的元素时ul li:eq(1)的html变为:<li title="orange" οnclick="cloneDom()"class="rehigh high">orange</li>

     再次点击该元素时ul li:eq(1)的html变为:<li title="orange" οnclick="cloneDom()" class="rehigh">orange</li>

焦点的使用focus() blur()

focus()方法相当于javascript中的onfocus()方法，他是处理获得焦点时的事件；blur()方法相当于javascript中的onblur()方法

html:

      <input type="text" id="address" value="请输入地址"/>

      <input type="text" id="password" value="请输入密码"/>

      <input type="button" id="login" value="登录"/>

jquery:

      $(function(){

$("#address").focus(function(){

  var text_val=$(this).val();  

  if(text_val=="请输入地址"){

    $(this).val("");

  }

});

$("#address").blur(function() {

                 var text_val=$(this).val();

  if(text_val==""){

    $(this).val(this.defaultValue);

  }

            });

$("#password").focus(function(){

  var text_val=$(this).val();

  if(text_val==this.defaultValue){

    $(this).val("");

  }

});

$("#password").blur(function() {

        var text_val=$(this).val();

       if(text_val==""){

       //this.defaultValue是默认的文本value值

        $(this).val(this.defaultValue);

  }

                     });

});

  获取元素的位置

             offset():获取匹配元素在当前视口的相对偏移。

             position():获取匹配元素相对父元素的偏移。

总结：这些东西初学起来还是不太困难，不过还是重在实践，在实践中发现其内涵与意义。