Jquery操作DOM(笔记2)

本文欢迎转载,但必须在文章显眼处保留原文地址

http://blog.163.com/ganlanfei@126/blog/static/121819871201011160936439/

接着上一篇Jquery操作DOM(笔记1)继续

  

1.替换节点

 在Jquery中提供了两个替换节点的方法,即replaceWidth()和replaceAll();

 replaceWidth：

 说明：将匹配到的元素替换成指定的HTML元素

 $("p").replaceWidth("<b>AA</b>"); //将所有P标记替换成<b>AA</b> 

 replaceAll：

 说明：与replaceWidth相反

 $(("<b>AA</b>")).replaceAll("p"); //将所有P标记替换成<b>AA</b> 

2.包裹节点

  在Jquery中提供了三个包裹节点的方法 wrap(),wrapAll()和wrapInner()

  wrap：

  说明：将指定的HTML元素包裹所有匹配的元素  

  $("p").wrap("<div></div>"); //在每个P标记外面增加一个div容器;

  wrapAll:

  说明：将指定的html元素包裹所有匹配的元素，与warp不同的是，warp是将匹配到的元素进行单独包裹，而warpAll是将所有匹配到的元素集中到一起(在匹配到的第一个元素的位置)进行包裹，会改变到DOM的结构。

  $("p").wrapAll("<div></div>"); //在所有P标记外面增加一个div容器;

  PS:读者最好自己试一下两个的区别，可使用Firebug或者IE自带的开发工者工(在ie下按F12自动弹出)查看;

  WrapInner：

  说明：该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

  $("strong").wrapInner("<b></b>");

  使用前<strong>AA</strong> 使用后<strong><b>AA</b></strong>

  

  3.属性操作：

    在Jquery中，用attr()方法来获取和设置元素的属性，用removeAttr()方法来删除元素的属性

    例： var title=$("p").attr("title"); //获取第一个p元素的title属性,有多个时，也只是得到第一个p标记而以

             var title=$("p")[1].title;  //转换成dom对象，获取第二个p标记的title属性

        $("p").attr("title","you title value"); //设置p元素的title属性值

        $("p").attr("title":"you title value","name":"you name values"); //同时设置p元素多个属性值

    

        $("P").removeAttr("title");//删除p元素的title属性

      获取，设置或者删除样式一样可以用上面的方法，因为元素有class属性。

      除了可以改变样式外，还可以追加样式,在jquery里面提供了addClass()方法

   例：<p class="myClassA" title="my title value">哈哈</p>

       $("p").addClass("myClassB");

       <p class="myClassA myClassB" title="my title value">哈哈</p>

   PS:如果给一个元素添加了多个class值，那么就相当于合并了它们的样式，如果有不同的class设定同一个样式属性，那后者覆盖前者.

      有追加，当然也有删除，与addClass()相反的则是removeClass()

   例：$("p").removeClass("myClassA").removeClass("myClassB");

       简写$("p").removeClass("myClassA myClassB");

  4.接下来介绍一个交替执行的方法,即toggle()

  例：  <p >点我呀</p>

$().ready(function() {

    $("p").toggle(function() {

        alert("单击");//代码1

    }, function() {

        alert("再单击"); //代码2

    })

})

第一次点击的时候执行代码1,第二次执行代码2,第三次执行代码1,就是这样不断的重复切换。

  

  5.判断是否含有某个样式

   hasClass()可以用来判断元素中是否含有某个class，如果有返回true,否则返回false

  例：$("p").hasClass("myClassA");//也可以写成$("p").is(".myClassA")，完全是等价的，hasClass实际上也是调用了is()方法。

  

  6.设置和获取html，文本和值

   html()此方法类似javascript中的innerHTML属性，可以用来读取或设置某个元素中的html内容

   例：<p><b>aa</b></p>

      alert($("p").html());

      弹出：<b>aa</b>

      设置p元素里面的内容

      $("p").html("<i>aaa</i>");

      结果:<p><i>aa</i></p>

   text()此方法类似javascript中的innerText属性，可以用来读取或设置某个元素中的text内容

  例：<p><b>aa</b></p>

      alert($("p").text());

      弹出：aa

      设置p元素里面的内容

      $("p").text("<b><i>aaa</i></b>");

      结果:<b><i>aaa</i></b>

   PS:javascript中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所有浏览器。

   夜深了，待续。。。