jQuery HTML获取内容和属性操作实例分析


Posted in jQuery onMay 20, 2020

本文实例讲述了jQuery HTML获取内容和属性操作。分享给大家供大家参考,具体如下:

获取内容和属性

获得内容 - 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("值为: " + $("#test").val());
});

获取属性 - attr()

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

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

attr 和 prop 的区别介绍:

对于 HTML 元素本身就带有的固有属性,在处理时,使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性,在处理时,使用 attr 方法。

实例 1:

<a href="https://3water.com" target="_self" class="btn">三水点靠木</a>

这个例子里 <a> 元素的 DOM 属性有: href、target 和 class,这些属性就是 <a> 元素本身就带有的属性,也是 W3C 标准里就包含有这几个属性,或者说在 IDE 里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用 prop 方法。

<a href="#" rel="external nofollow" id="link1" action="delete" >删除</a>

这个例子里 <a> 元素的 DOM 属性有: href、id 和 action,很明显,前两个是固有属性,而后面一个 action 属性是我们自己自定义上去的,<a> 元素本身是没有这个属性的。这种就是自定义的 DOM 属性。处理这些属性时,建议使用 attr 方法。

prop()函数的结果:

      1.如果有相应的属性,返回指定属性值。

      2.如果没有相应的属性,返回值是空字符串。

attr()函数的结果:

      1.如果有相应的属性,返回指定属性值。

      2.如果没有相应的属性,返回值是 undefined。

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

对于HTML元素我们自己自定义的DOM属性,在处理时,使用 attr 方法。

具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 #jQuery
jquery html添加元素/删除元素操作实例详解
May 20 #jQuery
jQuery HTML css()方法与css类实例详解
May 20 #jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 #jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 #jQuery
jQuery 动画与停止动画效果实例详解
May 19 #jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 #jQuery
You might like
表格展示无限级分类(PHP版)
2012/08/21 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
php实现购物车功能(下)
2016/01/05 PHP
PHP微信分享开发详解
2017/01/14 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
35个Python编程小技巧
2014/04/01 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
党日活动总结
2014/05/07 职场文书
个人创业事迹材料
2014/12/30 职场文书
骨干教师个人总结
2015/02/11 职场文书
签字仪式主持词
2015/07/03 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
Redis keys命令的具体使用
2022/06/05 Redis