# JQuery 介绍

# JavaScript 库

即 library, 是一个封装好的特定的集合 (方法和函数), 从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 animate, hide, show, 比如获取元素等

# jQuery 入口函数

1
2
3
4
5
6
7

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

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

# jQuery 顶级对象

• $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $ , 但一般为了方便，通常都直接使用 $
• $ 同时也是 jQuery 的顶级对象，相当于原生 JavaScript 中的 window, 把元素利用 $ 包装成 Query 对象，就可以调用 jQuery 的方法

# jQuery 对象和 DOM 对象

• 用原生 JS 获取来的对象就是 DOM 对象
• jQuery 方法获取的元素就是 jQuery 对象
• jQuery 对象只能使用 jQuery 方法，DOM 对象只能使用原生的 JavaScript 属性和方法

# jQuery 对象和 DOM 对象的转换

DOM 对象与 jQuery 对象之间是可以相互转换的

因为原生 js 比 jQuery 更大，原生的一些属性和方法 jQuery 没有给我们封装，想要使用这些属性和方法需要把 jQuery 对象转换为 DOM 对象才能使用

• DOM 对象转换为 jQuery 对象 : $(DOM对象)
• jQuery 对象转换为 DOM 对象 (两种方式)
  • $('div')[index] index 是索引号
  • $('div').get(index) index 是索引号

# jQuery 常用 API

# jQuery 选择器

# jQuery 基础选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准

