Jquery attr()方法属性赋值和属性获取详解

站长资源 2024/11/30 佚名

2 0 1

jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。

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

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

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

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

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery中attr()方法</title>

<script src="/UploadFiles/2021-04-02/jquery-1.4.2.min.js">

1.attr(name)//获取属性的值
1.1使用attr(name)获取title值：


<script>

alert($("ul li:eq(1)").attr("title"));

</script>



结果：   显示 橘子汁
1.2使用attr(name)获取alt值：




<script>

alert($("ul li:eq(1)").attr("alt"));

</script>



结果：
显示123


2. attr(name,value)   //设置属性的值


2.1使用attr(name,value)修改title值为：不吃橘子




<script>

$("ul li:eq(1)").attr("title","不吃橘子");

alert($("ul li:eq(1)").attr("title"));

</script>



结果：
显示不吃橘子
3. attr(name,fn)  //设置属性的函数值
3.1把alt属性的值设置为title属性的值。




<script>

$("ul li:eq(1)").attr("title",function(){ return this.alt});

alert($("ul li:eq(1)").attr("title"));

</script>



结果：
显示123
4.attr(properties)  //将一个“名/值”形式的对象设置为所有匹配元素的属性
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>



结果：
显示2个，不喝橘子汁   不是123
4.2获取<ul>里第2个<li>设置class。




<script>

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

</script>



结果：
<li title="苹果汁">苹果</li>
<li class="lili" alt="123" title="橘子汁">橘子</li>
<li title="菠萝汁">菠萝</li>
4.3获取<ul>里第2个<li>设置id。




<script>

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

</script>



结果：
<li title="苹果汁">苹果</li>
<li class="lili" alt="123" title="橘子汁">橘子</li>
<li title="菠萝汁">菠萝</li>
4.4获取<ul>里第2个<li>设置style。




<script>

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

</script>



结果：
<li title="苹果汁">苹果</li>
<li class="lili" alt="123" title="橘子汁" style="color:red">橘子</li>
<li title="菠萝汁">菠萝</li>
在 li中添加alt是错误的，它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。在这里为了很详细说明attr()方法，没有合适的属性，所有用了alt进行举例，只供学习参考attr()方法用法。
在此说明下alt和tite的区别。
alt：这是用以描述图形的文字，当图片无法显示时，这些文字会替代图片而被显示。当鼠标移至图片上该些文字亦会显示。
title：是鼠标放上去之后，会显示出来的文字。
那么怎么删除属性呢"htmlcode">

<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); 


以上这篇Jquery attr()方法 属性赋值和属性获取详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

Jquery,attr,赋值

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“Jquery attr()方法属性赋值和属性获取详解”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月30日

Jquery attr()方法属性赋值和属性获取详解

jquery对dom节点的操作【推荐】

有关jquery与DOM节点操作方法和属性记录

评论“Jquery attr()方法属性赋值和属性获取详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

Jquery attr()方法 属性赋值和属性获取详解

jquery对dom节点的操作【推荐】

有关jquery与DOM节点操作方法和属性记录

评论“Jquery attr()方法 属性赋值和属性获取详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

Jquery attr()方法属性赋值和属性获取详解

评论“Jquery attr()方法属性赋值和属性获取详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存