JS和jQuery通过this获取html标签中的属性值(实例代码)


Posted in jQuery onSeptember 11, 2017

废话不多说了,具体代码如下所示:

<html>
 <head>
  <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
  <script type="text/javascript">
   /** JQUERY 通过当前标签属性名,获取属性的值 */
   function attrsByJquery(obj){
    var v1 = $(obj).attr("dbname");
    var v2 = $(obj).attr("name");
    alert(v1);
    alert(v2);
   }
   
   /** JAVASCRIPT 通过当前标签属性名,获取属性的值 */
   function attrsByJs(obj){
    var v1 = obj.getAttribute('name');
    var v2 = obj.getAttribute('dbname');
    alert(v1);
    alert(v2);
   }
   
   function attrsButtons(obj){
    var v = obj.getAttribute('name');
    var vv = $(obj).attr("myname");
    alert(v);
    alert(vv);
   }
   
  </script>
 </head>
 <body>
  <div>
   <div style="width: 100px;height: 30px;float:left; margin-left:30px;" name="this is name feild" dbname="oracle1" onclick="attrsByJs(this)">JavaScript</div>
   <div style="width: 100px;height: 30px;float:left; margin-left:30px;" name="this is name feild" dbname="oracle2" onclick="attrsByJquery(this)">Juqery</div>
   <input type="button" name="abcdeg" myname="this is my name" onclick="attrsButtons(this)" value="buttons">
  </div>
 </body>
</html>

总结

以上所述是小编给大家介绍的JS和jQuery通过this获取html标签中的属性值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
使用jQuery实现动态添加小广告
Jul 11 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 #jQuery
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 #jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 #jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 #jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 #jQuery
You might like
PHP 一个页面执行时间类代码
2010/03/05 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
js option删除代码集合
2008/11/12 Javascript
js自定义事件代码说明
2011/01/31 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
微信小程序实现左滑动删除效果
2020/03/30 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
Python中字符串的格式化方法小结
2016/05/03 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
pymysql模块的操作实例
2019/12/17 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
机电工程学生自荐信范文
2013/12/07 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
Pygame Time时间控制的具体使用详解
2021/11/17 Python
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS