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 相关文章推荐
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
js 浏览器事件介绍
Mar 30 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
利用js canvas实现五子棋游戏
Oct 11 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来处理多个提交任务
2008/05/08 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
python函数map()和partial()的知识点总结
2020/05/26 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
销售自荐信
2013/10/22 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
师德师风个人整改措施
2014/10/27 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL