jQuery----1

简介


[code] 

jQuery可以像CSS一样选择页面内的元素。比如：$('p')会选中所有的段落。

使用$(document).ready()就可以添加文档载入完毕之后执行的代码。

使用$.fn.func = function(){}的方式可以扩展jQuery。

选择器

简单示例：

<script  type="text/JavaScript">

$(document).ready(function(){

//选中所有的段落：

$('p').css('color','red');

//选中设置了title属性的段落：

$('p[title]').css('color','blue');

//选中href属性中包含bbs的段落：

$('a[href*=bbs]').css('fontWeight','bold');

//选中，含有链接的li元素

$('li:has(a)').css('border','1px  solid black');

//选中作为第一个子节点的p元素：

$('p:first-child').css('backgroundColor','pink');

//选中可见的p元素

$('p:visible').css('fontSize','20px');

});

</script>

属性选择器

p[title]

只选择设置了title属性的p元素。

p[title=foo]title

title属性等于foo的。

p[title^=foo]

title属性以foo开头的。

p[title$=foo]

title属性以foo结束的。

p[title*=foo]

title属性含有foo的。

例如：

$('p[title]').css('color','blue');

选中了设置title属性的p，并且将其颜色设置为blue。

包含选择器

li:has(a)

表示含有a的li元素。

例如：

$('li:has(a)').css('border','1px  solid black');

选中含有a的里元素，并且设置其style的border属性。

位置选择器

p:first-child

选中作为第一个子元素的p元素。

例如：

$('p:first-child').css('backgroundColor','pink');

类似的还有

p:nth-child(n)

例如：

$('p:nth-child(3)').css('backgroundColor','yellow');

选中第三段。

这些表示子节点位置的都是从1开始计数的。

:odd

选中位置排序是奇数的元素。

even

选择偶数位置的元素。

eq(n)

选中第n个元素。

这些都是从0开始计数的。

以上为书上的分类方式。

所有选择器

按照官方的选择器分类，而不是书上的表。

基本选择器：

#id

element

.class

*

selector1, selector2, selectorN

层次选择器：

ancestor descendant

div p选中p，且p必须在div中。可以是隔代的关系

parent > child

div>p选中p，且p必须是div的子元素，不包括隔代。

prev + next

div+p紧跟着div的p

prev ~ siblings

div~p选中p，且p前面必须是div。

基本过滤器：

:first

p:first匹配第一个p元素

:last

p:last匹配最后一个p元素

:not(selector)

过滤掉selector选中的元素

:even

偶数元素，0开始的索引。

:odd

奇数元素，0开始的索引。

:eq(index)

根据index返回一个元素。

:gt(index)

索引大于index的元素。

:lt(index)

索引小于index的元素。

:header

标题元素，h1到h6。

:animated

当前正在动画状态的元素。

内容过滤器：

:contains(text)

匹配文本中包含text的元素。

:empty

匹配没有任何子节点的元素。(有文本节点算作有节点)

:has(selector)

在selector匹配的元素中，至少要包含一个才可以匹配。

:parent

匹配所有作为父元素的元素。

可见性过滤器：

:hidden

所有可见元素

:visible

匹配所有不可见元素。

属性过滤器：

[attribute]

设置了指定属性的元素。

[attribute=value]

属性attribute的值等于value

[attribute!=value]

属性attribute的值不等于value，或者没有指定该属性。

[attribute^=value]

属性attribute的值以value开始。

[attribute$=value]

属性attribute的值以value结束。

[attribute*=value]

属性attribute的值含有value。

[attributeFilter1][attributeFilter2][attributeFilterN]

匹配满足所有属性过滤器的元素。

子节点过滤器：

:nth-child(index/even/odd/equation)

匹配元素是它们父亲元素的第n个子节点、或者是奇数偶数节点。

:first-child

作为第一个子节点的元素。

:last-child

作为最后一个子节点的元素。

:only-child

作为唯一的子节点的元素。

表单选择器：

:input

匹配input, textarea, select 以及button 元素。

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

匹配不可见的元素以及input hidden

表单过滤器：

:enabled

:disabled

:checked

:selected

管理选择结果

访问结果长度

$('p').size()

size方法

获取某个元素

$('p')[0]

$('p').get(0)

将结果转换为数组

get方法如果没有参数就会将

var arr = $('p').get()

取得当前节点的索引

$('#foo').index($('div'))

取得id为foo的div在所有div内的索引。

向结果中添加元素

$('p').add('a').fadeOut().fadeIn();

和$('p,a').fadeOut().fadeIn();是完全等同的。

