jQuery学习

jquery: javascript的库理念: 写得少，做得多(write less, do more)
jquery下载网址
 jquery api 中文文档
 jquery插件库
min.js：压缩版本，工作
jquery.js 格式化版本，学习

优势：
1. 轻量级
2. 强大的选择器
3. 出色的DOM操作的封装
4. 完善的ajax
5. 完善的事件机制的处理
6. 不污染的顶级变量($,jQuery)
7. 浏览器的兼容非常出色
8. 链式操作
9. 隐式迭代
10. 行为层和结构层分离
11. 插件支持
12. 完善的文档开源

一、jQuery和$的关系

$ = jQuery = window.$ = window.jQuery; $是jQuery的一个别名

1、 ready

$(document).ready(函数): 等待页面加载完再执行其中代码

  // 等待页面及资源加载完成的事件
   window.onload = function(){
    
    
       console.log(1);
   }
   window.onload = function(){
    
    
       console.log(2);//后面会覆盖前面的事件
   }
   // jquery: 等待页面加载
   $(document).ready(function(){
    
    
       console.log(111);
   });
   $().ready(function(){
    
    
       console.log(222);
   });
   // 常用
   $(function(){
    
    
       console.log(333);
   });

window.onload 与 ready 的区别:

window.onload就一种写法	ready有简写
onload事件后面会覆盖前面的	ready不会覆盖会叠加
onload: 等待页面及资源加载完成后才执行	ready: 等待页面加载

2、jQuery对象和DOM对象互转

jquery对象转成DOM对象

①. 下标：jquery对象[下标]
②. get: jquery对象.get(下标)

   var lis = document.getElementsByTagName('li');
   var lis1 = $('li');
   console.log(lis); // HTMLCollection
   console.log(lis1); // jQuery.fn.init
   // jquery对象转成DOM对象
   console.log(lis1[0]);
   // jquery方法获取DOM对象 jquey对象.get(下标);
   console.log(lis1.get(0));

DOM 转成jquery对象

$(DOM对象)

   // DOM 转成jquery对象
   var l = lis[0];
   console.log(l);
   console.log($(l));

注意： jquery的方法只能给jquery对象用, 原生方法只能给DOM对象用（所以要 jquery对象与DOM对象互转）

二、选择器

1、基本选择器: 标签类名 id 组合

