jQuery 中的 DOM 操作-查找节点

来源：互联网发布：mysql 解析json字符串编辑：程序博客网时间：2024/05/17 02:35

•DOM(Document Object Model—文档对象模型)：一种与浏览器,平台,语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件

•DOM 操作的分类:

–DOMCore: DOM Core 并不专属于 JavaScript,任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML

–HTMLDOM: 使用 JavaScript和 DOM为 HTML文件编写脚本时,　有许多专属于 HTML-DOM的属性

–CSS-DOM:针对于 CSS操作,在 JavaScript中,CSS-DOM 主要用于获取和设置 style对象的各种属性

•查找节点:

–查找属性节点:通过 jQuery 选择器完成.

–操作属性节点:查找到所需要的元素之后,可以调用 jQuery对象的attr()方法来获取它的各种属性值

–操作文本节点：通过 text()方法

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="js/jquery-1.7.2.js"></script><script type="text/javascript">//测试使用 jQuery 操作文本节点, 属性节点. //及查找元素节点$(function(){//1. 操作文本节点: 通过 jQuery 对象的 text() 方法alert($("#bj").text());$("#bj").text("hi");//2. 操作属性节点: 通过 jQuery 对象的 attr() 方法. //注: 直接操作 value 属性值可以使用更便捷的 val() 方法. alert($(":text[name='username']").attr("value"));$(":text[name='username']").attr("value", "world");})</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li id="se">首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name: <input type="text" name="username" value="hello"/></body></html>

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="js/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){//1. 点击所有的 p 节点, 能够弹出其对应的文本内容/*1. jQuery 对象可以进行隐式迭代: $("p").click(function(){...});为选取的所有的 p 节点都添加了 click 响应函数. jQuery 对象本身就是一个 DOM 对象的数组2. 在响应函数中, this 是一个 DOM 对象. 若想使用 jQuery 对象的方法需要把其包装为 jQuery 对象: 使用 $() 把 this 包起来. 3. text() 方法时一个读写的方法: 不加任何参数, 读取文本值; 加参数为属性节点添加文本值(文本节点) (和 text() 类似的方法: attr(), val())*/$("p").click(function(){alert($(this).text());$(this).text("^^" + $(this).text());//alert(this.firstChild.nodeValue);});//2. 使第一个 table 隔行变色$("table:first tr:even").css("background", "#ffaacc");//3. 点击 button, 弹出 checkbox 被选中的个数$("button").click(function(){alert($(":checkbox:checked").length);});});</script></head><body><p>段落1</p><p>段落2</p><p>段落3</p><table><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr></table><br><hr><br><table><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr><tr><td>第一行</td><td>第一行</td></tr></table><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><input type="checkbox" name="test" /><button>您选中的个数</button></body></html>

0 0