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实现图片放大点击切换
Jun 06 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 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
php 网上商城促销设计实例代码
2012/02/17 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
js转html实体的方法
2016/09/27 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
python时间整形转标准格式的示例分享
2014/02/14 Python
Python使用py2exe打包程序介绍
2014/11/20 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Python自省及反射原理实例详解
2020/07/06 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
《会走路的树》教后反思
2014/04/19 职场文书
承德避暑山庄导游词
2015/02/03 职场文书