一.容易混淆的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()方法:可以用来读取或者设置某个元素的纯文本内容。
text()方法和html()方法一样可以同时选定多个元素,而text()方法不同,它在匹配多个元素时,会同时读取多个元素的内容。
3.val()方法:可以用来获取或者设置表单元素的value字段值.如果元素为多选,则返回一个包含所有选择的值的数组。可在表单中操作。
<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(),获得第一个匹配的祖父元素。