jQuery使用手册之DOM操作排行榜[转]

最新推荐文章于 2024-08-11 18:40:36 发布

jianvsgao

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量510

点赞数

分类专栏： JQuery 文章标签： jquery iterator function javascript div class

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简介:
属性

我们以为例，在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象，在用o.src来取得或修改该节点的scr属性，在jQuery里$("#a")将得到jQuery对象[

]，然后可以用jQuery提供的很多方法来进行操作，如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法，方便大家快速对DOM对象进行操作NO.1 jQuery使用手册之DOM操作属性
我们以<img id="a" scr="5.jpg"/>为例，在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象，在用o.src来取得或修改该节点的scr属性，在jQuery 里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ]，然后可以用jQuery提供的很多方法来进行操作，如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法，方便大家快速对DOM对象进行操作
herf() herf(val)
说明：对jQuery对象属性herf的操作。
例子：
未执行jQuery前
<a href="1.htm" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
alert($("#test").href());
$("#test").href("2.html");
}

运行：先弹出对话框显示id为test的连接url，在将其url改为2.html，当弹出对话框后会看到转向到2.html
同理，jQuery还提供类似的其他方法，大家可以分别试验一下：
herf() herf(val) html() html(val) id() id (val) name() name (val) rel() rel (val)
src() src (val) title() title (val) val() val(val)

操作
after(html) 在匹配元素后插入一段html
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
$("#test").after("<b>Hello</b>");
}

执行后相当于：
<a href="#" id="test" onClick="jq()">jQuery</a><b>Hello</b>

after(elem) after(elems) 将指定对象elem或对象组elems插入到在匹配元素后
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>

jQuery代码及功能
function jq(){
$("a").after($("#test"));
}

执行后相当于
<a href="#" onClick="jq()">jQuery</a><p id="test">after</p>

append(html)在匹配元素内部，且末尾插入指定html
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
$("#test").append("<b>Hello</b>");
}

执行后相当于
<a href="#" onClick="jq()">jQuery<b>Hello</b></a>

同理还有append(elem) append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解！

appendTo(expr) 与append(elem)相反
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>

jQuery代码及功能
function jq(){
$("a"). appendTo ($("#test"));
}

执行后相当于
<p id="test">after<a href="#" onClick="jq()">jQuery</a> </p>

clone() 复制一个jQuery对象
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
$("#test").clone().appendTo($("a"));
}

复制$("#test")然后插入到<a>后,执行后相当于
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a><p id="test">after</p>

empty() 删除匹配对象的所有子节点
<div id="test">
<span>span</span>
<p>after</p>
</div>
<a href="#" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
$("#test").empty();
}

执行后相当于
<div id="test"></div><a href="#" onClick="jq()">jQuery</a>

insertAfter(expr) insertBefore(expr)
按照官方的解释和我的几个简单测试insertAfter(expr)相当于before(elem),insertBefore(expr)相当于after (elem)

prepend (html) prepend (elem) prepend (elems) 在匹配元素的内部且开始出插入
通过下面例子区分append(elem) appendTo(expr) prepend (elem)
<p id="a">p</p>
<div>div</div>

执行$("#a").append($("div")) 后相当于
<p id="a">
P
<div>div</div>
</p>

执行$("#a").appendTo($("div")) 后相当于
<div>
div
<p id="a">p</p>
</div>

执行$("#a").prepend ($("div")) 后相当于
<p id="a">
<div>div</div>
P
</p>

remove() 删除匹配对象
注意区分empty()，empty()移出匹配对象的子节点，remove()，移出匹配对象

wrap(htm) 将匹配对象包含在给出的html代码内
<p>Test Paragraph.</p> <a href="#" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
$("p").wrap("<div class='wrap'></div>");
}

执行后相当于
<div class='wrap'><p>Test Paragraph.</p></div>

wrap(elem) 将匹配对象包含在给出的对象内
<p>Test Paragraph.</p><div id="content"></div>
<a href="#" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
$("p").wrap( document.getElementById('content') );
}

执行后相当于
<div id="content"><p>Test Paragraph.</p></div>

遍历、组合

add(expr) 在原对象的基础上在附加符合指定表达式的jquery对象
<p>Hello</p><p><span>Hello Again</span></p>
<a href="#" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
     var f=$("p").add("span");
     for(var i=0;i < $(f).size();i++){
     alert($(f).eq(i).html());}
}

执行$("p")得到匹配<p>的对象，有两个，add("span")是在("p")的基础上加上匹配<span >的对象，所有一共有3个，从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合，分别是[<p> Hello</p>]，[<p><span>Hello Again</span></p>]，[<span>Hello Again</span>]。

add(el) 在匹配对象的基础上在附加指定的dom元素。
$("p").add(document.getElementById("a"));

add(els) 在匹配对象的基础上在附加指定的一组对象，els是一个数组。
<p>Hello</p><p><span>Hello Again</span></p>

jQuery代码及功能：
function jq(){
     var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
     for(var i=0;i < $(f).size();i++){
             alert($(f).eq(i).html());}
}

注意els是一个数组，这里的[ ]不能漏掉。

ancestors () 一依次以匹配结点的父节点的内容为对象,根节点除外（有点不好理解，看看下面例子就明白了）
<div>
    <p>one</p>
    <span>
    <u>two</u>
    </span>
</div>

jQuery代码及功能：
function jq(){
     var f= $("u").ancestors();
     for(var i=0;i < $(f).size();i++){
      alert($(f).eq(i).html());}
}

第一个对象是以<u>的父节点的内容为对象，[ <u>two</u> ]
第一个对象是以<u>的父节点的父节点（div）的内容为对象，[<p>one</p><span><u>two</u></span> ]
一般一个文档还有<body>和<html>，依次类推下去。

