Heim > Web-Frontend > js-Tutorial > jQuery学习3:操作元素属性和特性_jquery

jQuery学习3:操作元素属性和特性_jquery

WBOY
Freigeben: 2016-05-16 18:35:21
Original
1176 Leute haben es durchsucht

先看一个例子:

复制代码 代码如下:

http://www.jb51.net现在要得到a标签的属性id。有如下方法:

复制代码 代码如下:

jQuery("#easy").click(function() {
    alert(document.getElementById("easy").id); //1
    alert(this.id); //2
    alert(jQuery(this).attr("id"));  //3
});

方法1使用的是javascript原始方法;方法2用到了this,this就相当于一个指针,返回的是一个dom对象,本例中返回a标签对象。所以this.id可直接得到id。方法3将dom对象转换成了jQuery对象,再利用jQuery封装的方法attr()得到a标签的ID。

可见,有时候用javascript配合jQuery会很方便。下边着重总结一下jQuery操作元素属性。

◦attr(name)             取得元素的属性值
◦attr(properties)    设置元素属性,以名/值形式设置
◦attr(key,value)       为元素设置属性值
◦removeAttr(name) 移除元素的属性值

下边以实例说明每种方法的具体用法。

复制代码 代码如下:


    脚本之家
    百度
    jQuery学习3:操作元素属性和特性_jquery

复制代码 代码如下:

jQuery("#test a").click(function() {
    //得到ID
    jQuery(this).attr("id"); //同this.id

    //为img标签设置src为指定图片;title为百度.
    var v = { src: "http://www.baidu.com/img/bdlogo.gif", title: "百度" };
    jQuery("#show").attr(v);

    //将img的title设置为baidu,同上边的区别是每次只能设定一个属性
    jQuery("#show").attr("title", "baidu");

    //移除img的title属性
    jQuery("#show").removeAttr("title");
});

大家可能已经发现了,在jQuery中attr()方法,既可以获得元素的属性值,又能设置元素的属性值。是的,在jQuery中,类似的方法还有很多,现在将它们总结下来,以后用起来也会比较容易。

方法有:

◦html()  获取或设置元素节点的html内容
◦text()  获取或设置元素节点的文本内容
◦height()  获取或设置元素高度
◦ width()  获取或设置元素宽度
◦ val()  获取或设置输入框的值

以html()为例,其余的相似:

复制代码 代码如下:

baidu

复制代码 代码如下:

//获得html,结果为baidu
jQuery("#showhtml").html();
//设置html,结果为I love baidu
jQuery("#showhtml").html("I love baidu");

以上这些就是jQuery操作元素属性的一些基本方法了,经过本次的总结,相信大家在使用jQuery时,会更加的熟练。

以下是其它网友的补充:

下面就列出jQuery中提供的方法:

操作元素属性:each(iterator)遍历包装集里所有元素,为各元素分别调用传递进来的迭代器函数。参数iterator 一个函数,为匹配集中的各元素分别调用一次。传递到函数的参数被设置为包装集里当前元素的下标(从0开始),而当前元素可通过函数this属性来访问。

复制代码 代码如下:

$('img').each(function(n){
this.alt='This is image['+n+'] with an id of'+this.id;
})

获取特性值:attr(name)获取指派到包装集里第一个元素指定特性的值。参数 name为特性的名称,该特性的值将被获取。如果没有该特性则返回undefined值。

An image

$("#myImage").attr("custom") 得到值就是some value。

设置特性值:attr(name,value)为包装集里的所有元素的name特性设置传递进来的值。name将被设置的特性的名称,value指定特性的值。

复制代码 代码如下:

$('*').attr('title',function(index) {
  return 'I am element' '+ index +' and my name is ' +(this.id?this.id:'unset');
});

该函数是设置页面上的所有元素的title特性为一个字符串。由DOM中元素的下标和各个特定元素id特性值所组成的字符串。

attr()还可以一次设置多个特性到包装集里所有元素的快速简便的方式。attr(attributes)。

复制代码 代码如下:

$('input').attr(
{value:'',title:'please enter a value'}
);

该函数把所有元素的value设置为空字符串,同时把title设置为字符串Please enter a value。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage