jQuery基础（一）

1、基本语法
基础语法： $(selector).action()
实例：

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

方法：$(document).ready(function(){ // 开始写 jQuery 代码... });
简洁方式：$(function(){ // 开始写 jQuery 代码... });
2、选择器
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器：$("p")
#id 选择器：$("#test")
.class 选择器：$(".test")
更多：

语法	描述
$("*")	选取所有元素
$(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、常用的jQuery事件方法
$(document).ready()方法允许我们在文档完全加载完后执行函数。
click() 方法是当按钮点击事件被触发时会调用一个函数。
mouseenter()当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseleave()当鼠标指针离开元素时，会发生 mouseleave 事件。
mousedown()当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseup()当在元素上松开鼠标按钮时，会发生 mouseup 事件。
hover()方法用于模拟光标悬停事件。
focus()当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
blur()当元素失去焦点时，发生 blur 事件。
4、隐藏和显示效果

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
toggle() 方法来切换 hide() 和 show() 方法。$(selector).toggle(speed,callback);
5、淡入淡出效果：四种方法

• fadeIn() 用于淡入已隐藏的元素。$(selector).fadeIn(speed,callback);
• fadeOut() 方法用于淡出可见元素。$(selector).fadeOut(speed,callback);
• fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
  如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
  如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

• fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

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

6、滑动效果

• slideDown() 方法用于向下滑动元素。$(selector).slideDown(speed,callback);
• slideUp() 方法用于向上滑动元素。$(selector).slideUp(speed,callback);
• slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
  如果元素向下滑动，则 slideToggle() 可向上滑动它们。
  如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

7、动画
animate() 方法用于创建自定义动画。$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。可以操作多个属性。
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。

• 可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=。
• 使用预定义的值：可以把属性的动画值设置为 “show”、“hide” 或 “toggle”
• 使用队列功能：针对动画的队列功能

8、停止动画

• stop() 方法用于停止动画或效果，在它们完成之前。$(selector).stop(stopAll,goToEnd);
  适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
  。可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
  。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
  。默认地，stop() 会清除在被选元素上指定的当前动画。
  9、Callback 方法
  Callback 函数在当前动画 100% 完成之后执行。
  10、链(Chaining)
  在相同的元素上运行多条 jQuery 命令，一条接着另一条。
  这样的话，浏览器就不必多次查找相同的元素。