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插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
详解jQuery中的prop()使用方法
Jan 05 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
给js文件传参数(详解)
2014/07/13 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
基于python实现微信模板消息
2015/12/21 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
Python json格式化打印实现过程解析
2020/07/21 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
升职自荐信范文
2013/10/05 职场文书
中学生在校期间的自我评价分享
2013/11/13 职场文书
二年级数学教学反思
2014/01/21 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
公司副总经理任命书
2014/06/05 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL