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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 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 版本]
2007/03/20 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
PHP CURL使用详解
2019/03/21 PHP
jQuery hover 延时器实现代码
2011/03/12 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
详解jQuery选择器
2016/12/21 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
Python实现简易端口扫描器代码实例
2017/03/15 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
python库matplotlib绘制坐标图
2019/10/18 Python
Python 实现数组相减示例
2019/12/27 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
小型女装店的创业计划书
2014/01/09 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
通信工程求职信
2014/07/16 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
Python机器学习三大件之一numpy
2021/05/10 Python
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
pandas中关于apply+lambda的应用
2022/02/28 Python
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android