jQuery基础

一、什么是jQuery

jQuery是一个Javascript函数库

二、特点

写得少，做的多。

三、安装

直接引入（本身就是一个js文件）

四、用法

jQuery( )==$( )

1、它本身是一个入口函数

2、返回一个jQuery对象

五、js入口函数 和 jQuery的入口函数的区别

js的入口函数是 window.onload = function(){ }

jQuery的入口函数是 $(document).ready(function(){ });

1、js的入口函数只能有一个，jQuery的入口函数可以有多个

2、js的入口函数在Dom加载完成（外部引入的js和css）才开始执行。

jQuery的入口函数只要DOM加载完成后就执行。

3、js的入口函数不能简写 jQuery入口函数可以简写

简写1.$().ready(function(){ });

简写2.$(function(){ });

六、css() 方法设置或返回被选元素的一个或多个样式属性

返回： 对象.css(‘css的属性名’)

如果返回颜色属性 返回rgb

设置：对象.css(‘css属性名’,‘css属性值’)

事件源 **.** 事件类型（事件处理程序）

事件源必须是jQuery对象

同时设置：对象.css（{

}）

七、jQuery的选择器

基本选择器 层级选择器 过滤选择器 筛选选择器(方法)

1、基本选择器

id选择器

类选择器

标签选择器

并集选择器：使用逗号隔开

交集选择器

2、层级选择器

子代选择器

后代选择器

3、过滤选择器

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

4、筛选选择器(方法)

		用法	说明
children(‘’)	没有参数获取所有的子元素 加参数 指定选择器的元素	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(‘’)	必须加参数	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(‘’)		$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	parent 获取父元素 parents 包括祖先	$(“#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” 的所有 元素

八、jQuery的事件

事件源.事件类型(事件的处理程序)不用 加on val()

js和jQuery 不能同时使用

在jQuery中拿输入框的value值：. val()

九、jQuery css类

1、addClass() 添加类名 可以多个

2、removeClass() 删除类 删除多个

3、toggleClass() 对被选元索进行添加/删除类的切换操作

十、jQuery动画

(1) 、jQuery隐藏显示

可以使用 hide() 和show() 方法来隐藏和显示 HTML 元素。

$("#hide").click(function(){ 
  $("p").hide(); 
}); 
$("#show").click(function(){ 
  $("p").show(); 
});

可以使用 toggle() 方法来切换hide() 和show() 方法。

(2) 、jQuery淡入淡出

fadeIn() 用于淡入已隐藏的元素， fadeOut()方法用于淡出可见元素。

fadeToggle()方法可以在fadeIn() 与fadeOut() 方法之间进行切换。

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

(3) 、jQuery滑动

slideDown()方法用于向下滑动元素， slideUp()方法用于向上滑动元素。

slideToggle()方法可以在slideDown() 与slideUp() 方法之间进行切换。

(4) 、jQuery自定义动画（属性值可以不加单位）

animate({},时间) 方法用于创建自定义动画。不能设置颜色属性

可选的 speed参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。可选的callback 参数是动画完成后所执行的函数名称。

(5) 、stop方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前，适用于所有jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

(6) 、回调函数

在当前动画 100% 完成之后执行。