jQuery 入门教程(13): HTML Set
2013-03-13 07:08
267 查看
上篇介绍HTML Get,jQuery其实使用上面同样的三个方法来赋值。text() – 设置或取得指定元素的文本内容。
html() – 设置或取得指定元素的内容(包括HTML标记)
val() – 设置或取得表单某个输入域的值。
比如下面代码就是使用上面三种方法给HTML元素或Form赋值
用于text(),html()和val()的回调函数text(),html()和val()方法可以和一个回调函数配合使用,这个回调函数具有两个参数,一个是选择中元素的序号,第二个为当前值(旧值),然后你可以通过回调函数的返回值做为元素的新值。
例如:
同样为元素的属性赋值也使用attr()方法,例如:
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 入门教程(13): HTML Set
- jQuery 入门教程(13): HTML Set
- 使用 ADD-ON SDK 开发 基于 Html JQuery 和 CSS 的 firefox 插件入门教程1: 创建一个简单的 Add-on
- jQuery 入门教程(12): HTML Get
- JQuery详细教程三之HTML(get,add,set,delete方法)
- jQuery 入门教程(12): HTML Get
- jQuery 入门教程(12): HTML Get
- jQuery 入门教程(43): jQuery UI Tooltip 示例
- jQueryUI Autocomplete插件使用入门教程(最新版)---------转载
- jQuery 入门教程(14): 添加HTML元素
- javascript html jquery 入门
- 【PHP面向对象(OOP)编程入门教程】10.__set(),__get(),__isset(),__unset()四个方法的应用
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- jQuery 入门教程(25): jQuery UI Autocomplete示例(三)
- jquery中常用的SET和GET$(”#msg”).html循环介绍
- Dreamweaver入门基础与HTML视频教程
- 菜鸟写jquery入门教程(for web前端开发群4)(03)
- HTML DOM教程 13-HTML DOM Location 对象
- jQuery入门指南教程
- jQuery中文入门指南,翻译加实例,jQuery的起点教程