从结果中删除元素

$('div').not('#foo').fadeOut().fadeIn();

从$('div')中去掉'#foo'。

注意not不再接受标签。不能写not('div#foo')

从结果中过滤元素

$('div').filter('#foo').fadeOut().fadeIn();

从div中再过滤一遍id等于foo的。再如：

$('p').filter('[title]').fadeOut().fadeIn();

filter与not一样不再接受标签，而且过滤的时候没有=只有^=、*=、$=。filter中也可以使用函数过滤器，返回true的选中。

$('div').filter(function(){ return true})

极端情况：

$('div').filter(function(){ return false}).fadeOut().fadeIn();

一个也不选中。

$('div').filter(function(){ return true}).fadeOut().fadeIn();

全部选中。

在结果范围内寻找元素

$('ul').find('a').fadeOut().fadeIn();

在ul的范围内再寻找a。

jQuery链

end方法

返回上一层操作的元素。

$('div').find('a').end().fadeOut().fadeIn();

end又回到了$('div')。

andSelf方法

$('div').find('a').andSelf().fadeOut().fadeIn();

包含$('div')以及.find('a')的结果。

操作元素

each方法

each方法可以遍历所有的选中的元素，并且使用一个函数来对其进行操作。

$('p').each(function(index){$(this).prepend(index+'.')});

选中所有的p，并且在前面加上索引号。

属性

使用attr访问和设置元素的属性。

var test = $('p[title]').attr('title');

获得了title属性的值。当传递两个参数的时候可以设置属性。

$('p[title]').attr('title','jQuery');

将title属性设置为'jQuery'。

$('a[href^=http://]').attr('target','_blank');

外部链接在新窗口打开。

removeAttr删除属性

$('p[title]').removeAttr('title');

删除了title属性。

CSS样式

直接使用css来设置CSS属性。

$('p').css('color','green')

addClass添加类名。

removeClass删除类名。

toggleClass切换类名。

元素内容

html()访问innerHTML

html(content)设置innerHTML

text()访问文本。

text(content)设置文本。

书上的例子，非常巧妙：

$('li').click(function(){var temp = $(this).html(); $(this).text(temp);})

点击就显示源代码。

操作元素

append

给元素末尾添加一个子节点。除了可以添加DOM节点之外，还可以这么写：

$('p').append('<a href="http://bbs.blueidea.com">经典论坛</a>')

如果append的目标只有一个，那么就和DOM操作的时候一样，已经在文档内的会被移动。如果目标是多个，那么是采用复制的方式。

appendTo

将元素添加到别的元素中作为尾部子节点。

prepend

给元素头部添加一个子节点。

prependTo

将元素添加到别的元素中作为头部子节点。

before、after

分别将元素插入到其它节点的前面或者后面。

remove

删除节点。

empty

清空一个节点。

clone

复制一个节点。

表单

val获取或者是设置表单域的值。

事件

bind

绑定事件响应函数。

$('p').bind('click',function(){$(this).prepend('<strong>Clicked!</strong>');});

每当点击p元素的时候就在前面加一段文字。

也可以直接使用事件名，比如click等等：

$('p').click(function(){$(this).prepend('<strong>Clicked!</strong>');});

等效上面的代码。

one

只执行一次的事件响应函数。

unbind

unbind不带参数会删除所有时间响应函数。

$('p').unbind('click')则只删除指定事件的时间响应函数。

$('p').unbind('click',func)则只删除指定的func函数。

事件对象

事件对象统一以函数第一个参数的形式被传入事件响应函数。

trigger

模拟事件触发

$('p').trigger('click');

会触发所有p元素的click事件。

toggle

事件响应函数的切换

function func1(){ $(this).prepend('func1');}

function func2(){ $(this).prepend('func2');}

$('p').toggle(func1,func2);

hover

鼠标经过的效果

function func1(){ $(this).prepend('func1');}

function func2(){ $(this).prepend('func2');}

$('p').hover(func1,func2);

效果

show

显示，语法：show(duration,callback)，例如：

$('p').show(3000)

hide

隐藏，如上。

fadeIn、fadeOut

渐显和渐隐效果。

fadeTo(duration,opacity,callback)

到指定的opacity。例如：

$('p').fadeTo(2000,0.5)

在两秒之内变化到0.5。

slideUp、slideDown、slideToggle

滑动显示，隐藏，切换。例如：

$('p').slideUp(2000)

$('p').slideDown(2000)

animate(params,duration,easing,callback)

自定义动画

params是对象，属性就是所有要变换的CSS属性。

[/code]

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }