锋利的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({
width: ['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);