标签: $(‘标签名’)
类名: $(’.类名’)
id: $(’#id’)
组合: $(‘标签名, .class, #id’)

   console.log($('li')); // 获取标签名为li的元素
   console.log($('.box')); // 获取类名为box的元素
   console.log($('#a123')); // 获取id名为a123的元素
   console.log($('.a, .b')); // 获取类名为a和类名为b的元素

2、层级选择器: 后代选择器(空格)、直接子元素(>)、下一个(+)、后面所有的(~)

后代选择器： $(‘父元素子元素’)
直接子元素选择器： $(‘父元素>子元素’)
紧邻下一个： $(‘元素+兄弟元素’)
后面兄弟: $(‘元素~兄弟’)

   console.log($('ul li'));  // 获取ul中所有的li元素
   console.log($('ul > li')); // 获取ul的直接子元素li元素
   console.log($('div + span')); // 获取div的紧邻的下一个span标签 next
   console.log($('div ~ span')); // 获取div后面所有的span标签 nextAll

3、过滤选择器: 基本过滤, 属性选择器, 表单选择器

基本过滤选择器

   $('ul li:first').css('background', 'red'); // ul下的第一个li
   $('ul li:last').css('background', 'red'); // ul下的最后一个li
   $('ul li:not(.box)').css('background', 'blue'); // ul下的类名不为box的li
   $('ul li:even').css('background', 'orange'); // 获取li下标为偶数
   $('ul li:odd').css('background', 'grey'); // 获取li下标为奇数
   $('ul li:eq(3)').css('background', 'red'); // 获取li下标为3
   $('ul li:gt(3)').css('background', 'blue'); // 获取li下标大于3
   $('ul li:lt(3)').css('background', '#f0f'); // 获取li下标小于3

属性过滤选择器

   $('li[id]').css('background', 'red'); // 有id属性的li
   $('li[class=a]').css('background', 'red'); // class值为a的li
   $('li[class!=a]').css('background', 'blue'); // class值不为a的li
   $('li[class^=box]').css('background', 'grey'); // class值以box为开头的li
   $('li[class$=a]').css('background', 'orange'); // class值以a为结尾的li
   $('li[class*=a]').css('background', '#ff00ff'); // class值包含a的li

表单选择器

   console.log($(':checked')); // 所有被选中的input
   console.log($(':text')); // 获取类型为text的input元素
   console.log($(':password')); //获取类型为password的input元素
   console.log($(':radio')); // 单选按钮
   console.log($(':checkbox')); // 复选框
   console.log($(':submit')); // 提交按钮
   console.log($(':reset')); // 重置按钮
   console.log($(':file')); // 文件
   console.log($(':image')); // 图片
   console.log($('textarea'));
   console.log($('option'));
   console.log($(':input')); // 获取到所有的input类标签, input textarea select

三、遍历节点

1、子节点

jq对象.children([选择器]);

   console.log($('ul.a').children()); // ul下所有的子元素, 只找一层
   console.log($('ul').children('span')); // ul下标签名为span的元素

2、父节点

直接父元素: jq对象.parent()
所有父元素: jq对象.parents([选择器])

   // 父元素
   console.log($('.box').parent());
   console.log($('.box').parents());
   console.log($('.box').parents('ul.a'));

3、兄弟节点

上一个: jq对象.prev();
上面所有: jq对象.preAll([选择器])
下一个: jq对象.next()
后面所有的: jq对象.nextAll([选择器])
所有的兄弟节点: jq对象.siblings([选择器])

   // 兄弟节点
   console.log($('.one').prev());
   console.log($('.one').prevAll());
   console.log($('.one').prevAll('div'));
   
   console.log($('.one').next());
   console.log($('.one').nextAll());
   console.log($('.one').nextAll('span'));
   
   console.log($('.one').siblings());
   console.log($('.one').siblings('div,span'));

4、过滤节点

查找: 父元素.find(选择器)
过滤: 元素.filter(选择器)
排除: 元素.not(选择器)

   console.log($('ul.a').find('div')); // 从父元素中去查找子元素
   $('li').filter('.box').css('background', 'red'); // 从自身集合筛选
   $('li').not('.box').css('background', 'blue');// 从自身集合筛选

四、操作元素的属性

1、attr

jq对象.attr(‘属性名’, [‘属性值’]); 没有属性值时，为获取值, 获取第一个的值; 有属性值时，为设置, 遍历设置(隐式迭代)

   var a = $('div').attr('id');
   console.log(a);
   $('div').attr('id', 'b2);

2、 prop

jq对象.prop(‘属性名’, [‘属性值’]); 没有属性值时，为获取值, 获取第一个的值; 有属性值时，为设置, 遍历设置(隐式迭代)

    console.log($(':radio').prop('checked')); // false

3、attr 和prop 区别

固有属性使用prop，prop不能设置操作自定义属性, attr可以
如果设置属性名就起作用的情况下就用prop, 表单类操作使用prop

   console.log($(':radio').attr('checked')); // undefined
   console.log($(':radio').prop('checked')); // false
      
   console.log($('.a').attr('tag', '1234'));
   console.log($('div').prop('tag')); // undefined
   console.log($('div').prop('tag', '123456789')); // 设置不上

4、jquery方法特性

可以链式调用: 每次方法调用结束以后, 将被调用的jq对象或者是处理以后的jq对象返回回来
取赋值一体化: 同一个方法，既可以获取值，也可以设置值
遍历设置，获取第一个(大部分)

五、操作类名class

1、添加删除(addClass removeClass)

添加类名: jq对象.addClass(要添加的类名)

   $('.a').addClass('b c');

删除: jq对象.removeClass(要删除的类名)

   $('button').click(function(){
    
    
       $('div').removeClass('a b');
   });

2、切换(toggleClass)

有就删除没有就添加: jq对象.toggleClass(要操作的类名)

   $('button').click(function(){
    
    
       $('div').toggleClass('a b');
   });

3、包含某个类名（hasClass）

是否有某个类名: jq对象.hasClass(要判断的类名) 返回true–false(true代表有，false代表没有)

   $('button').click(function(){
    
    
       // $('div').removeClass('a b');
       $('div').toggleClass('a b');
       console.log($('div').hasClass('a'));
   });

4、判断当前的元素是不是某个选择器

jq对象.is(‘选择器’) true–是，false-不是

   $('button').click(function(){
    
    
       // $('div').removeClass('a b');
       $('div').toggleClass('a b');
       console.log($('div').hasClass('a'));
       console.log($('div').is('.a'));
   });

六、操作样式: .css()

1、获取

   获取: jq对象.css(‘属性名’);

2、设置

   .css('属性名', '属性值');  
   .css({
    
      
        '属性名': '属性值',  
        '属性名1': '属性值1'  
          });

   // 获取
   console.log($('div').css('width')); // 200px
   console.log($('div').css('background-color')); // rgb(255, 0, 0)
   
   // 设置
   $('div').css('background', '#00f0ff');
   $('div').css({
    
    
       'opacity': 0.7,
       'width': '300px',
       'height': 500      // 注意: 直接写数字会自动转成像素
   });

*. 注意: 加引号时，连字符可以不转驼峰命名法，不加引号，必转驼峰命名法直接写数值会自动加上单位

七、操作内容

1、text([值])

取值: jq对象.html();
设置: jq对象.html(要设置的内容)
获取第一个选择器标签的内容，设置的时候遍历设置, 后面的会覆盖前面的, 可以识别标签

2、html([值])

取值: jq对象.text();
设置: jq对象.text(要设置的内容)
获取所有符合选择器的内容, 遍历设置, 后面的会覆盖前面的, 不能识别标签

   console.log($('div').text());//获取内容
   console.log($('div').html());//获取内容--只获取第一个
   
   $('div').text('这是新的内容');// 遍历设置, 后面的会覆盖前面的, 不能识别标签
   $('div').html('<em>这是新的内容</em>');//添加内容

*注意：text获取到所有符合条件的文本内容,html只获取第一个

八、操作表单

获取表单的值: jq对象.val(); 获取第一个

   console.log($(':input').val());

设置表单的值: jq对象.val(要设置的值); 遍历设置

   $(':text').val('这是新的文本内容');

设置单选框: jq对象.val([要设置的值])

   console.log($(':radio').val());
   $(':radio').val(['man']);

设置复选框: jq对象.val([要设置的值, 要设置的值2])

   $(':checkbox').val(['LOL', 'DNF']);

获取、设置select的值

   console.log($('select').val());
   $('select').val('Chengdu');

九、循环

1、each

语法：
$.each(要遍历的对象, callback);
$.each(要遍历的对象, function(index, value){})
index–下标 value-值

遍历数组

   var arr = [1,2,3,4,5,6,7];
   var b = $.each(arr, function(index, value){
    
    
       console.log(index, value);
       return value * value;
   });

遍历集合

   $.each($('li'), function(index, value){
    
    
       console.log(index, value);
       $(value).click(function(){
    
    
           console.log(this, index);
       });
   });

遍历对象

   var obj = {
    
    
       'name': '彭于晏',
       'height': 180,
       'weight': 150
   };
   // $.each(要遍历的对象, function(key, value){}); key--键 value-值
   var a = $.each(obj, function(key, val){
    
    
       console.log(key, val);
       return key + 1;
   });
   console.log(a);//{name: "彭于晏", height: 180, weight: 150}

注意： each: 没有返回值, 没有办法通过return设置返回值,返回的是被调用的对象。

2、map

语法：
$.map(要遍历的对象, function(value, index){});

   var arr = [1,2,3,4,5,6,7];
   var a = $.map(arr, function(value, index){
    
    
       console.log(index, value);
       return value * value;
    });
   console.log(a); // 没有设置返回值的时候,返回空数组, map有返回值，通过return设置
   var b = $.map($('li'), function(value, index){
    
    
       console.log(index, value);
       $(value).click(function(){
    
    
           console.log(this, index);
       });
   });
   console.log(b);
   var obj = {
    
    
        'name': '彭于晏',
        'height': 180,
        'weight': 150
   };
    
   var c = $.map(obj, function(val, key){
    
    
       console.log(key, val);
       return val;
   });
   console.log(c); // 数组

十、元素宽高

1、获取元素宽高

jq对象.width(): 元素的宽内容
jq对象.height(): 元素的高内容
jq对象.position(); 元素的距离具有定位属性的父元素的距离, 如果没有定位属性的父元素, 就是距离body的距离

   console.log($('div').css('width'));
   console.log($('div').width());
   console.log($('div').height());
   console.log($('div').position()); // {top: 0, left: 8}
   console.log($('div').position().left);

2、client系列

client: width + padding

innerWidth/ innerHeight(): 可视宽高
$(window).innerWidth(): 屏幕可视宽
$(document).innerWidth(): 页面的可视宽高

   console.log($('div').innerWidth()); // 240
   console.log($(window).innerWidth());
   console.log($(document).innerHeight());

3、offset系列

offset: width + padding + border

outerWidth/Height(boolean): 元素的占位宽高

默认值是false, 如果设置成true: 表示计算margin
jq对象.offset()：获取距离body的距离

   console.log($('div').outerWidth()); // 255
   console.log($('div').outerWidth(false)); // 255 
   console.log($('div').outerWidth(true)); // 295
   console.log($('div').offset());
   console.log($('div').offset().left);

4、scroll系列

$(window).scrollTop(); 获取页面的滚动距离

   $(window).scroll(function(){
    
    
       console.log($(window).scrollTop());
   });

十一、节点操作

1、创建节点

var 变量 = $('<li></li>');

var li = $('<li>12345</li>');//创建节点
console.log(li);

2、添加节点

追加到父元素中

$(父).append(子);

$(子).appendTo(父);

*注意: 如果追加一个已存在的节点(已经在页面中渲染的), 会发生物理位移;

   // $('ul').append(li);
   // li.appendTo($('ul'));
   li.appendTo('ul');
   // li.appendTo('div');

添加到父元素的头部

$(父).prepend(子);

$(子).prependTo(父);

   var li1 = $('<li>这是一个新的</li>');
   // $('ul').prepend(li1);
   li1.prependTo('ul');

添加到某个元素之前

$(参考节点).before(新节点);

$(新节点).insertBefore(参考节点);

   var li2 = $('<li>这是中简元素</li>');
   // $('ul li:eq(3)').before(li2);
   li2.insertBefore('ul li:eq(3)');

添加到某个元素之后:

$(参考节点).after(新节点);

$(新节点).insertAfter(参考节点);

   var li3 = $('<li>这是节点之后的节点</li>');
   // $('ul li:eq(2)').after(li3);
   li3.insertAfter('ul li:eq(2)');

3、删除节点

remove(); 删除自身及子元素，返回被删除的元素，方便下次使用不保存原来的行为
detach(); 删除自身及子元素，返回被删除的元素，方便下次使用保存原来的行为
empty(); 清空子节点

   $('button').click(function(){
    
    
       var m = $('li').eq(0).remove();
       console.log(m);
       m.appendTo('ul');//remove删除--不保留行为
   
       var b = $('li').eq(1).detach();
       console.log(b);
       b.appendTo('ul');//detach删除--保留行为
   
       $('ul').empty();
   });

4、克隆节点

jq对象.clone(boolean); 返回克隆的节点
不传/false的时候，不克隆行为传true表示克隆之前的行为

   $('li').click(function(){
    
    
       $(this).css({
    
    'background': 'red'});
  });
   var m = $('li:eq(0)').clone();
   console.log(m);
   m.appendTo('ul');

  var b = $('li:eq(1)').clone(true);//参数传参为true-克隆行为
  console.log(b);//
  b.appendTo('ul');

5、替换节点

$(参考节点).replaceWith(新节点);
$(新节点).replaceAll(参考节点);

   var li = $('<li>12132</li>');
   // $('li').replaceWith(li);
   li.replaceAll('li');

十二、事件

1、事件对象

事件对象以事件处理函数的第一个参数存在
常用属性:

   $('div').click(function(ev){
    
    
       console.log(ev); // jQuery.Event  jq的事件对象
       console.log(ev.originalEvent); // 原生的事件对象
       console.log(ev.pageX,ev.pageY);  // 鼠标相对于页面的距离
       console.log(ev.clientX, ev.clientY); // 鼠标距离可视区域的距离
       console.log(ev.screenX, ev.screenY); // 鼠标相对于屏幕的距离
       console.log(ev.offsetX, ev.offsetY); // 鼠标相对于触发元素左上角的距离   点击边框会出现负值
       console.log(ev.which); // 相当于是keyCode, 比keyCode更强大, 保存了鼠标的键, 123(左中右)
       console.log(ev.target); // 事件的触发源
       console.log(ev.delegateTarget); // 事件的绑定对象
       console.log(ev.type); // 事件类型
       console.log(ev.ctrlKey, ev.shiftKey, ev.altKey); // 相对应的键是否被按下
   
       // 阻止冒泡: ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
       ev.stopPropagation(); // 阻止冒泡
       // 阻止默认事件: ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
       ev.preventDefault(); // 阻止默认事件
       return false; // 阻止冒泡+默认事件
   });

2、事件绑定

on: jq对象.on();
1. 给同一个事件添加不同的处理函数

   function f1(){
    
    
          alert(1);
      }
   function f2(){
    
    
          console.log(2);
      }
   $('div').on('click', f1);
   $('div').on('click', f2);

给不同的事件添加同一个处理函数

   $('div').on('click mouseover', f2);

给不同的事件添加不同的处理函数

   $('div').on({
    
    
          'click': f1,
          'mouseover': f2,
          'mouseout': function(){
    
    
               console.log(3);
          }
   });

添加自定义事件

   $('div').on({
    
    
       'eat': function(){
    
    
            console.log('你吃饱了吗？');
        }
    });
      
    $('button').click(function(){
    
    
        $('div').trigger('eat'); // 触发自定义事件
    });

事件委托

$(父).on(事件类型, 子元素, 事件处理函数)

   $('ul').on('click', 'li,div', function(){
    
    
       console.log(this);
       $(this).css('background', 'red');
   });

3、事件移除

jq对象.off(事件类型, 事件处理函数);

//原生js方法：removeEventListener detachEvent
   $('ul').off('click'); // 移除所有的点击事件
   $('ul').off('click.a'); // 移除click下的a处理函数
   $('ul').off('click', f1); // 移除点击下的f1处理函数

4、一次性事件 one

one与on的用法完全一致， one是一次性事件

  $('ul').one('click', function(){
    
    
       console.log(1);
   });
   
   $('ul').on('click', function(){
    
    
       console.log(2);
       $('ul').off('click');
   });

5、合成事件

$().hover(滑入事件, 滑出事件);

*注意: 如果只写一个函数表示滑入滑出同一个处理函数，避免这么写

  $('div').hover(function(){
    
    //滑入
       console.log(1);
   }, function(){
    
    //滑出
       console.log(2);
   });

十三、深浅拷贝

1、浅拷贝

$.extend(dest, src1, src2…) dest:要拷贝的对象 src: 被拷贝的数据会改变拷贝对象
浅拷贝: 在拷贝的时候，如果属性名重复，那么就用后面的覆盖前面的

   var obj = {
    
    
       a: {
    
    
           e:1
       },
       b: 2
   };
   var obj1 = {
    
    
       b:3,
       e: 'f'
   };
   var obj2 = {
    
    
       c: 3
   };
   // var m = $.extend(obj, obj1, obj2);
   // console.log(obj);
   // console.log(m);
   
   var n = $.extend({
    
    }, obj, obj1, obj2);
   console.log(n); // 不改变原数据

2、深拷贝

$.extend(true, dest, src1, src2, …) dest:要拷贝的对象 src: 被拷贝的数据会改变拷贝对象
深拷贝:第一个参数设置为true的时候，进行深拷贝(递归拷贝), 如果属性名重复并且是对象, 对比下一层级的属性，如果属性名相同就用后面的覆盖前面的，如果还是对象，继续对比下一层级.

   var mn = $.extend(true, {
    
    }, obj, obj1, obj2);
   console.log(mn);

十四、动画

1、show hide toggle（改变 width + height + opacity）

show hide toggle
没有参数的时候, 没有动态效果
语法：show(speed, easing, callback);

speed: 时间 ms

easing: 运动曲线 linear swing

callback: 动画执行结束之后的回调函数

   $('button').click(function(){
    
    
       $('div:eq(0)').show(10000, 'linear', function(){
    
    
           console.log(1);
       });
       $('div:eq(1)').show(10000, 'swing', function(){
    
    
           console.log(2);
       });

       $('div:eq(0)').hide(10000, 'linear', function(){
    
    
           console.log(1);
       });
       $('div:eq(1)').hide(10000, 'swing', function(){
    
    
           console.log(2);
       });

       $('div:eq(0)').toggle(1000);
       $('div:eq(1)').toggle(1000);
   });

2、fade系列（改变透明度）

fadeIn fadeOut fadeToggle（参数为 speed, easing, callback）

speed: 时间 ms

easing: 运动曲线 linear swing

callback: 动画执行结束之后的回调函数
fadeTo: jq.fadeTo(speed, to透明度, easing, callback)

   $('button').click(function(){
    
    
       $('div').eq(0).fadeOut(5000, 'linear', function(){
    
    
           console.log(1);
       });
       $('div').eq(1).fadeOut(5000, 'swing');

       $('div').fadeIn(1000, 'linear');

       $('div').fadeToggle(400);

       $('div').fadeTo(1000, 1);
    });

3、slide系列（改变height）

slideDown slideUp slideToggle: height

slideDown(speed, easing, callback);

speed: 时间 ms

easing: 运动曲线 linear swing

callback: 动画执行结束之后的回调函数

  $('button').click(function(){
    
    
      $('div').eq(0).slideDown(10000, 'linear');
      $('div').eq(1).slideDown(10000, 'swing');
      $('div').slideUp(1000);
      $('div').slideToggle(1000);
});

4、animate 自定义动画

jquery对象.animate(动画参数, speed, easing, callback)

动画参数: 对象属性名: 结束值

   $('button').click(function(){
    
    
       $('div').eq(0).animate({
    
    
           // 'width': 500,
           'width': '+=100',
           'height': '500px'
       }, 2000, 'linear', function(){
    
    
           console.log(1);
       });
   });

jquery对象.animate(动画参数, 配置参数);

配置参数:

duration: 运动时长, ms

step: 每一步动画执行之后的回调函数

complete:动画执行完成后的回调函数

easing: 运动曲线

queue: 是否队列

   $('button').click(function(){
    
    
       $('div').eq(0).animate({
    
    
           'width': 500,
           'height': 500
       }, {
    
    
           'duration': 400,
           'step': function(){
    
    
               console.log(1);
           },
           'complete': function(){
    
    
               console.log(2);
           },
           'queue': true
       }).animate({
    
    
           'width': '+=100',
           'height': '+=100'
       }, {
    
    
           'duration': 2000,
           'step': function(){
    
    
               console.log(1);
           },
           'complete': function(){
    
    
               console.log(2);
           },
           'queue': true
       }).animate({
    
    
           // 'width': 100,
           // 'height': 100
           'opacity': 0.1
       }, {
    
    
           'duration': 400,
           'step': function(){
    
    
               console.log(1);
           },
           'complete': function(){
    
    
               console.log(2);
           },
           'queue': false
       });
   });

5、动画队列

动画连缀的时候，所有的动画都会自动加入队列

    // 1. 动画连缀的时候，所有的动画都会自动加入队列
   $('div').eq(0).animate({
    
    width: '+=100'}).animate({
    
    'height': '+=100'}).slideUp();

写动画参数的时候，show hide toggle可以直接用

   // 2. 写动画参数的时候，show hide toggle可以直接用
   $('div').animate({
    
    'width': 'hide'}).animate({
    
    'width': 'show'});

.css不是动画，不会进入队列, 动画开始的时候与动画一起执行

   // 3. .css不是动画，不会进入队列, 动画开始的时候与动画一起执行
   $('div').animate({
    
     'width': 500, 'marginTop': 100 }, 2000).css({
    
     'background': '#097ff2', 'width': 1000 });

手动设置动画队列 .queue(callback)
- 手动加入队列之后的动画均不再执行
- 调用回调函数中的第一个参数(函数)后面的动画继续执行

   $('button').click(function () {
    
    
       // 4. 手动设置动画队列 .queue(callback)
       $('div')
              .animate({
    
     'width': 500, 'marginTop': 100 }, 2000)
              .queue(function (next) {
    
    
                  $(this).css({
    
     'background': '#097ff2', 'width': 1000 });
                  console.log(next); // 存储后面队列中动画的函数
                  next();//调用该函数 后面的动画才能执行
              })
              // 手动加入队列之后的动画均不再执行
              .animate({
    
    'height': 500});
      });

6、是否动画

.is(’:animated’) 判断当前是不是在动画中 true–正在动画 false–没有动画

   $('button').click(function () {
    
    
       console.log($('div').is(':animated'));
       if (!$('div').is(':animated')) {
    
    
       $('div')
            .animate({
    
     'width': 500, 'marginTop': 100 }, 2000)
            .queue(function (next) {
    
    
                $(this).css({
    
     'background': '#097ff2', 'width': 1000 });
                console.log(next); // 存储后面队列中动画的函数
                next();
            })
            .animate({
    
     'height': 500 });
    }
});

7、停止动画

.stop(是否清除队列, 是否到达目标值)

清除队列: true:当前往后的所有动画都清除 false/不传: 只是停止当前动画
到达目标值: true: 当前动画是否直接到达目标值 false/不传: 不到达目标值

   $('a').click(function(){
    
    
       $('div').stop(true, true);
   });

.finish(): 直接将所有动画结束并且到达目标值

   $('a').click(function(){
    
    
       $('div').finish();
   });

8、延迟动画

.delay(时间(ms)) 让动画延迟多久之后在执行

   $('button').click(function () {
    
    
        $('div')
              .animate({
    
     'width': 500, 'marginTop': 100 }, 10000)
              .delay(5000) // 让动画延迟多久之后在执行
              .animate({
    
     'height': 500 }, 10000);
});

十五、ajax

1、优缺点

优点	缺点
不需要任何插件支持	破坏浏览器前进,后退,按钮的正常功能
优秀的用户体验	对搜索引擎的支持不足
提高web程序的性能	-
减轻服务器和带宽的压力	-

优点

不需要任何插件支持

Ajax 不需要任何浏览器插件，就可以被绝大多数主流浏览器所支持，用户只需要允许javascript在浏览器上即可。
优秀的用户体验

这是Ajax技术的最大的优点，能在不刷新整个页面的前提下更新数据，这使得Web应用程序能更为迅速的回应用户操作。
提高web程序的性能

与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式上，在传统模式中，数据提交是通过表单（form）来实现的，而数据获取是靠全页面刷新来重新获取整夜内容。Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据，即按需发送。
减轻服务器和带宽的压力

Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。它在客户端创建Ajax引擎，把传统方式的下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。

缺点

破坏浏览器前进,后退,按钮的正常功能

在传统的网页中，用户经常会习惯性的使用浏览器自带的“前进”，“后退”按钮，然而Ajax改变了此Web浏览习惯。在Ajax中前进，后退按钮都会失效。虽然通过一定的方法（添加锚点）来使得用户可以使用“前进”，“后退”按钮，但相对于传统方法却麻烦很多。
对搜索引擎的支持不足

对于搜索引擎也是支持Ajax的一项缺憾。通常搜索引擎都是通过爬虫程序来对互联网上的数以万计的数据来进行，对Javascript望而生畏。

2、$.ajax

$.ajax({请求参数})

参数	说明
url	请求地址
data	请求数据字符串、对象
type	请求数据类型
success	请求成功的回调函数
error	请求失败的回调函数
complete	请求完成的回调函数
timeout	超时时间(ms)
dataType	设置请求接受的数据类型: json, xml, html, script, text , jsonp
global	是否触发全局的ajax事件
async	是否异步
cache	是否走缓存

   var obj = {
    
    
       a: 3,
       d: 4
   }
   var arr = [1,2,3];
   $.ajax({
    
    
       'url': 'a.txt',
       'data': obj,
       'type': 'get',
       'success': function(res){
    
    
           console .log(res);
    },
       'error': function(res){
    
    
           console.log(res); // ajax对象
           $('body').html(res.responseText);
    },
    'complete': function(r){
    
    
           console.log(r); // ajax对象
    },
    'timeout': 1000, // 1毫秒内没有返回值则停止请求返回超时提示
    'dataType': 'html' 
});

3、$.get

$.get(url, [data], callback)

$.get('a.txt', function(res){
    
    
    console.log(res);
});

4、$.post

$.post(url, [data], callback)

$.post('a.txt', function(r){
    
    
    console.log(r);
});

5、get和post优缺点

get请求	post请求
用于获取数据	用于提交数据
请求参数拼接在地址后面	请求参数在http请求体
长度有限制, 2kb	没有限制
安全级别比较低	安全级别比较高
如果有中文字符需要自己去进行编码	对外数据不可见

6、jsonp

jsonp: json with padding 非标准传输方式
原理: 通过动态的向页面中添加script标签，并且将src设置成请求地址的方式，来实现跨域请求

6、跨域

产生跨域的问题：浏览器对JavaScript的同源策略的限制

  1. 不同服务器
  2. 同一服务器，不同端口
  3. 协议不同

跨域解决

function showData(res){
    
    
    console.log(res);
}
$('body').append('<script src="https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1&callback=showData"><\/script>');

7、jsonp

jsonp: json with padding 非标准传输方式
原理: 通过动态的向页面中添加script标签，并且将src设置成请求地址的方式，来实现跨域请求

   var url = "https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1";
   function a(res){
    
    
       console.log(res);
}
   $.ajax({
    
    
       'url': url,
       'dataType': 'jsonp',
       'success': function(res){
    
    
            console.log(res);
    },
    'jsonpCallback': 'a'
});

*jsonpCallback用来接收跨域请求的回调函数, 如果没有设置jsonpCallback, 由success的函数来充当回调函数

8、ajax和jsonp的关系

ajax: 核心 XMLHttpRequest 对象
jsonp: 动态的向页面中添加script标签

十六、数据串联化

form表单使用

form.serialize(): name=value&name1=value1//返回值为拼接的字符串
form.serializeArray(): [{name: name值, value: value值}]//返回数组对象

   $('button').click(function(){
    
    
       var m = $('form').serialize();
       var n = $('form').serializeArray();
       console.log(m);
       console.log(n);
   });

十七、插件拓展

1、插件分类

对象级别插件: .css .attr
类级别的插件: $.ajax $.extend $.each $.map

2、拓展插件

对象级别插件:

$.fn.extend({

‘方法名’: 函数,

‘方法名2’: 函数2

});

 // 获取父节点的第一个子节点:  1. 隐式迭代  2. 返回值
   $.fn.extend({
    
    
       'getFirst': function(){
    
    
        console.log(this);
        console.log($(this).children().eq(0));
        return $(this).children().eq(0);
        },
        'getLast': function(){
    
    
              return $(this).children().eq($(this).children().length - 1);
         }
   });
   $('ul').getFirst().css('background', 'red');
   $('ul').getLast().css('background', 'red');

类级别插件

$.extend({

‘方法名’: 函数,

‘方法名2’: 函数2

});

// 给字符串去除左右空格
   var a = '       1234   567   ';
       console.log(a);
       $.extend({
    
    
           getTrim: function(str){
    
    
               var leftReg = /^\s*/;
               var rightReg = /\s*$/;
               console.log(str.replace(leftReg, '').replace(rightReg, ''));
               return str.replace(leftReg, '').replace(rightReg, '');
           } 
      });
      var mn = $.getTrim(a);
      console.log(mn);

十七、zepto

zepto.js: 轻量级的jquery, 针对移动端使用的js库, 只支持ie10+, 顶级变量: $
自带5个插件: zepto form ie ajax event

1、 zepto与jquery的区别

zepto	jquery
width() - - width + padding + border	width
定位距离： offset()- - width height left top	left top
无	有 outerWidth innerWidth

   console.log($('div').width()); // 246=width + padding + border
   (function ($) {
    
    
       console.log($('div').width()); // 200=width 
   })(jQuery);

   console.log($('div').offset());//width height left top
   (function ($) {
    
    
       console.log($('div').offset());//top,left
   })(jQuery);

2、 zepto手势事件:

单机： tap 双击: doubleTap
长按: longTap(>750ms)
滑动: (滑动距离>30px触发, 不要求全部在元素内部滑动)

swipe swipeLeft swipeRight swipeUp swipeDown

   $('div').on('tap doubleTap longTap swipe swipeLeft swipeRight swipeUp swipeDown', function(ev){
    
    
        console.log(ev.type);
      });

十八、jquery案例练习

jquery案例练习源码

1、手风琴显示图片效果

在这里插入图片描述

2、方块旋转变色

在这里插入图片描述

3、表格数据渲染删除操作

在这里插入图片描述

4、jquery写轮播图

在这里插入图片描述

jQuery知识点.md

jQuery学习

一、jQuery和$的关系

1、 ready

2、jQuery对象和DOM对象互转

二、选择器

1、基本选择器: 标签 类名 id 组合

2、层级选择器: 后代选择器(空格)、直接子元素(>)、下一个(+)、后面所有的(~)

3、过滤选择器: 基本过滤, 属性选择器, 表单选择器

三、遍历节点

1、子节点

2、父节点

3、兄弟节点

4、过滤节点

四、操作元素的属性

1、attr

2、 prop

3、attr 和prop 区别

4、jquery方法特性

五、操作类名class

1、添加 删除(addClass removeClass)

2、切换(toggleClass)

3、包含某个类名（hasClass）

4、判断当前的元素是不是某个选择器

六、操作样式: .css()

1、获取

2、设置

七、操作内容

1、text([值])

2、html([值])

八、操作表单

九、循环

1、each

2、map

十、元素宽高

1、获取元素宽高

2、client系列

3、offset系列

4、scroll系列

十一、节点操作

1、创建节点

2、添加节点

3、删除节点

4、克隆节点

5、替换节点

十二、事件

1、事件对象

2、事件绑定

3、事件移除

4、 一次性事件 one

5、 合成事件

十三、深浅拷贝

1、 浅拷贝

2、 深拷贝

十四、动画

1、show hide toggle（改变 width + height + opacity）

2、fade系列（改变透明度）

3、slide系列（改变height）

4、animate 自定义动画

5、动画队列

6、是否动画

7、停止动画

8、延迟动画

十五、ajax

1、优缺点

2、$.ajax

3、$.get

4、$.post

5、get和post优缺点

6、jsonp

6、跨域

7、jsonp

8、ajax和jsonp的关系

十六、数据串联化

十七、插件拓展

1、插件分类

2、拓展插件

十七、zepto

1、 zepto与jquery的区别

2、 zepto手势事件:

1、基本选择器: 标签类名 id 组合

1、添加删除(addClass removeClass)

4、一次性事件 one

5、合成事件

1、浅拷贝

2、深拷贝