ancestors (expr) 在ancestors（）的基础上之取符合表达式的对象
如上各例子讲var f改为var f= $("u").ancestors(“div”),则只返回一个对象：
[ <p>one</p><span><u>two</u></span> ]

children() 返回匹配对象的子介点
<p>one</p>
<div id="ch">
<span>two</span>
</div>

jQuery代码及功能：
function jq(){
alert($("#ch").children().html());
}

$("#ch").children()得到对象[ <span>two</span> ].所以.html()的结果是”two”

children(expr) 返回匹配对象的子介点中符合表达式的节点
<div id="ch">
      <span>two</span>
      <span id="sp">three</span>
</div>

jQuery代码及功能
function jq(){
alert($("#ch").children(“#sp”).html());
}

$("#ch").children()得到对象[<span>two</span><span id="sp">three</span> ].
$("#ch").children(“#sp”)过滤得到[<span id="sp">three</span> ]

parent () parent (expr)取匹配对象父节点的。参照children帮助理解

contains(str) 返回匹配对象中包含字符串str的对象
<p>This is just a test.</p><p>So is this</p>

jQuery代码及功能：
function jq(){
alert($("p").contains("test").html());
}

$("p")得到两个对象，而包含字符串”test”只有一个。所有$("p").contains("test")返回 [ <p>This is just a test.</p> ]

end() 结束操作,返回到匹配元素清单上操作前的状态.

filter(expr) filter(exprs) 过滤现实匹配符合表达式的对象 exprs为数组，注意添加“[ ]”
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery代码及功能：
function jq(){
alert($("p").filter(".selected").html())
}

$("p")得到三个对象，$("p").contains("test")只返回class为selected的对象。

find(expr) 在匹配的对象中继续查找符合表达式的对象
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>

Query代码及功能：
function jq(){
alert($("p").find("#a").html())
}

在$("p")对象中查找id为a的对象。

is(expr) 判断对象是否符合表达式,返回boolen值
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>

Query代码及功能：
function jq(){
alert($("#a").is("p"));
}

在$("#a ")是否符合jquery表达式。
大家可以用$("#a").is("div"); ("#a").is("#a")多来测试一下

next() next(expr) 返回匹配对象剩余的兄弟节点
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>

jQuery代码及功能
function jq(){
alert($("p").next().html());
alert($("p").next(".selected").html());
}

$("p").next()返回 [ <p id="a">Hello Again</p> , <p class="selected">And Again</p> ]两个对象
$("p").next(".selected)只返回 [<p class="selected">And Again</p> ]一个对象

prev () prev (expr) 参照next理解

not(el) not(expr) 从jQuery对象中移出匹配的对象，el为dom元素，expr为jQuery表达式。
<p>one</p><p id="a">two</p>
<a href="#" οnclick="js()">jQuery</a>

jQuery代码及功能：
function js(){
alert($("p").not(document.getElementById("a")).html());
alert($("p").not(“#a”).html());
}

$("p")由两个对象，排除后的对象为[<p>one</p> ]

siblings () siblings (expr) jquery匹配对象中其它兄弟级别的对象
<p>one</p>
<div>
<p id="a">two</p>
</div>
<a href="#" οnclick="js()">jQuery</a>

jQuery代码及功能：
function js(){
alert($("div").siblings().eq(1).html());
}

$("div").siblings()的结果实返回两个对象[<p>one</p>，<a href="#" οnclick="js()">jQuery</a> ]
alert($("div").siblings(“a”)返回一个对象[<a href="#" οnclick="js()">jQuery</a> ]

其他
addClass(class) 为匹配对象添加一个class样式
removeClass (class) 将第一个匹配对象的某个class样式移出

attr (name) 获取第一个匹配对象的属性
<img src="test.jpg"/><a href="#" οnclick="js()">jQuery</a>

jQuery代码及功能：
function js(){
alert($("img").attr("src"));
}

返回test.jpg

attr (prop) 为第一个匹配对象的设置属性，prop为hash对象，用于为某对象批量添加众多属性
<img/><a href="#" οnclick="js()">jQuery</a>

jQuery代码及功能：
function js(){
$("img").attr({ src: "test.jpg", alt: "Test Image" });
}

运行结果相当于
<img src="test.jpg" alt="Test Image"/>

attr (key,value) 为第一个匹配对象的设置属性，key为属性名，value为属性值
<img/><a href="#" οnclick="js()">jQuery</a>

jQuery代码及功能
function js(){
$("img").attr(“src”,”test.jpg”);
}

运行结果相当于<img src="test.jpg"/>

removeAttr (name) 将第一个匹配对象的某个属性移出
<img alt="test"/><a href="#" οnclick="js()">jQuery</a>

jQuery代码及功能：
function js(){
$("img"). removeAttr("alt");
}

运行结果相当于<img />

toggleClass (class) 将当前对象添加一个样式，不是当前对象则移出此样式，返回的是处理后的对象
<p>Hello</p><p class="selected">Hello Again</p><a href="#" οnclick="js()">jQuery</a>

$("p")的结果是返回对象 [<p>Hello</p>,<p class="selected">Hello Again</p> ]
$("p").toggleClass("selected")的结果是实返回对象 [ <p class="selected">Hello</p>, <p>Hello Again</p> ]NO.2 JavaScript的函数相关 Microsoft JavaScipt函数执行操作，也可以返回值。某些时候是计算或比较的结果。函数又被称为“全局方法”。

一个函数中包含有几个操作。这样可使得代码更合理化。可以写一组语句并给其命名，然后通过调用它并传递其需要的信息来运行整组语句。

给函数传递信息可以把信息放在函数名称后面的圆括号中。传递给函数的信息称作参数。某些函数根本不带任何参数，而其他函数带一个或者多个参数。在某些函数中，参数的个数取决于如何使用该函数。

JavaScipt支持两种函数：一类是语言内部的函数，另一类是自己创建的。

特殊的内部函数
JavaScipt语言包含很多内部函数。某些函数可以操作表达式和特殊字符，而其他函数将字符串转换为数值。一个有用的内部函数是 eval()。该函数可以对以字符串形式表示的任意有效的 Jscript代码求值。eval() 函数有一个参数，该参数就是想要求值的代码。下面给出一个使用本函数的示例。
var anExpression = "6 * 9 % 7";
var total = eval(anExpression); // 将变量 total 赋值为 5。
var yetAnotherExpression = "6 * (9 % 7)";
total = eval(yetAnotherExpression) // 将变量 total 赋值为 12。
// 将一个字符串赋给 totality （注意嵌套引用）
var totality = eval("’...surrounded by acres of clams.’");

有关内部函数的详细信息请参考语言参考。

创建自己的函数
在必要的时候，可以创建并使用自己的函数。一个函数的定义中包含了一个函数语句和一个 Jscript 语句块。

下面示例中的 Checktriplet 函数以三角形的边长为参数。通过查看三条边的长度是否可以组成一个毕达哥拉斯三元组（直角三角形斜边长度的平方等于其他两条边长的平方和）来计算该三角形是否为直角三角形。实际测试时 checkTriplet 函数要调用另两个函数中的一个函数。

注意在浮点数测试版本中极小数（“epsilon”）作为测试变量的使用。由于浮点运算的不确定性和舍入误差，除非问题中的三个值均已知为整数，直接测试这三个数是否组成毕达哥拉斯三元组是不可行的。因为直接的测试更为准确，本示例中的代码确定其是否可行，如果可行则使用它。
var epsilon = 0.00000000001; // 一些需要测试的极小数字。

// 测试整数的函数。
function integerCheck(a, b, c)
{
   // 测试。
   if ( (a*a) == ((b*b) + (c*c)) )
      return true;

return false;
} // 整数检查函数的结尾。

// 测试浮点数的函数。
function floatCheck(a, b, c)
{
   // 得到测试数值。
   var delta = ((a*a) - ((b*b) + (c*c)))

// 测试需要绝对值
delta = Math.abs(delta);

   // 如果差小于 epsilon，那么它相当接近。
   if (delta < epsilon)
      return true;

return false;
} // 浮点检查函数的末尾。

// 三元检查。
function checkTriplet(a, b, c)
{
// 创建临时变量，用于交换值
var d = 0;

// 先将最长的移动到位置“a”。

   // 需要的话交换 a 和 b
   if (b > a)
   {
      d = a;
      a = b;
      b = d;
   }

   // 需要的话交换 a 和 c
   if (c > a)
   {
      d = a;
      a = c;
      c = d;
   }

   // 测试全部的 3 个值，看其是否为整数？
   if (((a % 1) == 0) && ((b % 1) == 0) && ((c % 1) == 0))
   {
      // 如果成立，使用精确检查。
      return integerCheck(a, b, c);
   }
   else
   {
      // 如果不成立，取尽可能相近的。
      return floatCheck(a, b, c);
   }
} // 三元检查函数的末尾。

// 下面的三个语句赋给范例值，用于测试。
var sideA = 5;
var sideB = 5;
var sideC = Math.sqrt(50.001);

// 调用函数。调用后，'result' 中包含了结果。
var result = checkTriplet(sideA, sideB, sideC);NO.3 JavaScript的条件编译使用JavaScipt条件编译可以使用 JavaScipt语言的新特性并且与不支持该特性的老版本兼容。

用 @cc_on 语句、@if 或 @set 语句来激活条件编译。条件编译的某些典型用途包括使用 JavaScipt中的新特性、在脚本中嵌入调试支持以及跟踪代码的运行。

一般将条件编译代码放在注释中，所以不能理解条件编译的宿主（如 Netscape Navigator）就忽略了条件编译。下面是一个示例。

/*@cc_on @*/
/*@if (@_jscript_version >= 4)
   alert("JScript version 4 or better");
   @else @*/
   alert("You need a more recent script engine.");
/*@end @*/
本示例使用了特殊的注释分隔符，该分隔符只有在 @cc_on 语句激活条件编译时才使用。不支持条件编译的脚本引擎只能看到一个需要更新脚本引擎的信息。

条件编译变量

下面是条件编译可用的预定义变量。如果变量不是 true，就不被定义或者作为 NaN 处理。
变量描述
@_win32 在 Win32 系统上运行为 true。
@_win16 在 Win16 系统上运行为 true。
@_mac 在 Apple Macintosh 系统上运行为 true。
@_alpha 在 DEC Alpha 处理器上运行为 true。
@_x86 在 Intel 处理器上运行为 true。
@_mc680x0 在 Motorola 680x0 处理器上运行为 true。
@_PowerPC 在 Motorola PowerPC 处理器上运行为 true。
@_jscript 永远为 true。
@_jscript_build 包含 Jscript 脚本引擎创建号。
@_jscript_version 包含以 major、minor 为格式的 Jscript 版本号。
NO.4 创建JavaScript的对象创建JavaScript自己的对象
要创建JavaScript自己的对象实例，必须首先为JavaScript定义一个构造函数。构造函数创建一个新对象，赋予对象属性，并在合适的时候赋予方法。例如，下面的示例为 pasta 对象定义了构造函数。注意 this 关键字的使用，它指向当前对象。
// pasta 是有四个参数的构造器。
function pasta(grain, width, shape, hasEgg)
{
// 是用什么粮食做的？
this.grain = grain;

// 多宽？（数值）
this.width = width;

// 横截面形状？（字符串）
this.shape = shape;

// 是否加蛋黄？（boolean）
this.hasEgg = hasEgg;
}

定义了对象构造器后，用 new 运算符创建对象实例。
var spaghetti = new pasta("wheat", 0.2, "circle", true);
var linguine = new pasta("wheat", 0.3, "oval", true);

可以给对象实例添加属性以改变该实例，但是用相同的构造器生成的其他对象定义中并不包括这些属性，而且除非你特意添加这些属性那么在其他实例中并不显示出来。如果要将对象所有实例的附加属性显示出来，必须将它们添加到构造函数或构造器原型对象（原型在高级文档中讨论）中。
// spaghetti 的附加属性。
spaghetti.color = "pale straw";
spaghetti.drycook = 7;
spaghetti.freshcook = 0.5;

var chowFun = new pasta("rice", 3, "flat", false);
// chowFun 对象或其他现有的 pasta 对象
// 都没有添加到 spaghetti 对象
// 的三个新属性。

// 将属性‘foodgroup’加到 pasta 原型对象
// 中，这样 pasta 对象的所有实例都可以有该属性，
// 包括那些已经生成的实例。
pasta.prototype.foodgroup = "carbohydrates"

// 现在 spaghetti.foodgroup、chowFun.foodgroup，等等
// 均包含值“carbohydrates”。

在定义中包含方法
可以在对象的定义中包含方法（函数）。一种方法是在引用别处定义的函数的构造函数中添加一个属性。例如，下面的示例扩充上面定义的 pasta 构造函数以包含 toString 方法，该方法将在显示对象的值时被调用。
// pasta 是有四个参数的构造器。
// 第一部分与上面相同。
function pasta(grain, width, shape, hasEgg)
{
// 用什么粮食做的？
this.grain = grain;

// 多宽？（数值）
this.width = width;

// 横截面形状？（字符串）
this.shape = shape;

// 是否加蛋黄？（boolean）
this.hasEgg = hasEgg;

    // 这里添加 toString 方法（如下定义）。
    // 注意在函数的名称后没有加圆括号；
    // 这不是一个函数调用，而是
    // 对函数自身的引用。
    this.toString = pastaToString;
}

// 实际的用来显示 past 对象内容的函数。
function pastaToString()
{
// 返回对象的属性。

    return "Grain: " + this.grain + "/n" +
        "Width: " + this.width + "/n" +
        "Shape: " + this.shape + "/n" +
        "Egg?: " + Boolean(this.hasEgg);
}

var spaghetti = new pasta("wheat", 0.2, "circle", true);
// 将调用 toString() 并显示 spaghetti 对象
// 的属性（需要Internet 浏览器）。
window.alert(spaghetti);NO.5 Prototype使用学习手册指南之Enumerable.jsEnumerable是一个抽象对象。Enumerable不能直接使用，它被很多枚举类型（Hash、Array、Range等）所继承，继承的类型都要实现一个_each方法，提供具体类型的枚举方法。需要说明的是，javascript中并没有类的概念，所指的类也就是一个函数，继承一般指的是一个对象(父)将它的方法属性copy(通过Object.extend, copy的是引用)到子类(函数)的prototype属性(一个对象)中。

Enumerable为其他子类提供了如下的方法：

all(iterator): 对Enumerable类型中的每个值调用iterator，如果其中有一个返回false，则返回false，否则返回true，相当于判断是否每个值执行iterator都是"true"

any(iterator): 跟all相反，判断是否每个值都是"false"（是否有一个值是true）

collect(iterator)/map: 对每个值调用iterator，将结果组成一个新的数组返回

detect(iterator)/find: 对每个值调用iterator，如果有一个不为false，则返回这个执行iterator后不为false的值(不是返回执行iterator后的值)，相当于找出第一个真值

findAll(iterator)/select: 相当于detect, 但是找出所有的真值，返回一个数组

grep(pattern, iterator)：返回所以符合pattern的值，iterator提供的话，则返回执行iterator的值

include(object)/member: 数组中是否包含object

inGroupsOf(number, fillWith): eachSlice的变异版本，按照number将对象分开，如果分开后的数组的最后一个值的length小于number, 则用fillwith填充, 例如[1,2,3,4,5].inGroupsOf(3)=>[[1,2,3],[4,5,null]]

inject(memo, iterator): 注入

invoke(method): 调用

max(iterator): 最大值

min(iterator): 最小值

partition(iterator): 分离

pluck(property): 采集

reject(iterator): 不合格的产品, 于findAll相反

sortBy(iterator): 根据iterator排序，如果调用的对象是Array的话，直接调用内置的sort(iterator)就行了

toArray()/entries: 将调用对象的每个值组成一个数组返回

zip(): 例如[2,3,4].zip([5,6,7])=>[[2,5],[3,6],[4,7]], 如果最后一个参数类型为function，将返回[iterator([2,5]),iterator([3,6]),iterator([4,7])],

inspect(): Enumerable对象的字符串表示

each(iterator): iterator是一个函数对象, 这个方法调用具体类型的_each方法对自身包含的每个对象调用iterator，例如如果Enumerable具体指的是一个Array，eg: var a=[2,3,4], 则a.each(iterator)方法将依次调用iterator(2,0) ,iterator(3,1), iterator(4,3)，其中第二个参数指的是索引。这个方法几乎在Enumerable中的每个方法中都要用到

eachSlice(number, iterator)：将Enumerable 类型对象每个每个按照number分开，例如[1,2,3,4,5].eachSlice(3)=>[[1,2,3],[4,5]], 没有提供iterator, 则iterator=Prototype.K: function(k){return k}，Prototype中的很多iterator默认值都是这个，或者是Prototype.emptyFunction: function() {},其实实际上返回的是[iterator([1,2,3]),iterator([4,5])]NO.6 jQuery使用手册之核心部分$(expr)
说明：该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此为基础
参数：expr：字符串，一个查询表达式或一段html字符串
例子：
未执行jQuery前：
<p>one</p>
<div>
      <p>two</p>
</div>
    <p>three</p>
    <a href="#" id="test" onClick="jq()" >jQuery</a>

jQuery代码及功能：
function jq(){
alert($("div > p").html());
}

运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容
function jq(){
$("<div><p>Hello</p></div>").appendTo("body");
}

运行：当点击id为test的元素时，向body中添加“<div><p>Hello</p></div>”

$(elem)说明：限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象
参数： elem：通过jQuery对象压缩的DOM元素
例子：
未执行jQuery前：
<p>one</p>
<div>
<p>two</p>
</div><p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
alert($(document).find("div > p").html());
}

运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容
function jq(){
$(document.body).background("black");
}

运行：当点击id为test的元素时，背景色变成黑色

$(elems)
说明：限制jQuery作用于一组特定的DOM元素
参数： elem：一组通过jQuery对象压缩的DOM元素
例子：
未执行jQuery前：
<form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
</form>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
$(form1.elements ).hide();
}

运行：当点击id为test的元素时，隐藏form1表单中的所有元素。

$(fn)说明：$(document).ready()的一个速记方式，当文档全部载入时执行函数。可以有多个$(fn)当文档载入时，同时执行所有函数！
参数：fn (Function):当文档载入时执行的函数！
例子：
$( function(){
$(document.body).background("black");
})

运行：当文档载入时背景变成黑色，相当于onLoad。

$(obj)说明：复制一个jQuery对象，
参数：obj (jQuery): 要复制的jQuery对象
例子：
未执行jQuery前：
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
var f = $("div");
alert($(f).find("p").html())
}

运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容。

each(fn)
说明：将函数作用于所有匹配的对象上
参数：fn (Function): 需要执行的函数
例子：
未执行jQuery前：
<img src="1.jpg"/>
<img src="1.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
$("img").each(function(){
this.src = "2.jpg"; });
}

运行：当点击id为test的元素时，img标签的src都变成了2.jpg。

eq(pos)
说明：减少匹配对象到一个单独得dom元素
参数：pos (Number): 期望限制的索引，从0 开始
例子：
未执行jQuery前：
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
alert($("p").eq(1).html())
}

运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个<p>标签的内容

get() get(num)
说明：获取匹配元素，get(num)返回匹配元素中的某一个元素
参数：get (Number): 期望限制的索引，从0 开始
例子：
未执行jQuery前：
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
alert($("p").get(1).innerHTML);
}

运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个<p>标签的内容
注意get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$("p").eq(1)对象的内容用jQuery方法html()，而取$("p").get(1)的内容用innerHTML

index(obj)说明：返回对象索引
参数：obj (Object): 要查找的对象
例子：
未执行jQuery前：
<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}

