实例介绍,操作元素属性和特性
分类:新闻中心

下面我们来具体看一下attr的用法:
一、attr(name):取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。其中name为string.下面我用一个img元素演示一下这种用法:

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

以html()为例,其余的相似:

复制代码 代码如下:

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

<div id="showhtml">baidu</div>

//文件中 <img src="a.gif" />
$(function(){
$("img").attr('title', function(){ return this.src }); //显示 <img src="a.gif" title="a.gif" />
})

1.attr(name)//获取属性的值

获取特性值:attr(name)获取指派到包装集里第一个元素指定特性的值。参数 name为特性的名称,该特性的值将被获取。如果没有该特性则返回undefined值。

//html文件中 <img src="a.gif" />
//我们可以用attr获得img元素的src属性,具体用法如下:
$(function(){
var imgSrc = $("img").attr('src');
alert(imgSrc); //显示 a.gif
})

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

    //移除img的title属性
    jQuery("#show").removeAttr("title");
});

您可能感兴趣的文章:

  • jquery中prop()方法和attr()方法的区别浅析
  • jquery获取自定义属性(attr和prop)实例介绍
  • jQuery .attr()和.removeAttr()方法操作元素属性示例
  • jQuery学习之prop和attr的区别示例介绍
  • jquery attr方法获取input的checked属性问题
  • 用JQuery 判断某个属性是否存在hasAttr的解决方法
  • Jquery attr("checked") 返回checked或undefined 获取选中失效
  • jquery $(this).attr $(this).val方法使用介绍
  • jquery 获取自定义属性(attr和prop)的实现代码
  • jquery attr()设置和获取属性值实例教程

4.attr(properties)  //将一个“名/值”形式的对象设置为所有匹配元素的属性

$('img').each(function(n){
this.alt='This is image['+n+'] with an id of'+this.id;
})

二、attr(key,value):为所有匹配的元素设置一个属性值。key为string属性名,value为object属性值,用法演示:

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

复制代码 代码如下:

以上介绍的是attr的一些用法,下面是removeAttr的用法 remove故明思意就是移除的意思,从每一个匹配的元素中删除一个属性。它的具体用法就是:

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

<a id="easy" href="#">//www.jb51.net</a>现在要得到a标签的属性id。有如下方法:

//html文件中 <img />
//使用此方法设置img的src属性
$(function(){
$("img").attr('src', 'a.gif'); //文件中显示 <img src="a.gif" />
})

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

复制代码 代码如下:

复制代码 代码如下:

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

attr()还可以一次设置多个特性到包装集里所有元素的快速简便的方式。attr(attributes)。

复制代码 代码如下:

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

下边以实例说明每种方法的具体用法。

四、attr(key, fn):为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。

结果:
图片 1

$('input').attr(
{value:'',title:'please enter a value'}
);

//文档中 <img src="a.gif" title="this is a image" ?>
$(function(){
$("img").removeAttr('title'); //显示 <img src="a.gif" />
})

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

复制代码 代码如下:

//文件中 <img />
$(function(){
$("img").attr({src:'a.gif', title:'this is a image', className: 'filter'});
})
// 显示为<img src="a.gif" title="this is a image" class="filter">

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

该函数把所有<input>元素的value设置为空字符串,同时把title设置为字符串Please enter a value。

复制代码 代码如下:

复制代码 代码如下:

可见,有时候用javascript配合jQuery会很方便。下边着重总结一下jQuery操作元素属性。

复制代码 代码如下:

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

下面就列出jQuery中提供的方法:

以上介绍了attr和removeAttr的基本用法,在实际的工作中还会遇到一些更为复杂的应用,这就需要我们掌握基本用法的同时,多多总结和尝试其他用法。

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

◦attr(name)             取得元素的属性值
◦attr(properties)    设置元素属性,以名/值形式设置
◦attr(key,value)       为元素设置属性值
◦removeAttr(name) 移除元素的属性值

三、attr(properties):这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).

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

以上这些就是jQuery操作元素属性的一些基本方法了,经过本次的总结,相信大家在使用jQuery时,会更加的熟练。

结果:
图片 2

复制代码 代码如下:

1.2使用attr(name)获取alt值:

jQuery("#test a").click(function() {
    //得到ID
    jQuery(this).attr("id"); //同this.id

结果:图片 3

复制代码 代码如下:

<html xmlns=";
<head runat="server">
<title></title>
<scripttype="text/javascript"src="/js/jq1.3.2.js"></script>
</head>
<body>
<divlang="rrery"> </div>
<divdata-url="rrery"> </div>
<divdata-url="rrrrrrrrrrrrrrttttttttttttttttttttttgggggggggggggggggggggg"> </div>
<divdata-url="rrrrrrrrrrrrrrrrrrrrrrrrrrttttttttttttttttt777777777777777777777777777777777778888888888455rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrtttttttttttttttttttttttttttt777777777777777777777777777777777778888888888888"> </div>
</body>
</html>
<script>
// var J = $("div[lang]").get();
// alert($("[data-url]:eq(2)").attr("data-url"));
$("[data-url]").each(function () {
alert($(this).attr("data-url")); });
// $("[data-url]").each(function () {
// alert($(this).prop("data-url")); // });
</script>

方法1使用的是javascript原始方法;方法2用到了this,this就相当于一个指针,返回的是一个dom对象,本例中返回a标签对象。所以this.id可直接得到id。方法3将dom对象转换成了jQuery对象,再利用jQuery封装的方法attr()得到a标签的ID。

您可能感兴趣的文章:

  • Jquery中attr与prop的区别详解
  • jQuery获取attr()与prop()属性值的方法及区别介绍
  • jQuery中attr()与prop()函数用法实例详解(附用法区别)
  • jquery判断复选框选中状态以及区分attr和prop
  • jQuery中 prop() attr()使用详解
  • jquery中attr和prop的区别分析
  • jQuery中attr()和prop()在修改checked属性时的区别
  • jQuery学习之prop和attr的区别示例介绍
  • jquery中prop()方法和attr()方法的区别浅析
  • jquery 获取自定义属性(attr和prop)的实现代码
  • 关于jquery中attr()和prop()方法的区别

您可能感兴趣的文章:

  • defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
  • 从零开始学习jQuery (四) jQuery中操作元素的属性与样式
  • jQuery学习笔记 操作jQuery对象 属性处理
  • jQuery .attr()和.removeAttr()方法操作元素属性示例
  • JQuery对class属性的操作实现按钮开关效果
  • jquery操作checked属性以及disabled属性的多种方法
  • jquery根据属性和index来查找属性值并操作
  • jquery中添加属性和删除属性

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

以下是其它网友的补充:

结果:
图片 4

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>

jQuery("#easy").click(function() {
    alert(document.getElementById("easy").id); //1
    alert(this.id); //2
    alert(jQuery(this).attr("id"));  //3
});

那么怎么删除属性呢?

//获得html,结果为baidu
jQuery("#showhtml").html();
//设置html,结果为I love baidu
jQuery("#showhtml").html("I love baidu");

复制代码 代码如下:

先看一个例子:

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

◦html()  获取或设置元素节点的html内容
◦text()  获取或设置元素节点的文本内容
◦height()  获取或设置元素高度
◦ width()  获取或设置元素宽度
◦ val()  获取或设置输入框的值

3.1把alt属性的值设置为title属性的值。

复制代码 代码如下:

结果:图片 5

方法有:

那么是否有跟attr()相似的属性呢?
jquery中val()与之类似,
$(this).val();获取某个元素节点的value值,相当于$(this).attr("value");
$(this).val(value);设置某个元素节点的value值,相当于$(this).attr("value",value);

复制代码 代码如下:

1.1使用attr(name)获取title值:

该函数是设置页面上的所有元素的title特性为一个字符串。由DOM中元素的下标和各个特定元素id特性值所组成的字符串。

示例代码:

    //将img的title设置为baidu,同上边的区别是每次只能设定一个属性
    jQuery("#show").attr("title", "baidu");

复制代码 代码如下:

大家可能已经发现了,在jQuery中attr()方法,既可以获得元素的属性值,又能设置元素的属性值。是的,在jQuery中,类似的方法还有很多,现在将它们总结下来,以后用起来也会比较容易。

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

    //为img标签设置src为指定图片;title为百度.
    var v = { src: "", title: "百度" };
    jQuery("#show").attr(v);

复制代码 代码如下:

<div id="test">
    <a id="hyip" href="javascript:void(0)">脚本之家</a>
    <a id="baidu" href="javascript:void(0)">百度</a>
    <img id="show" />
</div>

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

<img id="myImage" src="image.gif" alt="An image" class="someClass" title="This is an image" custom="some value">

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

$('*').attr('title',function(index) {
  return 'I am element' '+ index +' and my name is ' +(this.id?this.id:'unset');
});

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

$("#myImage").attr("custom") 得到值就是some value。

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

操作元素属性:each(iterator)遍历包装集里所有元素,为各元素分别调用传递进来的迭代器函数。参数iterator 一个函数,为匹配集中的各元素分别调用一次。传递到函数的参数被设置为包装集里当前元素的下标(从0开始),而当前元素可通过函数this属性来访问。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}

设置特性值:attr(name,value)为包装集里的所有元素的name特性设置传递进来的值。name将被设置的特性的名称,value指定特性的值。

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

复制代码 代码如下:

结果:
图片 6

附:jquery attr()方法

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

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

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

3. attr(name,fn)  //设置属性的函数值

复制代码 代码如下:

结果:
图片 7

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

结果:
图片 8图片 9

复制代码 代码如下:

在li中添加alt是错误的,它只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性意在用来替换提交按钮的图片。在这里为了很详细说明attr()方法,没有合适的属性,所有用了alt进行举例,只供学习参考attr()方法用法。
在此说明下alt和tite的区别。
alt:这是用以描述图形的文字,当图片无法显示时,这些文字会替代图片而被显示。当鼠标移至图片上该些文字亦会显示。
title:是鼠标放上去之后,会显示出来的文字。

本文由美高梅网址发布于新闻中心,转载请注明出处:实例介绍,操作元素属性和特性

上一篇:javascript与webservice的通信实现代码 下一篇:没有了
猜你喜欢
热门排行
精彩图文