jQuery

jQuery

jquery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

1. jQuery简介

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2. jQuery的功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

3. jQuery下载

官网：https://jquery.com/
下载链接：点击下载

4. jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()

• 美元符号定义 jQuery

• 选择符（selector）“查询"和"查找” HTML 元素

• jQuery 的 action() 执行对元素的操作

  实例:

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

• $(“p”).hide() - 隐藏所有段落

• $(“p .test”).hide() - 隐藏所有 class=“test” 的段落

• $("#test").hide() - 隐藏所有 id=“test” 的元素

5. jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

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

$("p")

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

$("#test")

• CSS选择器：jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
  实例：把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color","red");

• 其他选择器
  

6. jQuery事件

7. jQuery效果

隐藏与显示：

在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，以及使用 toggle() 方法能够切换 hide() 和 show() 方法。

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

speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
callback 参数是隐藏或显示完成后所执行的函数名称。

jQuery toggle()：切换 hide() 和 show() 方法。

语法：$(selector).toggle(speed,callback);

淡入淡出：

在jQuery中可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()
jQuery fadeIn（）方法：jQuery fadeIn() 用于淡入已隐藏的元素

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

jQuery fadeOut（）方法：jQuery fadeOut() 用于淡出可见元素。

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

jQuery fadeToggle() 方法

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

$(selector).fade Toggle(speed,callback);

jQuery fadeTo() 方法

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

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

滑动

jQuery 滑动方法可使元素上下滑动。
jQuery slideDown() 方法：jQuery slideDown() 方法用于向下滑动元素。

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

jQuery slideUp() 方法：jQuery slideUp() 方法用于向上滑动元素。

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

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

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

jQuery动画

jQuery animate() 方法用于创建自定义动画。

 $(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

$("button").click(function(){
  $("div").animate({left:'250px'});
}); 

jQuery animate() - 操作多个属性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 

jQuery animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
}); 

jQuery animate() - 使用预定义的值

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});