JS中Attr的用法详解


Posted in Javascript onOctober 09, 2017

具体代码如下所示:

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#btn").click(function(){
      //使用attr(name)获取属性值:
      alert($("p").attr("title"));//你最喜欢的水果是。
      alert($("ul li:eq(1)").attr("title"));//橘子汁
      alert($("ul li:eq(1)").attr("alt"));//123
      //使用attr(name, value)改变属性值:
      //$("ul li:eq(1)").attr("title", "还是吗?");//将第二个li的title的值改变
      //使用attr(name, fn)设置属性的函数值
      $("ul li:eq(1)").attr("title", function(){
          return "我就不信";
      });//将第二个li的title的值改变
      alert($("ul li:eq(1)").attr("title"));//我就不信
      //使用attr(name, properties)将一个“名/值”形式的对象设置为所有匹配元素的属性
      $("ul li:eq(1)").attr({title: "第一个", alt: "第二个"});
      alert($("ul li:eq(1)").attr("title"));//第一个
      alert($("ul li:eq(1)").attr("alt"));//第二个
    });
  });
</script>
<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
<ul>
  <li title="苹果汁">苹果</li>
  <li title="橘子汁" name="好吃" alt="123">橘子</li>
  <li title="菠萝汁">菠萝</li>
</ul>
<input type="button" value="点击" id="btn"/>

总结

以上所述是小编给大家介绍的JS中Attr的用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS backgroundImage控制
May 19 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
移动端效果之Swiper详解
Oct 09 #Javascript
浅谈node的事件机制
Oct 09 #Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 #Javascript
ES6中的Promise代码详解
Oct 09 #Javascript
js+html5生成自动排列对话框实例
Oct 09 #Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 #jQuery
详解如何让Express支持async/await
Oct 09 #Javascript
You might like
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
python聊天程序实例代码分享
2013/11/18 Python
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
python正则表达式的使用
2017/06/12 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
python实现简单图片物体标注工具
2019/03/18 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
政协调研汇报材料
2014/08/15 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
创业计划书之寿司
2019/07/19 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android
Hive导入csv文件示例
2022/06/25 数据库