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 05 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实现计算器功能
Oct 19 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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
自动分页的不完整解决方案
2007/01/12 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
javascript event 事件解析
2011/01/31 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
jquery获取节点名称
2015/04/26 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
javascript轮播图算法
2016/10/21 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
Python简单实现安全开关文件的两种方式
2016/09/19 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
Python中的TCP socket写法示例
2018/05/11 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
几个常见的软件测试问题
2016/09/07 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
大学生四年生活自我鉴定
2013/11/21 职场文书
运动会方阵解说词
2014/02/12 职场文书
小学生环保标语
2014/06/13 职场文书