锋利的jquery

认识jquery

• $对象与dom对象

jq对象是数组对象(选择的元素可以不用遍历就可以操作);
使用$()制作jq对象;
jq转DOM--> var $x=$('x') var x=$x[0]或者 var x=$x.get(0);
DOM转jq--> var x=document.getElementId('id'); var $x=$(x);

• 与其他库的冲突

$.noConflict()将$放弃 然后其他库就可以使用
如果要继续使用,可以 jQuery(function($)){};在其中使用;
或者 var jq=$.noConflict();使用其他别名代替;

选择器

jq选择选择生成的是对象,即使目标不存在,也不会报错;
原生的会返回null;
所以判断是否选择目标存在,用if($x[0])--返回undefined)或者if($x.length-返回0)来判断;

• 基础

id    '#id'
类    '.class'
元素    'element'
群组    'element,#id'

• 层级

后代    'a b'
直系后代    'a>b'
a之后的兄弟中第一个为xx的元素    'a+xx'
a之后的所有为xx的兄弟元素     ' a~b'

• 基本过滤
  选择一个群组,然后用:后面的过滤

:first 
:last
:not(xx)    群组中剔除xx的  xx不用引号
:even       群组中索引为偶数的
:odd        群组中索引为奇数的
:eq(x) 
:gt(x)      索引大于x的
:lt(x)      索引小于x的

• 内容过滤
  元素内部包含的-子元素或文本

:contains(text) 包含文本为text的 (子元素中包含)(包含,不是匹配)
:empty      为空的
:parent     有子元素(包括文本) 不为空放
:has(x)     拥有x的

• 属性

:hidden
:visible

[attr]               选择带有attr属性的元素  eg:[id]
[attr=value]        匹配
[attr!=value]       不匹配
[attr^=value]       开始
[attr$=value]       结束
[attr*=value]       包含
[][]                复合过滤

• 层级

:first-child Selector
选择所有父级元素下的第一个子元素。

:first-of-type Selector
选择所有相同的元素名称的第一个兄弟元素。

:last-child Selector
选择所有父级元素下的最后一个子元素。

:last-of-type Selector
选择的所有元素之间具有相同元素名称的最后一个兄弟元素。

:nth-child() Selector
选择的他们所有父元素的第n个子元素。

:nth-last-child() Selector
选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。

:nth-last-of-type() Selector
选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。

:nth-of-type() Selector
选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。（感谢@caikan提供的翻译）

:only-child Selector
如果某个元素是其父元素的唯一子元素，那么它就会被选中。

:only-of-type Selector
选择所有没有兄弟元素，且具有相同的元素名称的元素。

• 表单

:enable
:disable
:checked    单选,复选被选中的
:selected   被选中的选项元素

:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file

DOM操作

• DOM属性
  标签内的属性操作

类
1.addClass
2.toggleClass
3.hasClass
4.removeClass
5.css
属性
1.attr
2.prop
3.removeAttr
4.removeProp
基本属性
1.html
2.val
3.text
高宽
1.height
2.innerHeight---不计算border
3.width
4.innerWidth
5.outerHeigth---包括border,参数true设置是否包括margin
6.outerWidth
坐标类
1.offset---元素相对于文档的坐标
2.position
3.scrollTop
4.scrollLeft--当前元素的滚动条的坐标(需要此元素能滚动,如body)

1.attr和prop的分别---对于固有属性-使用prop,对于自定义的属性--使用attr;(实际中需要验证)
2.visible=hidden和display:none是不同的--第一种是在页面隐藏,第二种是在页面不存在(无高宽之类属性)

属性操作有三个不同的用法
1.得到值 $(xx).html()
2.直接设置值 $(xx).html(<br>)
3.通过函数返回值设置 $(xx).attr(function(){ })
4.注意这些的返回值
5.js定时器setInterval()与setTimeout()
6.注意回调函数中this所指的对象

• DOM元素操作

1.外部
wrap
wrapAll
unwrap---删除所有包裹它的元素
wrapInner---将直接子元素外部包裹
2.同级
after---后面插入元素-作为兄弟节点,相当于移动
before
insertAfter
insertBefore
3.内部
append--每个匹配元素里面的末尾插入
appendTo
prepend---每个匹配元素内部头部插入
prependTo
4.其他
clone---克隆
detach---移除(不包括元素的事件和数据)(仿佛没差别!!)
empty---移除子元素
remove---移除一切
replaceAll--替换
replaceWith--替换

1.插入操作中 insert和TO都只是改变插入被插入的语句顺序
2.xx和xxAll,一个匹配第一个元素,一个匹配所有元素

遍历

add---添加进被选中的集合中(`$('p').add('a').css()` 设置p和a的css值 )
addBack---
    jq中,选择,过滤产生的集合放在一个堆栈中,addBack用于返回前一个集合,
    $('.b>.b').siblings().find('.a1').addBack().css()中-有三个集合,
    '.b>.b' /其兄弟元素/其兄弟元素中为a1的---addBack返回倒数第二匹配的,和最后匹配的组合成新集合
end---退回上一个堆栈状态,返回的是倒数第二选择的对象

后代选择:
children---直接子元素
contents---直接子元素,包括文本节点
filter---过滤filter(':even')
find---选择
has
is--- eg:is('li') is(':visible') 返回布尔值 
not---从集合中移除匹配的元素

