脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery使用之标记元素属性用法实例教程,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
本文实例讲述了jQuery使用之标记元素属性用法。分享给大家供大家参考。具体分析如下:
这里介绍jquery的使用主要包括jQuery如何控制页面,包含元素的属性、css样式风格、DOM模型、表单元素和事件处理等。
标记元素的属性
htML中每一个标记都具有一些属性,他们这个标记在页面中呈现各种状态,例如下面的<a>标记
代码如下:
<a herf="https://www.baidu.COM" tITle="isaac" target="_blank" id="linkisaac">
该标记<a>表示标记的名称,为一个超链接,另外还有href titile target id等属性表示这个超链接在页面中的各种状态。
本文从jQuery角度出发,进一步讲解页面属性控制方法。
1.each()遍历元素
each(callback)方法主要用于对选择器中的元素进行遍历,它接受一个函数作为参数,这个函数接受一个参数,指代元素的序号。对于标记的属性而言,可以利用each()方法配合this关键字来获取或者设置选择器中的每个元素对应的属性值。
使用each()方法遍历所有元素。
代码如下:
<script tyPE="text/javascript">
$(function() {
$("p").each(function(index){
this.title = "这是第"+ (index+1) + "个P,id是:"+ this.id;
});
});
</script>
<p>
<p id="001">第一段</p>
<p id="002">第二段</p>
<p id="003">第二段</p>
<p id="004">第二段</p>
<p id="005">第二段</p>
<p id="006">第二段</p>
<p id="007">第二段</p>
</p>
以上代码中有7个P元素,首先利用$("p")获取页面中所有p元素集合,然后使用each()方法遍历所有的图片。通过this关键字对图片进行访问,获取图片的id,并设置图片的id属性。其中each()方法的函数index为元素所处的序号。
2.获取属性的值。attr(name)方法
除了在遍历整个选择器中的元素。很多时候需要得到某个对象的特点的值,在jQuery中可以通过attr(name)方法很轻松的实现这一点。该方法获取元素集中第一个的属性值。如果没有匹配则返回unfefined.
代码如下:
script type="text/javascript">
$(function() {
VAR sTitle = $("p").attr("title");//获取第一个p元素的title属性值
$("#display").text(sTitle);
});
</script>
<p>
<p id="001" title="isaac,hobby">第一段</p>
<p id="002" title="isaac,hobby">第二段</p>
<p id="003">第二段</p>
<p id="004">第二段</p>
<p id="005">第二段</p>
<p id="006">第二段</p>
<p id="007">第二段</p>
<span id="display"></span>
</p>
如果,想获取第二个p的title属性值,则可以通过位置选择器来完成。
代码如下:
$(function() {
var sTitle = $("p:eq(1)").attr("title");//获取第2个p元素的title属性值
$("#display").text(sTitle);
});
attr()方法除了可以获取元素的值外,还可以设置属性的值,通用 的表达式为
代码如下:
attr(name,value)
代码如下:
<script type="text/javascript">
$(function() {
$("a[href*=http]").attr("target","_blank");
});
</script>
代码如下:
<script type="text/javascript">
function DisableBack() {
$("button:gt(0)").attr("disabled", "disabled");
}
</script>
<p>
<button onclick="DisableBack()">第一个Button</button>
<button>第二个Button</button>
<button>第三个Button</button>
</p>
通过位置选择器,当单击第一个按钮时,后面两个按钮同时被禁用。
很多时候,我们希望属性的值能根据不同的元素有规律的变化。这个时候我们可以使用attr(name,fn),第二个参数为一个函数。该函数接受一个参数,为元素的序号,返回值为字符串。
代码如下:
<script type="text/javascript">
$(function() {
$("p").attr("id", function(index) {
//将id设置为序号相关的参数
return "p-id" + index;
}).each(function() {
//找到每一项的span标记
$(this).find("span").html("(id='" + this.id + "')");
});
});
</script>
<p>第0项 <span></span>
</p>
<p>第1项 <span></span>
</p>
<p>第2项 <span></span>
</p>
返回内容:
代码如下:
第0项 (id='p-id0')
第1项 (id='p-id1')
第2项 (id='p-id2')
有的时候对于某些元素,希望同时设置它不同的属性,如果采用上面的方法则需要一个个属性设置。jQuery很人性化, attr()还提供一个列表设置attr(PRoperties)方法。可以设置多个属性。
代码如下:
<script type="text/javascript">
$(function() {
$("img").attr({
src: "06.jpg",
title: "名字1",
alt: "名字2"
});
});
</script>
<img>
<img>
<img>
<img>
<img>
执行结果:
代码如下:
<img src="06.jpg" title="名字1" alt="名字2">
<img src="06.jpg" title="名字1" alt="名字2">
<img src="06.jpg" title="名字1" alt="名字2">
<img src="06.jpg" title="名字1" alt="名字2">
<img src="06.jpg" title="名字1" alt="名字2">
当设置某个元素属性的值时,可以通过removeAttr(name)方法将属性值删除。这时元素将恢复默认的设置。例如下面的代码使得所有按钮均不被禁用。
代码如下:
$(function() {
$("button").removeAttr("disabled")
});
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery使用之标记元素属性用法实例教程全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery使用之标记元素属性用法实例教程所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。