jQuery 选择器介绍01

 

     

1.1 课程介绍

Ø jQuery初识

jQuery让js的开发变得更加简单

jQuery解决了浏览器的兼容性问题

Ø 学习目标

使用jQuery设计常见的效果

掌握jQuery的思想设计与理念

Ø 总体课程安排：

前三天：jQuery的基本概念、选择器、DOM操作、动画、事件以及扩展。

第四天：项目实战

 

1.2 jQuery基本概念

1.2.1 为什么要学习jQuery？

 

1.2.2 什么是jQuery？（理解）

jquery的官网：http://jquery.com/

 

说白了：jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

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

1.2.3 怎样使用jQuery？（重点）

Ø 使用jQuery的三个基本步骤：

1) 引包（引入jQuery文件）

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

2) 入口函数

$(document).ready(function () {

});

3) 功能实现

$("#btnShowDiv").click(function () {

$("div").show(1000);

});

Ø div动态展示案例中JavaScript与jquery的对比

	JavaScript	jquery
入口函数	只能有一个，如果有多个，后面的会覆盖前面	可以有多个，并且不会发生覆盖的情况
代码容错性	代码容错性差，代码出现错误，会影响到后面代码的运行。	代码容错性好，屏蔽错误，并且不会影响后面代码的运行。
浏览器兼容性	兼容性差，比如火狐不支持innerText	对浏览器兼容性做了封装，因此不存在兼容性问题
操作复杂性	DOM操作复杂，对于一些简单的动画效果，实现起来比较麻烦	DOM操作简单，支持隐式迭代，实现动画非常简单。

 

1.3 jQuery详细解释

1.3.1 版本介绍

Ø 下载jquery

官网下载地址：http://jquery.com/download/

Ø 大版本分类

jquery大版本分为1.x和2.x和3.x

 

区别：2.x3.x版本不再支持IE6/7/8，在中国，用的最多的还是1.x版本

Ø 同一版本分类

jQuery每一个版本又分为压缩版和未压缩版：

l jquery.js：未压缩版本（开发版本），代码可读性高，推荐在开发和学习阶段使用，方便查看源代码。

l jquery.min.js：压缩版本，去除了注释、换行、空格、并且将一些变量替换成了a,b,c之类的简单字符，基本没有可读性，推荐在项目生产环境使用，因为文件较小，减少网络压力。

Ø 关于jquery3.0

 

翻译：jquery3.0现在发布了，这个版本自从2014年10月就开始测试了，我们的目标是创建一个更苗条、更快的jquery版本（并且能向后兼容）。我们已经移除了IE旧版本的解决方案，并且带来了一些较为现代的web API，但这是有道理的。3.0是2.x分支的延续，但是有一些突破性的改变。但是1.12和2.2分支将会在同一时间继续获得关键性的支持补丁。但是他们不会再有任何新的功能和重大的修订。jQuery3是jQuery的未来，如果你需要兼容IE6-8，你可以继续使用1.12版本。

1.3.2 入口函数

Ø jQuery入口函数的两种写法

//第一种写法

$(document).ready(function() {

});

//第二种写法

$(function() {

});

Ø 对比JavaScript的入口函数jQuery的入口函数,执行时机

1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。

2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

 

1.3.3 了解jQuery的$符号

Ø $是什么

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

$常用的几种情况：

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

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

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

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

补充

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

1.3.4 jQuery对象与DOM对象之间的转换（难点）

Ø 什么是DOM对象（js对象）？

使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。

dom对象只可以使用dom对象的方法和属性

Ø 什么是jquery对象？

jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。

jquery对象只能使用jquery对象的方法

Ø 深入了解jQuery对象

jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））

联想记忆：衣服和洗衣机的关系

Ø jQuery对象和DOM对象的相互转换

1. jquery对象转DOM对象

var $li = $(“li”);

//第一种方法（推荐使用）

$li[0]

//第二种方法

$li.get(0)

2. DOM对象转jquery对象（联想记忆：我有钱[美元]，所以我的功能就更强大）

var $obj = $(domObj);

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

1.3.5 区分jQuery和JavaScript

JavaScript是一门编程语言，jquery是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。（联想记忆：不能扛着洗衣机去出差）

 

1.4 jQuery选择器（重点）

1.4.1 jQuery选择器概述

Ø 什么是jQuery选择器？

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

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

1.4.2 基本选择器

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

总结：跟css的选择器用法一模一样。

1.4.3 层级选择器

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

跟CSS的选择器一模一样。

1.4.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元素中，选择索引号为偶数的元素

【案例：隔行变色】

1.4.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()	找上一次兄弟

【案例：下拉菜单】this+children+mouseenter+mouseleave

【案例：突出展示】siblings+find

【案例：手风琴】next+parent

【案例：淘宝精品】index+eq

1.5 jquery操作样式（重点）

1.5.1 css操作

功能：设置或者修改样式，操作的是style属性。

Ø 设置单个样式

//name：需要设置的样式名称

//value：对应的样式值

css(name, value);

//使用案例

$("#one").css("background","gray");//将背景色修改为灰色

Ø 设置多个样式

//参数是一个对象，对象中包含了需要设置的样式名和样式值

css(obj);

//使用案例

$("#one").css({

    "background":"gray",

    "width":"400px",

    "height":"200px"

});

Ø 获取样式

//name:需要获取的样式名称

css(name);

//案例

$("div").css("background-color");

注意：获取样式操作只会返回第一个元素对应的样式值。

隐式迭代：

1. 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值

2. 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。

1.5.2 class操作

Ø 添加样式类

//name：需要添加的样式类名，注意参数不要带点.

addClass(name);

//例子,给所有的div添加one的样式。

$(“div”).addClass(“one”);

Ø 移除样式类

//name:需要移除的样式类名

removeClass(“name”);

//例子，移除div中one的样式类名

$(“div”).removeClass(“one”);

Ø 判断是否有样式类

//name:用于判断的样式类名，返回值为true false

hasClass(name)

//例子，判断第一个div是否有one的样式类

$(“div”).hasClass(“one”);

Ø 切换样式类

//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。

toggleClass(name);

//例子

$(“div”).toggleClass(“one”);

【案例：tab栏切换案例】