jQuery,一个 JavaScript 库,极大地简化了 JavaScript 编程,很容易学习。它是一款同prototype、Note.js等一样优秀的js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优秀的js效果,jQuery可以帮你达到目的!
下载地址:jQuery Downloads
简单示例:
<html> <head> <title>IT-Homer</title> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("a").click(function() { alert("Hello world!"); }); }); </script> </head> <body> CSDN Blog : <a href="http://blog.csdn.net/ithomer" target="_blank" title="click me">IT-Homer</a> </body> </html>
运行效果:
示例解析:
上边的效果是点击文档中所有a标签时将弹出对话框(alert),其中,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$(document)的方法,表示当document全部下载完毕时执行函数。
在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签(例如:<p></p>)的元素,$("#p")表示取id为"p"(例如:<span id="p"></span>)的元素.
一、核心部分
$(expr)
说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础
参数:expr:字符串,一个查询表达式或一段html字符串
例子:
未执行jQuery前:
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
运行:当点击id为test的元素时,隐藏form1表单中的所有元素。
jQuery代码及功能:
$(fn)
说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数运行:当文档载入时背景变成黑色,相当于onLoad。
$(obj)
说明:复制一个jQuery对象,
参数:obj (jQuery): 要复制的jQuery对象
例子:
未执行jQuery前:
参数:obj (jQuery): 要复制的jQuery对象
例子:
未执行jQuery前:
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。
each(fn)
说明:将函数作用于所有匹配的对象上
参数:fn (Function): 需要执行的函数
例子:
未执行jQuery前:
eq(pos)
说明:减少匹配对象到一个单独得dom元素
参数:pos (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:
运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
get(num)
说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
参数:get (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:
运行:当点击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前:
运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1
size() 或 length
说明:当前匹配对象的数量,两者等价
例子:
未执行jQuery前:
二、DOM操作
属性
以<img id="a" src="5.jpg"/>为例,在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象,在用o.src来取得或修改该节点的src属性。
在jQuery里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ],然后可以用jQuery提供的很多方法来进行操作,如$("#a").src()将得到5.jpg,$("#a").src("1.jpg")将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法,方便大家快速对DOM对象进行操作
herf() herf(val)jQuery代码及功能:
完整HTML脚本:
<html> <head> <title>IT-Homer</title> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script language="javascript" type="text/javascript"> function jq(){ alert($("#test").attr("href")); $("#test").href("http://www.baidu.com"); } </script> </head> <body> <a href="http://blog.csdn.net/ithomer" id="test" onClick="jq()">jQuery</a> </body> </html>
运行:先弹出对话框显示id为test的连接url,即 http://blog.csdn.net/ithomer,点击“jQuery”超链接后,将其url改为http://www.baidu.com,当弹出对话框后会看到转向到http://www.baidu.com
同理,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
jQuery代码及功能:
执行后相当于:
after(elem) after(elems) 将指定对象elem或对象组elems插入到在匹配元素后
jQuery代码及功能
执行后相当于
append(html)在匹配元素内部,且末尾插入指定html
jQuery代码及功能:
执行后相当于
同理还有append(elem) append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解!
appendTo(expr) 与append(elem)相反
jQuery代码及功能
执行后相当于
clone() 复制一个jQuery对象
jQuery代码及功能:
复制$("#test")然后插入到<a>后,执行后相当于
empty() 删除匹配对象的所有子节点
jQuery代码及功能:
执行后相当于
按照官方的解释和几个简单测试,insertAfter(expr)相当于before(elem),insertBefore(expr)相当于after (elem)
prepend (html) prepend (elem) prepend (elems) 在匹配元素的内部且开始出插入
通过下面例子区分append(elem) appendTo(expr) prepend (elem)
执行$("#a").append($("div"))后相当于
执行$("#a").appendTo($("div"))后 相当于
执行$("#a").prepend ($("div"))后 相当于
remove() 删除匹配对象
注意区分empty(),empty()移出匹配对象的子节点,remove()移出匹配对象jQuery代码及功能:
jQuery代码及功能:
执行后相当于
遍历、组合
add(expr) 在原对象的基础上在附加符合指定表达式的jquery对象
jQuery代码及功能:
执行$("p")得到匹配<p>的对象,有两个,add("span")是在("p")的基础上加上匹配<span >的对象,所有一共有3个,从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合,分别是[<p>Hello</p>],[<p><span>Hello Again</span></p>],[<span>Hello Again</span>]。
jQuery代码及功能:
注意els是一个数组,这里的[ ]不能漏掉。
ancestors () 一依次以匹配结点的父节点的内容为对象,根节点除外(有点不好理解,看看下面例子就明白了)
jQuery代码及功能:
第一个对象是以<u>的父节点的内容为对象,[ <u>two</u> ]
第一个对象是以<u>的父节点的父节点(div)的内容为对象,[<p>one</p><span><u>two</u></span> ]
一般一个文档还有<body>和<html>,依次类推下去。
jQuery代码及功能
$("#ch").children()得到对象[<span>two</span><span id="sp">three</span> ].
$("#ch").children(“#sp”)过滤得到[<span id="sp">three</span> ]
filter(expr)
filter(exprs) 过滤现实匹配符合表达式的对象 exprs为数组,注意添加“[ ]”
jQuery代码及功能:
$("p")得到三个对象,$("p").contains("test")只返回class为selected的对象。
find(expr)
在匹配的对象中继续查找符合表达式的对象
Query代码及功能:
在$("p")对象中查找id为a的对象。
is(expr)
判断对象是否符合表达式,返回boolen值
Query代码及功能:
在$("#a ")是否符合jquery表达式。
大家可以用$("#a").is("div"); ("#a").is("#a")多来测试一下
next() next(expr)
返回匹配对象剩余的兄弟节点
jQuery代码及功能
$("p").next()返回 [ <p id="a">Hello Again</p> , <p class="selected">And Again</p> ]两个对象
$("p").next(".selected)只返回 [<p class="selected">And Again</p> ]一个对象not(el) not(expr)
从jQuery对象中移出匹配的对象,el为dom元素,expr为jQuery表达式
siblings ()
siblings (expr) jquery匹配对象中其它兄弟级别的对象
jQuery代码及功能:
$("div").siblings()的结果实返回两个对象[<p>one</p>,<a href="#" onclick="js()">jQuery</a> ]
alert($("div").siblings(“a”)返回一个对象[<a href="#" onclick="js()">jQuery</a> ]
addClass(class) 为匹配对象添加一个class样式
removeClass (class) 将第一个匹配对象的某个class样式移出attr (name)
获取第一个匹配对象的属性
attr (prop)
为第一个匹配对象的设置属性,prop为hash对象,用于为某对象批量添加众多属性
jQuery代码及功能:
attr (key,value)
为第一个匹配对象的设置属性,key为属性名,value为属性值
jQuery代码及功能
removeAttr (name)
将第一个匹配对象的某个属性移出
jQuery代码及功能:
toggleClass (class)
将当前对象添加一个样式,不是当前对象则移出此样式,返回的是处理后的对象
<html> <head> <title>IT-Homer</title> <style type="text/css"> .selected { color: red; } </style> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script language="javascript" type="text/javascript"> function jq(){ $("p").toggleClass ("selected") ; } </script> </head> <body> <p>Hello</p><p class="selected">IT-Homer</p><a href="#" onclick="jq()">jQuery</a> </body> </html><p> 在点击“Jquery”后,切换字体红色
三、CSS操作
Javascript对css的操作相当繁琐
比如<div id="a" style="background:blue">css</div>
取它的background语法是 document.getElementById("a").style.background,
而jQuery对css更方便的操作,$("#a").background(),$("#a").background(“red”)
$("#a")得到jQuery对象[ <div id="a" … /div> ]
$("#a").background()将取出该对象的background样式。
$("#a").background(“red”)将该对象的background样式设为red
jQuery提供了以下方法,来操作css
background () background (val) color() color(val) css(name) css(prop)
css(key, value)float() float(val) height() height(val) width() width(val)
left() left(val) overflow() overflow(val) position() position(val) top() top(val)
css(name) 获取样式名为name的样式
$("#a").css("color") 将得到样式中color值red,("#a").css("background ")将得到bluecss(prop) prop是一个hash对象,用于设置大量的css样式
$("#b").css({ color: "red", background: "blue" });
最终效果是<p id="b" style="background:blue; color:red">test</p>,{ color: "red", background: "blue" },hash对象,color为key,"red"为value,css(key, value) 用于设置一个单独得css样式
$("#b").css("color","red");最终效果是<p id="b" style="color:red">test</p>四、JavaScript处理
$.browser() 判断浏览器类型,返回boolen值
$.each(obj, fn)
obj为对象或数组,fn为在obj上依次执行的函数,注意区分$().each()
分别将0,1,2为参数,传入到function(i)中
$.extend(obj, prop)
用第二个对象扩展第一个对象
执行后settings对象为{ validate: true, limit: 5, name: "bar" }
可以用下面函数来测试
$.grep(array,fn)
通过函数fn来过滤array,将array中的元素依次传给fn,fn必须返回一个boolen,如fn返回true,将被过滤
$.merge(first, second)
两个参数都是数组,排出第二个数组中与第一个相同的,再将两个数组合并
$.trim(str)
移出字符串两端的空格
$.trim(" hello, how are you? ")的结果是"hello, how are you?"五、动态效果
hide()
隐藏匹配对象
当点击连接时,id为a的对象的display变为none。
toggle()toggle(speed)
如果当前匹配对象隐藏,则显示他们,如果当前是显示的,就隐藏,toggle(speed),其大小(长宽)和透明度都随之逐渐变化。
fadeIn(speeds) fadeOut(speeds)
根据速度调整透明度来显示或隐藏匹配对象,注意有别于hide(speed)和show(speed),fadeIn和fadeOut都只调整透明度,不调整大小
fadeIn(speed, callback) fadeOut(speed, callback)
callback为函数,先通过调整透明度来显示或隐藏匹配对象,当调整结束后执行callback函数
fadeTo(speed, opacity, callback)
将匹配对象以speed速度调整倒透明度opacity,然后执行函数callback。Opacity为最终显示的透明度(0-1).
大家可以看一下自己看看效果,如果不用jQuery,编写原始javascript脚本可能很多代码!
slideDown(speeds)
将匹配对象的高度由0以指定速率平滑的变化到正常!
六、事件处理
hover(Function, Function)
当鼠标move over时触发第一个function,当鼠标move out时触发第二个function
样式:<style>.red{color:#FF0000}</style>Html代码: <div id="a">sdf</div>
jQuery代码及效果
toggle(Function, Function)
当匹配元素第一次被点击时触发第一个函数,当第二次被点击时触发第二个函数
样式:<style>.red{color:#FF0000}</style>
Html代码: <div id="a">sdf</div>jQuery代码及效果
trigger(type) 用户触发type形式的事件。$("p").trigger("click")
还有:unbind() unbind(type) unbind(type, fn)
例:
也可以这样写:
最终效果是当鼠标点击id为a的层上时图层增加一个red样式,
jQuery提供的函数
用于browers事件
error(fn) load(fn) unload(fn) resize(fn) scroll(fn)
用于form事件
change(fn) select(fn) submit(fn)
用于keyboard事件
keydown(fn) keypress(fn) keyup(fn)
用于mouse事件
click(fn) dblclick(fn) mousedown(fn) mousemove(fn)
mouseout(fn) mouseover(fn) mouseup(fn)
用于UI事件
blur(fn) focus(fn)
以上事件的扩展再扩展为5类
举例,click(fn) 扩展 click() unclick() oneclick(fn) unclick(fn)
click(fn):增加一个点击时触发某函数的事件
click():可以在其他事件中执行匹配对象的click事件。
unclick ():不执行匹配对象的click事件。
oneclick(fn):只增加可以执行一次的click事件。
unclick (fn):增加一个点击时不触发某函数的事件。
上面列举的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法扩展。
七、Ajax支持
通用方式:
$.ajax(prop) 通过一个ajax请求,回去远程数据,prop是一个hash表,它可以传递的key/value有以下几种。
(String)type:数据传递方式(get或post)。
((String)url:数据请求页面的url
((String)data:传递数据的参数字符串,只适合post方式
((String)dataType:期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")
((Boolean)ifModified: 当最后一次请求的相应有变化是才成功返回,默认值是false
((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout
((Boolean)global:是否为当前请求触发ajax全局事件,默认为true
((Function)error:当请求失败时触发的函数。
((Function)success:当请求成功时触发函数
((Function)complete:当请求完成后出发函数
jQuery代码及说明
将ajax.htm返回的内容作为id为a的div内容
用get方式向ajax.aspx页面传参数,并将返回内容负给id为a的对象。
$.ajaxTimeout(time)
设置请求结束时间
$.ajaxTimeout( 5000 )
$.get(url, params, callback)
用get方式向远程页面传递参数,请求完成后处理函数,除了url外,其它参数任意选择
$.getIfModified(url, params, callback) 用get方式向远程页面传递参数,从最后一次请求后如果数据有变化才作出响应,执行函数callback
$.getJSON(url, params, callback) 用get方式向远程json对象传递参数,请求完成后处理函数callback。
$.getScript(url, callback) 用get方式载入并运行一个远程javascript文件。请求完成后处理函数callback。
$.post(url, params, callback) 用post方式向远程页面传递参数,请求完成后处理函数callback
load(url, params, callback) 载入一个远程文件并载入页面DOM中,并执行函数callback
向ajax.htm页面发出请求,将返回结果装入id为a的内容中,然后再执行函数callback。
loadIfModified(url, params, callback) 用get方式向远程页面传递参数,从最后一次请求后如果数据有变化才作出响应,将返回结果载入页面DOM中,并执行函数callback
ajaxStart(callback)当ajax请求发生错误是时执行函数callbackajaxComplete(callback) 当ajax请求完成时执行函数callback
ajaxError(callback) 当ajax请求发生错误时执行函数callbackajaxStop(callback) 当ajax请求停止时执行函数callback
ajaxSuccess(callback) 当ajax请求成功时执行函数callback八、jQuery插件
随着jQuery的广泛使用,已经出现了大量jQuery插件,如thickbox,iFX,jQuery-googleMap等,简单的引用这些源文件就可以方便的使用这些插件。
http://jquery.com/plugins (官方推荐)
http://interface.eyecon.ro/demos
http://bassistance.de/jquery-plugins