JavaScript jQuery Part.1

1 概述

(1) JavaScript库

即library，是一个封装好的特定的集合(方法和函数)。
从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate()、hide()、show()，比如获取元素等。
简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)。

(2) jQuery概念

jQuery是一个快速、简洁的JavaScript库。
j就是JavaScript，Query就是查询，意思就是查询jis，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质：就是学习调用这些函数(方法)。

(3) 优点

轻量级。核心文件才几十kb，不会影响页面加载速度。
跨浏览器兼容。基本兼容了现在主流的浏览器。
链式编程、隐式送代。
对事件、样式、动画支持，大大简化了DOM操作。
支持插件扩展开发。有着丰富的第三方的插件。
免费、开源。

2 基本使用

(1) 使用步骤

<1> 引入jQuery文件
//jQuery官网复制文件，新建jquery.js文件，粘贴即可。
<2> 使用即可

(2) 入口函数

<1> 语法格式

$(function(){
  //此处是页面DOM加载完成的入口。
});

或者

$(document).ready(function(){
  //此处是页面DOM加完成的入口
});

<2> 当DOM结构渣染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
<3> 相当于原生js中的DOMContentLoaded。
<4> 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
<5> 更推荐使用第一种方式

(3) 顶级对象$

<1> $是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用S。
//入口函数也可写为：jQuery(function(){});，等价于：$(function(){});
//获取jQuery对象也可写为：jQuery('div').hide();，等价于：$('div').hide();
<2> $是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成Query对象，就可以调用jQuery的方法。

(4) jQuery对象和DOM对象

<1> 用原生JS获取来的对象就是DOM对象。
//例：div = document.querySelector(div)，div是DOM对象。
<2> 用jQuery方法获取的元素就是jQuery对象。
//例：$('div')，$('div')是jQuery对象。
<3> jQuery对象本质是：利用$对DOM对象包装后产生的对象(伪数组形式存储)。
<4> jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScirpt属性和方法。
//div.hide()，div是一个DOM对象,不能使用jquery里面的hide方法。
//$('div').style.display = 'none'，这个$(div)是一个jQuery对象不能使用原生js的属性和方法。

(5) jQuery对象和DOM对象相互转换

<1> 概述
DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
<2> DOM对象转换为jQuery对象
$(DOM对象);
<3> jQuery对象转换为DOM对象
<3.1> $(DOM对象)[索引号]
<3.2> $(DOM对象).get(索引号)

 

3 选择器

(1) 概述

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。
$("基础选择器或层级选择器：筛选选择器").筛选方法; //里面选择器直接写CSS选择器即可，但是要加引号。

(2) 基础选择器

$("#id")：ID选择器，获取指定ID的元素。
$("*")：全选选择器，匹配所有元素。
$(".类名")：类选择器，获取同一类class的元素。
$("标签名")：标签选择器，获取同一类标签的所有元素。
$(".类名,标签名,标签名")：并集选择器，选取多个元素。
$("标签名.类名")：交集选择器，选取交集元素。

(3) 层级选择器

$("标签名或.类名>标签名")：子代选择器，使用>号，获取亲儿子层级的元素，注意，并不会获取孙子层级的元素。
$("标签名或.类名 标签名")：后代选择器，使用空格，代表后代选择器，注意，获取父元素下的所有符合条件子元素，包括孙子等。

(4) 隐式选代

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式送代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
//由于jQuery对象获取到的是伪数组，每次对jQuery对象进行操作，相当于遍历伪数组，给伪数组中每个元素进行操作。

(5) 筛选选择器

:first：获取第一个元素。
:last：获取最后一个元素。
:eq(索引号):获取到的li元素中，选择对应索引号的元素，索引号从0开始。
:odd：获取到的jQuery对象中，选择索引号为奇数的元素。
:even：获取到的jQuery对象中，选择索引号为偶数的元素。

:checked：查找被选中的表单元素

(6) 筛选方法

parents("标签名或类名")：可以返回指定祖先元素。
//parents()可返回所有祖先元素，parents("标签名或类名")可返回指定标签名或类名的祖先元素。

parent()：查找父级元素，返回最近一级父元素。
children("标签名或类名")：相当于子代选择器，获取亲儿子层级的元素。
find("标签名或类名")：相当于后代选择器，获取父元素下的所有符合条件子元素。
siblings("标签名或类名")：查找兄弟节点，且为对应标签元素，不包括自己本身。
nextAll()：查找当前元素之后所有的同辈元素。
prevtAll()：查找当前元素之前所有的同辈元素。
hasClass("类名")：检查当前的元素是否含有某个特定的类，如果有，则返回true。
//注意：此处类名不加.。
eq(索引号)：相当于筛选选择器:eq(索引号)，索引号从0开始。

