jQuery学习教程十一: jQuery

来源：互联网发布：关键字排名优化软件编辑：程序博客网时间：2024/06/05 14:11

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

提示：DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

实例

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("#btn1").click(function(){    alert("Text: " + $("#test").text());  });  $("#btn2").click(function(){    alert("HTML: " + $("#test").html());  });});</script></head><body><p id="test">这是段落中的<b>粗体</b>文本。</p><button id="btn1">显示文本</button><button id="btn2">显示 HTML</button></body></html>

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

实例

$("#btn1").click(function(){  alert("Value: " + $("#test").val());});

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

实例

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    alert($("#w3s").attr("href"));  });});</script></head><body><p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p><button>显示 href 值</button></body></html>

jQuery 文档操作方法

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法描述addClass()向匹配的元素添加指定的类名。after()在匹配的元素之后插入内容。append()向匹配元素集合中的每个元素结尾插入由参数指定的内容。appendTo()向目标结尾插入匹配元素集合中的每个元素。attr()设置或返回匹配元素的属性和值。before()在每个匹配的元素之前插入内容。clone()创建匹配元素集合的副本。detach()从 DOM 中移除匹配元素集合。empty()删除匹配的元素集合中所有的子节点。hasClass()检查匹配的元素是否拥有指定的类。html()设置或返回匹配的元素集合中的 HTML 内容。insertAfter()把匹配的元素插入到另一个指定的元素集合的后面。insertBefore()把匹配的元素插入到另一个指定的元素集合的前面。prepend()向匹配元素集合中的每个元素开头插入由参数指定的内容。prependTo()向目标开头插入匹配元素集合中的每个元素。remove()移除所有匹配的元素。removeAttr()从所有匹配的元素中移除指定的属性。removeClass()从所有匹配的元素中删除全部或者指定的类。replaceAll()用匹配的元素替换所有匹配到的元素。replaceWith()用新内容替换匹配的元素。text()设置或返回匹配元素的内容。toggleClass()从匹配的元素中添加或删除一个类。unwrap()移除并替换指定元素的父元素。val()设置或返回匹配元素的值。wrap()把匹配的元素用指定的内容或元素包裹起来。wrapAll()把所有匹配的元素用指定的内容或元素包裹起来。wrapinner()将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

jQuery CSS 操作函数

下面列出的这些方法设置或返回元素的 CSS 相关属性。

CSS 属性描述css()设置或返回匹配元素的样式属性。height()设置或返回匹配元素的高度。offset()返回第一个匹配元素相对于文档的位置。offsetParent()返回最近的定位祖先元素。position()返回第一个匹配元素相对于父元素的位置。scrollLeft()设置或返回匹配元素相对滚动条左侧的偏移。scrollTop()设置或返回匹配元素相对滚动条顶部的偏移。width()设置或返回匹配元素的宽度。

0 0