Jquery入门一

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

• $美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素（选择器）
• jQuery 的 action() 执行对元素的操作  (事件)

 所以jQuery 的学习主要就分两大块：选择器和事件

实例:

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

jQuery 入口函数与 JavaScript 入口函数的区别：

$(document).ready(function(){

  // 执行代码

});

 或

$(function(){

    // 执行代码

});

 jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。

 

window.onload = function () {

    // 执行代码

}

JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

 

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id#、类.、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器

元素选择器

jQuery 元素选择器基于元素名选取元素：

在页面中选取所有 <p> 元素:$("p")

#id 选择器

#id 选择器通过 HTML 元素的 id 属性选取指定的元素：

通过 id 选取元素语法如下：$("#test")

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：$(".test")

---

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

jQuery 事件

页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){ // 动作触发后执行的代码!! });

 

隐藏/显示show()/hide()  、淡入/淡出 fadeIn()/fadeOut()、滑动slideDown()/slideUp()效果相似

最终状态 display:block;  

• show()
• fadeIn()
• slideDown()

最终状态 display:none;

• hide() 
• fadeOut()
• slideUp()

hide() 和 show()

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

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

 toggle()           

切换 hide() 和 show() 方法：显示被隐藏的元素，并隐藏已显示的元素：

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

---

fadeIn()  和 fadeOut() 
$(selector).fadeIn(speed,callback);用于淡入已隐藏的元素：
$(selector).fadeOut(speed,callback); 方法用于淡出可见元素。

 fadeToggle()

在 fadeIn() 与 fadeOut() 方法之间进行切换：如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果；如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

---

 fadeTo()

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

必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

---

 slideDown()   和slideUp()
$(selector).slideDown(speed,callback);  用于向下滑动元素
$(selector).slideUp(speed,callback);  用于向上滑动元素。

 slideToggle()

在 slideDown() 与 slideUp() 方法之间进行切换：如果元素向下滑动，则 slideToggle() 可向上滑动它们；如果元素向上滑动，则 slideToggle() 可向下滑动它们。

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

---

Callback 函数在当前动画 100% 完成之后执行