`
吕金含
  • 浏览: 84735 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

jQuery - 设置内容和属性

 
阅读更多
设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容:
实例
$("#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() 的回调函数
上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html():
实例
$("#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 + ")";
});
});
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变(设置)链接中 href 属性的值:
实例
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性:
实例
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
attr() 的回调函数
jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法:
实例
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
分享到:
评论

相关推荐

    jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css

    这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定版本,即1.8.16。这个版本在当时是一个广泛使用的稳定版本,提供了丰富的功能和组件。 ...

    jquery-confirm设置按钮显示中文

    而jquery-confirm则是一个基于jQuery的插件,用于创建美观的弹窗提示,包括确认对话框、警告对话框和自定义对话框。这个插件在网页应用中非常常见,特别是在需要用户确认操作或展示重要信息时。 这篇博客文章...

    jquery-3.2.0.js,jquery-3.2.0.min.js

    - **属性操作(Attributes)**:通过 `.attr()` 方法可以获取或设置元素的属性,如 `.attr("href", "newUrl")` 更改链接的 URL。 - **内容操作(Content)**:`.html()`, `.text()`, `.append()`, `.prepend()` 等...

    jquery-1.7.2.js,jquery-1.7.2-vsdoc.js Jquery-1.7.2及vs智能提示插件

    在Visual Studio中,打开包含jQuery引用的项目或文件,当你开始键入jQuery相关的函数或方法时,VS应该会自动弹出智能提示,显示可用的方法和属性。这对于快速学习和记忆jQuery API尤其有帮助,减少了查阅文档的时间...

    jquery-1.8.3.min.js

    jQuery1.7.1不能正确地设置IE7中克隆元素的tabindex属性 压缩的JS文件包含非ASCII字符 如果body样式设置为display:none,则$('body')。show()无法工作 在IE9中element.css('filter')返回不明确 在Android ...

    jquery-3.3.1.js和jquery.min-3.3.1.js

    - **DOM操作**:jQuery封装了DOM操作,如`$(selector).html()`, `$(selector).append()`等,使得插入、删除和修改HTML内容更加便捷。 - **事件处理**:通过`.on()`, `.click()`, `.change()`等方法,可以轻松地绑定...

    jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】

    jQuery提供了丰富的DOM操作方法,如`append()`、`prepend()`用于元素的插入,`html()`、`text()`用于元素内容的设置,`remove()`、`detach()`用于元素的移除。这些方法使得DOM操作变得简单而直观。 3. **事件处理...

    jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】

    1. **选择器**:jQuery的选择器基于CSS,支持ID、类、属性等多种选择方式,如`$("#myID")`选择ID为`myID`的元素,`$(".myClass")`选择所有类名为`myClass`的元素。 2. **DOM操作**:jQuery提供了丰富的DOM操作接口...

    jquery-1.8.0.js+jquery-1.8.0-vsdoc.js

    标题 "jquery-1.8.0.js+jquery-1.8.0-vsdoc.js" 提供的是关于jQuery库的两个关键文件,它们是jQuery 1.8.0版本的核心JavaScript文件和对应的Visual Studio文档文件。在.NET开发环境中,尤其是使用Visual Studio 2008...

    jquery-ui-1.10.0.custom.zip

    总结,jQuery UI 1.10.0 自定义版本为开发者提供了强大的界面组件和高度可定制的主题,通过合理选择和配置,可以构建出高效、美观且易用的 Web 应用。在实际项目中,掌握 jQuery UI 的使用不仅能提升开发效率,也能...

    jquery1.7 API/jquery-1.7.1.min.js/jquery-1.7.1.js

    在这个标题为“jquery1.7 API”的压缩包中,包含的是jQuery 1.7.1版本的两个主要文件:`jquery-1.7.1.min.js` 和 `jquery-1.7.1.js`,以及一个API文档`jquery1.7_20111204.chm`。 1. **`jquery-1.7.1.min.js` 和 `...

    jQuery-File-Upload

    jQuery-File-Upload允许开发者设置验证规则,比如限制上传文件的类型、大小,甚至可以设置每个用户的总上传容量。这样可以防止恶意用户上传大量大文件,保护服务器资源。 ### 7. 自定义样式与事件 通过CSS,你可以...

    JQuery-flip-Demo

    这包括rotateX()和rotateY()函数,它们分别沿X轴和Y轴进行旋转,以及perspective属性,定义了观察者的视点距离,以产生深度感。 3. **jQuery插件使用**:理解如何引入和使用jQuery插件至关重要。这通常包括在HTML中...

    jquery-3.6.0.min.zip

    2. **DOM操作**:jQuery提供了丰富的DOM操作方法,如`$(element).html()`用于获取或设置元素的HTML内容,`$(element).append()`用于在元素内部追加内容。 3. **事件处理**:jQuery简化了事件绑定,`$(element)....

    jquery-3.7.1.zip web组件

    2. **DOM操作**:jQuery封装了DOM操作,如`.append()`用于向元素内部添加内容,`.remove()`用于移除元素,`.attr()`用于获取或设置属性,`.html()`用于获取或设置元素的HTML内容。 3. **事件处理**:jQuery简化了...

    jquery-tmpl-master.zip

    jQuery-Tmpl作为一款强大的模板引擎,极大地简化了数据绑定和动态内容生成的过程。它的简单语法、良好的扩展性和与其他jQuery插件的集成能力,使其成为构建复杂前端应用的理想选择。无论是在小型项目中快速生成动态...

    jQuery-webcam-master_swfmill_480_640_Remark.zip

    这通常涉及到StageSize属性,需要将其宽度和高度分别改为480和640。 4. 保存修改后的SWF文件,并替换原项目中的"webcam.swf"。 5. 配置jQuery-webcam的JavaScript代码,确保在初始化时指定新分辨率,如`webcam....

    jquery-1.8.3.js 官方包

    《jQuery 1.8.3官方包详解》 ...通过理解和掌握这个版本的特性,能够帮助开发者更有效地利用jQuery进行网页开发,提升项目质量和效率。无论是初学者还是经验丰富的开发者,都应该深入了解并掌握这个经典版本的jQuery。

    jquery-migrate-1.2.1.min.js

    2. **$.browser**: 这个已经被移除的属性用于检测浏览器类型和版本,`jQuery Migrate` 会提供一个模拟的版本。 3. **$.support**: 这个对象用来检测浏览器的特性,`jQuery Migrate` 会更新一些不再自动检测的特性。 ...

    jquery-1.9.1(js和min.js下载)

    1. DOM操作:jQuery提供了方便的API来选择、操作和修改HTML元素,如`$(selector)`用于选取元素,`.html()`、`.text()`和`.attr()`分别用于获取或设置元素的HTML内容、文本内容和属性。 2. 事件处理:jQuery的事件...

Global site tag (gtag.js) - Google Analytics