【12】jQuery学习——入门jQuery属性之元素属性的设置与移除

元素属性在我们平时写的代码中会经常用到比如img标签中的src这个属性,当然还有很多,那么下面我们就来说下怎么来操作这些属性

jQuery中,用attr()方法来获取和设置元素属性,对应地,removeAttr()方法是用来删除元素属性。

【1】attr()这个函数有4个用法

用法 作用
$("Element").attr(name) 取得第一个匹配元素的属性值,比如$("img").attr("src"),如果元素没有相应属性,则返回 undefined 。
$("Element").attr({key:value,key,value,....}) 表示为某一个元素一次性设置多个属性
$("Element").attr(key,value) 为所有匹配的元素设置属性值
$("Element").attr(key,function) 为所有匹配的元素设置一个计算的属性值。

【2】removeAttr()只有一个

$("Element").removeAttr(name)移除某一个属性

这个方法必须接受一个参数(属性名称),不然会报错,另外属性名称必须是正确的,不然在火狐下也会报错。

 

这里是范例:用到的图片自己可以在网上随便找几个小图片就好了。

这里用到了一个原生是js函数toLowerCase:将字符串转换成小写。

 

<!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>attr实例</title>

<style type="text/css">

*{margin:0; padding:5px;}

body{margin:0 auto; width:810px;}

input{width:800px; height:22px; line-height:22px; font-size:12px;}

</style>

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

        alert("例题说明:body中的标签效果,要当所有的弹出框均弹出完毕才能在最下面的【文本域】中显示出效果。");

		alert("取得第一个匹配属性值是src的元素,此元素方法为:\n\n\t$(\"*\").attr(\"src\")\n\n\t此元素的src为:"+$("img").attr("src"));

		alert("为第一个DIV标签一次性设置 ID,Name,以及style");

		$("div:first").attr({ID:"div1",Name:"div",style:"color:#f00;"});

		alert("设置完毕,设置方法为:\n\n$(\"div:first\").attr({ID:\"div1\",Name:\"div\",style:\"color:#f00;\"})\n\n\t请查看文本框");

		$("input").eq(0).val($("#a").html().toLowerCase());

		alert("如果1+1=2,那么为#h img标签中src设置一张图片");

		$("#h img").attr("src",function(){if(1+1==2){return "images/5.png";}else{return ""}})

		alert("设置完毕,设置方法为:\n\n$(\"#h img\").attr(\"src\",function(){if(1+1==2){return \"images/5.png\";}else{return \"\"}})\n\n\t请查看文本框");

		$("input").eq(1).val($("#h").html().toLowerCase());

		alert("移除#h img标签中alt属性,方法如下:\n\n\t$(\"#h img\").removeAttr(\"alt\");");

		$("#h img").removeAttr("alt");

		$("input").eq(2).val($("#h").html().toLowerCase());

})

</script>



    <body>

            <span id="a"><div>我是div1</div></span>

            <span id="b"><div>我是div2</div></span>

            <span id="c"><div>我是div3</div></span>

            <span id="d"><img src="images/1.png"/></span>

            <span id="e"><img src="images/2.png"/></span>

            <span id="f"><img src="images/3.png"/></span>

            <span id="g"><img src="images/4.png"/></span>

            <span id="h"><img src="" alt="I have alt attributes!"/></span>

        <br/>

        <input type="text" />

        <br/><br/><br/>

         <input type="text" />

        <br/><br/><br/>

         <input type="text" />

        <br/><br/><br/>

        <textarea name="" cols="80" rows="9">

        <span id="a"><div>我是div1</div></span>

        <span id="b"><div>我是div2</div></span>

        <span id="c"><div>我是div3</div></span>

        <span id="d"><img src="images/1.png"/></span>

        <span id="e"><img src="images/2.png"/></span>

        <span id="f"><img src="images/3.png"/></span>

        <span id="g"><img src="images/4.png"/></span>

        <span id="h"><img src="images/5.png"/></span>

        </textarea>

    </body>

</html>

 

 

ps。上面的文章来自梦三秋网站和w3cfuns网站

你可能感兴趣的:(jquery)