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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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强制下载PDF文件示例
2014/01/17 PHP
PHP小教程之实现链表
2014/06/09 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
Python实现注册、登录小程序功能
2018/09/21 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
采购部岗位职责
2013/11/24 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
助学感谢信范文
2015/01/21 职场文书
市场部岗位职责
2015/02/12 职场文书
《西门豹》教学反思
2016/02/23 职场文书
python中mongodb包操作数据库
2022/04/19 Python