alt 详解

attr()有4个表达式。

<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>



1. attr(属性名       //获取属性的值(取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined )

    <script> alert($("ul li:eq(1)").attr("title")); </script>

结果:


2. attr(属性名, 属性值)   //设置属性的值 (为所有匹配的元素设置一个属性值。)


<script> alert($("ul li:eq(1)").attr("alt")); </script>

结果:

3. attr(属性名,函数值    //设置属性的函数值  (为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。)

<script> $("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>

结果:


4.attr(properties)    //给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)

4.1获取<ul>里第2个<li>设置title和alt属性。

代码如下:

<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>

结果:




4.2获取<ul>里第2个<li>设置class。

代码如下:


<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

结果:



4.3获取<ul>里第2个<li>设置id。

代码如下:


<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>


结果:

4.4获取<ul>里第2个<li>设置style。

代码如下:


<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>


结果:

在l i中添加alt是错误的,它只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性意在用来替换提交按钮的图片。在这里为了很详细说明attr()方法,没有合适的属性,所有用了alt进行举例,只供学习参考attr()方法用法。


alt
此属性的实质作用是图片在无法正确显示的时候起到文本替代的作用,不过在IE6下还起到了title的作用(鼠标放上去后的文字提示),IE的实现方法实际上是错误的。如果想在鼠标滑过时显示提示,应该用title属性。由于错误的引导,很多初学者就在img标签内只加了alt属性。所以这里再次表扬一记FF!

               
title
鼠标滑过时显示的文字提示,用户体验上很重要。当然不必要所有的img标签都加此属性,比方说logo这样比较重要或者说用户会体验到的图片内容建议一定要加此属性。

<img src="图片路径" alt="logo" title="首页" />




$("form").attr("check"); $("form").prop("check"); 两种都可以,不过新版jquery推荐第二种,两个在其他方面都差不多,我发现的唯一不同就是在checkbox上的时候,需要用prop,不然IE浏览器会不兼容


那么怎么删除属性呢?

jquery中删除属性的关键词是: removeAttr 注意A是大写的. 看看怎么用的:

同样是用法一中的html代码, 我想删掉li的title属性, 那么就这样:

复制代码 代码如下:

<script>
$("ul li:eq(1)").removeAttr ("title");
</script>

就这么简单, attr 其实就是原生js中 getAttribute 的简化实现, 而removeAttr 就是 removeAttribute 的简写了。

那么是否有跟attr()相似的属性呢?
jquery中val()与之类似,
$(this).val();获取某个元素节点的value值,相当于$(this).attr("value");
$(this).val(value);设置某个元素节点的value值,相当于$(this).attr("value",value);
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui框架提供了多种轮播图效果,其中常用的是基于carousel模块的轮播效果。下面详细介绍一下如何使用Layui实现轮播图效果。 1. 引入Layui库 在HTML文件中引入Layui库的CSS和JS文件,例如: ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> ``` 2. 编写HTML结构 在HTML文件中编写轮播图的HTML结构,例如: ```html <div class="layui-carousel" id="test1"> <div carousel-item> <div>轮播1</div> <div>轮播2</div> <div>轮播3</div> <div>轮播4</div> <div>轮播5</div> </div> </div> ``` 其中,`layui-carousel`是轮播图的父容器,`test1`是轮播图的ID,`carousel-item`是轮播图的子容器,包含了多个轮播项。 3. 初始化轮播图 在JavaScript文件中,使用Layui的carousel模块初始化轮播图,例如: ```javascript layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#test1', width: '100%', height: '500px', interval: 5000, arrow: 'always', indicator: 'inside', autoplay: true }); }); ``` 其中,`elem`指定轮播图的ID,`width`和`height`分别指定轮播图的宽度和高度,`interval`指定轮播的间隔时间,`arrow`指定箭头显示的方式,`indicator`指定指示器显示的位置,`autoplay`指定是否自动播放。 4. 完整代码示例 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui轮播图效果代码详解</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div class="layui-carousel" id="test1"> <div carousel-item> <div><img src="https://cdn.pixabay.com/photo/2016/01/05/17/51/apple-1122538_960_720.jpg" alt=""></div> <div><img src="https://cdn.pixabay.com/photo/2015/03/26/09/40/technology-690119_960_720.jpg" alt=""></div> <div><img src="https://cdn.pixabay.com/photo/2017/05/31/18/38/industry-236580_960_720.jpg" alt=""></div> <div><img src="https://cdn.pixabay.com/photo/2016/11/19/17/14/breakfast-1846110_960_720.jpg" alt=""></div> </div> </div> <script src="layui/layui.js"></script> <script> layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#test1', width: '100%', height: '500px', interval: 5000, arrow: 'always', indicator: 'inside', autoplay: true }); }); </script> </body> </html> ``` 以上就是使用Layui框架实现轮播图效果的详细代码解析。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值