jQuery
1
// JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
入口函数
1
2
3
// 等待页面DOM加载完毕再去执行js代码(不包括图片,视频等等)
$(document).ready(function(){});
$(function(){});
版本
1
2
3
1.x    // 兼容ie678
2.x    // 使用基于jquery的插件 不兼容ie678(主流，稳定)
3.x    // 使用了一些新的语法(阮一峰的es6入门) 不兼容ie678
引入
1
2
// 本地引入
// 使用cdn的方式加载 只要有其他网页使用过 再使用我们网页时就不会重新下载 加载速度更快
DOM对象和jQuery对象
1
2
3
// 用原生js获取的对象就是DOM对象
// 用jquery方式获取的对象就是jQuery对象  本质:通过$把DOM元素进行了包装
// jQuery对象只能使用jQuery方法 , DOM对象则使用原生js的属性和方法
DOM对象和jQuery对象 的相互转换
1
2
3
4
5
6
7
1. DOM对象转换为 jQuery对象
var myvideo = document.querySelector('video');
$(mydieo);

2. jQuery对象转换为 DOM对象
$('video')[index].play();
$('video').get(index).play();
选择器
1
$('选择器') // 写css选择器即可
隐式迭代
1
2
$('div').css('color','red');
// .css() 默认遍历内部DOM元素,执行相应方法
筛选选择器
1
2
3
4
5
6
$('li:first')
:first  // 获取第一个元素
:last  // 获取最后一个元素
:eq(2)  // 获取索引为2的元素,从0开始
:odd  // 获取索引号为奇数的元素
:even  // 获取索引号为偶数的元素
逻辑筛选
1
2
3
4
5
6
7
8
9
10
11
12
13
parent();  // 查找父级
parents(); // 查找所有父级
children(); // 查找子级
find(); // 查找后代(必填项)
siblings(); // 查找兄弟,不包括自己

prevt(); // 查找上一个兄弟
prevtAll(); // 查找上面所有的兄弟
next(); // 查找下一个兄弟
nextAll(); // 查找下面全部的兄弟


eq(); // 通过索引号获取元素(相当于:eq())
样式操作
css操作
1
2
3
4
5
6
.css('属性名','值'); // 属性名要加引号 
.css({
  width:400,
  height:400,
  backgroundColor:'red'  // 属性名可以不用加引号 属性不是数字要加引号
})
类名操作
1
2
3
4
5
// 时间 速度 回调函数
.addClass('');  // 添加类名
.removeClass('');  // 移除类名
.toggleClass(''); // 切换类名
.hasClass(); // 检查当前元素是否有某个类 返回true false
滑动效果
1
2
3
slideDown(); // 滑入
slideUp(); // 滑出
slidetoggle(); // 切换滑动
停止动画排队
1
stop() // 停止上一次动画
自定义动画函数
1
2
animate(参数(可以用对象),时间,速度,回调函数);
// 动画只能出现在元素身上
淡入淡出效果
1
2
3
4
5
// 时间 速度 回调函数
fadeIn();  // 淡入
fadeOut();  // 淡出
fadeToggle();  // 切换淡入淡出
fadeTo('时间','透明度');  // 修改透明度
属性操作
1
2
3
4
5
6
7
8
.prop('属性名'); // 获取属性值
.prop('属性名','属性值'); // 设置属性
.attr('属性名'); // 获取自定义属性
.attr('属性名','属性值'); // 设置自定义属性

.data('数据名','数据值'); // 把数据存放在元素的内存里面
.data('数据名'); // 获取数据
.data('data-__') // 获取h5自定义属性data-
获取文本内容
1
2
3
4
5
6
.html(); // 获取元素的HTML内容
.html(''); // 设置元素的HTML内容
.text(); // 获取文本
.text(''); // 设置文本
.val(); // 获取表单值
.val(''); // 设置表单值
遍历元素
1
2
3
4
5
6
7
8
9
10
11
// 主要遍历或处理dom元素
.each(function(index,dom){
  // 第一个参数是索引号
  // 第二个参数一定是DOM元素对象
})

// 主要是处理数据
$.each(data,function(index,value){
  // 第一个参数是索引号
  // 第二个参数是值
})
模板字符串
1
2
3
`
	${内容或者表达式}
` // 反引号
元素操作
1
2
3
4
5
6
7
8
9
10
 $(''); // 创建元素 
.append(); // 添加元素到目标元素内部后面
.prepend(); // 添加元素到目标元素内部前面

.after(); // 添加到目标元素的后面
.before(); // 添加到目标元素的前面

.remove(); // 删除匹配的元素
.empty(); // 清空子节点
.html('') // 清空子节点
获取尺寸
1
2
3
4
.width()/height()  // 宽高
.innerWidth()/innerHeight() // 宽高(包含padding)  
.outerWidth()/outerHeight() // 宽高(包含padding,border)
.outerWidth(true)/outerHeight(true) // 宽高(包含padding,border,margin)
获取元素位置
1
2
3
4
5
.offset(); // 获取距离文档的偏移位置
.offset().top; // 获取距离文档上部的偏移位置
.offset({top:,left:}) // 设置距离文档的偏移

.position(); // // 获取距离带有定位的父级的偏移位置  只能获取
被卷去的头部
1
2
scrollTop(); // 获取被卷去头部的距离
scrollTop(100); // 设置被卷去头部的距离
事件注册
1
2
3
4
5
6
7
.on('事件(可以用对象绑定多个)','处理函数','回调函数')
// 注册事件

.on('事件(可以用对象绑定多个)','指定元素','处理函数','回调函数')
// 注册事件委托

.one(); // 注册一次事件
事件解绑
1
2
off(); // 解绑所有事件 带参为解绑指定事件
.off('事件','元素') // 解绑事件委托
自动触发事件
1
2
3
.click();  // 元素.事件();
.trigger('事件');  //
.triggerHandler('事件'); // 不会触发元素的默认行为
jQuery的方法
1
2
3
4
5
6
7
8
9
10
11
.css(); // 设置样式
.hide(); // 设置隐藏
.show(); // 设置显示
.toggle('时间','速度','回调函数'); // 设置 显示隐藏切换
$(this).index(); // 获取当前索引号
.toFixed(2); // 保留两位小数
.substr(1); // 从指定位置截取
.splic(,); // 从..截取到..
.splic(,,''); // 从..到..添加
JSON.stringify(); // 转成像对象的字符串
JSON.parse(); // 转成真对象
jQuery的事件
1
2
3
4
5
.mouseover(function(){}); // 鼠标经过
.mouseout(function(){}); // 鼠标离开      
.hover(function(){},function(){}); // 鼠标经过离开
.hover(function(){});
.scroll(); // 页面滚动事件
其他
1
$(this).is(':checked') // 是否选中 返回布尔值
1
2
3
4
5
6
7
8
9
10
$.ajaxPrefilter(function(options){
  // 统一为有权限的接口，设置 headers 请求头
  if (options.url.startsWith('有权限的路径开头')) {
    options.headers = {
      Authorization: localStorage.getItem('token') || ''
    }
  }
  // 在发起真正的Ajax请求之前,统一拼接请求的根路径
  option.url = '根路径'+option.url;
})