$("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加括号

# jQuery 层级选择器

# jQuery 筛选选择器

# jQuery 筛选方法

# 隐式迭代

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

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

# 排他思想

1
2
3
4
5
6
7

$(function () {
    $('button').click(function () {
        $(this).css('background-color', 'red');
        $(this).siblings('button').css('background-color', '');
        //$(this)表示当前点击的对象
    })
})

# jQuery 链式编程

链式编程是为了节省代码量，看起来更优雅

链式编程之前 :

1
2
3
4

$('button').click(function () {
    $(this).css('background-color', 'red');
    $(this).siblings('button').css('background-color', '');
})

使用链式编程后 :

1
2
3

$('button').click(function () {
    $(this).css('background-color', 'red').siblings('button').css('background-color', '');
})

# jQuery 样式操作

# 操作 CSS 方法

jQuery 可以使用 css 方法来修改简单元素样式，也可以操作类，修改多个样式

1. 参数只写属性名，则是返回属性值

   1	%(this).css('color');

2. 参数是属性名，属性值，逗号分隔，时设置一组样式，属性必需加引号，值如果是数字可以不用跟单位和引号

   1	$(this).css('color', 'red');

3. 参数可以是对象形式，方便设置多种样式，属性名和属性值用冒号隔开，属性可以不用加引号

   1	$(this).css({color: 'red','font-size': '20px'});

# 设置类样式方法

作用等同与以前的 ClassList, 可以操作类样式，注意操作类里面的参数，不要加点

• 添加类

  1	$('div').addClass('current');

• 移除类

  1	$('div').removeClass('current');

• 切换类

  1	$('div').toggleClass('current');

# 类操作与 class Name 区别

原生 JS 中 className 会覆盖元素原先里面的类名

jQuery 里面类操作只是对指定类进行操作，不影响原先的类名

# jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下 :

# 显示效果

1

show([speed],[easing],[fn]);

• 参数都可以省略，无动画直接显示
• speed : 三种预定速度之一的字符串 ('slow', "normal", 'last'), 或表示动画市场的毫秒数之 (如 100)
• easing : (Optional) 用来指定切换效果，默认是'swing', 可用参数 'linear'
• fn : 回调函数，在动画完成执行的函数，每个元素执行一次

# 隐藏效果

1

hide([speed],[easing],[fn]);

• 参数都可以省略，无动画直接显示
• speed : 三种预定速度之一的字符串 ('slow', "normal", 'last'), 或表示动画市场的毫秒数之 (如 100)
• easing : (Optional) 用来指定切换效果，默认是'swing', 可用参数 'linear'
• fn : 回调函数，在动画完成执行的函数，每个元素执行一次

# 切换效果

1

toggle([speed],[easing],[fn]);

• 参数都可以省略，无动画直接显示
• speed : 三种预定速度之一的字符串 ('slow', "normal", 'last'), 或表示动画市场的毫秒数之 (如 100)
• easing : (Optional) 用来指定切换效果，默认是'swing', 可用参数 'linear'
• fn : 回调函数，在动画完成执行的函数，每个元素执行一次

# 下滑效果

1

slideDown([speed], [easing], [fn])

• 参数都可以省略，无动画直接显示
• speed : 三种预定速度之一的字符串 ('slow', "normal", 'last'), 或表示动画市场的毫秒数之 (如 100)
• easing : (Optional) 用来指定切换效果，默认是'swing', 可用参数 'linear'
• fn : 回调函数，在动画完成执行的函数，每个元素执行一次

# 上滑效果

1

slideUp([speed], [easing], [fn])

• 参数都可以省略，无动画直接显示
• speed : 三种预定速度之一的字符串 ('slow', "normal", 'last'), 或表示动画市场的毫秒数之 (如 100)
• easing : (Optional) 用来指定切换效果，默认是'swing', 可用参数 'linear'
• fn : 回调函数，在动画完成执行的函数，每个元素执行一次

# 切换效果

1

slideToggle([speed], [easing], [fn])

• 参数都可以省略，无动画直接显示
• speed : 三种预定速度之一的字符串 ('slow', "normal", 'last'), 或表示动画市场的毫秒数之 (如 100)
• easing : (Optional) 用来指定切换效果，默认是'swing', 可用参数 'linear'
• fn : 回调函数，在动画完成执行的函数，每个元素执行一次

# 事件切换

事件切换 hover 就是鼠标经过和离开的复合写法

1

$(this).hover(function(){}, function(){});

如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

1
2
3

$(this).hover(function(){
    $(this).children('ul').sildeToggle();
})

# 动画队列及其停止排队方法

动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行

停止排队 :

1

stop()

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

# 淡入淡出效果

1
2
3

fadeIn();
fadeOut();
fadeToggle();

这三个的可选参数和上面一样，就不再写了

1

fadeTo([speed], opacity, [easing, [fn]]);

• opacity 透明度必须写，取值 0 - 1 之间
• speed : 三种预定速度之一的字符串 ('slow', 'normal', 'fast') 或表示动画时长的毫秒数值 (如 : 1000)
• easing : (Option) 用来指定切换效果，默认是'swing', 可选参数 'linear'

# 自定义效果 animate

1

animate(param, [speed], [easing], [fn])

• params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft. 其余参数都可以省略
• speed : 三种预定速度之一的字符串 ('slow', 'normal', 'fast') 或表示动画时长的毫秒数值 (如 : 1000)
• fn : 回调函数，在动画完成执行的函数，每个元素执行一次

# jQuery 属性操作

# 设置或获取元素固有属性值 prop ()

所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href , 元素里面的 type

获取属性语法 :

1

prop("属性");

设置属性语法 :

1

prop("属性", "属性值");

# 设置或获取元素自定义属性值 attr ()

用户自己给元素添加的属性，我们称为自定义属性，比如给 div 添加 index = "1"

获取属性语法 :

1

attr("属性");		//类似原生getAttribute()

设置属性语法 :

1

attr("属性", "属性值");	//类似原生setAttribute()

# 数据缓存 data ()

data () 方法可以再指定的元素上存取数据，并不会修改 DOM 元素结构，一旦页面刷新，之前存放的数据都将被一处

附加数据语法 :

1

data("name", "value")		//向被选元素附加数据

获取数据语法 :

1

data("name")			  //向被选元素获取时间

同时，还可以读取 HTML 自定义属性 data-index, 得到的是数字型