1.工厂函数 $()
标签名:$('p')取出文档中所有的段落
ID:$('#some-id')会取得文档中对应ID的一个元素
类:$('.some-class')会取得文档中带有some-class类的所有元素
?
eg:$(document).ready(function(){
$('#selected-plays >li').addClass('horizontal');
});
意思所有DOM加载后就运行,对id为selected-plays下面所有的li标签都加上horizontal这个类(css)。
?
eg:$(document).ready(function(){
$('#selected-plays > li:not(.?horizontal)').addClass('horizontal');
});
对于那些不是horizontal的添加horizontal。
?
$('div.horizontal:eq('1'))?
选择带有horizontal类的div集合中的第二项。
?
$('tr:odd').addClass('');
$('tr:even').addClass('');
表格单双行不同的样式!
?
包含:$('td:contains("Henry")').addClass(''); 包含Henry的添加样式。
?
$('tr:not([th])').addClass('');所有tr但是除了th
?
$('td:contains("hhh")').next().addClass(''); .next()是同辈的下一个元素!
?
$('td:contains("hhh")').siblings().addClass(''); ?.siblings()取得该单元格所有同辈的元素!
?
$('td:contains("hhh")').parent().addClass(''); 父元素
?
2.事件
$('').bind('click',function(){
$('').addClass('');
});
添加bind事件,为点击事件。
?
$().ready(funtion(){
$().toggle(function(){
//单数点击
},function(){
//双数点击
});
});
?
$().click(function(event){
if(event.target == this){
//执行。。
}
});
?
event.stopPropagation()避免其他的DOM元素响应这次事件。
?
.trigger('click');模仿用户操作!
.hover();凸现鼠标指针下的元素;
?
.css('height':'12px','width':'13px')设置css
.css('height')取值
?
.hide()隐藏
.show()显示
可以指定隐藏或显示的速度:slow (0.6s)、normal(0.4s) ?、fast(0.2s).也可以自己设置毫秒.show(850)不要带“号!
?
.animate({param1:'value1'},speed,function(){
//语句
});多重效果
fadeIn()和fadeOut()不透明度:
fadeTo:不透明度
slideDown()和slideUp():高度
?
排队发生:
$('').click(function(){
$('')
.?animate({left:650},'slow')
.?animate({height:38},'slow');
});
先向右移动350像素,再增高50px。
3.添加元素
$('<a href="#top"> back to top</a>').insertAfter('div.chapter p');在div.chapter p前面插入a
这样的方法有:after(),insertAfter(),before(),insetBefore();
?
$('<a id="top" name="top"></a>').prependTo('body');放到body上!
?
DOM操作方法的简单归纳:
1)要在每个匹配的元素中插入新元素
.append()
.appendTo()
.prepend()
.prependTo()
2)要在每个匹配的元素相邻的位置上插入新元素
.after()
.insertAfter()
.before()
.insetBefore()
?
?