父元素
closest---向上匹配,直到找到,返回一个或0个
parents---向上匹配,直到根元素,可以返回多个
parent
parentsUnitil

同级
first
last
next
nextAll
nextUnitl
prev
prevAll
prevUnitil
siblings


each---遍历一个jquery对象
map---
    map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象。
    each()返回的是原来的数组，并不会新创建一个数组。
    map()方法会返回一个新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费。
    
eq---通过-index,可以倒数开始
slice--通过下标范围来选择元素

parent,parents,closest,has区别
filter和find区别
map,each区别

css,事件和特效

• 事件处理器

绑定事件
通过bind on one 
bind(event [,date],fn)
event--事件名称-- 任何的 如 click() focus() load--下方的事件 都是这种的简写
自定义事件--通过trigger触发
自定义命名空间的事件--'event.xx'
event.type可以判断类型;
one()---一次性的事件;
on和bind基本一致,最好使用on和off代替bind与unbind
************************************************

模拟操作
trigger--执行事件
不需要用户触发直接执行,可以用
$('xx').bind('myclick',function(event,x1,x2){ })
$('xx').trigger('myclick',['x1','x2']);
$('xx').click();
$('xx').triggerHandler('click')--执行绑定的事件,取消默认事件
执行自定义的事件,只能使用trigger

************************************************

移除事件:
1.事件冒泡---一个动作触发子元素和父元素的事件-由里向外冒泡进行;
2.移除绑定事件-停止冒泡:function(event){;event.stopPropagation()};
3.移除默认事件,如:当表单内文字长度不够,让submit本身的事件移除,不提交.event.preventDefault();
4.return false;将移除所有事件;
5.unbind()
$('a').bind('click.xx',f1=function(){})
$('a').unbind('click',f1/'.xx')--通过定义变量或命名空间
$('a').bind('click',f1)
再次添加(只有通过变量名添加,命名空间不能添加),事件会被排到事件列的最后

************************************************

事件对象的属性
type
stopPropagation()
preventDefault()
target--
target获取当前触发的DOM元素,通过$()可转换成$(this);
pageX/Y
which--获取鼠标按钮(1,2,3)

• 事件

浏览器事件
error---$('#img').error(function(){$(this).hide();})
resize---只用于窗口大小? $(window)
scroll---在元素内滚动触发

鼠标事件
mouse--enter/over/down/up/move/out/leave
click,dbclick,hover

键盘--window和document是全屏,除此,需要有输入的才能触发
keydown
keyup
keypree

文档加载事件
ready

• 特效

animate
hide
show
toggle
slideDown
slideUp
slideToggle
fadeIn
fadeOut
fadeTo
fadeToggle

animate({
     ['toggle', 'swing'],
    opacity: 'toggle'
  }, 5000, 'linear', function(){ });
  animate({属性变化},时间,缓动函数,fn)
  jq自带两个缓动函数 swing和linear.
  toggle可以作为值.
  
delay--延迟
finish--结束
stop--停止队列--(停止队列,停止当前动画)

$(a).animate(动作1);
$(a).animate(动作2);
执行一次,stop(false,true)-当前动作1直接完成,动作2继续
stop(true,false)-当前动作停止,队列动作不进行
finish().动作全部直接完成.

jQuery.fx.interval=数字
动画的帧数--全局性的,无动画时才能更改

表单表格与其他操作

• 表单

事件
blur--失去焦点
focus
focusin--支持冒泡事件的focus--会去检测子元素
focusout---冒泡的blur
change--value值改变(!!表单元素触发事件的快慢不同)
select--input>type=text和textarea的文本被选择时触发
submit-只能绑定from,另外要注意enter键

• 其他

data--在对象上以键值对的形式添加额外的数据 $().data('foo','xx')
      和获取data-xxx=''中的值;
removeData

type()
$.contains(a,b)--检测a是否是b的祖先元素

now()--当前时间戳
var time=new Date();
var local_time=time.toLocaleString()

$.fn.extend({
xx: function(){},
xxx: funtion(){}
})---将方法添加到jq原型$.fn上.
可以通过$('').xx(),或者$.fn.xx;调用.

$.extend
1.$.extend({
深度拷贝,   ---  true/false,可以将数组中的页合并,不然只会是拷贝共同存在的和后面的
{},         --- 空的对象,第一个元素来接收,但是会将元素改变,所以用空元素
obj1,       --- 这才是第一个元素,值不会改变
opj2
})

性能优化

• 关于选择器的使用

ID>标签>class>:xxx
尽量用ID确认最近的元素,然后在find();

• 当某个元素调用多次--避免相同选择器的使用

转换为变量
尽量使用链式操作
当在别的函数中也要调用时-window.$xx={};将它设置为全局变量

• 循环时减少选择器,DOM操作

ul插入多个标签,每个里面的字符串放在数组中
var $list=[...];
for(var i=0,l=$list.length;i<l;i++){
$('ul').append("<li>"+$list[i]+"</li>");
}
---每次循环都要选择和DOM操作
改进: var $list=[...];
$li="";
for(var i=0 ,l=$list.length;i<l;i++){
$li+="<li>"+$list[i]+"</li>";
}
$("ul").html($li);