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 相关文章推荐
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
javascript实现固定侧边栏
Feb 09 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
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
简单的过滤字符串中的HTML标记
2006/12/25 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
计算机软件个人的自荐信范文
2013/12/01 职场文书
商务英语应届生自我鉴定
2013/12/08 职场文书
网络教育自我鉴定
2014/02/04 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
同意转租证明
2015/06/24 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers