最新资讯当前位置:万彩娱乐平台 > 最新资讯 > >

万彩娱乐平台jQuery使用之标记元素属性用法实例

  

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

  

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

  

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

  

  

标记元素的属性  

  

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

  

  

该标记表示标记的名称,为一个超链接,另外还有href titile target id等属性表示这个超链接在页面中的各种状态。

  

  

本文从jQuery角度出发,进一步讲解页面属性控制方法。

  

  

1.each()遍历元素  

  

each(callback)方法主要用于对选择器中的元素进行遍历,它接受一个函数作为参数,这个函数接受一个参数,指代元素的序号。对于标记的属性而言,可以利用each()方法配合this关键字来获取或者设置选择器中的每个元素对应的属性值。

  

  

使用each()方法遍历所有元素。

  
   代码如下:

  

  

以上代码中有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);  
万彩娱乐  });  
  
  
  
  

第一段

  
  

第二段

  
  

第二段

  
  

第二段

  
  

第二段

  
  

第二段

  
  

第二段

  
    
  
  

  

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

  
   代码如下:

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

  

attr()方法除了可以获取元素的值外,还可以设置属性的值,通用 的表达式为  
   代码如下:

attr(name,value)
  
  例如:下面代码将使页面的超链接都在新窗口打开。

  
   代码如下:

  
  $(function() {  
  $("a[href*=http]").attr("target","_blank");  
  });  
  
  
  例子:  
   代码如下:
  
  function DisableBack() {  
  $("button:gt(0)").attr("disabled", "disabled");  
  }  
  
  
  
    
    
    
  
  

  

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

  

  

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

  
   代码如下:

  
  $(function() {  
  $("div").attr("id", function(index) {  
  //将id设置为序号相关的参数  
  return "div-id" + index;  
  }).each(function() {  
  //找到每一项的span标记  
  $(this).find("span").html("(id='" + this.id + "')");  
  });  
  });  
  
  
第0项   
  
  
  
第1项   
  
  
  
第2项   
  
  

  

返回内容:  
   代码如下:

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

  

  

有的时候对于某些元素,希望同时设置它不同的属性,如果采用上面的方法则需要一个个属性设置。jQuery很人性化, attr()还提供一个列表设置attr(properties)方法。可以设置多个属性。

  
   代码如下:

  
  $(function() {  
  $("img").attr({  
  src: "06.jpg",  
  title: "名字1",  
  alt: "名字2"  
  });  
  });  
  
    
    
    
    
  
  

  

执行结果:  
   代码如下:

名字2  
  名字2  
  名字2  
  名字2  
  名字2
  
  4.删除属性  

  

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

  
   代码如下:

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

  

  

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

  

(责任编辑:admin)

上一篇:JavaScript如何从listbox里同时删除多个项目

下一篇:值得学习的bootstrap fileinput文件上传工具

推荐内容

客户服务热线

010-400-12345

在线客服