jQuery 是一款同 prototype 一样优秀 js 开发库类,特别是对 css 和 XPath 的支持,使我们写 js 变得更加方便!如果你不是个 js 高手又想写出优 秀的 js 效果, jQuery 可以帮你达到目的!
下载地址: Starterkit ( http://jquery.bassistance.de/jquery-starterkit.zip )
jQuery Downloads ( http://jquery.com/src/ )
下载完成后先加载到文档中,然后我们来看个简单的例子!
<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 的使用 :
1: 核心部分
2:DOM 操作
3:css 操作
4:javascript 处理
5: 动态效果
6:event 事件
7:ajax 支持
8: 插件程序
一:核心部分
$(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 前: 运行:当点击 id 为 test 的元素时,隐藏 form1 表单中的所有元素。
$(fn)
说明: $(document).ready() 的一个速记方式,当文档全部载入时执行函数。可以有多个 $(fn) 当文档载入时,同时执行所有函数!
参数: fn (Function): 当文档载入时执行的函数!
例子:
< 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();
}
$( 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 ,表示找到两个匹配对象
分享到:
相关推荐
资源名称:jquery1.7 中文手册 CHM文档(附jquery1.82 chm手册)内容简介:因国内jquery中文手册更新太慢了,等了一段时间实在等不下去了,干脆自己动手做一个丰衣足食,时刻更新. 最后感谢Shawphy提供1.4.1版,jehn提供...
jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册
jquery用户使用手册,快速学习jquery.
jquery API 使用手册 jquery API 使用手册 jquery API 使用手册
jquery1.7手册中文 CHM文档,编译于2012.02.09,也算是最新的jQuery参考文档了。内容比较丰富,查询方便,放在手边,可作为jquery速查手册,包括jQuery核心、选择器、属性、筛选器、文档处理、css、事件处理、效果、...
本压缩包内包含以下文件: jquery-1.12.4.js jquery-1.12.4.min.js jQuery1.11.0_20140330.chm jQueryAPI_CHM.CHM
jQuery API 3.3.1 中文手册,jQuery是一个JavaScript框架,自面世以来,以其快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等功能使多很多WEB编程者对其非常热爱,本手册旨在帮助广大...
jquery1.7手册中文 CHM文档,编译于2012.02.09,也算是最新的jQuery参考文档了。内容比较丰富,查询方便,放在手边,可作为jquery速查手册,包括jQuery核心、选择器、属性、筛选器、文档处理、css、事件处理、效果、...
jQuery 3.1 参考手册
jquery的使用手册,中文版 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc])1.8* jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector ...
资源名称:jQuery UI参考手册 中文CHM版内容简介:jQuery UI是一个建立在jQuery Javascript 库上的小部件和交互库,您可以使用它创建高度交互的Web应用程序。本教程将向您讲解 jQuery UI 是如何工作的。本文给...
jquery1.7.2中文手册 你懂的,以备不时之需
jQuery API 1.4.4 中文版 参考手册CHM版第二版,jquery api 下载,jQuery 1.4.4 API 参考文档中文版.rar,jQuery最新版CHM下载,jQuery中文参考手册,jQuery中文版1.4.4参考手册,jQuery 1.4.4 速查表,jQuery中文参考手册,...
jQuery1.3.1中文使用手册里面不但有API的详细说明,有很多jQuery使用的小例子,使用的时候可以方便的查找哦
jQuery中文API参考手册,jQuery中文API手册,jQuery速查手册,jQuery最新中文版,jQuery最新中文参考手册,jQuery 1.4.4 CHM下载,jQuery中文参考手册,jQuery中文版1.4.4参考手册,jQuery 1.4.4 速查表,jQuery中文参考手册,...
jQuery API 中文手册 3.1是适用于jQuery的一款中文版API,jQuery是一个快速,简洁的JavaScript框架,有需要jquery中文api的用户马上下载使用吧
jQuery手册jQuery手册jQuery手册
资源名称:jquery.ui 使用手册 中文PDF版内容简介:本文档主要讲述的是jquery.ui使用手册;jquery.ui虽然在功能上距离extjs的ui还有段差距,但却不得不看好jquery的发展前景。 jquery近期和extjs合作了,希望强大的...
jquery 中文API手册 .chm后缀的帮助文档
资源名称:jQuery 1.11.3 中文手册 chm版内容简介:随着jquery的版本的不断更新,手册也跟进了更新,这里提供下jQuery 1.11.0 的中文帮助手册,需要的朋友可以收藏下。为了方便大家学习,脚本之家小编特为大家整理了...