先看一个例子:

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

复制代码 代码如下:
jQuery("#easy").click(function() {
    alert(document.getElementById("easy").id); //1
    alert(this.id); //2
    alert(jQuery(this).attr("id"));  //3
});

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

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

"codetitle">复制代码 代码如下:
<div id="test">
    <a id="hyip" href="javascript:void(0)"></a>
    <a id="baidu" href="javascript:void(0)">百度</a>
    <img id="show" />
</div>

复制代码 代码如下:
jQuery("#test a").click(function() {
    //得到ID
    jQuery(this).attr("id"); //同this.id

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

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

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

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

方法有:

"codetitle">复制代码 代码如下:
<div id="showhtml">baidu</div>

复制代码 代码如下:
//获得html,结果为baidu
jQuery("#showhtml").html();
//设置html,结果为I love baidu
jQuery("#showhtml").html("I love baidu");

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

以下是其它网友的补充:

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

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

复制代码 代码如下:
$('img').each(function(n){
this.alt='This is image['+n+'] with an id of'+this.id;
})

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

<img id="myImage" src="/UploadFiles/2021-04-02/image.gif">

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

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

复制代码 代码如下:
$('*').attr('title',function(index) {
  return 'I am element' '+ index +' and my name is ' +(this.id"codetitle">复制代码 代码如下:
$('input').attr(
{value:'',title:'please enter a value'}
);

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

标签:
jQuery,元素属性,特性

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jQuery学习3:操作元素属性和特性”

暂无“jQuery学习3:操作元素属性和特性”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。