JQuery基础------一步一个脚印

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()