0.DOM对象转换
1.元素节点
①选择器
$('#id') | $('li:eq(1)') |
$('.class') | $('#box li:first') |
$('tag') | $('#box li:last') |
②关系
$('.class').siblings() | $('.class').find() 子及以后,块级无效 |
$('.class').children() | $('.class').parent() |
$('.class').next() | $('.class').nextAll() |
$('.class').prev() | $('.class').prevAll() |
2.属性节点
①样式
$('li').addClass(class|fn)
$('p').removeClass(class|fn)
$('div').toggleClass(class) //类开关
$('p').css('color', 'red').css('font-size', '16px')
②属性
$('li').attr('title')
$('li').attr('title', 'value')
$('li').attr({src:'test.jpg', alt:'TestImage'});
$('li').attr('title', function (index, attr){
this.title = 'attribute' + index;
})
3.文本节点
内容
$('select').html()
$('.select').text()
$('.delete').remove()
$(".delete").empty()
html就是你可以添加像<a></a>、<p></p>等标记
text只能写文本如果写了上面的标记则会以文本形式输出
清空元素属性文本节点,只清空文节点
$('.cla').append("<b>追加</b>")
$('.cla').prepend("<b>追加</b>")
$("p").after("<b>Hello</b>")
$("p").before("<b>Hello</b>")
find()遍历寻找元素
二、事件
click() onclick()
mouseover() onmouseover()
mouseout() onmouseout()
bind()
on()
trigger()
val()
prop()
show()
hide()
animate()
shop() 停止当前正在运动的动画
toggle()
slidToggle()
fadeTo()
fadeToggle()
fadeIn(speed,easing,callback)
fadeOut(speed,easing,callback)
bind各元素的迭代
live委托document
delegate委托父级以上元素
on前三者的结合体
成也萧何败萧何