jQuery

jQuery是一个JavaScript函数库，极大地简化了JavaScript编程。

引用jQuery库：

jQuery语法

$(selector).action()。例如：

$(this).hide() - 隐藏当前元素。

$("p").hide() - 隐藏所有的p元素。

$("p.test").hide() - 隐藏所有class为test的p元素。

$("#test").hide() - 隐藏id为test的元素。

函数都应放在document.ready()函数里，防止页面还未载入时调用函数。比如：

选择器和CSS的选择器相似，下面是更多的例子：

Syntax	Description
$(this)	Selects the current HTML element
$("p#intro:first")	Selects the first element with id="intro"
$(".intro")	Selects all elements with class="intro"
$("#intro")	Selects the first element with id="intro"
$("ul li:first")	Selects the first element of the first
$("ul li:first-child")	Selects the first element of every
$("[href]")	Selects all elements with an href attribute
$("[href$='.jpg']")	Selects all elements with an href attribute that ends with ".jpg"
$("[href='#']")	Selects all elements with an href value equal to "#"
$("[href!='#']")	Selects all elements with an href value NOT equal to "#"
$("div#intro .head")	Selects all elements with class="head" inside a element with id="intro"

事件的一些例子：

Event Method	Description
$(document).ready(function)	Binds a function to the ready event of a document (when the document is finished loading)
$(selector).click(function)	Triggers, or binds a function to the click event of selected elements
$(selector).dblclick(function)	Triggers, or binds a function to the double click event of selected elements
$(selector).focus(function)	Triggers, or binds a function to the focus event of selected elements
$(selector).mouseover(function)	Triggers, or binds a function to the mouseover event of selected elements

jQuerry效果

显示／隐藏

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

$(selector).toggle(speed,callback)

展开／收起

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

淡入／淡出

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

动画

$(selector).animate({params},[duration],[easing],[callback])

例：

 

speed可以是"slow"、"fast"、"normal"或毫秒数。

Function	Description
$(selector).hide()	Hide selected elements
$(selector).show()	Show selected elements
$(selector).toggle()	Toggle (between hide and show) selected elements
$(selector).slideDown()	Slide-down (show) selected elements
$(selector).slideUp()	Slide-up (hide) selected elements
$(selector).slideToggle()	Toggle slide-up and slide-down of selected elements
$(selector).fadeIn()	Fade in selected elements
$(selector).fadeOut()	Fade out selected elements
$(selector).fadeTo()	Fade out selected elements to a given opacity
$(selector).animate()	Run a custom animation on selected elements

Callback

$("p").hide(1000,function(){

  alert("The paragraph is now hidden");
});

HTML$("p").html("aa");等同于设置元素的innerHtml，即它的内容。

$(selector).append(content)和$(selector).prepend(content)分别在后面和前面添加HTML的内容。

$(selector).before(content)和$(selector).after(content)分别在所有匹配的元素前面和后面加上HTML内容。

CSS

CSS Properties	Description
$(selector).css(name)	Get the style property value of the first matched element
$(selector).css(name,value)	Set the value of one style property for matched elements
$(selector).css({properties})	Set multiple style properties for matched elements
$(selector).height(value)	Set the height of matched elements
$(selector).width(value)	Set the width of matched elements

AJAX

load函数：

$.ajax(options)为更低层的ajax函数：

jQuery引用：