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

所属分类: 网络编程 / JavaScript 阅读数: 309
收藏 0 赞 0 分享

先看一个例子:

复制代码 代码如下:

<a id="easy" href="#">https://www.jb51.net</a>现在要得到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) 移除元素的属性值

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

复制代码 代码如下:

<div id="test">
    <a id="hyip" href="javascript:void(0)">脚本之家</a>
    <a id="baidu" href="javascript:void(0)">百度</a>
    <img id="show" />
</div>

复制代码 代码如下:

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()为例,其余的相似:

复制代码 代码如下:

<div id="showhtml">baidu</div>

复制代码 代码如下:

//获得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值。

<img id="myImage" src="image.gif" alt="An image" class="someClass" title="This is an image" custom="some value">

$("#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'}
);

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

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多