20200322-jQuery学习

1.jQuery的入口函数

• 第一种

$(document).ready(function(){

});

• 第二种

$(function(){

});

这两种入口函数相当于原生js中的DOMContentLoaded

2.jQuery对象和DOM对象

1. 原生js获取过来的对象是DOM
2. jQuery方法获取的元素是jQuery对象
3. jQuery对象的本质是：利用$对DOM对象包装后产生的对象（维数组形式存储）
4. 只有jQuery对象才能使用jQuery方法，DOM对象则使用原生JavaScript方法

3.jQuery对象与DOM对象的转换

• DOM对象转换为jQuery对象 $(DOM对象)
• jQuery对象转换为DOM对象
  方式一 $(“div”)[index] index是索引号
  方式二 $(“div”).get(index) index是索引号

4.jQuery选择器

(1) 基础选择器

名称	用法	描述
ID选择器	$("#id")	获取指定id的元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签的元素
并集选择器	$(“div,p,li”)	获取多个元素
交集选择器	$(“li.current”)	交集元素
全选选择器	$("*")	匹配所有元素

(2)层级选择器
最常用是：子代选择器和后代选择器

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

(3)筛选选择器

名称	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的li元素，index从0开始
:odd	$(“li:odd”)	获取到的li元素中，选取索引号为奇数元素
:even	$(“li:even”)	获取到的li元素中，选取索引号为偶数元素

(4)节点筛选方法

语法	用法	说明
parent()	$(“li”).parent()	查找父级
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”) ,查找最近一级(亲儿子)
find(selector)	$(“ul”).find(“li”)	相当于$(“ul li”) 后代选择器
siblings(selector)	$(".first").siblings(“li”)	查找兄弟节点，不包括自己本身
eq(index)	$(“li:eq(2)”)	相当于$(“li:eq(2)”) index从0开始

5.jQuery的样式操作

方法一：操作css方法

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color", "red");

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性名可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

方法二：设置类样式方法

// 1.添加类
$("div").addClass("current");
// 2.删除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");

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

6.jQuery效果

• 显示隐藏：show() / hide() / toggle();
• 滑入滑出：slideDown() / slideUp() / slideToggle();
• 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo();
• 自定义动画：animate() ;
  以上()里面有三个参数，可以省略不写
  (speed,easing,fn)
  1.speed:三种预定速度之一的字符串(“slow"or"normal"or"fast”)或表示动画时长的毫秒数值（如：1000）
  2.easing：用来指定切换效果，默认是swing，可用参数linear
  3.fn：回调函数。在动画完成时执行的函数，每个元素执行一次

fadeTo(speed,opacity,easing,fn) 渐进方式调整到指定的不透明度
1.opacity 透明度必须写，取值0~1之间
2.speed:三种预定速度之一的字符串(“slow"or"normal"or"fast”)或表示动画时长的毫秒数值（如：1000）必须写
3.easing：用来指定切换效果，默认是swing，可用参数linear
4.fn：回调函数。在动画完成时执行的函数，每个元素执行一次
animate(params,speed,easing,fn) 自定义动画
1.params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法。其余参数都可以省略
2.speed:三种预定速度之一的字符串(“slow"or"normal"or"fast”)或表示动画时长的毫秒数值（如：1000）必须写
3.easing：用来指定切换效果，默认是swing，可用参数linear
4.fn：回调函数。在动画完成时执行的函数，每个元素执行一次

7.停止动画队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止动画排队的方法为：stop() ;

• stop() 方法用于停止动画或效果。
• stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

总结: 每次使用动画之前，先调用 stop() ,在调用动画。

8.事件切换

jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下

语法

  hover([over,]out)     // 其中over和out为两个函数

• over:鼠标移到元素上要触发的函数（相当于mouseenter）
• out:鼠标移出元素要触发的函数（相当于mouseleave）
• 如果只写一个函数，则鼠标经过和离开都会触发它

9.知识扩展

• jQuery 里面的排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

• 隐式迭代 :遍历内部DOM元素(伪数组形式存储)的过程

/ 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

• 链式编程

// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');