[TOC]
## :-: <a href="http://jquery.cuishifeng.cn/index.html">jQuery API 3.3.1 速查表</a>
:-: WRITE LESS,DO MORE
人狠,话不多
*****
## :-: <a href="https://www.bootcdn.cn/jquery">调用jquery插件</a>
```
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
```
## :-: <a href="http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp">jQuery 选择器</a>
```
// .get()
// 选出原生dom元素 0 = 第一位、 -1 = 最后一位、
var dom = $('#demo ul>li').get(0);
var dom = $('#demo ul>li').get(-1);
// .eq()
// 选出包裹着jQuery方法的dom元素 0 = 第一位、 -1 = 最后一位、
var dom = $('#demo ul>li').eq(0);
var dom = $('#demo ul>li').eq(-1);
// .find()
// 可以链式操作，选出子元素、
$('.wrapper').css({position: 'relative'})
.find('ul').css({listStyle: 'neno'})
.find('li').css({backgroundColor: '#ccc'})
// .prevObject对象
// prevObject对象是上一个(父级)被选择的dom对象(ul)，$('.wrapper').find('ul')
$('.wrapper').find('ul').find('li').prevObject
// .end()
// 回退到子元素(ul)的父级，此时返回的对象为.warapper
$('.warapper').add('ul').end()
// .filter(str)
// 基于li筛选出带class="demo"属性的li.demo元素、
$('.wrapper').find('ul').find('li').filter('.demo')
// .filter(fun)
// 逐个遍历元素、
$('.wrapper ul>li').filter(function(index, ele) {
// 这里输出的ele是原生的dom对象、
console.log(index, ele);
// 返回true留下、false排除、返回后domArr会包裹jQuery对象、
return index == 0; // 第一个
})
// .not(fun)
// 作用一样，但与filter()相反
$('.wrapper ul>li').not(function(index, ele) {
// 这里输出的ele是原生的dom对象、
console.log(index, ele);
// 返回false留下、true排除、返回后domArr会包裹jQuery对象、
return index == 0; // 选出非第一个、
})
// .is()
// 判断交集(相差、差值)是否存在指定的dom元素，返回布尔值、
// Demo点击ul下的li时弹出对应的HTML文本，当点击到非li时弹出ul所有的HTML文本、
$('.wrapper ul').click(function(e) {
// 事件委托、e.target —— 事件原对象(li)、
if ($(e.target).is('li')) {
alert($(e.target).text());
} else {
alert($(this).text());
}
});
// .add()
// 元素叠加 相当于css选择 .warapper,ul
$('.warapper').add('ul').css({color: 'red'})
```
## :-: <a href="http://www.w3school.com.cn/jquery/jquery_dom_set.asp">jQuery 获取与设置</a>
```
// .css()
// 取/加(累加) CSS样式、
var width = $('.warapper ul>li').css('border', '1px solid red')
.css({
width: 100,
height: '30px',
'line-height': '30px'
})
.css('width', '+=100')
.css('width');
console.log(width); // 200px
// .attr()
// 获取/设置(自定义) 标签属性、
var id = $('.warapper').attr('id', 'demo').attr('id');
console.log(id); // demo
// .prop()
// 读取/设置标签中的特性、 等同于 DOM元素对象[属性值] = 'text'
// 注意：如果被腻值的是自定义的属性值(非映射关于)。将不在标签中显现、
var is = $('input').prop('chacked');
console.log(is) // true/false
// .val()
// 获取/设置 表单相关元素的value值、
var val = $('textarea').val('Text').val();
console.log(val); // Text
// 方法二：依次遍历
var val = $('textarea').val(function(index, oValue) {
// 返回str就会改变当前选择的value值、
return index + ' - ' + oValue;
});
// .html()
// 设置/返回html标签、
// 特点， 多个标签只能读取第一个、 赋值可以同时多个、
$('ol').html('<li>demo</li>');
var html = $('ol>li').html();
console.log(html);
$('ol>li').html(function(index, ele) {
console.log(index, ele);
return index + '-' + ele;
});
// .text()
// 设置/返回text文本、
// 特点， 只返回标签中的文本、选中多个则拼接起来、
$('ol>li').text('demo');
var text = $('ol>li').text();
console.log(text);
$('ol>li').text(function(index, ele) {
console.log(index, ele);
return index + '-' + ele;
});
// .addClass()
// 给元素对象添加1/n个Class属性值、
$('div.demo').eq(0).addClass('a1 a2 a3');
$('div.demo').addClass(function(index, ele) {
console.log(index, ele);
return 'test-' + index; // 不覆盖、会叠加
});
// .removeClass()
// 清除1/n个Class属性值、
$('div.demo').eq(0).removeClass('a1 a3'); // 填写要清除的Class值、
$('div.demo').eq(0).removeClass(); // 如果不填会清除全部、
$('div.demo').removeClass(function(index, ele) {
console.log(index, ele);
return ele; // 清除被返回的Class属性值、
});
// .hasClass()
// 判断被选中的元素对象中，是否含有特定的Class值、返回：true/false
$('div.demo').hasClass('kk');
```
```
// .next()
$('button').click(function() {
// .next() 选择this同级下一个元素节点、(可以加限制条件)
$(this).next('p').css({'color': 'red'})
});
// .prev()
$('button').click(function() {
// .prev() 选择this同级上一个元素节点、(可以加限制条件)
$(this).prev('p').css({'color': 'red'})
});
// .nextAll()
$('button').click(function() {
// .nextAll() 选择在this以下所有同级元素节点、(可以加限制条件)
$(this).nextAll('p.red').css({'color': 'red'});
});
// prevAll()
$('button').click(function() {
// .prevAll() 选择在this以上所有同级元素节点、(可以加限制条件)
$(this).prevAll('p.red').css({'color': 'red'});
});
// .nextUntil()
$('#test>li').click(function() {
// 选择在this以下到指定(.end)截止的同级元素节点、可选参数：附加一个筛选条件(.li-test)
$(this).nextUntil('.end', '.li-test').css({'font-size': '25px','color': 'red'});
});
// prevUntil()
$('#test>li').click(function() {
// 选择在this以上到指定(.top)截止的同级元素节点、可选参数：附加一个筛选条件(.li-test)
$(this).prevUntil('.top', '.li-test').css({'font-size': '25px','color': 'red'});
});
// .siblings()
// 选中同级除自身以外的所有元素、可选参数：过滤(span)
$('#demo-ul>li').eq(4).css('color', 'red')
.siblings('span').css('color', '#ccc');
// .parent()
// 获取父级元素节点、可选参数：过滤(ul)
$('li').click(function() {
var dom = $(this).parent('ul');
console.log(dom);
});
// .parents()
$('#demo .commodity span.but').click(function() {
// .parents() 选出this所有父级的元素节点、可选参数：过滤(.commodity)
var dataId = $(this).parents('.commodity').attr('data-id');
console.log(dataId);
});
// .closest()
// 查找距离this最近的父级元素(p)节点、(也可以是自身)
var dom = $('#demo .commodity span.but').eq(0).closest('p');
console.log(dom);
// .slice()
// 在选择器中截取指定区域(n,m)的成员(元素节点)
$('ul>li').slice(4, 7).css('background', 'red');
```
## :-: 操作 DOM
```
// 剪切插入到前面
// .insertBefore()
// 将A元素(.top)剪切，插入到B元素(.end)之前、
$('.top').insertBefore('.end');
// .before()
// 相反 将B元素(.end)剪切，插入到A元素(.top)之前
$('.top').before($('.end'));
// 剪切插入到后面
// .insertAfter()
// 将A元素(.top)剪切，插入到B元素(.end)之后、
$('.top').insertAfter('.end');
// .ater()
// 相反 将B元素(.end)剪切，插入到A元素(.top)之后、
$('.top').after($('.end'));
// 头 移动元素节点
// .prependTo()
// 将p标签插入到ul内的最顶部、
$('p').prependTo('ul');
// .prepend()
// 在p标签内最顶部插入标签、
$('p').prepend( $('ol') );
// 尾 移动元素节点
// appendTo()
// 将p标签插入到ul内的末尾处、
$('p').appendTo('ul');
// append()
// 在p标签内末尾处插入标签、
$('p').append('<spam style="color:#fff;">2</span>');
// 清除元素节点、
// .remove()
// 删除(剪切)并返回被删元素节点、(绑定事件会被清理)
var dom = $('p').remove()
console.log(dom);
// 删除(剪切)并返回被删元素节点、(绑定事件不会被清理)
console.log( $('p').detach() );
// 创建元素节点、
$('<span style="color:red;">123</span>')
// .wrap()
// 给元素节点套一个父级、
$('#demo').wrap('<div></div>');
// 方法二： $('#demo').wrap(fun);
$('a').wrap(function(index,ele) {
return $('li');
});
// .wrapInner()
// 给指定元素(ul)里面的子级套一个父级、
$('ul').wrapInner('<div></div>');
// 方法二： $('#demo').wrapInner(fun);
// .wrapAll()
// 给选中的元素套一个统一的父级、(被选中的li会套到一个div里去)
$('li').wrapAll('<div></div>');
// .unwrap()
// 删除自身的父级、(截止到body)
$('#box').unwrap();
// .clon()
// 克隆元素节点、参数：克隆事件(true)
$('#box').clone(true).appendTo('body');
// .data()
// 存/取 数据、状态 (跟dom对象有一定映射关系)
$('#box').data('f', 1); // 赋值方式有两种(str/obj)、
$('#box').data({a: 1,b: '2',c: true}); // 取值方式：.data('c')
```
## :-: <a href="http://www.w3school.com.cn/jquery/jquery_ref_events.asp">Element事件</a>
```
// .on()
// 给元素绑定事件、(可以绑定多个)
// 参数：1.type 2.selecter 3.data 4.handle (2、3 可以省略)
$('ul.demo>li').on('click', fun);
$('ul').on('click', 'li', fun); // 给ul里面的li绑定事件、
// 还可以传递data数据、通过e.data的方式读取、
$('ul.demo>li').on('click', {name: 'abc'}, function(e) {
console.log(e.data); // Object {name: "abc"}
});
// 同时注册绑定多个事件处理函数、(通过对象的方式传递)
$('p.demo').on({
click: function() {
console.log('鼠标点击·事件');
},
mouseenter: function() {
console.log('鼠标移入·事件');
},
mouseleave: function() {
console.log('鼠标移出·事件');
}
});
// .one()
// 绑定一次性的事件。使用方式跟.on()方法一致，但绑定后执行一次后将会销毁、
$('ul').one('click', 'li', fun); // 意思是ul绑定事件，委托给li、fun是执行对应函数、
// Demo 让a标签第一次点击跳转到淘宝，再点击跳转到百度、
// <a href="https://baidu.com" target="_blank">百度一下</a>
$('a').one('click', function() {
open('https://taobao.com');
return false; // 可以阻止默认事件以及冒泡、
})
// .off()
// 销毁绑定的事件、(如不填参数将销毁所有的绑定)
$('ul.demo>li').off('click', fun);
$('ul').off('click', 'li');
// 同时销毁多个事件处理函数、
$('p.demo').off({
click: fun_1,
mouseenter: fun_2,
mouseleave: fun_3
});
// .trigger()
// 主动触发一个元素事件(可触发自定义事件)、参数：1.type 2.dataArr
// 范例：$('ul').find('li.demo').click(function(e, a, b, c) {console.log(e, a, b, c);});
$('ul').find('li.demo').trigger('click', [1, 2, 3]); // 参数2 可以传递一个数组作为实参、
// .hover()
// 鼠标移入(mouseenter)、移出(mouseleave)事件简写的方式、
$('.demo').hover(function() {
console.log('鼠标移入·事件');
}, function() {
console.log('鼠标移出·事件');
});
// 其他直接使用的方法(事件)
// .click .keydown .mouseenter .mouseleave 、、
// 兼容的事件对象
// e.pageX e.clienX e.which e.button
// e.preventDefault()
// e.stopPropagation()
// return false; 兼容阻止事件冒泡和默认事件、
```
## :-: <a href="http://jquery.cuishifeng.cn/show.html">动图效果</a>
```
// .hide() 隐藏 1.延迟(ms) 3.回调函数
// .show() 显示 1.延迟(ms) 3.回调函数
// .toggle() 在hide跟show中来回切换、
// .toggle([speed],[easing],[fn])
$('p').click(function() {
$('#demo').toggle(300);
})
// .fadeIn() 淡入 fadeIn([speed],[fn])
// .fadeOut() 淡出 fadeOut([speed],[fn])
// .fadeToggle() 两个状态来回切换、
$('p').on('click', function() {
$(this).next().fadeToggle(500);
});
// .fadeTo() 渐变到指定的透明度、
// .fadeTo([[speed],opacity,[fn]])
$('#demo').fadeTo(600, 0.2);
// 卷帘动图效果、
// $(this).slideUp(ms,fun); // 卷入
// $(this).slideDown(ms,fun); // 卷出
// $('ul.demo').slideToggle(500); // 两种状态间的切换、
// .animate()
// 通过给定的参数自定义动图、(内置队列)
$('#demo').animate({
width: '+=50px',
height: '+=50px',
top: '50px',
left: '50px',
opacity: '-=0.3'
}, 600, function() {
console.log('Hello World~');
});
// .stop()
// 阻止本次运动并直接到目标点、参数：1.阻止本次 2.到目标点
$('#demo').stop(true, true);
// .finish()
// 直接跳到最后的一个目标点、(无参数)
$('#demo').finish();
// .delay()
// 使动图延迟执行、
$('#demo')
.animate({top: '+=200px'}, 500)
.delay(2000)
.animate({left: '+=200px'}, 500);
```
## :-: 内置队列的使用
```
// .queue()
// 查询/创建执行队列、
$('.demo')
// 创建队列、
// 参数： type fn
.queue('demo', function(next) {
// next参数会执行下一个、
console.log(this, 'demo_1');
next();
}).queue('demo', function() {
console.log(this, 'demo_2');
}).queue('demo', function(next) {
console.log(this, 'demo_3');
next();
});
// 查询这个队列的一组函数、
console.log($('.demo').queue('demo'));
// 执行队列、(函数会按先后循序执行，有参数(next)将依次执行下一个)
$('.demo').dequeue('demo');
// 清空队列、
$('.demo').clearQueue('demo');
```
## :-: <a href="http://www.runoob.com/jqueryui/api-easings.html">关于动图效果拓展API (jQuery UI API - Easings)</a>
```
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
```
## :-: 获取盒子的相关参数
```
// .offset()
// 获取元素距离文档的绝对位置top、left 返回对象。
$('.demo').offset(); // 取值：Object {top: 50, left: 50}
$('.demo').offset({top: 50, left: 50}); // 赋值、
// .position()
// 只能取值，元素相对于有定位的父级位置top、left 返回对象。
$('.demo').position(); // Object {top: 50, left: 50}
// .scrollTop() / scrollLeft() // 获取、赋予滚动条位置、
$(window).scrollTop(); $(window).scrollLeft();
$(window).scrollTop(666); $(window).scrollLeft(333);
$('.demo').scrollTop(); $('.demo').scrollLeft();
$('.demo').scrollTop(666); $('.demo').scrollLeft(333);
// .width() .height()
// 区域：content
// 取内容区宽高、不含padding的区域、返回数值不带px。
// .innerWidth() .innerHight()
// 区域：content + padding
// 取内容区宽高、含padding的区域、返回数值不带px。
// .outerWidth() .outerHight()
// 区域：content + padding + border
// 取边框及内容区宽高、返回数值不带px。
// .outerWidth(true) .outerHight(true)
// 区域：content + padding + border + margin
// 取整个盒子的所有宽高、返回数值不带px。
```
```
// .each()
// 循环遍历每一个元素、(节省效率)
$('ul>li').each(function(index, ele) {
// 索引(index) 原生DOM(ele)
$(ele).text(index + 1).addClass('demo-' + (index + 1));
});
// .children()
// 选中ul下面的所有子级、
$('ul').children();
// .index()
// 获取自身在兄弟中的索引位、(可以传参数，参数为dom元素)
```
## :-: jQuery工具方法
```
// $.type()
// 判断数据类型，是typeof()的升级版、
// 判断是否为该数据类型、返回true/false
// $.isArray(); $.isFunction(); $.isNumeric();
// ···
// $.trim() 到文本，并清空首尾空、
// $.proxy() 改变this指向、
// $.noConflict() 防止命名冲突、
$.extend(); $.fn.extend();
// 第一种用法，扩展api接口
// 新增实例方法：$.fn.extend({ demo:function(){} })
// 新增工具方法：$.extend({ demo:function(){} })
// 第二种用法，对象的克隆、
// 浅层克隆：$.extend(obj1, obj2, obj3);
// 深度克隆：$.extend(true, obj1, obj2, obj3);
```
## :-: <a href="http://www.w3school.com.cn/jquery/ajax_ajax.asp">网络请求</a>
```
// $.ajax()
// 参数：Object类型
// 属性：url、type、data、success、error
$.ajax({
url: 'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person',
type: 'GET',
// 请求成功的处理函数(success)
success: function(data) {
console.log(data);
console.log(this);
},
// 请求失败的处理函数(error)
error: function(e) {
console.log(e);
// 状态码(status)、状态文本(statusText)
console.log(e.status, e.statusText);
},
// 请求完成后的处理函数(无论成功失败都会被触发)
complete: function() {
console.log('complete');
},
// 改变函数上下文(this指向)
context: $('.demo')
});
// $.ajax() 返回的是一个延迟对象、
// 因此可以直接简写成 $.ajax().then( fn_1 , fn_2 )
// 这样请求成功时触发参数1(fn_1)，当失败时触发参数2(fn_2)；
// then方法为回调的延迟对象，它等同于ajax对象内的success跟error属性。
// 这样的写法可以优化代码，提升代码的阅读性，更加规范，方便后期维护、防止回调地狱、
// $.Deferred()
// 手动创建延迟对象、
(function() {
// 创建延迟对象、
var df = $.Deferred();
$('div').click(function() {
// 这里通过特定的方法调用设定好的回调函数，
// 成功状态：只能调用一次、
// df.resolve(this);
// 失败状态：只能调用一次、
// df.reject(this);
// 正在进行：可以多次调用、
df.notify(this);
});
// 返回这个延迟对象，实现链式调用。
return df.promise();
}()).then(function(_this) {
console.log(_this, '成功');
}, function(_this) {
console.log(_this, '失败');
}, function(_this) {
console.log(_this, '正在进行');
});
// df.then是简写的形式，它可以容纳以下三种状态，
// df.done( function(){} ); 成功状态 调用方法：df.resolve();
// df.fail( function(){} ); 失败状态 调用方法：df.reject();
// df.progress( function(){} ); 正在进行 调用方法：df.notify();
```
```
// 都可以获取成员数、效果一样
$('ol>li').length
$('ol>li').size();
// .serialize()
// 将form表单打包成数据返回str出来、
var data = $('form').serialize();
console.log(data); // wd=阿里&spt=1&id=123
// .serializeArray()
// 将form表单打包成数据返回 数组(Array)形式、
var data = $('form').serializeArray();
console.log(data); // [{name: "wd",value: "阿里云"}, {name: "spt",value: "1"}, {name: "id",value: "123"}, {name: "issp",value: "1"}]
```
- 前端工具库
- HTML
- CSS
- 实用样式
- JavaScript
- 模拟运动
- 深入数组扩展
- JavaScript_补充
- jQuery
- 自定义插件
- 网络 · 后端请求
- css3.0 - 2019-2-28
- 选择器
- 边界样式
- text 字体系列
- 盒子模型
- 动图效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 画布
- SVG - 矢量图
- 多媒体类
- H5 - 其他
- webpack - 自动化构建
- webpack - 起步
- webpack -- 环境配置
- gulp
- ES6 - 2019-4-21
- HTML5补充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 页面配置
- 组件生命周期
- 自定义组件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定义功能 - 2019-7-20
- 自定义组件 - 2019-7-22
- 脚手架的使用 - 2019-7-25
- vue - 终端常用命令
- Vue Router - 路由 (基础)
- Vue Router - 路由 (高级)
- 路由插件配置 - 2019-7-29
- 路由 - 一个实例
- VUEX_数据仓库 - 2019-8-2
- Vue CLI 项目配置 - 2019-8-5
- 单元测试 - 2019-8-6
- 挂载全局组件 - 2019-11-14
- React框架
- React基本使用
- React - 组件化 2019-8-25
- React - 组件间交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props属性校验 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能优化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模块收纳
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基础 2020-3-6
- TypeScript - 进阶 2020-3-9
- Ordinary小助手
- uni-app
- 高德地图api
- mysql
- EVENTS
- 笔记
- 关于小程序工具方法封装
- Tool/basics
- Tool/web
- parsedUrl
- request