jQuery开发之DOM操作四

来源：互联网发布：交友软件挣钱编辑：程序博客网时间：2024/06/11 23:44

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()的区别
这里写图片描述

0 0