1,设置获取HTML、文本和值
(1) html()方法
此方法类似于javaScript的innerHTML属性,可以用来读取或者设置某个元素的HTML内容。
示例代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>jQuery test </title>
<script type ="text/javascript" src ="jquery.js" ></script>
<script type ="text/javascript">
$(document).ready(function(){
$("ul li:eq(2)").click(function(){
var $li_html =$(this).html();
alert($li_html);
});
});
</script>
</head>
<body>
<p title ="选择最喜欢的水果">选择最喜欢的水果</p>
<ul>
<li title ="苹果">苹果</li>
<li title ="橘子">橘子</li>
<li title ="菠萝">菠萝</li>
</ul>
</body>
</html>
运行结果如下:
(2)text()方法
示例代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>jQuery test </title>
<script type ="text/javascript" src ="jquery.js" ></script>
<script type ="text/javascript">
$(document).ready(function(){
var p_text =$("p").text();
alert(p_text);
});
</script>
</head>
<body>
<p title ="选择最喜欢的水果"><strong>选择最喜欢的水果</strong></p>
<ul>
<li title ="苹果">苹果</li>
<li title ="橘子">橘子</li>
<li title ="菠萝">菠萝</li>
</ul>
</body>
</html>
运行结果如下:
注意:
(1) JavaScript中的innerHTML属性并不能在Firefox浏览器下运行,而jQuery 的text()方法支持所有的浏览器。
(2) text()方法对所有的HTML文档和XML文档都有效。
(3) val()方法
此方法类似于JavaScript中的value属性,可以用来设置获取元素的值。
示例代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>jQuery test </title>
<script type ="text/javascript" src ="jquery.js" ></script>
<script type ="text/javascript">
$(document).ready(function(){
$("body").dblclick(function(){
var p_text =$("input").val();
alert(p_text);
});
});
</script>
</head>
<body>
<p title ="选择最喜欢的水果" ><strong>选择最喜欢的水果</strong></p>
<ul>
<li title ="苹果">苹果</li>
<li title ="橘子">橘子</li>
<li title ="菠萝">菠萝</li>
</ul>
<div>
<input type ="text"/>
</div>
</body>
</html>
运行结果如下:
2,遍历节点
(1) children()方法
该方法用于取得匹配元素的子元素集合。
(2) next()方法
该方法用于取得匹配元素后面紧邻的同辈元素。
(3)prev()方法
该方法用于获取匹配元素前面近邻的同辈元素。
(4)siblings()方法
该方法用于匹配元素前后所有的同辈元素。
(5)closest()方法
该方法用于获取最近匹配的元素,首先检查当前元素是否匹配,如果匹配,直接返回元素本身,如果不匹配则向上查找父元素,逐级向上直到找到匹配的元素,如果什么都没有找到,那么返回一个空的jQuery对象。
(6) parent(),parents()与closest()的区别
原文地址:http://blog.csdn.net/hanhailong18/article/details/46521133