JQuery概述3——操作包装集中的元素
2010-02-26 16:36
357 查看
[b]前言:[/b]
在前一篇博文《JQuery概述2——创建元素包装集》 中已经就如何获取包装集,讲述了几种方法。现在在获取包装集这一前提已经完成的情况下,我们需要对包装几种的元素做相应操作,具体从以下几方面展开:
[b]操作元素属性和特性:[/b]
在我的博文《JavaScript浅析2——对象》 中,已经讲述了浏览器在将HTML代码转化为DOM文档树的过程,将特性转化为文档对象属性的方法,以及其间相互关系,这里不再鳌述。
操作元素属性:
JQuery没有具体获取或修改元素属性的基本命令。然而可以借助函数(ex,each()函数),可以实现对元素属性的修改。
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type ="text/javascript" language ="javascript" >
$('img').each(function ()
{
this.alt='This isFinite image with an id of '+this.id;
});
</script>这样就通过遍历元素<img>,进而对每一个元素的属性进行赋值,实现了对元素属性的操作。
操作特性:
关于特性与属性的区别,前已有介绍,这里不再鳌述。只是想说明,通过改变特性值,可以动态的改变DOM元素对应属性的值,因为它们中间存在动态关联。
设置特性值,例为:
$('*).attr('title','This is a title');
即实现了对所有元素的title特性的赋值。而其抽象形式为:
attr(name,value)
name:将要被设置的特性名称;
value:(字符串,对象,函数)指定特性的值;
[b]修改元素样式:[/b]
在上一篇中用到例子:
$("table tr:nth-child(even)").addClass("even")
用到了addClass添加样式的方法,这是在CSS中已经定义了CSS类even的情况下,直接引用的例子,这是比较常用的情况。然而对CSS样式属性,可以通过设置样式实现:
$("div.expandable").css("width",function()
{return $(this).width()+20+"px";});
抽象形式为:
css(name,value)
其中name和value的注解同上例。
附:
对于: $(this).width()
表示为所包含元素的width值(通过函数width()实现)。
综述之,本篇在前一篇获取包装集的基础上,对包装集中元素进行了相应操作,主要从特性、属性,以及样式方面,呵呵~
在前一篇博文《JQuery概述2——创建元素包装集》 中已经就如何获取包装集,讲述了几种方法。现在在获取包装集这一前提已经完成的情况下,我们需要对包装几种的元素做相应操作,具体从以下几方面展开:
[b]操作元素属性和特性:[/b]
在我的博文《JavaScript浅析2——对象》 中,已经讲述了浏览器在将HTML代码转化为DOM文档树的过程,将特性转化为文档对象属性的方法,以及其间相互关系,这里不再鳌述。
操作元素属性:
JQuery没有具体获取或修改元素属性的基本命令。然而可以借助函数(ex,each()函数),可以实现对元素属性的修改。
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type ="text/javascript" language ="javascript" >
$('img').each(function ()
{
this.alt='This isFinite image with an id of '+this.id;
});
</script>这样就通过遍历元素<img>,进而对每一个元素的属性进行赋值,实现了对元素属性的操作。
操作特性:
关于特性与属性的区别,前已有介绍,这里不再鳌述。只是想说明,通过改变特性值,可以动态的改变DOM元素对应属性的值,因为它们中间存在动态关联。
设置特性值,例为:
$('*).attr('title','This is a title');
即实现了对所有元素的title特性的赋值。而其抽象形式为:
attr(name,value)
name:将要被设置的特性名称;
value:(字符串,对象,函数)指定特性的值;
[b]修改元素样式:[/b]
在上一篇中用到例子:
$("table tr:nth-child(even)").addClass("even")
用到了addClass添加样式的方法,这是在CSS中已经定义了CSS类even的情况下,直接引用的例子,这是比较常用的情况。然而对CSS样式属性,可以通过设置样式实现:
$("div.expandable").css("width",function()
{return $(this).width()+20+"px";});
抽象形式为:
css(name,value)
其中name和value的注解同上例。
附:
对于: $(this).width()
表示为所包含元素的width值(通过函数width()实现)。
综述之,本篇在前一篇获取包装集的基础上,对包装集中元素进行了相应操作,主要从特性、属性,以及样式方面,呵呵~
![](http://www.cnblogs.com/Emoticons/msn/bat.gif)
相关文章推荐
- jquery获取父元素以及操作包装集中的元素
- JQuery概述2——创建元素包装集
- jquery map_将某个包装集中的元素转换为数组
- jQuery 第二课:操作包装集元素
- learning jQuery 学习笔记十二(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----包装元素
- jQuery 第二课 操作包装集元素代码
- jQuery第二课 ——节点选择、元素创建与操作、包装对象、jq转原生js
- jQuery 第二课 操作包装集元素代码
- jQuery入门(2)使用jQuery操作元素的属性与样式
- jquery之管理包装元素集合(确定包装集的大小,size()方法的使用)
- 使用选择器语法来查找元素 - 你想使用类似于CSS或jQuery的语法来查找和操作元素
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- JQuery操作iframe父页面与子页面的元素与方法
- jQuery操作元素的属性与样式(1/2)
- 操作jQuery集合搜索父元素
- 使用jquery选择器操作form元素
- jquery 评论(2) jQuery对表单元素的取值和赋值操作
- 【转载】jQuery操作元素
- jQuery 集合 搜索操作(父辈元素搜索、同辈元素搜索、子元素搜索)
- jQuery操作Form表单元素