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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery实现购物车全功能
Jan 11 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代码
2013/11/19 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php导出excel格式数据问题
2014/03/11 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
js实现DIV的一些简单控制
2007/06/04 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
Python中的异常处理学习笔记
2015/01/28 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
幼儿园毕业典礼主持词
2014/03/21 职场文书
安全生产专项整治方案
2014/05/06 职场文书
消防安全承诺书
2014/05/22 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
Rust中的Struct使用示例详解
2022/08/14 Javascript