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


Posted in Javascript onFebruary 07, 2010

先看一个例子:

<a id="easy" href="#">https://3water.com</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。

Javascript 相关文章推荐
JavaScript 对象成员的可见性说明
Oct 16 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
jQuery学习2 选择器的使用说明
Feb 07 #Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 #Javascript
JQuery 获取和设置Select选项的代码
Feb 07 #Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 #Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 #Javascript
javascript 函数速查表
Feb 07 #Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 #Javascript
You might like
谈谈新手如何学习PHP
2006/12/14 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
做网页的一些技巧
2007/02/01 Javascript
javascript中的location用法简单介绍
2007/03/07 Javascript
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
基于jquery的表格排序
2010/09/11 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
Python实现多线程抓取妹子图
2015/08/08 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python logging设置level失败的解决方法
2020/02/19 Python
python基于socket函数实现端口扫描
2020/05/28 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
批评与自我批评材料
2014/02/15 职场文书
开学典礼主持词
2014/03/19 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书