初识

复制console.log($ == jQuery);// true jQuery 就是 $ 等价的
js

页面加载

复制$(document).ready(function(){});// 相当于原生 window.onload（DOMContentLoaded）
js

比 onload 先执行

复制$(function(){})// 简写
js

只需要文档结构加载完毕后执行，onload 是文档和资源媒体加载完成。

DOM节点对象转换

jq 的 DOM 节点与原生 DOM 节点互转

复制// jq 转原生
console.log($(this));// 返回 jq 对象

// init 数组对象 通过下标获取到的就是原生的 DOM
console.log($('#box')[0]);
console.log($('#box').get(0));
$('#box').get(0).innerHTML = '哈哈';

## 让出 $ 的使用权限

jQuery.noConflict();
console.log($); // undefind
// 闭包 将 jQuery 传到闭包中的 $ 在闭包函数中又可以使用 $ 来进行 jq 的操作

;(function($){
  $(function(){
​    console.log($('#box'));
  })
})(jQuery)

// 给 $ 起个名字
var jq = jQuery.noConflict(true);
console.log(jq('#box'));
js

$ 下常用的方法

复制// 可以遍历数组，对象，jq元素
$.each(obj, function(key, value){
  console.log(key + ':' + value);
})
js

还可以 $(‘选择器’).each() // 遍历元素 工具级别

复制var newArr = $.map(arr,function(item){
  return item  item  item; 
})有返回值
$.type()  输出当前数据类型  typeof
$.trim()  删除字符串前后的空格
$.inArray()  indexOf()
$.proxy()  功能类似于bind $.proxy()
$.noConflict() 给$起个别名
$.parseJSON()  JSON.parse()
$.makeArray()  将伪数组转成数组。 Array.from()
js

JQuery 选择器

基本选择器

复制$('#box')// id 选择
$('.aa')// 类名选择
$('li')// 标签选择
js

层级选择器

复制$('ul li') // 后代 li
$('ul>li') // 子代的 li
$('#li1+li')// #li1 的下一个兄弟 li
$('#li1~li')// #li1 的所有的弟弟 li
js

基本过滤选择器

复制$('li:first')// 获取第一个元素
$('li:last')// 获取最后一个元素 
$('li:not(#li1)')// 排除
$('li:odd')// 选择索引奇数---显示的偶数行
$('li:even')// 选择索引偶数---显示奇数行
$('li:eq(3)')// 等于索引
$('li:gt(3)')// 大于索引
$('li:lt(3)')// 小于索引
// 选取索引为 n 的 li
$('li:eq(' + n + ')')
$('li').eq(n)
js

属性过滤选择器

复制$('li[name]')// 带有 name 属性的 li
$('li[name=lucy]')// name 属性值为 lucy 的 li
$('li[name!=joy]')// name 属性不为 joy 的 li
$('li[name=o]')// name 属性值包含 o 的 li
$('li[name^=j]')// name 属性的值以 j 开头的
$('li[name$=y]')// name 属性的值以 y 结尾的
js

表单选择器

复制$('input')// 标签 input
$(':input')// 不论标签名 只要是表单元素 都选取
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':button')
js

JQuery DOM 节点操作

DOM 节点遍历

遍历节点

复制$('ul').children()// ul 下的所有子节点
$('ul').children('p')// ul 下的 p 子节点
$('ul').find('p')// ul 下的所有后代 p
$('#box').next()// box 的下一个兄弟
$('#box').nextAll()// box 的下边的所有兄弟
$('#box').prev()// box 上一个
$('#box').prevAll()// 上边所有的兄弟
// box 的所有的兄弟节点（之前的和之后的全算）
$('#box').siblings()
$('#box').siblings('p')
js

遍历父节点

复制$('#box').parent()// 真正的父节点
$('#box').parents()// 所有的祖先节点
$('#box').parents('div')// 所有祖先中的 div
js

遍历节点 - 过滤

复制$('#box').find('li')// find 获取后代元素
$('li').filter('.aa')// filter 过滤找到满足条件的元素
$('li').not('.aa')// not 排除满足条件的元素 选择其他元素
js

属性操作