运行：当点击id为test的元素时，两次弹出alert对话框分别显示0，1

size() Length
说明：当前匹配对象的数量，两者等价
例子：
未执行jQuery前：
<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：
function jq(){
alert($("img").length);
}

运行：当点击id为test的元素时，弹出alert对话框显示2，表示找到两个匹配对象
NO.7 jQuery使用手册之基本介绍Jquery是继prototype之后又一个优秀的Javascript框架。jQuery是一款同prototype一样优秀js开发库类，特别是对 css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优秀的js效果，jQuery可以帮你达到目的！本文主要讲述jquery的基本介绍和一些基本的核心部分中的基本函数的运用，如果你还没有jquery就去下载个吧

下载完成后先加载到文档中，然后我们来看个简单的例子！
<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $("a").click(function() {
        alert("Hello world!");
   });
});
<script>

上边的效果是点击文档中所有a标签时将弹出对话框，$("a") 是一个jQuery选择器，$本身表示一个jQuery类，所有$()是构造一个jQuery对象，click()是这个对象的方法，同理$ (document)也是一个jQuery对象，ready(fn)是$(document)的方法，表示当document全部下载完毕时执行函数。
在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"(<span id="p"></span>)的元素.
我将从以下几个内容来讲解jQuery的使用:

核心部分

