jQuery使用之标记元素属性用法实例

这里介绍jQuery的使用主要包括jQuery如何控制页面,包含元素的属性、css样式风格、DOM模型、表单元素和事件处理等。

标记元素的属性

html中每一个标记都具有一些属性,他们这个标记在页面中呈现各种状态,例如下面的<a>标记

复制代码 代码如下:

<a herf="http://www.baidu.com" title="isaac" target="_blank">

该标记<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>
<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第二段</p>
    <p>第二段</p>
    <p>第二段</p>
    <p>第二段</p>
    <p>第二段</p>
</div>

以上代码中有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>
<div>
    <p title="isaac,hobby">第一段</p>
    <p title="isaac,hobby">第二段</p>
    <p>第二段</p>
    <p>第二段</p>
    <p>第二段</p>
    <p>第二段</p>
    <p>第二段</p>
    <span></span>
</div>

如果,想获取第二个p的title属性值,则可以通过位置选择器来完成。

复制代码 代码如下:

$(function() {
 var sTitle = $("p:eq(1)").attr("title");//获取第2个p元素的title属性值
 $("#display").text(sTitle);
});


3.设置属性的值。attr(name,value)

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>
<div>
    <button>第一个Button</button>&nbsp;
    <button>第二个Button</button>&nbsp;
    <button>第三个Button</button>&nbsp;
</div>

通过位置选择器,当单击第一个按钮时,后面两个按钮同时被禁用。

很多时候,我们希望属性的值能根据不同的元素有规律的变化。这个时候我们可以使用attr(name,fn),第二个参数为一个函数。该函数接受一个参数,为元素的序号,返回值为字符串。

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxwgj.html