复制$('#box').attr('title')// 获取
$('#box').attr('title','xixi');// 设置
// 批量设置
$('#box').attr({
  title: 'heihei',
  sex : 'female'
})
$('#box').removeAttr('sex');// 删除属性
js

属性值为 true 和 false 的属性操作

复制$(':checkbox').attr('checked');// 获取 --> checked
$(':checkbox').prop('checked');// 获取 --> true
$(':checkbox').prop('checked', true);// 设置
js

class操作

复制$('#box').addClass('red');// 添加类 red
$('#box').removeClass('red');// 删除 red
js

判断该元素 box 上是否有 red

复制$('#box').hasClass('red') // Boolean
$('#box').is('.red')// Boolean
js

切换类名 toggleClass

复制$('#box').toggleClass('red');
js

css操作

复制// 获取样式
$('#box').css('width')
// 设置
$('#box').css('background','red');
// 批量设置
$('#div1').css({
  width:'200px',
  fontSize:'18px'// font-size 去-变驼峰
})
js

html 文本与值的操作

• innerHTML —> html()
• innerText —> text()
• 表单value —> val()

复制$('#s1').html() // 获取 识别标签
$('#s1').text() // 获取 只识别文本

// 设置
$('#box').html('<i>过年好！</i>');// 会识别标签
$('#box').text('<i>过年好！</i>');// 不会识别

// 表单的value
$(':text').val()
$(':text').val('ddddd');
js

Node 操作

• 创建元素

复制 $('<li></li>')
js

• 添加节点
  • 在元素尾部添加
  • 新元素.appendTo(目标元素)

复制  $('<li>国庆节</li>').appendTo($('#list'));
js

目标.append(新元素)

• 在元素头部添加
  • 新元素.prependTo(目标元素)
  • 目标.prepend(新元素)

复制  $('#list').prepend($('<li>元旦节</li>'))
js

• 在目标元素之前插入
  • 新元素.insertBrfore(目标元素)
  • 目标元素.before(新元素)

复制  $('<li>情人节</li>').insertBefore($('#list li').eq(2));
js

• 在目标元素之后插入
  • 新元素.insertAfter(目标元素)
  • 目标元素.after(新元素)

复制  $('#list li').eq(3).after($('<li>妇女节</li>'));
js

• 删除节点

复制remove():  将节点删除，返回被删除的节点，不会保留节点上的事件
detach():  将节点删除，返回被删除的节点，会保留节点上的事件
empty():  全部清空
js

• 克隆节点

复制clone（）  复制节点及内容，但不保留节点上的事件
clone（true）复制节点及内容，保留节点上的事件
js

• 替换节点
  • 新节点.replaceAll(要被替换的节点)
  • 要被替换的节点.replaceWith(新节点)

复制$('#list li').eq(2).replaceWith($('<li>女神节</li>'));
js

数据串联

serialize()

复制<input type="text" name = 'a' value = '1'/>
<input type="text" name = 'b' value = '2'/>
<input type="text" name = 'c' value = '3'/>
$("input").serialize()// a=1&b=2&c=3
$("input").serializeArray()// [{{name: "a", value: "1"}}, {…}, {…}]
js

add 和 slice

复制$("div").add("span").add("ul li").css("backgroundColor", 'red')
// 等同于
$("div,span,ul li").css("backgroundColor", 'red')// 与add一样
$("ul li").slice(1, 4).css("backgroundColor", 'red');// 获取从1到4的 li元素
js

JQuery BOM 操作

元素的宽高

• 原生的元素的宽高分别那几种如何获取
  • 内容宽高----width height
  • 可视宽高— clientWidth/clientHeight
  • 占位宽高—offsetWidth/offsetHeight

复制$("#div1").css("width")// "100px" 字符串
js

• jq 的元素宽高操作
  • 内容宽高 width() height() 方法
  • 可视宽高 innerWidth（） innerHeight（）
  • 占位宽高 outerWidth() outerHeight()
  • 整个宽高 outerWidth（true） outerHeight（true）
• jq 获取可视区及文档的宽高
  • 可视区宽高 $(window).width()/.height()
• 文档的宽高 $(document).width()/height()

元素的位置

复制$('#sub').offset() 返回一个对象  到文档的 left和top值
$('#sub').position() 返回一个对象 到有定位属性的父级元素的 left和top值
js

