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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 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
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP 微信支付类 demo
2015/11/30 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
python利用datetime模块计算时间差
2015/08/04 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
成教自我鉴定
2013/10/27 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
说明书怎么写
2014/05/06 职场文书
质量安全标语
2014/06/07 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
关于学习的决心书
2015/02/05 职场文书
论文答辩开场白大全
2015/05/27 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
python中if和elif的区别介绍
2021/11/07 Python
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js