jQuery使用之标记元素属性用法实例
本文实例讲述了jQuery使用之标记元素属性用法。分享给大家供大家参考。具体分析如下：
这里介绍jQuery的使用主要包括jQuery如何控制页面，包含元素的属性、css样式风格、DOM模型、表单元素和事件处理等。
标记元素的属性
html中每一个标记都具有一些属性，他们这个标记在页面中呈现各种状态，例如下面的<a>标记
该标记<a>表示标记的名称，为一个超链接，另外还有href titile target id等属性表示这个超链接在页面中的各种状态。
本文从jQuery角度出发，进一步讲解页面属性控制方法。
1.each()遍历元素
each(callback)方法主要用于对选择器中的元素进行遍历，它接受一个函数作为参数，这个函数接受一个参数，指代元素的序号。对于标记的属性而言，可以利用each()方法配合this关键字来获取或者设置选择器中的每个元素对应的属性值。
使用each()方法遍历所有元素。
$(function() {
$("p").each(function(index){
this.title = "这是第"+ (index+1) + "个P，id是："+ this.id;
});
});
</script>
<div>
<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>
</div>
以上代码中有7个P元素，首先利用$("p")获取页面中所有p元素集合，然后使用each()方法遍历所有的图片。通过this关键字对图片进行访问，获取图片的id,并设置图片的id属性。其中each()方法的函数index为元素所处的序号。
2.获取属性的值。attr(name)方法
除了在遍历整个选择器中的元素。很多时候需要得到某个对象的特点的值，在jQuery中可以通过attr(name)方法很轻松的实现这一点。该方法获取元素集中第一个的属性值。如果没有匹配则返回unfefined.
$(function() {
var sTitle = $("p").attr("title");//获取第一个p元素的title属性值
$("#display").text(sTitle);
});
</script>
<div>
<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>
</div>
如果，想获取第二个p的title属性值，则可以通过位置选择器来完成。
var sTitle = $("p:eq(1)").attr("title");//获取第2个p元素的title属性值
$("#display").text(sTitle);
});
3.设置属性的值。attr(name,value)
attr()方法除了可以获取元素的值外，还可以设置属性的值，通用 的表达式为
例如：下面代码将使页面的超链接都在新窗口打开。
$(function() {
$("a[href*=http]").attr("target","_blank");
});
</script>
例子：
function DisableBack() {
$("button:gt(0)").attr("disabled", "disabled");
}
</script>
<div>
<button onclick="DisableBack()">第一个Button</button>
<button>第二个Button</button>
<button>第三个Button</button>
</div>
通过位置选择器，当单击第一个按钮时，后面两个按钮同时被禁用。
很多时候，我们希望属性的值能根据不同的元素有规律的变化。这个时候我们可以使用attr(name,fn),第二个参数为一个函数。该函数接受一个参数，为元素的序号，返回值为字符串。
$(function() {
$("div").attr("id", function(index) {
//将id设置为序号相关的参数
return "div-id" + index;
}).each(function() {
//找到每一项的span标记
$(this).find("span").html("(id='" + this.id + "')");
});
});
</script>
<div>第0项 <span></span>
</div>
<div>第1项 <span></span>
</div>
<div>第2项 <span></span>
</div>
返回内容：
第1项 (id='div-id1')
第2项 (id='div-id2')
以上代码通过attr(name,fn)将页面中所有的<div>块的id属性值设置为序号相关的参数。并通过each()方法遍历div块，将id值显示在各自的<span>标记中。这可以看到jQuery链的强大。
有的时候对于某些元素，希望同时设置它不同的属性，如果采用上面的方法则需要一个个属性设置。jQuery很人性化， attr()还提供一个列表设置attr(properties)方法。可以设置多个属性。
$(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">
4.删除属性
当设置某个元素属性的值时，可以通过removeAttr(name)方法将属性值删除。这时元素将恢复默认的设置。例如下面的代码使得所有按钮均不被禁用。
$("button").removeAttr("disabled")
});
removeAttr(name)删除属性相当于html标记中不删除该属性。并不是取消了该标记的这个特点。上述代码运行后，所有按钮依然具有设置为禁用的能力。
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
Ajax分页插件Pagination从前台jQuery到后端java总结
这篇文章主要从前台jQuery到后java端总结了Ajax分页插件Pagination的使用方法和技巧，感兴趣的小伙伴们可以参考一下2016-07-07
下面小编就为大家带来一篇jquery 实时监听输入框值变化的完美方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
本文给大家分享一段jquery代码实现手指滑动轮播效果，代码简单易懂，非常不错，需要的朋友参考下2016-12-12
jQuery UI Dialog 创建友好的弹出对话框实现代码
jQuery UI Dialog是jQuery UI的弹出对话框组件，使用它可以创建各种美观的弹出对话框；它可以设置对话框的标题、内容，并且使对话框可以拖动、调整大小、及关闭；平常主要用来替代浏览嚣自带的alert、confirm、open等方法2012-04-04
这篇文章主要介绍了Jquery对select的增、删、改、查操作的方法,需要的朋友可以参考下2015-02-02
普通JS写法与jQuery选择器写法,选择table的行，隔一行，选择一行，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-04-04
这篇文章主要为大家详细介绍了jquery自定义放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了jQuery实现base64前台加密解密功能,结合实例形式分析了jquery.base64.js实现前台base64加密与解密功能的实现方法,并给出了java实现后台base64加密解密的操作示例对比验证加密效果,需要的朋友可以参考下2017-08-08
很多网站的首页都有广告轮播，今天闲来看了一网站的首页广告轮播方式，是通过 jQuery的blockSlide插件实现的，然后自己测试了一下，很好。2010-11-11
这篇文章主要介绍了通过jQuery.extend的源码分析了一下JQuery中的extend方法实现原理以及使用方式，非常的详细，这里推荐给大家，有需要的小伙伴来参考下吧。2015-02-02
最新评论