滚动条卷走的宽高操作

复制$(document).scrollTop() // 不传参获取，传参设置
js

jQuery 事件

event对象

jq中的事件对象 不需要兼容了 直接传参ev就可以了

• ev.clientX/ev.clientY 事件触发的位置到浏览器可视区的上左边的距离
• ev.currentTarget：当前事件触发的元素
• ev.delgateTarget：当前事件绑定的元素
• ev.offsetX/ev.offsetY: 事件触发的位置到元素的上左边的距离
• ev.originalEvent: 元素事件对象
• ev.pageX/ev.pageY:事件触发的位置到文档的上左边的距离
• ev.screenX/ev.screenY:事件触发的位置到屏幕的上左边的距离
• ev.which 类似于 keyCode 可以获取鼠标的键值 左键是1 右键是3 滚轮是2
• 阻止默认事件 ev.preventDefault()
• 阻止冒泡 ev.stopPropagation()
• 阻止默认事件+冒泡 return false

事件绑定 on()

复制// 基本事件
$('#box').on('click',function(){})

// 一次绑定多个事件对应一个处理函数
$('#box').on('click mouseenter mouseleave',function(){})

// 绑定多个事件对应多个处理函数 对象形式
$('#box').on({
  'click': function(){},
  'dblclick':function(){}
})

// 自定义事件
$('#box').on('hahaha',function(){})

// trigger 触发事件
$('#box').trigger('hahaha');

// 事件委托
$('#list').on('click','li',function(ev){
  console.log($(ev.target).html());
})

// 事件的取消绑定
$('button:eq(0)').on('click', function(){
  console.log(1111);
})

$('button:eq(1)').on('click',function(){
  $('button:eq(0)').off();
  // $('button:eq(0)').off('mouseenter');
  // 传参取消事件类型
})

// 一个事件上绑定多个函数执行---事件的命名空间
$('button:eq(0)').on({
  'click.a':function(){
​    console.log(111);
  },
  'click.b':function(){
​    console.log(222);
  }
})

$('button:eq(1)').on('click',function(){
  $('button:eq(0)').off('click.a');
})

// 只执行一次的事件
$('button').eq(0).one('click',function(){
  console.log('一次就够了');
})

// 模拟执行一次事件
$('button').eq(0).on('click',function(){
  console.log('一次就够了');
  $(this).off();
})
js

合成事件

mouseenter 和 mouseleave

复制$('#box').hover(function(){
  // 鼠标移入执行函数
},function(){
  // 鼠标移出执行函数
})
js

jQuery 动画

显示隐藏

复制show（
  duration 动画执行时间-毫秒，
  easing 运动效果（只有两种 swing慢快慢，linear匀速，complate运动执行完成后的回调）
）
js

隐藏 hide() 显示隐藏的切换 toggle()

复制$('#box').show(1000,function(){
  alert('执行完毕');
})
js

淡入淡出

淡入fadeIn()

淡出 fadeOut()

透明度变化到 fadeTo()

淡入淡出切换 fadeToggle()

复制$('button').eq(0).on('click', function(){
  $('#box').fadeIn(1000);
})

$('button').eq(2).on('click', function(){
  $('#box').fadeTo(1000, .5);
})
js

下拉显示

下拉显示slideDown()

上拉隐藏 slideUp()

切换 slideToggle()

复制$('button').eq(2).on('click', function(){
  $('#box').slideToggle(1000);
})
js

animate

animate({属性1：目标值1，属性2：目标值2.。。}, duration动画持续时间，easing动画效果，callback回调)

复制// 累加
$('button').click(function(){
  $('#box').animate({width:'+=50'},200)
})

// 链式运动
$('button').click(function(){
  $('#box').animate({width:500},1000)
​        .animate({height:300},500)
​        .animate({opacity:.5},500)
})
js

动画队列

复制queue(function(next){})
// 将其他的操作加入到动画队列中 按顺序来完成

$('#box').animate({width:500},1000)
​    .queue(function(next){
​      $(this).css({background:'blue'});
​      next();// 继续执行后续的动画队列中的操作
​    })
​    .animate({height:300},500);
js

判断是否处于动画状态

$(元素).is(‘:animated’): 有动画在执行 返回 true 没有返回 false