DOM操作

css操作

javascript处理

动态效果

event事件

ajax支持

插件程序

NO.8 JavaScript类的点点滴滴本文转自无忧，无忧论坛是国内讨论javascript比较好的论坛，地址：bbs.51js.com
类是什么？
        许多刚接触编程的朋友都可能理解不了类，其实类是对我们这个现实世界的模拟，把它说成“类别”或者“类型”可能会更容易理解一些。比如“人”这种动物就是一个类，而具体某一个人就是“人”这个类的一个实例，“人”可以有许多实例（地球人超过六十亿了），但“人”这个类只有一个。你或许会说那男人和女人不也是人么？怎么只能有一个？其实这里要谈到一个继承的东西，后边才讲，请继续看下去。
如何建立一个类？
        在C++中是以class来声明一个类的，JavaScript与C++不同，它使用了与函数一样的function来声明，这就让许多学 Jscript的朋友把类与函数混在一起了，在Jscript中函数与类确实有些混，但使用久了自然而然会理解，这篇文章是针对想进攻面向对象编程的朋友而写，就不打算一下子讨论得太深了。
        请看下边这个类的定义：
        function WuYouUser()
        {
                this.Name; //名字
        }

上边的代码定义了一个WuYouUser（无忧用户）类，它有个属性：Name（名字）。Name就是WuYouUser类的一个属性。
        一个类有固定的属性，但类的实例却有不同的属性值，就像我是属于“人”这个类的，性别是男，而我有一个女同学，她也属于“人”类，但她的性别属性值却为女。
        那么如何声明某个类的一个实例呢？非常简单：

        var Wo = new WuYouUser(); //实例一：“我”
        var Biyuan = new WuYouUser(); //实例二：“碧原”（Biyuan哥，不好意思。。。嘿嘿）

