jQuery中的DOM操作(2)

一.容易混淆的html(),text(),value()

1、html()方法：可以用来读取或者获取某个元素的html内容；

<div><strong>文本内容</strong></div>

var div_html = $("div").html();
alert(div_html);

获取的结果是：<strong>文本内容</strong>

如果选择器同时选中多于一个元素的时候，那么只能读取第一个元素的内容。

<div>
<strong>文本内容1</strong>
<strong>文本内容2</strong>
</div>

var div_html = $("div").html();
alert(div_html);

获取的结果是：<strong>文本内容1</strong>

  html()不仅可以读取内容还可设置内容，但是和上面不同的事，如果选择器同时选中多于一个元素的时候，那么被选中的的所有元素里面的html结构都将被改变。 

<div>
<strong>文本内容1</strong>
<strong>文本内容2</strong>
</div>

var div_html = $("div").html(<h1>a</h1>);
alert(div_html);

获取的结果是：<strong><h1>a</h1></strong>
            <strong><h1>a</h1></strong>

 

 2、text()方法：可以用来读取或者设置某个元素的纯文本内容。

<p>这个是文本内容1<a href="#">超链接1</a></p>

var p_html = $("div p").text();
alert(p_html);

获取的内容是：这个是文本内容1超链接1
只读取元素的纯文本内容，包括他的后代元素.

 
text()方法和html()方法一样可以同时选定多个元素,而text()方法不同，它在匹配多个元素时，会同时读取多个元素的内容。

<p>文本内容1<a href="#">超链接1</a></p>
<p>文本内容2<a href="#">超链接2</a></p>

var p_html = $('div p').text();
alert(p_html);

获取的内容是：这个是文本内容1超链接1
            这个是文本内容2超链接2

 text()方法还可以替换所匹配元素的文本内容。

<div><span>文本内容1</span></div>

var p_html = $('div p').text(<span>内容文本2</span>)
alert(p_html);

获取的内容是：<div><span>文本内容2</span></div>

 
 3.val()方法：可以用来获取或者设置表单元素的value字段值.如果元素为多选，则返回一个包含所有选择的值的数组。可在表单中操作。

<input type="text" id="address" value="邮箱地址">

$("#address").focus(function(){      //.focus()获取焦点
         var txt = $(this).val();
         if(txt=="邮箱地址")
         {$(this).val("");}
         })
$("#address").blur(function(){        //.blur()失去焦点
         var txt = $(this).val();
         if(txt=="")
         {$(this).val("邮箱地址")}
         })

 二.样式操作

.attr() 获取和设置元素属性

.addClass() 添加class，就相当于合并了他们的样式，添加的样式覆盖前者。

.remove() 移除某个元素的样式。

.toggle() 替换显示元素，交替执行。

.hasClass() 判断是否存在某个样式，有返回true，没有返回false

三，遍历节点

.children()，取得匹配元素的子元素集合。

.next()，取得匹配元素后面紧邻的同辈元素

.prev()，取得匹配元素前面紧邻的同辈元素

.siblings()，取得同辈元素前后紧邻的同辈元素

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

.parsent()，获得匹配元素的父级元素

.parsents()，获得匹配元素的祖先元素，查到一个父类节点不会停止，仍会继续查找，并返回集合。

.closest()，获得第一个匹配的祖父元素。