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库 pj介绍
Dec 19 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 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
删除数组元素实用的PHP数组函数
2008/08/18 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python实现文件内容批量追加的方法示例
2017/08/29 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
英国女士家居服网站:hush
2017/08/09 全球购物
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
Python实现滑雪小游戏
2021/09/25 Python