您的位置：首页 > Web前端 > JQuery

jQuery学习教程十二: jQuery - 设置内容和属性

2017-03-23 14:42 344 查看


设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：


实例

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head>

<body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>


text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：


实例

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";
});
});

});
</script>
</head>

<body>
<p id="test1">这是<b>粗体</b>文本。</p>
<p id="test2">这是另一段<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>
</body>
</html>


设置属性 - 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(){
$("#w3s").attr("href","http://www.baidu.com");
});
});
</script>
</head>

<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>改变 href 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
</body>
</html>


attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：


实例

$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});



attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法：


实例

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
});
</script>
</head>

<body>
<p><a href="http://www.w3school.com.cn" id="w3s">w3school.com.cn</a></p>
<button>改变 href 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
</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()设置或返回匹配元素的宽度。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航