上篇介绍HTML Get,jQuery其实使用上面同样的三个方法来赋值。
- text() – 设置或取得指定元素的文本内容。
- html() – 设置或取得指定元素的内容(包括HTML标记)
- val() – 设置或取得表单某个输入域的值。
比如下面代码就是使用上面三种方法给HTML元素或Form赋值
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
用于text(),html()和val()的回调函数
text(),html()和val()方法可以和一个回调函数配合使用,这个回调函数具有两个参数,一个是选择中元素的序号,第二个为当前值(旧值),然后你可以通过回调函数的返回值做为元素的新值。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.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">This is a <b>bold</b> paragraph.</p>
<p id="test2">This is another <b>bold</b> paragraph.</p>
<button id="btn1">Show Old/New Text</button>
<button id="btn2">Show Old/New HTML</button>
</body>
</html>
同样为元素的属性赋值也使用attr()方法,例如:
$("button").click(function(){
$("#guidebee").attr({
"href" : "http://www.imobilebbs.com",
"title" : "imobilebbs jQuery Tutorial"
});
});
分享到:
相关推荐
jQuery经典入门教程,供学习交流,谢谢~
jQuery入门,jQuery入门,jQuery入门,jQuery入门
jquery入门教程.jquery入门教程
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...
JQuery基础教程之第八章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
JQuery基础教程之第五章后面章节请看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery...
JQuery基础教程之第七章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
jQuery中文入门教程:基础的jQuery中文入门教程,很好的资源
JQuery基础教程之第四章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇
JQuery基础教程之第六章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
juery 入门经典教程,详细、系统的介绍了jQuery的配置 基本操作及使用
jQuery插件之二:Simple Tree jQuery插件之二:Simple Tree jQuery插件之二:Simple Tree
jquery入门jquery入门jquery入门jquery入门
jQuery EasyUI使用教程:为数据网格创建复杂工具栏.docx
jQuery 入门教程,里面附上代码,包收益匪浅,不用去买书看,就这么简单!
jQuery入门教程.zip
jQuery中文入门教程.chm 很好的入门教程
jquery入门教程,有利于初学者学习jquery!!里面讲解详细,有具体的例子共初学者参考!!jquery入门教程 jquery入门教程 jquery入门教程 jquery入门教程 jquery入门教程