类的属性

这个Wo（我）就是WuYouUser类的一个实例，它拥有WuYouUser给它的一切：Name属性、Sex属性以及Age属性，我们可以这样子来设置它的属性：
Wo.Name = "泣红亭";

很简单是不是？试着运行
window.document.write(Wo.Name);

看看，是不是输出了我的名字：泣红亭？
同样设置一下碧原兄的属性
Biyuan.Name = "碧原";

运行
window.document.write(Biyuan.Name);

可以看到输出了"碧原"，也就说明了Biyuan与Wo同样是WuYouUser类的实例，但却是不同的实体，具有不同的属性值。
        属性是可以设置默认值的，无忧里都有记录大家各自发了多少贴子，我们也同样给WuYouUser类添加一个发贴数量的属性ArticleCount
function WuYouUser()
        {
                this.Name;
                this.ArticleCount = 0;
        }

一个无忧新用户刚注册完之后他的发贴数量为0，在上边的代码中可以看到直接给属性ArticleCount设置值为0。
        可以运行一下这样的代码：
var Wo = new WuYouUser();
        window.document.write(Wo.ArticleCount);

可以看到输出了0，说明ArticleCount属性被我们成功设置默认值为0

类的方法
        方法这个词不大好理解，我觉得说成行为会更容易理解。一个人具有许多共同的行为，比如睡觉、吃饭、走路等等，现在我们给WuYouUser类添加一个发贴的方法。
