JQuery概述3——操作包装集中的元素

前言：

     在前一篇博文《JQuery概述2——创建元素包装集》 中已经就如何获取包装集，讲述了几种方法。现在在获取包装集这一前提已经完成的情况下，我们需要对包装几种的元素做相应操作，具体从以下几方面展开：

 

操作元素属性和特性：

     在我的博文《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：（字符串，对象，函数）指定特性的值；

 

修改元素样式：

  在上一篇中用到例子：

                                  $("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（）实现）。

 

综述之，本篇在前一篇获取包装集的基础上，对包装集中元素进行了相应操作，主要从特性、属性，以及样式方面，呵呵~