jQuery

1. jQuery介绍

(1)、JavaScript与jQuery比较

js:  1、入口函数只有一个，window.onload

1. 浏览器兼容性：非常令人头疼，比如textContent虽然作为标准方法但是只支持IE8+以上的浏览器
2. DOM错综复杂，实现简单的效果很麻烦
3. 代码容错性差，出错后导致后面的代码不执行

jQuery:  1、市场占有率稳步上升，代码比较少，功能强大

2、DOM比较强大，事件处理，完全解决了浏览器的兼容性问题

3、ajax操作（比较好）

(2)、什么是jQuery

1、jQuery是一个JavaScript函数库。

2、jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

3、jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。

(3)、为什么使用jQuery

1、目前网络上有大量开源的 JS 库, 但是 jQuery 是目前最流行的 JS 库，而且提供了大量的扩展。

2、很多大公司都在使用 jQuery， 例如:Google、Microsoft、IBM、Netflix。

3、目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

1. jQuery安装

1、从 jquery.com 下载 jQuery 库

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

<head>

<script src="jquery-1.10.2.min.js"></script>

</head>

2、从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

<head>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>

</head>

1.  jQuery语法

(1)、基础语法

1、美元符号定义 jQuery

2、选择符（selector）"查询"和"查找" HTML 元素

3、jQuery 的 action() 执行对元素的操作。

(2)、实例

1、您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

// 开始写 jQuery 代码... }

);

2、简洁写法（与以上写法效果相同）:

$(function(){

// 开始写 jQuery 代码...

})

1. 、1.3.3了解jQuery的$符号

$是什么

其实$就是一个函数：$();参数不一样，功能不一样

$常用的几种情况：

$(function() {});//参数是function，说明是入口函数

$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素

$(“div”);//查找所有的div元素

$(document).ready(funciton(){})//将document转换成jQuery对象

(4)、jQuery 入口函数与 JavaScript 入口函数的区别

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

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

演示示例：jQuery基础语法

课堂练习：使用jQuery输出一串文字

1. JQuery选择器

(1)、什么是jQuery选择器

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

2、jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

3、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

4、jQuery 中所有选择器都以美元符号开头：$()。

(2)、基本选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素
交集选择器（标签指定式选择器）	$(“div.redClass”);	注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。

总结:和css选择器的用法一模一样

演示示例：jQuery基本选择器

课堂练习：使用交集选择器使被选元素变色

(3)、层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

总结：跟CSS的选择器一模一样。

演示示例：jQuery层级选择器

(4)、过滤选择器

	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素

总结：这类选择器都带冒号。

演示示例：jQuery过滤选择器

课堂练习：使用过滤选择器li标签偶数行元素变色

(5)、筛选选择器（方法）

	用法	说明
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟
Index()	$(“li”).index()	获取当前的位置（索引）
not()	$("p").not(".intro")	返回不带有类名 "intro" 的所有 <p> 元素

总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

演示示例：jQuery筛选选择器

课堂练习：查找第二个li标签的后代的兄弟元素

1. jQuery事件

(1)、什么是事件

1、页面对不同访问者的响应叫做事件。

2、实例：在元素上移动鼠标、选取单选按钮、点击元素

(1)、事件语法

1、单击事件

$("p").click(function(){

// 动作触发后执行的代码!!

});

1. 双击事件

$("p").dblclick(function(){

    $(this).hide();

})

3、鼠标进入

$("#p1").mouseenter(function(){

alert('您的鼠标移到了 id="p1" 的元素上!');

});

4、鼠标离开

$("#p1").mouseleave(function(){

alert("再见，您的鼠标离开了该段落。");

});

5、获取焦点

$("input").focus(function(){

$(this).css("background-color","#cccccc");

});

6、失去焦点

$("input").blur(function(){

$(this).css("background-color","#ffffff");

});