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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery返回定位插件详解
May 15 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
JQuery animate动画应用示例
May 14 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery实现本地存储
Dec 22 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
layui table 参数设置方法
2018/08/14 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
python实现图片批量压缩程序
2018/07/23 Python
详解django中使用定时任务的方法
2018/09/27 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
python模拟实现分发扑克牌
2020/04/22 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
童装店创业计划书
2014/01/09 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
法人委托书范本格式
2014/09/15 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
python单向链表实例详解
2022/05/25 Python