jQuery入门初识

• 一、jQuery初步了解
• 1、定义：
• 2、jQuery库包含哪些功能
• 3、为什么使用jQuery
• 4、jQuery的基本语法
• 5、jQuery选择器
• 6、常用的 jQuery 事件方法

• 1、隐藏和显示动画
• 2、滑动动画
• 3、透明度动画
• 4、自定义动画
• 5、解除动画的排列机制

• 1、操作元素节点
• 2、操作属性节点
• 3、操作文本节点
• 4、JQ操作CSS

• 1、 UI事件
• 2、焦点事件：
• 3、鼠标事件：
• 5、键盘事件
• 6、表单事件
• 7、页面载入事件
• 8、事件绑定
• 9、事件委托

一、jQuery初步了解

1、定义：

(1)、 jQuery是一个兼容多浏览器的JavaScript框架。可以使用户方便地处理HTML、事件，实现动画效果，并且为网站提供方便的Ajax交互。
(2)、jQuery是一个JavaScript函数库。
(3)、jQuery是一个轻量级的\”写的少，做的多\”的JavaScript库。

2、jQuery库包含哪些功能

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
★提示： 除此之外，jQuery还提供了大量的插件。

3、为什么使用jQuery

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
很多大公司都在使用 jQuery， 例如:
Google
Microsoft
IBM
Netflix

4、jQuery的基本语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询\”和\”查找” HTML 元素
jQuery 的 action() 执行对元素的操作

5、jQuery选择器

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

6、常用的 jQuery 事件方法

(1)、$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。

(2)、 click()

click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。

(3)、 dblclick()

当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数

(4)、mouseenter()

当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数

(5)、mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数

(6)、mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数

(7)、hover()

hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)

(8)、focus()

当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数

(9)、blur()

当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数

二、jQuery效果

1、隐藏和显示动画

2、滑动动画

3、透明度动画

4、自定义动画

5、解除动画的排列机制

(1)、stop()

停止当前正在运动的这段动画，立马开始下一段动画

(2)、stop(true)

元素上所有的动画都停止

(3)、finish()

元素的动画立即停止，并且跑到终点位置

三、JQ操作

1、操作元素节点

增加元素节点：

$(\"<li></li>\")//增加一个li标签

删除元素节点

remove()
empty()

修改元素节点

replaceAll()
replaceWith()

复制元素节点

clone()

2、操作属性节点

.attr(“title”)
.attr(“title”,“xx”)
.removeAttr(“title”)

.addClass(“类名”)
.removeClass(“类名”)
.toggleClass(“类名”)
.hasClass(“类名”)

.prop(“属性名”)
.prop(“属性名”,“xxx”)
.val()
.val(“xxx”)

3、操作文本节点

.html()
.html(“xxx”)

4、JQ操作CSS

.css(“width”)
.css(“width”,“110px”)

.width()
.height()

.innerWidht()
.innerHeight()

.outerWidht()
.outerHeight()

.scrollTop()
.scrollLeft()

四、JQ中的事件

1、 UI事件

scoll
resize
select

2、焦点事件：

focus
blur

3、鼠标事件：

click
dbclick
mousedown
mouseup
mouseover
mouseout
mousemove
mouseenter
mouseleave

5、键盘事件

keydown
keyup
keypress

6、表单事件

submit
change
input

7、页面载入事件

ready

$(document).ready(function(){})

可以简写成：
$(function(){})

8、事件绑定

$(\"button\").click();$(\"button\").on(\"click\",fn);  // 和bind一样  但是它可以实现事件委托   我们使用on时通常是为了实现事件委托$(\"button\").off(\"click\",fn);  // 绑定$(\"button\").bind(\"click\",fn)$(\"button\").unbind(\"click\",fn)$(\"button\").one(\"click\",fn)

9、事件委托

把一个元素上的事件委托给父元素