【WEB 前端框架】01 Jquery

jQuery 基本概念

为什么要学习 jQuery ?

使用 javascript 开发过程中，有许多缺点：

• 查找元素的方法太少，麻烦
• 遍历伪数组很麻烦，通常要嵌套一大堆的 for 循环
• 有兼容性问题
• 想要实现简单的动画效果，也很麻烦
• 代码冗余

jQuery 初体验

$(document).ready(function() {
    $("#btn1").click(function() {
        // 隐式迭代：偷偷的遍历，在 jQuery 中不需要手动写 for 循环了，会自动进行遍历。
        $("div").show(2000);
    });

    $("#btn2").click(function() {
        $("div").text("我是内容");
    });
});

优点总结：

• 查找元素的方法多种多样，非常灵活
• 拥有隐式迭代特性，因此不再需要手动写 for 循环
• 完全没有兼容性问题
• 实现动画非常简单，而且二功能更加的强大
• 代码简单

什么是 jQuery ？

jQuery 的官网 http://jquery.com/ jQuery 就是一个 js 库，使用 jQuery 的话，会比使用 JavaScript 更简单

js库：把一些常用到的方法写到一个单独的 js 文件，使用的时候直接去引用这个 js 文件就可以了。

jQuery 的版本

官网下载地址 ： http:jquery.com/download/ jQuery 版本有很多，分为 1.x，2.x，3.x

大版本分类：

• 1.x 版本：能够兼容 IE678 浏览器
• 2.x 版本：不兼容 IE678 浏览器
• x 和 2.x 版本 jQuery 都不再更新版本了，现在只更新 3.x 版本。
• 3.x 版本：不兼容 IE678，更加的精简（在国内不流行，因为国内使用 jQuery 的主要目的就是兼容 IE678）

关于 压缩版 和 未压缩版

• jquery-1.12.4.min.js：压缩版本，使用与生产环境，因为文件较小，去除了注释、换行、空格等东西，但是基本没有可阅读性。
• jquery-1.12.4.js：未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

jQuery 的入口函数

使用 jQuery 的三个步骤：

 1. 引入jQuery文件
 2. 入口函数
 3. 功能实现

关于 jQuery 的入口函数：

// 第一种写法
$(document).ready(function(){

});

// 第二种写法
$(function(){

}); 

jQuery 入口函数与 js 入口函数的对比

1. JavaScript 的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2. jQuery 的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

jQuery 对象与 DOM 对象的区别（重点）

1. DOM 对象：使用 JavaScript 中的方法获取页面中的元素返回的对象就是 dom 对象。
2. jQuery 对象：jquery 对象就是使用 jquery 的方法获取页面中的元素返回的对象是 jQuery 对象。
3. jQuery 对象其实就是 DOM 对象的包装集（包装了 DOM 对象的集合（伪数组））
4. DOM 对象与 jQuery 对象的方法不能混用。

DOM 对象转换为 jQuery 对象：【联想记忆：花钱】

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的 DOM 对象转 jQuery 对象

jQuery 对象转换成 DOM 对象：

var $li = $("li");
// 第一种方法（推荐使用）
$li[0];
// 第二种方法
$li.get(0)

---

选择器

什么是 jQuery 选择器

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

基本选择器

名称	用法	描述
ID 选择器	$(“#id”)	获取指定 ID 的元素
类选择器	$(“.class”)	获取同一类 class 的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”)	获取 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”)	相当于子代选择器
find(selector)	$(“ul”).find(“li”)	相当与后代选择器
siblings(selector)	$(“#first”).siblings(“li”)	查找兄弟节点，不包括自己本身
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2)	相当于 :eq(2), index 从 0 开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一个兄弟