jQuery 获取/设置
jQuery的一个非常重要的部分是操纵DOM的可能性。
jQuery提供了有效地操作HTML元素和属性的方法。
在本章中,我们将解释jQuery如何获取和设置元素内容以及属性值。
HTML DOM(文档对象模型)
文档对象模型,通常被称为DOM,是使网站交互的一个重要部分。
文档对象模型表示被显示在一个窗口中的HTML文档。
它是一个接口,允许jQuery操纵网站的内容,结构和样式。
jQuery获取或设置内容-html(),text()和val()
使用jQuery,我们可以轻松地操纵HTML元素。
我们有以下用于DOM操作的jQuery方法:
下一节将向您展示如何使用每种方法。
jQuery html()方法
jQuery html()方法获取或设置所选元素的内容(innerHTML)。
下面的示例在单击按钮时获取第一段的内容:
$("button").click(function(){ alert($("p").html()); });测试看看‹/›
下面的示例在单击按钮更改所有段落的内容:
$("button").click(function(){ $("p").html("我想说: <b>Hello world</b>"); });测试看看‹/›
jQuery text()方法
jQuery text()方法获取或设置选定元素(包括其后代)的文本内容。
下面的示例在单击按钮时获取所有段落的文本内容:
$("button").click(function(){ alert($("p").text()); });测试看看‹/›
下面的示例在单击按钮时更改所有段落的文本内容:
$("button").click(function(){ $("p").text("我想说: Hello world"); });测试看看‹/›
html()和text()之间的区别
html()和text()方法都可以设置或获取HTML元素的内容,但是有以下区别:
设置或获取所选元素的内容(文本+ HTML标记)
当使用html()方法获取内容时,它将返回第一个选定元素的内容
设置或获取所选元素的内容(仅文本)
当使用text()方法获取内容时,它将返回所有选定元素的文本内容
下面的示例演示html()方法和text()方法之间的区别:
$("#btn1").click(function(){ $("p").html("我想说: <b>Hello world</b>"); }); $("#btn2").click(function(){ $("p").text("我想说: <b>Hello world</b>"); });测试看看‹/›
jQuery val()方法
jQuery val()方法获取或设置所选表单元素的value属性。
以下示例获取<input>字段的值:
$("button").click(function(){ $("input:text").val(); });测试看看‹/›
以下示例设置<input>字段的值:
$("button").click(function(){ $("input").val("Hello world"); });测试看看‹/›
jQuery获取或设置属性-attr()
jQuery attr()方法获取或设置所选元素的属性和值。
以下示例获取图像的src属性的值:
$("button").click(function(){ $("img").attr("src"); });测试看看‹/›
以下示例设置图像的src属性的值:
$("button").click(function(){ $("img").attr("src", "logo_jquery.png"); });测试看看‹/›
下面的示例设置多个属性和值:
$("button").click(function(){ $("img").attr({ alt: "Seagull Icon", title: "Image by Seagull", width: "350px", height: "300px" }); });测试看看‹/›
jQuery HTML参考
有关完整的HTML方法参考,请访问我们的jQuery HTML / CSS参考。