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

本文实例讲述了jQuery使用之标记元素属性用法。分享给大家供大家参考。具体分析如下:

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

标记元素的属性

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

代码如下:

<a herf="http://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>
<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.

代码如下:

script type="text/javascript">
    $(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属性值,则可以通过位置选择器来完成。

代码如下:

$(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 onclick="DisableBack()">第一个Button</button> 
    <button>第二个Button</button> 
    <button>第三个Button</button> 
</div>

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

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

代码如下:

<script type="text/javascript">
    $(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>

返回内容:

代码如下:

第0项 (id='div-id0')
第1项 (id='div-id1')
第2项 (id='div-id2')

以上代码通过attr(name,fn)将页面中所有的<div>块的id属性值设置为序号相关的参数。并通过each()方法遍历div块,将id值显示在各自的<span>标记中。这可以看到jQuery链的强大。

有的时候对于某些元素,希望同时设置它不同的属性,如果采用上面的方法则需要一个个属性设置。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">

4.删除属性

当设置某个元素属性的值时,可以通过removeAttr(name)方法将属性值删除。这时元素将恢复默认的设置。例如下面的代码使得所有按钮均不被禁用。

代码如下:

$(function() {
 $("button").removeAttr("disabled")
});

removeAttr(name)删除属性相当于html标记中不删除该属性。并不是取消了该标记的这个特点。上述代码运行后,所有按钮依然具有设置为禁用的能力。

希望本文所述对大家的jQuery程序设计有所帮助。

(0)

相关推荐

  • jQuery使用之处理页面元素用法实例

    本文实例讲述了jQuery使用之处理页面元素用法.分享给大家供大家参考.具体分析如下: 对于页面的元素,在DOM编程中可以通过各种查询.修改手段进行管理,非常麻烦.jQuery提供了一整套的方法来处理页面的元素.包括元素的内容.复制.移动和替换等.这里将介绍一些常用的内容. 1.直接获取.编辑内容. 在jQuery中,主要是通过html()和text()两个方法来获取和编辑页面的内容.其中html()相当于获取节点的innerHTML属性,添加参数html(text),则为设置innerHtml

  • jquery删除指定子元素代码实例

    jquery删除指定子元素代码实例: 本章节介绍一下如何利用jQuery实现删除指定子元素. 如何利用原生javascript实现此功能可以参阅原生javascript删除指定子元素代码实例一章节. 其实实现此功能的方式有很多种,下面介绍一下其中比较常见的一种. 代码实例如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <meta charset="utf-8"> <title>我们</title>

  • jQuery元素选择器用法实例

    本文实例讲述了jQuery元素选择器用法.分享给大家供大家参考.具体分析如下: 元素选择器根据元素名称匹配所有的元素. 实例代码: 复制代码 代码如下: $("div") 以上代码匹配所有的div元素. 实例代码: 复制代码 代码如下: <!DOCTYPE html>   <html>   <head>   <meta charset=" utf-8">   <meta name="author&quo

  • jquery增加和删除元素的方法

    本文实例讲述了jquery增加和删除元素的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jquery增加删除元素</title> <script type="text/javascript&

  • jquery操作对象数组元素方法详解

    代码如下: 复制代码 代码如下: <div id="div1">      <span>a</span>      <span>b</span>      <span>c</span>  </div> 1.错误方式:不能用[]方式取jquery对象数组,如下: 复制代码 代码如下: $(function() {      var div_span = $("#div1 span&q

  • jQuery使用之设置元素样式用法实例

    本文实例讲述了jQuery使用之设置元素样式用法.分享给大家供大家参考.具体分析如下: css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法.前面文章中有使用过 addClass()为元素添加css样式风格.这里主要介绍jQuery如何设置页面的样式风格.包括添加.删除.动态切换等. 1. 添加.删除css类别. 复制代码 代码如下: $(function() {     //同时添加多个CSS类别     $("img").addClass("css

  • JQuery中使用.each()遍历元素学习笔记

    今天写一个选项卡的时候,需要用到jquery中的.each(),通过获取each()中的index参数来获取li元素的编号,方便下面区块显示,在一个测试页面上写好了下面的代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

  • jquery中push()的用法(数组添加元素)

    push定义和用法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) 参数 描述 newelement1 必需.要添加到数组的第一个元素. newelement2 可选.要添加到数组的第二个元素. newelementX 可选.可添加多个元素. 返回值 把指定的值添加到数组后的新长度. 说明 push() 方法可把它的参数顺序添加到 arrayObjec

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

    本文实例讲述了jQuery使用之标记元素属性用法.分享给大家供大家参考.具体分析如下: 这里介绍jQuery的使用主要包括jQuery如何控制页面,包含元素的属性.css样式风格.DOM模型.表单元素和事件处理等. 标记元素的属性 html中每一个标记都具有一些属性,他们这个标记在页面中呈现各种状态,例如下面的<a>标记 复制代码 代码如下: <a herf="http://www.baidu.com" title="isaac" target=&

  • jQuery元素属性操作实例(设置、获取及删除元素属性)

    本文实例讲述了jQuery元素属性操作的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="tex

  • jQuery对象的selector属性用法实例

    本文实例讲述了jQuery对象的selector属性用法.分享给大家供大家参考.具体分析如下: 此属性返回传给jQuery的原始选择器,也就是说返回jQuery是用哪个选择器匹配到当前元素. selector属性可以与context配合使用,用于精确检测选择器查询情况. 语法结构: 复制代码 代码如下: $("selector").selector 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <

  • jQuery对象的length属性用法实例

    本文实例讲述了jQuery对象的length属性用法.分享给大家供大家参考.具体分析如下: 此属性返回匹配的jQuery对象集合中对象的数目. length属性与size()方法返回相同的值. 语法结构: 复制代码 代码如下: $("selector").length 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <m

  • jQuery使用hide方法隐藏元素自身用法实例

    本文实例讲述了jQuery使用hide方法隐藏元素自身用法,分享给大家供大家参考.具体如下: 下面的JS代码实现让按钮点击后将自己隐藏起来 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(

  • jQuery的context属性用法实例

    本文实例讲述了jQuery的context属性用法.分享给大家供大家参考.具体分析如下: 此属性可以返回传给jQuery()的原始DOM节点内容,即jQuery()方法的第二个参数值. 如果jQuery()方法没有指定此参数,那么context指向当前文档(document). 语法结构: 复制代码 代码如下: $("selector").context 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head&

  • jQuery HTML获取内容和属性操作实例分析

    目录 获取内容和属性 获得内容 - text().html() 以及 val() 获取属性 - attr() 本文实例讲述了jQuery HTML获取内容和属性操作.分享给大家供大家参考,具体如下: 获取内容和属性 获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 下面的例子

  • jQuery HTML设置内容和属性操作实例分析

    目录 jQuery-设置内容和属性 设置内容-text().html()以及val() text().html()以及val()的回调函数 设置属性-attr() attr()的回调函数 本文实例讲述了jQuery HTML设置内容和属性操作.分享给大家供大家参考,具体如下: jQuery - 设置内容和属性 设置内容 - text().html() 以及 val() 将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素

随机推荐