jQuery学习笔记（知识点整理）

jQuery 是一个 JavaScript 库。

1、jQuery语法

基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素

jQuery函数位于一个函数中：
$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

简写为：
$(function(){
 
   // 开始写 jQuery 代码...
 
});

2、

$("p")                  隐藏所有<p>元素
$("#test")              选取id为test的元素
$(".test")              通过指定的class查找元素
$("*")	                选取所有元素	
$(this)	                选取当前 HTML 元素	
$("p.intro")	        选取 class 为 intro 的 <p> 元素	
$("p:first")	        选取第一个 <p> 元素	
$("ul li:first")	    选取第一个 <ul> 元素的第一个 <li> 元素	
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素	
$("[href]")	            选取带有 href 属性的元素	
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素	
$("a[target!='_blank']")选取所有 target 属性值不等于 "_blank" 的 <a> 元素	
$(":button")	        选取所有 type="button" 的 <input> 元素 和 <button> 元素	
$("tr:even")	        选取偶数位置的 <tr> 元素	
$("tr:odd")	            选取奇数位置的 <tr> 元素

3、事件
对不同访问者的响应

页面中指定一个点击事件：
$("p").click();
$("p").click(function(){
    // 动作触发后执行的代码
});

click()//当按钮点击事件被触发时会调用一个函数。
dblclick()//当双击元素时，会发生 dblclick 事件
mouseenter()//当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave()//当鼠标指针离开元素时，会发生 mouseleave 事件
mousedown()//当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
mouseup()//当在元素上松开鼠标按钮时，会发生 mouseup 事件
hover()//hover()方法用于模拟光标悬停事件
focus()//当元素获得焦点时，发生 focus 事件
blur()//当元素失去焦点时，发生 blur 事件

4、效果
4.1隐藏和显示

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
//可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
//可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

toggle()//通过 toggle() 方法来切换 hide() 和 show() 方法

4.2淡入淡出

jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()

fadeIn()//用于淡入已隐藏的元素
$(selector).fadeIn(speed,callback);
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是 fading 完成后所执行的函数名称。

fadeOut()//用于淡出可见元素
$(selector).fadeOut(speed,callback);

fadeToggle() //可以在 fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeToggle(speed,callback);

fadeTo()//允许渐变为给定的不透明度
$(selector).fadeTo(speed,opacity,callback);
//必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

4.3滑动

slideDown()//用于向下滑动元素
$(selector).slideDown(speed,callback);

slideUp() //用于向上滑动元素
$(selector).slideUp(speed,callback);

slideToggle() //在 slideDown() 与 slideUp() 方法之间进行切换
$(selector).slideToggle(speed,callback);

4.4动画

animate() //用于创建自定义动画
$(selector).animate({params},speed,callback);
//必需的 params 参数定义形成动画的 CSS 属性。
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是动画完成后所执行的函数名称。

队列功能
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

stop() //用于停止动画或效果，在它们完成之前，适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。