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 23 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jquery实现拖拽添加元素功能
Dec 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
php 无限分类的树类代码
2009/12/03 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
python实现五子棋人机对战游戏
2020/03/25 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
python字典的值可以修改吗
2020/06/29 Python
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
高二美术教学反思
2014/01/14 职场文书
高中学生期末评语
2014/04/25 职场文书
企业务虚会发言材料
2014/10/20 职场文书
财务会计岗位职责
2015/02/03 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis