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中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jQuery中DOM操作原则实例分析
Aug 01 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
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
python非递归全排列实现方法
2017/04/10 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
python获取array中指定元素的示例
2019/11/26 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
python如何快速拼接字符串
2020/10/28 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
Oracle性能调优原则
2012/05/03 面试题
Java语言程序设计测试题改错题部分
2014/07/22 面试题
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
旷课检讨书1000字
2014/02/14 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
物业管理交接协议书
2016/03/24 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
Java设计模式之代理模式
2022/04/22 Java/Android
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android