(7) jQuery中的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

$(function(){
	//获取所有button对象
	//隐式选代给所有的按钮都绑定了点击事件。
	$("button").click(function(){
		//当前的button按钮变化背景颜色。
		//$(this)代表jQuery对象伪数组中，当前调用的某一个元素。
		$(this).css("background","pink");
		//隐式送代，其余的兄弟，即button按钮去掉背景颜色。
		$(this).siblings("button").css("background","");
	});
});

(8) 链式编程

链式编程是为了节省代码量，看起来更优雅。使用链式编程一定注意是哪个对象执行样式。
$(this).css("background","pink").siblings("button").css("background","");
//当前调用元素变为粉色，为当前调用元素的兄弟元素的button元素去掉背景颜色。
//siblings()实际是由$(this)调用，即$(this).siblings("button");
$(this).css("background","red").siblings().css("background","green").parent().css("background","blue");
//当前调用元素变红，当前调用元素的兄弟元素变绿，当前调用元素的兄弟元素的父元素变蓝。
//siblings()由$(this)调用，parent()由$(this).siblings()调用，即为当前调用元素的兄弟元素的父元素。

(9) 淘宝服饰精品案例

<1> 需求分析
有多个li元素，每点击某一个li元素，div会变换对应图片。
<2> 核心思路
鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
需要得到当前小li的索引号，就可以显示对应索引号的图片。
jQuery得到当前元素索引号 $(this).index();
对应的图片，可以通过 eq(index)方法去选择。
显示元素 show()隐藏元素 hide()。
<3> 代码实现

$(function(){
	//鼠标经过左侧的小li。
	$("li").mouseover(function(){
		//得到当前小1i的索引号。
		var index = $(this).index();
		console.log(index);
		//让我们右侧的盒子相应索引号的图片显示出来。
		$("#content div").eq(index).show();
		//让其余的图片(就是其他的兄弟)隐藏起来。
		$("#content div").eq(index).siblings().hide();
	});
});		

4 样式操作

(1) 设置css方法

//jQuery可以使用css方法来修改简单元素样式；也可以通过对象，修改多个样式。
<1> 参数只写属性名，则是返回属性值。
$("选择器").css("属性名");
<2> 参数是属性名，属性值，逗号分隔，是设置一组样式，*属性必须加引号*，值如果是数字可以不用跟单位和引号。
$("选择器").css("属性名","值");
<3> 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，*属性可以不用加引号*，值如果是数字可以不用跟单位和引号。
//参数为对象时，属性若不加引号时，复合属性必须采取驼峰命名。例：backgroundColor:"red"

$("选择器").css({
  属性名:"值",
  属性名:"值"
});

(2) 设置类样式方法

//作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
<1> 添加类：$("选择器").addClass("类名");
<2> 移除类：$("选择器").removeClass("类名");
<3> 切换类：$("选择器").toggleClass("类名");
//若该元素已有该类，则移除该类；若当前元素没有该类，则添加该类。

(3) 类操作与className区别

原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作，不影的原先的类名，adaclass相当于追加类名。

(4) tab栏切换案例

<1> 需求分析
点击tab栏，仅当前所点击tab栏显示对应样式，同时下面的div显示对应的内容。
<2> 核心思路
点击上部的li，当前li添加current类，其余兄弟移除类。
点击的同时，得到当前i的索引号。
让下面相应索引号的item显示，其余的item隐藏。
<3> 代码实现

$(function(){
	//鼠标经过左侧的小li。
	$("li").mouseover(function(){
		//得到当前小1i的索引号。
		var index = $(this).index();
		console.log(index);
		//让我们右侧的盒子相应索引号的图片显示出来。
		$("#content div").eq(index).show();
		//让其余的图片(就是其他的兄弟)隐藏起来。
		$("#content div").eq(index).siblings().hide();
	});
});		

5 效果操作

(1) 概述

jQuery给我们封装了很多动画效果，最为常见的如下：
显示隐藏：show()、hide()、toggle()
滑动：slideDown()、slideUp()、slideToggle()
淡入淡出：fadeIn()、fadeOut()、fadeToggle()、fadeTo()
自定义动画：animate()

(2) 显示隐藏效果