function WuYouUser()
        {
                this.Name;
                this.ArticleCount = 0;

                this.NewArticle = function()
                {
                        /*
                        *
                        *        具体如何发贴我们大家都知道，不就是打打字，加加图片再按一下保存之类的按钮么？
                        *        关于具体如何发贴的代码没有必要在这里写出来，我们要了解的仅仅是方法的定义与使用
                        *        我们在这里实现一个最简单的功能，也是很重要的功能：给我们的发贴数量加上1！
                        *        注意：恐龙等级就是这样加出来的，因此呀……大家狂发贴吧。。。
                        */

                        this.ArticleCount++;
                }
        }

既然定义好了这个方法，我们来试试效果如何：
    var Wo = new WuYouUser();
        Wo.NewArticle();
        document.write(Wo.ArticleCount);

可以看到输出了1，说明我们发贴成功了！真是有历史纪念意义的一刻，离恐龙等级又近一步了。

静态属性

        静态属性又称公共属性，它不属于某个类的实例，而是直接属于某个类。
        比如说无忧用户有一个属性：注册用户的数量，它是属于整个无忧用户的，而不是属于泣红亭或者谁的
        静态属性的声明方法是：
        类名.prototype.属性名 = 属性值;
        比如给WuYouUser类定义一个注册用户的数量Count：
WuYouUser.prototype.Count = 0;

那么如何读取它呢？有两种方法：

直接用 WuYouUser.prototype.Count

使用Wo.Count

        这两者没有区别，都是得到0
        虽然读取方法可以有两种，但在改变它的时候却得特别小心了，请看下边代码
        var Biyuan = new WuYouUser();
        WuYouUser.prototype.Count++;
        document.write(Wo.Count);
        document.write(Biyuan.Count);

你会发现两者的Count属性都是1，也就是说WuYouUser.prototype.Count改变了会影响到各个实例的相应属性，其实原理就是Wo、Biyuan的Count属性与WuYouUser.prototype.Count根本就是同一个！

        现在来看另外一段代码：
       var Biyuan = new WuYouUser();

        Biyuan.Count++; //特别注意一下这里，这是直接改变Biyuan的Count属性
        document.write(Biyuan.Count); // 输出 1
        document.write(WuYouUser.prototype.Count); //输出 0
        document.write(Wo.Count); //同样输出0，为什么

？

        可以看到如果直接修改实例的静态属性值，那么会出现其它实例甚至类的静态属性与它不同步了？这是因为直接修改的时候，该实例会生成一个属于该实例的属性Count，这个时候Biyuan.Count不再与WuYouUser.prototype.Count是同一个了，也不与Wo.Count是同一个，这个Count属性是属于Biyuan自己所有的，以后改变了它也只是影响它自己而已。

        因此如果不是特别的需要，建议不管在读取还是赋值的时候，都统一使用WuYouUser.prototype.Count这样的方式，以做到万无一失！

静态方法

        与静态属性相似，它也有个另称：公共方法，同样属于类本身的。

        静态方法的定义方式是：
类名.方法名 = function(参数1,参数2...参数n)
        {
                //方法代码
        }

我们现在就来定义一个无忧用户类的注册新用户静态方法：
WuYouUser.prototype.AddOne = function()
        {
                //*** 同样具体代码不写出来，给静态属性Count增加1，表示注册用户数量又多一个
                WuYouUser.prototype.Count++;
        }

现在我们来看看如何用它，同样有两种方法：

        1.直接使用WuYouUser.prototype.AddOne()
        2.使用某实例的AddOne()

        这两种方法没有什么不同：
var Wo = new WuYouUser();
        var Biyuan = new WuYouUser();
        document.write(WuYouUser.prototype.Count); // 0

        Wo.AddOne();
        document.write(WuYouUser.prototype.Count); // 1
        document.write(Wo.Count); // 1
        document.write(Biyuan.Count); // 1

        WuYouUser.prototype.AddOne();
        document.write(WuYouUser.prototype.Count); // 2
        document.write(Wo.Count); // 2
        document.write(Biyuan.Count); // 2

