jQuery学习-01

什么是jQuery？

• 说白了：jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。
• js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。
• jQuery中提供一个顶级对象
  $ == jQuery

学习jQuery，主要是学什么呢？

• 学习jQuery，主要学习jQuery的一大堆的api。
• API：application programming interface：应用程序编程接口，说白了，API就是方法。

版本介绍

大版本分类

• jquery大版本分为1.x和2.x（3.0）
• 区别：2.x版本不再支持IE6/7/8

同一版本分类

• jQuery每一个版本又分为压缩版和未压缩版：
• jquery.js：未压缩版本（开发版本），代码可读性高，推荐在开发和学习阶段使用，方便查看源代码。
• jquery.min.js：压缩版本，去除了注释、换行、空格、并且将一些变量替换成了a,b,c之类的简单字符，基本没有可读性，推荐在项目生产环境使用，因为文件较小，减少网络压力。

怎样使用jQuery？

• 下载jquery
  官网下载地址：http://jquery.com/download/
• 引包（引入jQuery文件）

<script src="jquery-1.11.1.js"></script>

• 入口函数

jQuery的入口函数：结构加载后触发
$(document).ready(function () {
//第一种入口函数写法
});
$(function () {
//第二种入口函数写法
});
$(window).on(‘load’,function () {
//在jQuery中模拟原生的入口函数
});

1.3.4 了解jQuery的$符号

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

$常用的几种情况：

$(function() {});//参数是function，说明是入口函数
$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//将document转换成jQuery对象

$ === jQuery,也就是说能用$的地方，完全可以用jQuery，$仅仅是简写形式。

DOM对象和jQuery对象的关系。

1.	DOM对象是通过DOM方式获取的页面中的元素
2.	jQuery对象是通过jQuery方式获取的页面中的元素。

区别：DOM对象只能使用DOM的相关功能
	  jQuery对象只能使用jQuery的相关功能。

3.	DOM对象和jQuery的关系：我们成jQuery对象是DOM对象的包装集（jQuery对象里面放置了获取的DOM对象）
 jQuery对象是一个伪数组结构，内部保存了DOM对象

4.	DOM对象和jQuery对象的相互转换
  将DOM对象 转换成jQuery对象。通过$();方式包裹一个DOM对象即可得到一个jQuery对象。
	  将jQuery装换成DOM对象。根据下标获取内部的DOM对象，$(‘div’)[0]；获取DOM对象。
								使用$(“div”).get(0);的方式获取DOM对象。

区分jQuery和JavaScript

• JavaScript是一门编程语言，jquery是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。

jQuery选择器

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

$("#btnShowDiv")//id选择器
$("div")//标签选择器

• jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。
• jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

基本选择器

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

层级选择器

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

过滤选择器

名称	用法	描述
: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元素中，选择索引号为偶数的元素

筛选选择器(方法)

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

名称	用法	描述
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开始