jQuery介绍及语法

时间：2009-02-11 来源：cnblogs 作者：QiuYun 点击数：200

jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优秀的js效果，jQuery可以帮你达到目的！qvfBeautyCss.org - 前端教程网

下载地址：qvfBeautyCss.org - 前端教程网
Starterkit （http://jquery.bassistance.de/jquery-starterkit.zip）qvfBeautyCss.org - 前端教程网
jQuery Downloads （http://jquery.com/src/）qvfBeautyCss.org - 前端教程网

下载完成后先加载到文档中，然后我们来看个简单的例子！qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

上边的效果是点击文档中所有a标签时将弹出对话框，$(”a”) 是一个jQuery选择器，$本身表示一个jQuery类，所有$()是构造一个jQuery对象，click()是这个对象的方法，同理$(document)也是一个jQuery对象，ready(fn)是$(document)的方法，表示当document全部下载完毕时执行函数。 qvfBeautyCss.org - 前端教程网

在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"(<span id="p"></span>)的元素.qvfBeautyCss.org - 前端教程网

我将从以下几个内容来讲解jQuery的使用:qvfBeautyCss.org - 前端教程网
核心部分 qvfBeautyCss.org - 前端教程网
DOM操作 qvfBeautyCss.org - 前端教程网
css操作 qvfBeautyCss.org - 前端教程网
javascript处理 qvfBeautyCss.org - 前端教程网
动态效果 qvfBeautyCss.org - 前端教程网
event事件 qvfBeautyCss.org - 前端教程网
ajax支持 qvfBeautyCss.org - 前端教程网
插件程序 qvfBeautyCss.org - 前端教程网

一：核心部分qvfBeautyCss.org - 前端教程网

$(expr)qvfBeautyCss.org - 前端教程网
说明：该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此为基础qvfBeautyCss.org - 前端教程网

参数：expr：字符串，一个查询表达式或一段html字符串qvfBeautyCss.org - 前端教程网

例子：qvfBeautyCss.org - 前端教程网
未执行jQuery前：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

<p>one</p>
<div>
      <p>two</p>
</div>
    <p>three</p>
    <a href="#" id="test" onClick="jq()" >jQuery</a>

jQuery代码及功能：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

'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>”qvfBeautyCss.org - 前端教程网

$(elem)qvfBeautyCss.org - 前端教程网
说明：限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象qvfBeautyCss.org - 前端教程网
参数： elem：通过jQuery对象压缩的DOM元素qvfBeautyCss.org - 前端教程网

例子：qvfBeautyCss.org - 前端教程网
未执行jQuery前：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

<p>one</p>
<div>
<p>two</p>
</div><p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

function jq(){
alert($(document).find("div > p").html());
}

运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容 qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

function jq(){
$(document.body).background("black");
}

运行：当点击id为test的元素时，背景色变成黑色qvfBeautyCss.org - 前端教程网

$(elems)qvfBeautyCss.org - 前端教程网
说明：限制jQuery作用于一组特定的DOM元素qvfBeautyCss.org - 前端教程网
参数： elem：一组通过jQuery对象压缩的DOM元素qvfBeautyCss.org - 前端教程网
例子：qvfBeautyCss.org - 前端教程网
未执行jQuery前：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

<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表单中的所有元素。qvfBeautyCss.org - 前端教程网

$(fn)qvfBeautyCss.org - 前端教程网
说明：$(document).ready()的一个速记方式，当文档全部载入时执行函数。可以有多个$(fn)当文档载入时，同时执行所有函数！qvfBeautyCss.org - 前端教程网
参数：fn (Function):当文档载入时执行的函数！qvfBeautyCss.org - 前端教程网
例子qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

$( function(){
$(document.body).background("black");
})

运行：当文档载入时背景变成黑色，相当于onLoad。qvfBeautyCss.org - 前端教程网

$(obj)qvfBeautyCss.org - 前端教程网
说明：复制一个jQuery对象，qvfBeautyCss.org - 前端教程网
参数：obj (jQuery): 要复制的jQuery对象qvfBeautyCss.org - 前端教程网
例子：qvfBeautyCss.org - 前端教程网
未执行jQuery前：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

