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实现字体颜色渐变效果的方法
Mar 29 jQuery
如何编写jquery插件
Mar 29 jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery实现放大镜案例
Oct 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
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
Python多线程学习资料
2012/12/19 Python
python中尾递归用法实例详解
2015/04/28 Python
python对json的相关操作实例详解
2017/01/04 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
python实现图片批量压缩程序
2018/07/23 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
python操作gitlab API过程解析
2019/12/27 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
函授本科毕业自我鉴定
2013/10/09 职场文书
国际会计专业求职信
2014/08/04 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
合作意向协议书
2015/01/29 职场文书
药品开票员岗位职责
2015/04/15 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js