• jQuery整体框架结构

q.png

• JQuery选择器

• 元素选择器

id:通过id属性选取指定元素

.class：通过指定的class查找元素
p:通过标签名选取元素
*：选取所有元素

$("#id")
$(".class")
$("p")
$("*")

• 属性选择器
  jQuery 使用 XPath 表达式来选择带有给定属性的元素。
  $("[href]") 选取所有带有 href 属性的元素。
  $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
  $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
  $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

$("[href]")
$("[href='#']")
$("[href!='#']")
$("[href$='.jpg']")

• CSS选择器

CSS属性获取

$("#div1").css("width")

CSS属性设置

$("#div1").css("width", 200)
$("#div1").css("width", "200px")
$("#div1").css({"width": 200})  

更多实例：http://www.runoob.com/jquery/jquery-selectors.html

页面加载完成立刻执行

$(document).ready( function(){ } )

• jQuery常用事件方法

方法	描述
click()	添加 click点击 事件
blur()	添加失去焦点事件
mousedown ()	添加鼠标点击事件
mouseenter()	添加鼠标移入事件
mouseover()	添加鼠标移入事件
mouseup()	添加鼠标松开事件
mousemove()	添加鼠标移动事件
mouseout()	添加鼠标移出事件
scroll()	滚动指定的元素时，会发生 scroll 事件

注意：mouseenter与mouseover的不同之处

mouseenter不会发生事件冒泡，mouseover会发生事件冒泡

详见：http://www.runoob.com/jquery/jquery-ref-events.html

• jQuery效果方法

方法	描述
animate()	被选元素应用“自定义的动画”
fandeIn()	改变被选元素的不透明度（从隐藏到可见）
fandeOut()	改变被选元素的不透明度（从可见到隐藏）
finish()	被选元素停止、移除并完成所有排队动画
hide()	隐藏被选元素
show()	显示被选元素
stop()	停止被选元素 正在进行的动画
toggle()	在被选元素上进行hide() 和show() 之间的切换。

添加 animate() 自定义动画要引入js插件

animate动画设置

$("p").animate(JS对象, 动画时间, 回调函数/动画类型)

详见：http://www.runoob.com/jquery/jquery-ref-effects.html