jQuery常用api

1. $()

$(function(){})：dom结构加载完执行
$('<div>aaaa</div>')：参数为html标签，动态创建由 jQuery 对象包装的 DOM 元素
$('.div1')：参数为选择器

1. $(document).ready()和window.onload区别

$(document).ready(function(){})：dom结构加载完执行
window.onload = function(){}：dom结构和图片、音频、视频在内的所有外部资源都加载完执行

1. jQuery插件扩展

$(function () {
$.extend({
max:function(a,b){
return a>b?a:b
}
})
$.fn.extend({
min:function(a,b){
return a>b?b:a
}
})
console.log($.max(2,3))
console.log($('body').min(2,3))
})

1. 属性、样式
   attr()
   prop()
   removeAttr()
   removeProp()
   addClass()
   removeClass()
   html()
   text()
   val()
   css()
2. 文档处理

append(content)：向每个匹配的元素内部追加内容
$('div').append('<span>aaaa</span>')
appendTo(content)：把所有匹配的元素追加到另一个指定的元素元素集合中
$('<span>aaaa</span>').appendTo('div')
prepend(content)：向每个匹配的元素内部前置内容
prependTo(content)：
before(content)：在每个匹配的元素之前插入内容
after(content)：在每个匹配的元素之后插入内容
empty()：删除匹配的元素集合中所有的子节点
$('div').empty()
remove(expr)：从DOM中删除所有匹配的元素，所有绑定的事件、附加的数据等都会被移除
$('div').remove('.hello')
detach(expr)：从DOM中删除所有匹配的元素，所有绑定的事件、附加的数据等都会保留下来
replaceWith(content)：将所有匹配的元素替换成指定的HTML或DOM元素
$('div').replaceWith('<p>ppppppp</p>');
通过移动first到third的位置来替换
$('.third').replaceWith($('.first'));
replaceAll(selector)：用匹配的元素替换掉所有 selector匹配到的元素
$('<p>ppppppp</p>').replaceWith('div');
clone()：克隆匹配的DOM元素并且选中这些克隆的副本
$('div').clone()
wrap(html|ele|fn)：把所有匹配的元素分别用其他元素的结构化标记包裹起来
$('div').wrap('<div class='wrap'></div>')
unwrap()：移出元素的父元素
wrapAll(html|ele|fn)：将所有匹配的元素用单个元素包裹起来
wrapInner(html|ele|fn)：将每一个匹配的元素的子内容(包括文本节点)分别用一个HTML结构包裹起来

1. 筛选
   过滤：
   eq()
   first()
   last()
   hasClass()
   filter()
   has()
   map()
   slice()
   is()
   not()
   查找：
   find()
   children()
   parent()
   parents()
2. 位置、尺寸、遍历
   offset()：获取匹配元素在当前视口的相对偏移，从 外边框 开始向上向左（即盒子为可视区域有效，可视区为可设置背景色的区域）
   position()：获取匹配元素相对父元素（包含块： 定位元素 ）的偏移， 只考虑 top、bottom、left、right ，不考虑盒模型的margin、border、padding
   scrollTop()：获取匹配元素相对滚动条顶部的偏移
   scrollLeft()：获取匹配元素相对滚动条左侧的偏移
   width()
   height()
   innerWidth()
   innerHeight()
   outerWidth([true])
   outerHeight([true])
   each()
3. jQuery对象和DOM对象转化
   DOM->jQuery：$(element)
   jQuery->DOM：$(element).get(index)、$(element)[index]
4. 效果动画
   show(speed,easing,fn)：显示
   hide()：隐藏
   toggle()：显示/隐藏
   slideDown()：滑动隐藏
   slideUp()：滑动显示
   slideToggle()：滑动显示/滑动隐藏
   fadeIn()：淡入
   fadeOut()：淡出
   fadeToggle()：淡入/淡出
   fadeTo(speed,opacity,easing,fn)：opacity为0-1的透明度
   animate(params,speed,easing,fn)：动画，params为要变化的属性的对象集合
   stop()：停止所有在指定元素上正在运行的动画。
   delay()：设置一个延时来推迟执行队列中之后的项目。
   finish()：停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
   jQuery.fx.off = true：关闭页面上所有的动画。

let timer = setInterval(function(){
$('ul').css('display') == 'none' ? $('ul').show(1000) : $('ul').hide(1000);
},1000)
在.fadeOut() 和 .fadeIn()之间延时3000毫秒。
$('ul').fadeOut(1000).delay(3000).fadeIn(1000);

1. 事件
   on(enents,element,data,fn)：在选择元素上绑定一个或多个事件的事件处理函数
   off(enents,elements,fn)：在选择元素上移除一个或多个事件的事件处理函数
   one(type,data,fn)：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数
   trigger(type,data)：在每一个匹配的元素上触发某类事件。

提交第一个表单，但不用submit()
$("form:first").trigger("submit")

事件委托：
11. $.ajax()