jQuery与Dom

上节讲解了jQuery的选择器,基本都掌握了,现在再讲解一下jQueryDom操作。

 

1、查找节点

1.1 查找元素节点

[javascript] view plaincopyprint?

  1. var $li = $("ul li:eq(1)");   //获取<ul>里第二个<li>节点。  
  2.     
  3. var li_txt = $li.text();    //获取第二个<li>元素节点的文本内容。  
  4.     
  5. alert(li_txt);  

1.2查找属性节点

jQuery选择器找到所需元素之后,就可以使用attr()方法来获取它的各种属性值。attr()的参数可以是一个,可以是两个。一个表示取值,两个表示赋值。

[javascript] view plaincopyprint?

  1. var $para = $("p");  //获取<p>节点  
  2.     
  3. var p_txt = $para.attr("title"); //获取<p>元素节点属性title  
  4.     
  5. alert(p_txt);  

 

2、创建节点

 

2.1创建元素节点

例如要创建两个<li>元素节点,并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。

(1)创建两个<li>新元素

(2)将这两个元素插入文档中。

(1)个步骤可以用jQuery的工厂函数$()来完成,格式如下:

[javascript] view plaincopyprint?

  1. $(html);  
  2.     
  3. $(html)方法会根据传入的html标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。  
  4.     
  5. 首先创建两个<li>元素,如下:  
  6.     
  7. var $li_1 = $("<li></li>");  
  8.     
  9. var $li_2 = $("<li></li>");  
  10.     
  11. 插入元素:  
  12.     
  13. $("ul").append($li_1);  
  14.     
  15. $("ul").append($li_2);或者用如下写法:$("ul").append($li_1).append($li_2);  

2.2创建文本节点

[javascript] view plaincopyprint?

  1. var $li_1 = $("<li>香蕉</li>");  
  2.     
  3. var $li_2 = $("<li>雪梨</li>");  

其他的同2.1

 

2.3创建属性节点

[javascript] view plaincopyprint?

  1. var $li_1 = $("<li title='香蕉'>香蕉</li>");  
  2.     
  3. var $li_2 = $("<li title='雪梨'>雪梨</li>");  

其他的同2.1

 

3、插入节点
动态的创建HTML元素并没有什么实际用处,还需要将新创建的元素插入到文档中去,前面已经介绍了一种append(),其实还有很多插入方法。

主要有四对方法处理,其实都很简单,很好记。如下:

append()appendTo():向每个匹配元素的内部追加内容,指的是后部。

prepend()prependTo():向每个匹配元素内部前置内容,指的是前部。

after()insertAfter():在每个匹配元素后部插入内容,指的是同级后面。

before()insertBefore():在每个匹配元素前部插入内容,指的是同级前面。

 

4、删除节点

如果文档中某一个元素多余,那么应该删除。jQuery提供了两种删除节点的方法,及remove()empty()

4.1remove()方法

var $li = $("ul li:eq(1)").remove(); //获取第二个<li>元素节点后,将它从网页上删除。

其返回值是一个指向已被删除的节点的引用,因此可以在以后继续使用这些元素。

$li.appendTo("ul"); //把刚才删除的节点又重新添加到<ul>元素里。

以上代码可以简写如下:

$("ul li:eq(1)").appendTo("ul"); //用来移动元素,移动元素首先删除元素,然后再插入。

remove()还可以添加参数,如下:

$("ul li").remove("li[title!=萝卜]");

4.2empty()方法

严格讲,empty()并不删除节点,只是清空节点,它能清空元素中的所有后代节点。

 

5、复制节点

clone()clone(true),复制节点后,被复制的新元素并不具有任何行为。如果需要新元素有具有复制功能,则使用clone(true)

[javascript] view plaincopyprint?

  1. $("ul li").click(function(){  
  2.     
  3.     $(this).clone().appendTo("ul");//复制当前节点,并将它追加到<ul>元素中。  
  4.     
  5. });  

 

6、替换节点

如果要替换某个节点,jQuery提供了相应的方法,即replaceWith()replaceAll()

$("p").repaceWith("<strong>你最不喜欢的水果是?</strong>");   //将所有匹配的元素都替换成指定的HTML或者DOM元素。

$("<strong>你最不喜欢的水果是?</strong>").repalceAll("p"); //和上面是一对操作。

 

7、包裹节点

使用wrap()wrapAll()方法可以实现:

[javascript] view plaincopyprint?

  1. $("strong").wrap("<b></b>");  //把每一个<strong>都用一个<b>包围起来,有几个包几个  
  2.     
  3. $("strong").wrapAll("<b></b>"); //整体包  

warpInner()方法,包裹元素的子内容(包括文本节点)

 

8、属性操作

jQuery中,用attr()方法来获取和设置元素属性,removeAttr()方法来删除元素属性。

8.1获取和设置属性 

attr()一个参数表示获取属性值,两个参数表示设置属性值,前面讲过。

$("p").attr("title","your title");

还可以设置多值,$("p").attr({"title":"your title","name":"test"})

jQuery中很多方法都是同一个函数实现获取(getter)和设置(setter)的,例如上面的attr()方法,既能设置元素属性的值,也能获取元素属性的值,类似的还有

html()text()height()width()val()css()等方法。

8.2删除属性

$("p").removeAttr("title");

 

9、样式操作

9.1获取样式和设置样式

var p_class = $("p").attr("class"); //获取<p>元素的class

也可以用attr来设置<p>元素的classjQuery代码如下:

$("p").attr("class","high");  //此代码的作用是将原来的class替换为新的class,而不是在原有的基础上追加新的class,追加的如下。

9.2追加样式

使用addClass();

$("p").addClass("another"); //<p>元素追加"another"类,此时一共有两个样式了。

9.3移除样式

