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()的区别
时间： 2024-10-12 04:03:56