码迷,mamicode.com
首页 > Web开发 > 详细

jQuery开发之DOM操作四

时间:2015-06-16 19:16:47      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:jquery   遍历   

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()的区别
技术分享

jQuery开发之DOM操作四

标签:jquery   遍历   

原文地址:http://blog.csdn.net/hanhailong18/article/details/46521133

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!