has :包含，找元素里面的子元素（单个）
<div><span>123</span></div>
$('div').has('span').css();
filter、not:找元素自身的
<ul>
<li></li>
<li class='a'></li>
<li></li>
<li class='a'></li>
<li></li>
</ul>
$('li').filter('.a').css()
$('li').not('.a').css()
filter 与 not是相反的关系
find:查找，找元素中的子元素(多个子元素中选择),
<ul>
<li></li>
<li class='a'></li>
<li></li>
<li class='a'></li>
<li></li>
</ul>
$('ul').find('li.a').css();
或者
$('ul li.a').css();
这种情况不要用has
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
eq() :从0开始
nth-child():从1开始
index(),索引，当前元素在所有兄弟元素中的位置，从0开始
用index()与eq()结合可以做出选项卡，即var index = $(this).index()，将索引数值保存起来，以便后续的eq(index)使用。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
获取宽度：
css('width') =>带单位
width() =>不带单位
innerWidth() =>不带单位,width+padding
outerWidth() =>不带单位,width+padding+border
outerWidth(true) => 不带单位,width+padding+border+margin
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
scrollTop() =>相当于document.documentElement.scrollTop || document.body.scrollTop
$(window).scrollTop()
$(window).width() =>可视区的宽度,相当于document.documentElement.clientWidth
$('<div>') =>创建div，相当于document.createElement('div')
$(window).on('scroll resize',function(){}) =>鼠标滚动和窗口缩放
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
事件ev =>ev = ev || event;
ev.pageX(相对于文档的) 鼠标坐标 ：clientX(相对于可视区)，即clientX+scrollLeft=pageX
ev.which 键盘或鼠标的键值 ：ev.keyCode 键盘的键值
ev.preventDefault() 阻止默认事件
ev.stopPropagation() 阻止冒泡操作 JS中ev.cancelBubble = true
return false 阻止默认事件+阻止冒泡操作 JS中阻止默认事件
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
offset().left 元素到屏幕的左距离 => offsetLeft(),如果没有定位，则跟JQ中的offset().left一样,如果有定位则是到定位的那个父级
position.left 到有定位父级的left值，把当前元素转换成类似定位的形式(不包括元素自身的margin，但包括元素自身定位的left)
parent() 获取父级 JS中parentNode
offsetParent().left 获取有定位的父级 JS中offsetParent
val()
size() //$('li').size() 像length
each() 循环
$('li').each(function(i,elem){ //一参：下标，二参：每个元素
$(elem).html(i);
})
hover(function(){},function(){}) =>移入和移出的一个集合操作
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
show() hide() =>显示 隐藏
fadeOut() 淡出 =>从不透明到透明
fadeIn() 淡入 =>从透明到不透明
fadeTo(时间,透明度)
slideUp() =>向上
slideDown() =>向下
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
get() JS和JQ混用，将JQ转成原生JS，需要在括号中加下标 ，如果不加下标，表示是一组集合
$('div').innerHTML 错误X =>$('div').get(0).innerHTML 或者$('div')[0].innerHTML(可改成方括号的形式)
outWidth() offsetWidth的区别
相同点：width+padding+border,区别：outWidth(true)是width+padding+border+margin,在display:none时，offsetWidth获取不到隐藏元素的值，而outWidth可以
text()
对于大部分的元素，如html()：只能获取集合的第一个元素，赋值：可以对集合中的每一个元素赋值，只有text()是特例，可以获取集合每一个元素。
remove() detach() 的区别
两者都有返回值，返回值为当前删除的元素，区别：detach()保留删除之前元素的操作行为，例如：
$(function(){ $('div').click(function(){ alert(123); }) var oDiv = $('div').detach(); $('body').append(oDiv); }) //点击oDiv,会有点击事件，如果是remove则点击事件不存在
$() window.onload 区别
$(function(){}) = $(document).ready(function(){}) DOM加载完执行，可以写多个$()，会根据顺序执行
window.onload 页面加载完执行，写多个window.onlad,后面会覆盖前面的操作。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
parents() 获取祖先元素，带参数表示筛选，可以是一个集合
closest() 最近祖先元素（包括当前元素），必须要写参数，返回是一个元素
siblings() 兄弟
next() 下一个兄弟 nextAll() 下面的所有兄弟
prev() 上一个兄弟 prevAll() 前面的所有兄弟 ＝>带参数表示筛选
parentUntil() nextUntil() prevUntil() =>到XX元素截止，例如：nextUntil('h2'),到h2截止了,不包括h2
clone() 拷贝，要连事件一起拷贝，则是clone(true)
wrap() wrapAll() wrapInner() 打包
<span>1</span> <span>2</span> <span>3</span> $('span').wrap('<div>') 结果： <div><span>1</span></div> <div><span>2</span></div> <div><span>3</span></div> <div><span>4</span></div> $('span').wrapAll('<div>') 结果： <div> <span>1</span> <span>2</span> <span>3</span> </div> $('span').wrapInner'<div>') 结果： <span><div>1</div></span> <span><div>2</div></span> <span><div>3</div></span>
unwrap() 删除包裹的父级，如果父级是body元素则不删除
<div id="div1">
<div id="div2">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
$('span').unwrap();
结果：
<div id="div1">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
div2被删除掉了。
add() 增加，用于对元素的组合操作
slice() 截取元素 同JS操作类似 slice(2,5) 截取从第2位到第5位（不包括第5位）
serialize() 数据串连操作，用于表单提交，如：a=1&b=2，是string
serializeArray() 返回的是数组
[
{'name':'a',value:'1'},
{'name':'b',value:'2'}
]
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
animate() 动画,第一个参数：属性和值{'width':'200px','height':'200px'},第二个参数：时间，默认400毫秒，第三个参数：swing(默认：缓冲运动 慢快慢）、linear(匀速)，第四个参数：回调函数callback
delay() 延迟时间
stop() 停止当前动画，进行下一个动画（默认）
stop(true) 停止动画
stop(false,true) 当前动画直接到达末状态，继续下一个动画
stop(true,true) 当前动画直接到达末状态，停止动画
finish() 动画直接到达最后的末状态
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
delegate() 事件委托，利用冒泡的原理，将事件加到父级上，从而提高性能和后续增加的元素也有事件
undelegate() 取消事件委托
$('li').on('click',function(){
})
//改为事件委托
$('ul').delegate('li','click',function(){
})
trigger 主动触发,自动触发事件而不需要人工干预（如人工干预click事件），对于用户自定义的事件也可以进行操作，因此更加灵活
$('div').on('show',function(){
})
//用户自定义了show事件
$('div').trigger('show')
ev.date ev中的数据
ev.target 事件源
ev.type 事件类型
$('input').on('click',[1,2],function(ev){
alert(ev.data[1]); //2，数据是[1,2]，ev.data[1],数组中的第二个：2
alert(ev.target); //input元素
alert(ev.type); //click事件
})
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
$:工具方法，可以给JQ用，也可以给JS用
$.type() 判断类型，可以判断引用类型（Array,null,RegExp,date) typeof 无法判断引用类型，弹出的都是object对象
$.trim() 去除前后空格
$.inArray() 找数组出现的位置，类似indexOf(),例如：$.inArray('b',arr),字符'b'在数组arr中的位置，没有找到返回-1
$.proxy() 改变this的指向
function show(){ alert(this) } show(); //this指向window $.proxy(show,document)(); //this指向document
function show(n1,n2){ alert(n1); alert(n2); alert(this); } $.proxy(show,document)(1,2); $.proxy(show,document,1,2)(); $.proxy(show.document,1)(2); //以上三种写法都可以
//$.proxy(show,document)(1,2) 会立刻执行
//$.proxy(show,document,1,2) 不会执行，可用在事件中，例如：
$(document).click($.proxy(show,document)(1,2)) //立刻执行了
$(document).click($.proxy(show,document,1,2)) //点击document后，再执行show函数
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
$.noConflict() 解决冲突，例如：
var joya = $.noConflict();
var $ = 5;
joya(function(){
joya('div').css('background','blue');
console.log($);
})
//使用noConflict解决冲突，joya相当于$;
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
$.parseJSON() =>变成json，比如：字符串变成json，这里的字符串必须是严格模式的json形式
var str = '{"name":"joya","age":"20"}'; console.log($.parseJSON(str).name) //成json对象了
$.markArray() =>类数组转换成真正的数组
var aDiv = document.getElementsByTagName('div');//类数组,只有length，不能进行数组的push()操作 var arr = $.makeArray(aDiv); console.log($.type(arr)) //变成数组后，可以进行数组相关的操作了
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
on(),off()
//on 的好处： //1、可以自定义的事件,见trigger操作 //2、可以对多个事件执行相同的操作，或者是不同的操作 //off的用法：可以关闭on的事件，例如：只需要点击一次 $(function(){ //多个事件执行相同的操作，事件之间用空格分开 $('div').on('click mouseover',function(){ console.log(123); }) //多个事件执行不同的操作，用json的形式 $('div').on({ 'click':function(){ console.log(123); }, 'mouseover':function(){ console.log(456); } }) //只点击一次 $('div').on('click',function(){ console.log(123); $(this).off(); })
//只点击一次的另外一种方法是使用one()
$('div').one('click',function(){
console.log(123);
})
//只关闭指定的事件 $('div').on('click mouseover',function(){ console.log(123); $(this).off('mouseover'); }) })