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 相关文章推荐
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
Vue实现日历小插件
Jun 26 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
VueJS实现用户管理系统
May 29 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
移动端效果之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
php引用返回与取消引用的详解
2013/06/08 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
python3实现表白神器
2019/04/09 Python
Django框架视图介绍与使用详解
2019/07/18 Python
Python日志处理模块logging用法解析
2020/05/19 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
网络工程师职业规划
2014/02/10 职场文书
敬老院活动总结
2014/04/28 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
Java spring定时任务详解
2021/10/05 Java/Android
nginx容器方式反向代理实战
2022/04/18 Servers
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers