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 replace方法去空格
May 08 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery实现计算器功能
Oct 19 jQuery
jQuery实现简单弹幕制作
Dec 10 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将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
php格式文件打开的四种方法
2018/02/24 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python中partial()基础用法说明
2018/12/30 Python
python实现两张图片的像素融合
2019/02/23 Python
python元组的概念知识点
2019/11/19 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
python 字符串格式化的示例
2020/09/21 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
工程项目合作意向书
2015/05/08 职场文书
红色经典观后感
2015/06/18 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
golang中的并发和并行
2021/05/08 Golang
HTML+JS实现在线朗读器
2022/02/15 Javascript