[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"}] ```