使用removeClass()来完成,当有参数时removeClass("another"),则移除指定的样式,还有removeClass("high another");移除两个样式

当没有参数时则表明移除该元素的所有样式。

9.4切换样式

之前有toggle()方法

[javascript] view plaincopyprint?

  1. $toggleBtn.toggle(function(){  
  2.     
  3.       //show code  
  4.     
  5. },function(){  
  6.     
  7.       //hide code  
  8.     
  9. });  

这里有toggleClass方法,控制样式的转换。如果类名存在则删除它,如果类名不存在则添加它。

$("p").toggleClass("another");  //重复切换类名"another"

9.5判断是否含有某个样式

hasClass("another"); 其实其内部是使用is(".another")来实现的,这样做只是增加了可读性。

 

10、设置和获取HTML、文本和值

主要有如下方法:

html()   对应javaScriptinnerHTML属性

text() 对应javascriptinnerText属性,firefox不支持innerText属性

val()方法focus()blur()方法

val()除了取值和设置之外,还可以给select checkbox radio选中值,jQueryval()的原则是从最后一个往前读,valuetext

this.defaultValue方法。

 

11、遍历节点

11.1children()方法

遍历所有的子节点。

11.2next(),pre(),siblings()

closest()取得最近的匹配元素。

 

12CSS-DOM操作

$("p").css("color");//获取颜色属性

$("p").css("color","red");//设置颜色

$("p").css({"fontSize""30px""backgroundColor""#888888"});//同时设置多个样式。

有两个注意点:

(1)如果值是数字,将会被自动转化为像素值。

(2)css()方法中,如果属性中带有"-"符号,例如font-sizebackground-color属性,用驼峰式写法。

hight().width();

offset()  .left .top  获取元素在当前视窗的偏移量,返回值对象包含两个属性lefttop

position()  .left .top 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的偏移量。

scrollTop() scrollLeft()方法。分别获取元素的滚动条距顶端的距离和距左侧的距离。也可以设置值。scrollTop(300)

 

下面是个经典的例子:鼠标移过图片,图片放大

[html] view plaincopyprint?

  1. <html>  
  2. <head>  
  3. <title>jQuery DOM test</title>  
  4. <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>  
  5. <script type="text/javascript">  
  6. $(function(){  
  7.     var x = 10;  
  8.     var y = 20;  
  9.     $("a.tooltip").mouseover(function(e){  
  10.         //alert("over");  
  11.         this.myTitle = this.title;  
  12.         this.title = "";  
  13.         var imgTitle = this.myTitle ? "<br/>"+this.myTitle : "";  
  14.         var tooltip = "<div id='tooltip'><img src='" + this.href +"' alt='产品预览图'/>"+imgTitle+"</div>";   
  15.         $("body").append(tooltip);  
  16.         $("#tooltip").css({"top":(e.pageY + y)+"px","left":(e.pageX + x)+"px"}).show("fast");  
  17.     }).mouseout(function(){  
  18.         this.title = this.myTitle;  
  19.         $("#tooltip").remove();  
  20.     });  
  21. });  
  22. </script>  
  23. </head>  
  24. <body>  
  25. <div>  
  26. <ul style="list-style:none;">  
  27.     <li style="display:inline"><a href="img/ipod.jpg" class="tooltip" title="苹果ipod" ><img src="img/ipod.jpg" alt="苹果ipod" style="width:150px; height:150px"/></a></li>  
  28.     <li style="display:inline"><a href="img/iphone.jpg" class="tooltip" title="苹果iphone"><img src="img/iphone.jpg" alt="苹果iphone" style="width:150px; height:150px"/></a></li>  
  29.     <li style="display:inline"><a href="img/ipad.jpg" class="tooltip" title="苹果ipad"><img src="img/ipad.jpg" alt="苹果ipad" style="width:150px; height:150px"/></a></li>  
  30.     <li style="display:inline"><a href="img/air.jpg" class="tooltip" title="苹果air"><img src="img/air.jpg" alt="苹果air" style="width:150px; height:150px"/></a></li>  
  31. </ul>  
  32. </div>  
  33. </body>  
  34. </html>  


注意其中的li的横向排列方法还有其他的方法使其横向排列:

[html] view plaincopyprint?

  1. 方法一:直接带<li>里面加样式来实现  
  2.     
  3. <ul style=list-style:none;>  
  4. <li style="display:inline">我要横向排列</li>  
  5. <li style="display:inline">Hier of chsfish </li>  
  6. </ul>  
  7.     
  8.     
  9. 方法二:通过定义ul li 来实现  
  10.     
  11. ul{  
  12. list-style-type:none;  
  13. width:100%;  
  14. }  
  15. ul li{  
  16. width:80px;  
  17. float:left;  
  18. }  
  19. <ul>  
  20. <li>我要横向排列</li>  
  21. <li>Hier of chsfish </li>  
  22. </ul>  
  23.     
  24. 方法三:通过定义liCSS来实现  
  25.     
  26. <style type="text/css">  
  27. <!--  
  28. li {  
  29. background-color: #CCCCCC;  
  30. text-align: center;  
  31. float: left;  
  32. width: 70px;  
  33. margin: 3px;  
  34. padding: 3px;  
  35. list-style-type: none;  
  36. }  
  37. -->  
  38. </style>  
  39. <ul>  
  40.    <li>Text1Text1Text1</li>  
  41.    <li>Text2Text2Text2</li>  
  42.    <li>Text3Text3Text3</li>  
  43.    <li>Text4Text4Text4</li>  
  44.     
  45.    <li>Text5Text5Text5</li>  
  46.    <li>Text6Text6Text6</li>  
  47. </ul>  
posted @ 2013-10-30 14:10  wuseyukui  阅读(181)  评论(0编辑  收藏  举报