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 相关文章推荐
brook javascript框架介绍
Oct 10 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
为你总结一些php信息函数
2015/10/21 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python中表示字符串的三种方法
2017/09/06 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
python 对xml解析的示例
2021/02/27 Python
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
临床医学系毕业生推荐信
2013/11/09 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
2014年共青团工作总结
2014/12/10 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android