function jq(){
var f = $("div");
alert($(f).find("p").html())
}

运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容。qvfBeautyCss.org - 前端教程网

each(fn)说明：将函数作用于所有匹配的对象上qvfBeautyCss.org - 前端教程网
参数：fn (Function): 需要执行的函数qvfBeautyCss.org - 前端教程网
例子：qvfBeautyCss.org - 前端教程网
未执行jQuery前：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

<img src="1.jpg"/>
<img src="1.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能： qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

function jq(){
$("img").each(function(){
this.src = "2.jpg"; });
}

运行：当点击id为test的元素时，img标签的src都变成了2.jpg。qvfBeautyCss.org - 前端教程网

eq(pos)qvfBeautyCss.org - 前端教程网
说明：减少匹配对象到一个单独得dom元素qvfBeautyCss.org - 前端教程网
参数：pos (Number): 期望限制的索引，从0 开始qvfBeautyCss.org - 前端教程网
例子：qvfBeautyCss.org - 前端教程网
未执行jQuery前：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

function jq(){
alert($("p").eq(1).html())
}

运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个<p>标签的内容qvfBeautyCss.org - 前端教程网

get() get(num)说明：获取匹配元素，get(num)返回匹配元素中的某一个元素qvfBeautyCss.org - 前端教程网
参数：get (Number): 期望限制的索引，从0 开始qvfBeautyCss.org - 前端教程网
例子：qvfBeautyCss.org - 前端教程网
未执行jQuery前：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

function jq(){
alert($("p").get(1).innerHTML);
}

运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个 qvfBeautyCss.org - 前端教程网

标签的内容qvfBeautyCss.org - 前端教程网

注意get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$(”p”).eq(1)对象的内容用jQuery方法html()，而取$(”p”).get(1)的内容用innerHTMLqvfBeautyCss.org - 前端教程网

index(obj)qvfBeautyCss.org - 前端教程网
说明：返回对象索引qvfBeautyCss.org - 前端教程网
参数：obj (Object): 要查找的对象qvfBeautyCss.org - 前端教程网
例子：qvfBeautyCss.org - 前端教程网
未执行jQuery前：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能： qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}

运行：当点击id为test的元素时，两次弹出alert对话框分别显示0，1qvfBeautyCss.org - 前端教程网

size() LengthqvfBeautyCss.org - 前端教程网
说明：当前匹配对象的数量，两者等价qvfBeautyCss.org - 前端教程网
例子：qvfBeautyCss.org - 前端教程网
未执行jQuery前： qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能： qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

function jq(){
alert($("img").length);
}

运行：当点击id为test的元素时，弹出alert对话框显示2，表示找到两个匹配对象qvfBeautyCss.org - 前端教程网

二：DOM操作qvfBeautyCss.org - 前端教程网
属性qvfBeautyCss.org - 前端教程网
我们以<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对象进行操作qvfBeautyCss.org - 前端教程网

herf() herf(val)qvfBeautyCss.org - 前端教程网
说明：对jQuery对象属性herf的操作。qvfBeautyCss.org - 前端教程网
例子：qvfBeautyCss.org - 前端教程网
未执行jQuery前qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

<a href="1.htm" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能：qvfBeautyCss.org - 前端教程网
程序代码qvfBeautyCss.org - 前端教程网

function jq(){
alert($("#test").href());
$("#test").href("2.html");
}

运行：先弹出对话框显示id为test的连接url，在将其url改为2.html，当弹出对话框后会看到转向到2.htmlqvfBeautyCss.org - 前端教程网

同理，jQuery还提供类似的其他方法，大家可以分别试验一下：qvfBeautyCss.org - 前端教程网

function jq(){
alert($("#test").href());
$("#test").href("2.html");
}

选自：http://www.cnblogs.com/QiuYun/archive/2007/09/04/881815.html qvfBeautyCss.org - 前端教程网

来顶一下

上一篇：使用jQuery简化Ajax开发

下一篇：[译]jquery指南—开始jquery之旅