JQuery获得内容和属性方法解析


Posted in jQuery onMay 30, 2020

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM 操作

jQuery 中非常重要的部分,就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

提示:DOM = Document Object Model(文档对象模型)

DOM 定义访问 HTML 和 XML 文档的标准:

“W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法:

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:

实例

$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值:

实例

$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值:

实例

$("button").click(function(){
alert($("#w3s").attr("href"));
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现图片轮播器
May 23 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery实现视频展示效果
May 30 #jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 #jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 #jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 #jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 #jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 #jQuery
jQuery实现鼠标滑动切换图片
May 27 #jQuery
You might like
一个php作的文本留言本的例子(五)
2006/10/09 PHP
php 高效率写法 推荐
2010/02/21 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
JavaScript 面向对象之命名空间
2010/05/04 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
Python图算法实例分析
2016/08/13 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
如何通过Python实现标签云算法
2019/07/02 Python
python字符串查找函数的用法详解
2019/07/08 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
linux面试题参考答案(8)
2016/04/19 面试题
计算机本科生自荐信
2013/10/15 职场文书
团员个人的自我评价
2013/12/02 职场文书
DE1107机评
2022/04/05 无线电