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()方法支持所有浏览器。


   夜深了,待续。。。
posted on 2010-12-16 00:14  Ss_Andy  阅读(1052)  评论(2编辑  收藏  举报