复制$('#box').hover(function(){
  if(!$(this).is(':animated')){
​    $(this).animate({height:300},400);
  }
}, function(){
  $(this).animate({height:50},400);
})
js

延迟动画

复制$('#box').animate({width:500},1000)
​    .delay(2000)
​    .animate({height:300},500);
js

停止动画

stop（clearQueue清除动画队列， gotoEnd达到动画最终状态）停止动画 finish（）完成动画—所有动画队列的效果达到最终状态（2.x以上版本支持）

复制// stop停止动画的几种组合
$('button').eq(1).click(function(){
  // 参数皆为false 不清除动画队列 不达到最终状态
  $('#box').stop(false, false); // 默认
  // 参数皆为true 清除动画队列 达到最终状态
  $('#box').stop(true, true);
  // true false 清除动画队列 不达到最终状态
  $('#box').stop(true, false);
  // false true 不清除动画队列 达到最终状态
  $('#box').stop(false, true);
})

// finish
$('button').eq(2).click(function(){
  $('#box').finish();
})
js

jQuery ajax 接口请求

复制$.ajax({
  url,
  cache,// 在 get 下是否启用缓存
  type,// get/post
  data,// 上传数据
  timeout,// 相应超时时间
  datatype,// 预期返回的数据类型默认 text
  success, // 成功回调
  error,
  conplate
})
js

跨域

dataType 设置为 jsonp

复制$.ajax({
  url:'https://www.baidu.com/sugrec',// ?prod=pc&wd=aa&cb=fn
  type:'get',
  data:{prod:'pc',wd:'cc'},
  dataType:'jsonp',
  success:function(res){
​    console.log(res);
  }
})
js

load 方法

将 url 传入以后，将下载到数据直接填充到被选中元素的 innerHTML 中

复制$("div").load("2.txt #p1", function(data, statusText, xhr){
  data    下载到的数据
  statusText 下载的状态 success
  xhr     ajax对象
})
js

jQuery cookie 操作

获取

复制$.cookie(name) 
js

设置

复制$.cookie(name, value) 设置name和value
$.cookie(name, value {
  raw: true // value不进行编码
​        // 默认false value要进行编码的
})
js

删除

复制$.cookie(name, null); 删除cookie
js

实例

复制$.cookie("变种人", "X教授", {
  expires: 7,
  raw: true
})
js

编写 jQuery 插件

复制;(function($){
  // 类级别插件 ---> 将方法拷贝到 jq 的原型下
  $.extend({
​    'trimLeft' : function(str){
​      return str.replace(/^\s+/,'');
​    }
  })
  // 对象级别插件 拷贝到$.fn的原型下
  $.fn.extend({
​    'changeBg' : function(select,color){
​      this.children(select).css({background:color});
​      return this;
​    }
  })
})(jQuery)

var str = '    aaa   ';
console.log($.trimLeft(str));
$('ul').changeBg(':odd','pink');
js

Zepto.js 基本使用

基本和 jq 完全一样但是用到的模块要单独引入

复制$(function(){
  $('#box').on('tap', function(){
​    console.log('手指点击');
  })
})
js

zepto 和 jq 的区别

隐藏的元素的获取宽高

jq 可以获取隐藏元素的 width（）/height（）

zepto 中获取隐藏元素的 width（）/height（）都为 0

复制$('#box').width();// 隐藏的元素在 zepto 中获取宽高为 0
offset()的区别
js

jq 中返回一个对象 包含 元素到文档上左边的距离

复制zepto 中返回一个对象，包含元素到文档上左边的距离和元素的宽高
$('#sub').offset();// 元素到文档的上左边的距离
$('#sub').offset();// zepto中元素到文档的上左边的距离 和 元素的宽高
js

元素的宽高的获取区别

jq 获取元素的宽有 4 种方法

zepto 中只有一个 width（）和height（）方法 获取的是占位宽

复制$('#box').width();// 占位宽 内容宽 + padding + border
innerWidth();// 没有
outerWidth();// 没有
outerWidth(true);// 没有
js

touch 模块

tap 所有的触碰

singleTap 手指单击

doubleTap 手指双击

swipe swipeLeft swipeDown swipeRight swipeUp 手指滑动

longTap 手指长按