可以看出不管是使用Wo.AddOne()还是WuYouUser.prototype.AddOne()效果都是一样的，都是给WuYouUser.prototype.Count加上1

        现在再看一段代码：
function NewClass() //由于上边的WuYouUser类不合适当这个例子的代码，我声明了一个新类NewClass
        {
                this.Name = "泣红亭"; //这里默认值为我的名字
        }

        NewClass.prototype.ChangeName = function(NewName)
        {
                this.Name = NewName;
        }

        var Wo = new NewClass();
        Wo.ChangeName("郑运涛"); //我的真名

可以看到Wo.Name确实已经变成了"郑运涛"，这个方法似乎是可以用的，但里边是不是内有天机呢？
        再看下边的代码，类的定义以及ChangeName的定义我们照样，但改变一下下边的代码：
   NewClass.prototype.ChangeName("郑运涛");
        document.write(NewClass.Name); //undefined，即未定义
        document.write(NewClass.prototype.Name); //郑运涛
        var Wo = new NewClass();
        document.write(Wo.Name); //泣红亭

可以看到我们并没有定义NewClass.prototype.Name这个静态属性，但编译器给我们自己加了一个。
        可是再看下边输出Wo.Name，它并不是为"郑运涛"，而是原来的默认值"泣红亭"，说明了什么？
        其实很简单，看一下NewClass的定义里已经有Name这个属性，因此Wo也有自己的Name属性，它跟NewClass.prototype.Name并不是同一个的，因此就还是那样子。

        那为什么前一个例子运行了Wo.ChangeName("郑运涛")却能够实现改变Wo.Name属性呢？其实在这里跟改变Wo.Count的值是同一个道理，编译器自动给Wo增加了一个方法ChangeName，这个方法代码与NewClass.prototype.ChangeName一样，但 Wo.ChangeName是Wo这个实例所特有的，而非NewClass.prototype.ChangeName！

        分析可知道在静态方法里尽量不要使用this这样的关键字来引用实例本身的属性，除非你有特别的目的，而且能够清楚地明白这里边的运行机制！

        如果真的需要在静态方法里使用this，可以直接把this当作参数传进去：
    NewClass.ChangeName = function(This,NewName) //注意这里是This,不是this
        {
                This.Name = NewName;
        }

构造函数

        一个类在初始化的时候其实也是一个函数的执行过程，这个函数就是构造函数，我们看一下下边的代码：
function WuYouUser()
        {
                this.Name = "泣红亭"; //默认定义为泣红亭
                alert(this.Name);
        }
        var Wo = new WuYouUser();//可以看到出现一个窗口显示泣红亭三个字

可以看出类的定义不仅仅是定义了它的属性与方法，还同时可以加入一些代码，而这些代码就是该类的构造函数的代码，在实例声明过程中被执行！
        其实说起来，类的属性与类的方法都是在构造函数里执行定义的，看下边的代码：
function WuYouUser()
        {
                this.Name = "泣红亭";
                return;
                this.Sex = "男";
        }
        var Wo = new WuYouUser();
        document.write(Wo.Name); //泣红亭
        document.write(Wo.Sex); //undefined，即未定义

看得出什么？Sex属性是在return;之后的，而WuYouUser类的构造函数遇到return即停止运行，换句话说this.Sex = "男";这一行是没有被执行，即Sex属性根本没有被定义！

        构造函数可以有参数，参数值在声明实例的时候被传入：
   function WuYouUser(Name)
        {
                this.Name = Name;
        }
        var Wo = new WuYouUser("泣红亭");
        document.write(Wo.Name); //泣红亭

构造函数不需要返回值，但如果你设置了返回值，可以把它当成一个函数来使用。
function Sum(a, b)
        {
                this.a = a;
                this.b = b;
                return this.a + this.b;
        }
        document.write(Sum(12, 23)); //输出的是12与23的和35
        var Obj = new Sum(12,23);
        document.write(Obj.a) // 12
        document.write(Obj.b) // 23

感觉挺奇妙，对吧？我写这文章写着写着也觉得挺奇妙的，呵呵！

        但强烈建议不要把一个类当成一个函数来使用！如果你需要的是一个函数，请直接写成函数而不要写成类，以免搞混了。

继承

        继承这个词在面向对象的编程里是非常重要的，虽然JavaScript并不是真正面向对象的语言，而是跟VB一样是基于对象的语言，它同样提供了继承机制。

        文章开头时谈到了男人与女人，这也同样是两个不同的类，但却具有相同的一些属性以及方法，而这些相同的特性是来自“人”这个类的，换句话说男人与女人继承了“人”的所有特性！但是男人与女人却有其不同的地方，编程语言里的继承也一样，一个类A继承了另一个类B，那么类B就是类A的父类，类A就是类B 的派生类，也称为子类。比如男人就是人的派生类，而人就是男人的父类。最高一级的类称为基类，想象一下就可以明白，男人继承自人，男孩继承自男人，人就是男孩的基类，男人就是男孩的父类。

题外：多重继承

        这里再涉及一个多重继承的话题，但如果你仅仅是学JavaScript的话就没有必要看下去，因为JavaScript不提供多重继承，准确一点说没有一种简单而标准的方法来实现多重继承（其实是有办法实现的，只不过麻烦了一点，而且确实没有必要）。

        在C++中是有多重继承的概念的，这里是讨论JavaScript，因此不打算讲，只是说说它的一点点思想以供参考。

        在上边男孩的继承问题中，男孩其实不仅仅是继承自男人，还继承自孩子（有男孩子，也有女孩子）这个类，因此，它同时继承了两个类：男人与男孩，这就是所谓的多重继承。

        好，这个问题打住，我们还是回归主题。

        先看第一个类的定义：