<1> 显示

<1.1> 语法
$("选择器").show(speed,easing,fn);
//参数都可以省略，无动画直接显示。
<1.2> 参数
speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000)。
easing：用来指定切换效果，默认是"swing"(变速)，可用参数"linear"(匀速)。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<2> 隐藏

<2.1> 语法
$("选择器").hide(speed,easing,fn);
//参数都可以省略，无动画直接显示。
<2.2> 参数
speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000)。
easing：用来指定切换效果，默认是"swing"(变速)，可用参数"linear"(匀速)。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<3> 显示隐藏切换

<3.1> 语法
$("选择器").toggle(speed,easing,fn);
//参数都可以省略，无动画直接显示。
<3.2> 参数
speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000)。
easing：用来指定切换效果，默认是"swing"(变速)，可用参数"linear"(匀速)。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

(3) 滑动效果

<1> 向上滑动

<1.1> 语法
$("选择器").slideUp(speed,easing,fn);
//参数都可以省略，无动画直接显示。
<1.2> 参数
speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000)。
easing：用来指定切换效果，默认是"swing"(变速)，可用参数"linear"(匀速)。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<2> 向下滑动

<2.1> 语法
$("选择器").slideDown(speed,easing,fn);
//参数都可以省略，无动画直接显示。
<2.2> 参数
speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000)。
easing：用来指定切换效果，默认是"swing"(变速)，可用参数"linear"(匀速)。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<3> 上下滑动切换

<3.1> 语法
$("选择器").slideToggle(speed,easing,fn);
//参数都可以省略，无动画直接显示。
<3.2> 参数
speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000)。
easing：用来指定切换效果，默认是"swing"(变速)，可用参数"linear"(匀速)。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

(4) hover事件

<1> 语法
$("选择器").hover(over,out);
//事件切换就是鼠标经过和离开的复合写法。
//事件切换如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数。
<2> 参数
over：鼠标移到元素上要触发的*函数*(相当于mouseenter)。
out：鼠标移出元素要触发的*函数*(相当于mouseleave)。

(5) 动画队列及其停止排队方法

<1> 动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
<2> 停止排队
$("选择器").stop().动画效果();
//stop()方法必须写到动画的前面。
stop()方法用于停止动画或效果
注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画。

(6) 淡入淡出效果

<1> 淡入

<1.1> 语法
$("选择器").fadeIn(speed,easing,fn);
//参数都可以省略，无动画直接显示。
<1.2> 参数
speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000)。
easing：用来指定切换效果，默认是"swing"(变速)，可用参数"linear"(匀速)。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<2> 淡出

<2.1> 语法
$("选择器").fadeOut(speed,easing,fn);
//参数都可以省略，无动画直接显示。
<2.2> 参数
speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000)。
easing：用来指定切换效果，默认是"swing"(变速)，可用参数"linear"(匀速)。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<3> 淡入淡出切换

<3.1> 语法
$("选择器").fadeToggle(speed,easing,fn);
//参数都可以省略，无动画直接显示。
<3.2> 参数
speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000)。
easing：用来指定切换效果，默认是"swing"(变速)，可用参数"linear"(匀速)。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<4> 渐进方式调整到指定的不透明度

<4.1> 语法
$("选择器").fadeTo(speed,opacity,easing,fn);
//除speed、opacity以外参数都可以省略。
<4.2> 参数
opacity：必须写，透明度，取值 0~1 之间。
speed：必须写，三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000)。
easing：用来指定切换效果，默认是"swing"(变速)，可用参数"linear"(匀速)。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<5> 突出显示案例

<5.1> 需求分析
当鼠标滑动到某一个li上，其他li不透明度降低，鼠标离开时，其他li不透明度恢复1。
<5.2> 代码实现

$(function(){
	$(".wrap li").hover(function(){
		//鼠标拖动到li，其他li透明度改为0.5。
		$(this).siblings().stop().fadeTo(400,0.5);
	},function(){
		//鼠标离开li，其他li透明度改为1。
		$(this).siblings().stop().fadeTo(400,1);
	});
});

(7) 自定义动画

<1> 语法
$("选择器").animate(params,speed,easing,fn);
//除params以外参数都可以省略。
<2> 参数
params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法。
例：

$("div").animate({
	left:500,
	top:300,
	opacity:4,
	width:59
},500);

speed：必须写，三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000)。
easing：用来指定切换效果，默认是"swing"(变速)，可用参数"linear"(匀速)。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。