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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jquery自定义组件实例详解
Dec 31 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
discuz7 phpMysql操作类
2009/06/21 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
点图片上一页下一页翻页效果
2008/07/09 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
python实现大文本文件分割
2019/07/22 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
python程序 创建多线程过程详解
2019/09/23 Python
外科实习自我鉴定
2013/10/06 职场文书
临床医学专业毕业生的自我评价
2013/10/17 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
四年级语文教学反思
2014/02/05 职场文书
经济类毕业生求职信
2014/06/26 职场文书
汉语拼音教学反思
2016/02/22 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
python实现剪贴板的操作
2021/07/01 Python