jQuery第三课 修改元素属性及内容的代码


Posted in Javascript onMarch 14, 2010

1. 操作属性
上文介绍了如何筛选到需要的元素。得到了元素之后就要对其进行操作。一个常见的需求是遍历得到的元素集,对每一个元素进行一个操作。jQuery提供的函数是
each(iterator),其中iterator是一个函数,接受一个整数作为参数,表示第几个元素。看一个简单的例子。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery Operation</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(function() { 
$('img').each(function(n) { 
this.alt = "This is " + n + "th picture"; 
}); 
}); 
</script> 
</head> 
<body> 
<h1>Image Gallery<br />March 13th,2010</h1> 
<img src="img/bee.jpg" alt="" width="150px"/> 
<img src="img/bright.jpg" alt="" width="150px"/> 
<img src="img/crowd.jpg" alt="" width="150px"/> 
<img src="img/pink.jpg" alt="" width="150px"/> 
<img src="img/white.jpg" alt="" width="150px"/> 
</body> 
</html>

结果用Firebug查看下:

jQuery第三课 修改元素属性及内容的代码

在上例中,采用了原生javascript的方法存取属性,jQuery 提供了一个更加一般的方法来存取属性,attr:

attr(name),如果name是字符串,获得第一个元素的属性的name的值;如果name是一个对象,则对象的属性被作为元素的属性而复制到包装集的所有元素上。

attr(name,value),当name是字符串的时候,就把属性name的值设置为value,当value是一个函数的时候,则对包装集中的每个元素调用此函数,将其name的值设置为函数的返回值。

看一个简单的例子,html代码仍然使用上面的:

<scripttype="text/javascript"> 
$(function() { 
$('body').children().attr('title', function(n) { 
return"This is "+ n + "th element"; 
}); 
$('img').attr('alt', 'A photo taken by YinZixin'); 
alert($('h1').attr('title')); 
}); 
</script>

结果为:
jQuery第三课 修改元素属性及内容的代码 
要删除属性,使用removeAttr(name)方法。
要注意,属性中有一个比较特殊的属性class。class属性十分常用,而他恰好又是javascript的关键字。要存取class属性,需要使用className而不是class。例如:
$('img').attr('className', 'photo');class和其他属性不一样,一个元素可以有多个class,它们用空格隔开,例如 class='big strong',正因为class特殊而又常用,jQuery有专门的方法处理class属性。
addClass(names),添加类;
removeClass(names), 删除类;
toggleClass(names),如果元素有该类,则删除,否则添加。
其中的names是一个字符串,可以是由空格分隔的多个类名组成。addClass和removeClass使用简单不再举例,toggleClass尤为简单实用,下面看一个例子,html代码仍然用上面的:
<style type="text/css"> 
.red_border 
{ 
border: solid 2px red; 
} 
</style> 
<script type="text/javascript"> 
function swap() { 
$('img').toggleClass('red_border'); 
} 
$(function() { 
$('img').mouseover(swap); 
$('img').mouseout(swap); 
}); 
</script>

其中最后两句是为img注册事件,鼠标进入和离开的事件是一样的,使用toggleClass它能自动判断当前的类是否存在从而采取不同的操作。
有时候我们不需要为某个元素加载某个class,只需要改变其css属性中的某一项,可以采用css方法,css方法在前面两篇文章中早已用到,不再介绍。
2. 操作DOM节点
要移动一些内容到当前包装集内的元素的内部,可以用append(content)方法,这里的content可以是一个html片段,也可以是元素,或者包装集。看一个例子:
<head> 
<title>jQuery Operation</title> 
<scripttype="text/javascript"src="jquery-1.3.2.js"></script> 
<scripttype="text/javascript"> 
$(function() { 
$('td:odd').append($('span')); 
$('div:first').append($('p')).append('<span style="color:red;font-size:small">sub title</span>'); 
}); 
</script> 
</head> 
<body> 
<div></div> 
<table> 
<tr><td>1</td><td></td></tr> 
<tr><td>2</td><td></td></tr> 
</table> 
<span>Hello JQuery</span> 
<p>Title</p> 
</body> 
</html>

最终结果如下:
jQuery第三课 修改元素属性及内容的代码 
还有一个appendTo(target),它和append方法的方向反一反,append把参数添加到调用者内部,appendTo把调用者添加到参数的内部。还有几对方法和append,appendTo类似:

prepend,prependTo:append方法当目的元素内部中有其他元素的时候,添加的元素是在原有的元素的最后,prepend则是在最前。

before,insertBefore:插在目的元素之前一个,而不是内部

after,insertAfter:插在目的元素之后。

要删除元素,可以使用remove 或者 empty方法。注意remove会把选中的元素从页面上删除,同时把这些元素作为返回值返回,这些元素不会被垃圾收集,可以对他们进行进一步操作,也可以用append之类的方法重新显示到页面上,而empty方法则彻底删除元素。

3. 操作表单元素的值
操作表单元素的值十分常用,但并不容易。jQuery提供了一个val方法来简化操作。不带参数的val()方法返回当前元素的值。val(values)方法用来将当前元素的值设置为values,如果values是一个数组,则更为有趣一点,它用于匹配select元素中的值,包括在values中的值将会变成选中状态。

Javascript 相关文章推荐
jquery 全局AJAX事件使用代码
Nov 05 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
javascript入门教程基础篇
Nov 16 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
vue如何进行动画的封装
Sep 26 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 #Javascript
jQuery入门第一课 jQuery选择符
Mar 14 #Javascript
使用JavaScript switch case 另类写法
Mar 14 #Javascript
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 #Javascript
input的focus方法使用
Mar 13 #Javascript
JavaScript prototype对象的属性说明
Mar 13 #Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 #Javascript
You might like
PHP 源代码压缩小工具
2009/12/22 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
php经典趣味算法实例代码
2020/01/21 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
Python中Continue语句的用法的举例详解
2015/05/14 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
对Python w和w+权限的区别详解
2019/01/23 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python绘制地震散点图
2019/06/18 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
大学运动会通讯稿
2014/01/28 职场文书
成绩单家长评语大全
2014/04/16 职场文书
工作自我推荐信范文
2015/03/25 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
Python PIL按比例裁剪图片
2022/05/11 Python
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android