16 | 落叶无痕

自动摘要: 1.jQuery是一个JavaScript的库 2.jQuery是一个轻量级的”写的少，做的多“的JavaScript库 3.jQuery库包含以下功能： 1.HTML元素选取 2 ……..

jQuery是一个JavaScript的库
jQuery是一个轻量级的”写的少，做的多“的JavaScript库
jQuery库包含以下功能：
1. HTML元素选取
2. HTML元素操作
3. CSS操作
4. HTML事件函数
5. JavaScript特效和动画
6. HTML DOM遍历和修改
7. AJAX
8. Utilities
jQuery安装
1. <scriptsrc=”https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
jQuery语法（通过选取HTML元素，并对选取的元素执行某些操作）
1. 基础语法：$(selector).action()
  1. 美元符号定义jQuery
  2. 选择符(selector)”查询”和”查找”HTML元素
  3. jQuery的action()执行对元素的操作
2. 文档就绪事件
  1. 所有jQuery函数位于一个document ready函数中。
    tips
    这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

$(document).ready(function(){
  // 开始jQuery代码
})

// 简洁写法（与上面写法效果相同）
$(function(){
  // 开始jQuery代码
})

jQuery选择器

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

.class选择器：通过指定的class查找元素元素元素

$(“*”)	选取所有元素
$(this)	选取当前HTML元素
$(“p.intro”)	选取class为intro的元素
$(“p:first”)	选取第一个元素
$(“ul li:first”)	选取第一个元素的第一个元素
$(“ul li:first-child”)	选取每一个元素的第一个元素
$(“[href]”)	选取带有href属性的元素
$(“a[target=’_blank’]”)	选取所有target属性值等于”_blank”的元素
$(“a[target!=’_blank’]”)	选取所有target属性值不等于”_blank”的元素
$(“:button”)	选取所有type=”button”的元素和
$(“tr:even”)	选取偶数位置的
$(“tr:odd”)	选取奇数位置的

如果希望jQuery函数易于维护，就把jQuery函数放到独立的js文件中

jQuery事件

事件：页面对不同访问者的响应叫做事件
事件处理程序：当HTML中发生某些事件时所调用的方法

常见的DOM事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click–单击事件	keypress–键被按下	submit–提交表单时（只适用于元素）	load–元素已加载时
dblclick–双击事件	keydown–键按下的过程	change–元素的值改变时发生change事件（仅适用于表单字段）	resize–调整浏览器窗口大小时
mouseenter–鼠标指针穿过元素	keyup–键被松开	focus–获得焦点	scroll–滚动指定元素时
mouseleave–鼠标指针离开元素		blur–失去焦点
hover–模拟光标悬停事件

jQuery隐藏/显示
1. jQuery hide()和show()
  1. $(selector).hide(speed,callback);
  2. $(selector).show(speed,callback);
  3. speed：可选，隐藏/显示的速度，可以取：“slow”“fast”或毫秒
  4. callback：可选，隐藏或显示完成后执行的函数名称
2. jQuery toggle()
  1. 可以使用toggle()方法来切换hide()和show()方法
  2. 语法同hide()和show()相同
jQuery 淡入淡出
1. fadeIn()：淡入已隐藏的元素，语法同上
2. fadeOut()：淡出可见元素，语法同上
3. fadeToggle()：在fadeIn()和fadeOut()方法之间进行切换，语法同上
4. fadeTo()：方法允许渐变为给定的不透明度（值介于0到1之间）
  1. $(selector).fadeTo(speed,opacity,callback);
jQuery 滑动
slideDown()：向下滑动元素
slideUp()：向上滑动元素
slideToggle()：在slideDown()与slideUp()方法之间进行切换
jQuery 动画
animate()：创建自定义动画
语法：$(selector).animate({params},speed,callback);
params：必需，定义形成动画的CSS属性
speed：可选，规定效果的时长
callback：动画完成后所执行的函数名称
可以用animate()方法操作所有CSS属性
注意：当使用animate时，必需使用Camel标记书写所有属性名，比如paddingLeft而不是padding-left
jQuery animate()也可以使用相对值（该值相对于元素的当前值）。需要在值的前面加上+=或者-=
使用预定义的值：“show””hide”“toggle”
jQuery 停止动画
stop()：在动画完成之前，停止动画或效果
stop()方法适用于所有jQuery效果函数，包括滑动，淡入淡出和自定义动画
语法：$(selector).stop(stopAll,goToEnd)