function A()
        {
                this.Name = "泣红亭";
                alert(this.Name);
        }

这个类定义了一个属性Name，默认值为"泣红亭"

        现在看第二个类的定义：
function B()
        {
                this.Sex = "男";
                alert(this.Sex);
        }

定义了一个属性Sex,默认值为"男"

        继承的方式就是子类.prototype = new 父类();
        现在我们来让B类继承A类：
B.prototype = new A();

运行这一段代码：
var Obj = new B(); //首先打开警告窗口显示"泣红亭",再显示"男"

可以从上边的结果看出B类继承了A类，拥有了A类的属性Name，并且执行了A类的构造函数，而且A类的构造函数在B类的构造函数执行之前执行。因此我们利用这个可以实现重写父类的方法以及重设置父类某属性的默认值：
function A()
        {
                this.Name = "泣红亭";
                this.Show = function()
                {
                        alert("这是A类的Show方法");
                }
                alert(this.Name);
        }

        function B()
        {
                this.Name = "郑运涛";
                this.Show = function()
                {
                        alert("这是B类的Show方法");
                }
                alert(this.Name);
        }

        var Obj = new B();
        Obj.Show();

结果出现了三次警告窗口，第一个内容为泣红亭,是执行A类的构造函数里的alert(this.Name)，那时候Name属性值还为"泣红亭",因为B类的构造函数还没执行，第二次内容为"郑运涛",这是B类里的alert(this.Name)，因为B类的构造函数里给Name重赋值为" 郑运涛"。最后是调用了Obj.Show()，执行了不是A类的Show方法里的Show（显示"这是A类的Show方法"），而是执行了B类的Show （显示"这是B类的Show方法"），很明显Show方法被重写了。

类作为一个对象时的属性与方法（不知道如何简洁地表达，因此用了这么长的题目）

        不知道在这里谈这个话题是否有点混人耳目，但又觉得不谈这篇文章就不算完整，因为文章目的就是要让人搞清楚类的方方面面。

        看了这一小节的题目，或许你会觉得奇怪，类就是类，怎么会“作为一个对象”呢？在JavaScript里，一切都是对象，包括类！对象可以有属性，可以有方法，类也同样可以有，但这个非常容易跟前边说到的静态属性与静态方法搞混了，因此要仔细看清楚两者的分别！

        定义一个类：
function WuYouUser()
        {
                this.Name = "泣红亭";
        }

定义类作为一个对象时的属性：
        WuYouUser.Url = "http://www.ijavascript.cn"; //静态属性的定义是：WuYouUser.prototype.Url = "http://www.ijavascript.cn";
        var Wo = new WuYouUser();
        document.write(WuYouUser.Url); //http://www.ijavascript.cn
        document.write(Wo.Url); //undefined,即未定义！注意这里的未定义

从这里可以看出Url这个属性是WuYouUser自个所有，改变了它与其它类以及它的子类完全无关！

        引用类的属性只有一个办法，就是类名.属性名，改变它也一样。

        定义类作为一个对象时的方法：
WuYouUser.ChangeUrl = function()
        {
                this.Url = "http://51js.com";
        }

你或许会觉得奇怪，这里的this是什么？因为ChangeUrl这个方法是属于对象WuYouUser的，因此this指的就是WuYouUser本身！

        可以运行下边的代码试试：
document.write(WuYouUser.Url); // http://www.ijavascript.cn
        WuYouUser.ChangeUrl();
        document.write(WuYouUser.Url); // http://ijavascript.cn

明显ChangeUrl直接修改了WuYouUser.Url的值，因此后边才能输出http://ijavascript.cn


        如果你这一节看不明白，也不要着急，编程嘛，许多东东都只能意会不能言传，而且我又没口才，说不清楚，只要以后多写写代码，多用用类自然而然会体会到这一些，还有可以去看看JSVM的代码，里边几乎每个类都有用到类作为一个对象时的属性与方法。NO.9 JavaScript的复合赋值运算符运算符符号
加法 +=
按位与 &=
按位或 |=
按位异或 ^=
除法 /=
左移 <<=
取模 %=
乘法 *=
右移 >>=
减法 -=
无符号右移 >>>=
NO.10 JavaScript的Folders集合 JavaScript的Folders集合，本文是手册性质的，可能不好理解但是，还是需要去看下，也就是JSscript的
Folders集合

一个 Folder 对象中所包含的所有 Folder 对象的集合。

说明
下面这个例子说明了如何获得一个 Folders 集合以及如何使用 Enumerator 对象和 for 语句来遍历该集合：
function ShowFolderList(folderspec)
{
   var fso, f, fc, s;
   fso = new ActiveXObject("Scripting.FileSystemObject");
   f = fso.GetFolder(folderspec);
   fc = new Enumerator(f.SubFolders);
   s = "";
   for (; !fc.atEnd(); fc.moveNext())
   {
      s += fc.item();
      s += "
";
   }
   return(s);
}

方法
Add 方法 (Folders)
上一榜单： JavaScript的Files集合排行榜下一榜单： jQuery使用手册之动态效果排行榜 jQuery使用手册之DOM操作排行榜http://zhanzhang.xooob.com/wysjsj/20084/289126.htm

属性

]，然后可以用jQuery提供的很多方法来进行操作，如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法，方便大家快速对DOM对象进行操作NO.1jQuery使用手册之DOM操作属性
我们以<img id="a" scr="5.jpg"/>为例，在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象，在用o.src来取得或修改该节点的scr属性，在jQuery 里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ]，然后可以用jQuery提供的很多方法来进行操作，如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法，方便大家快速对DOM对象进行操作
herf() herf(val)
说明：对jQuery对象属性herf的操作。
例子：
未执行jQuery前
<a href="1.htm" id="test" onClick="jq()">jQuery</a>