5demo5: 

demo5-收缩展开功能 

$("#head").click(function() 

{$("#content").slideToggle("slow",function(){ alert("Hello,cssrain..");}); 

}); 

程序解释: 

1,首先把JQ导入. 

2,然后开始写函数了。$(document).ready(function(){}); 

3,前面说过了,获取标签能直接 $("标签")。给标签注册 onclick事件直接可以 click. 

4,核心代码:

$("head").click(function(){$("content").slideToggle("slow");});

5,slideToggle(speed, callback)

通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。

6,demo6:

appendTo的用法

{$("#head2").click(function()

{$("<input type='text' name='ddd' id='ddd' value='hello,cssrain..' ><br>").appendTo("#ccc");});}

<input type="button" name="head2" id="head2"   value="appendTo" >

<div   name="ccc" id="ccc" >看这里的变化</div>

程序解释:

appendTo():

把所有匹配的元素追加到另一个、指定的元素元素集合中

7, demo7:

表格隔行变色, 鼠标滑过变色,点击变色.

代码解释:

例子中我已经把 解释放上去了,这里就不再贴注释了。

例子中用了:mouseover(),addClass(),mouseout(),removeClass(),click(),

toggleClass(),tr:even   等方法。

另外解释了toggle()toggleClass()的区别。

另外这个例子 我用了   链式操作  .可以查看   链式操作.txt 里面有解释。

8demo8:

toggle( )的用法:

$("p").toggle()

切换元素的可见状态。

如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

9demo9:

hover()的用法:

Hover(function over ,function out )

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.

Table里也可以用。

10,demo10:

忘记说了

其实$(document).ready(function(){
// 你的代码
});

中的$ 也可以用 jQuery代替

jQuery(document).ready(function(){

jQuery(".").click(function(){jQuery(this).toggleClass("")})

});

代替有什么好处呢? 有可能你会用其他的js库,象prototype也是$, 有可能会冲突。

所以用jQuery代替$是比较安全的写法。

还有就是:

$(document).ready(function(){
//
});  的缩写法:

$(

function() {

//

}

);

11demo11:

each—find的用法

$("#orderedlist").find("li").each(function(i) {})

each( Function 函数 fn要执行的函数 )以每一个匹配的元素作为上下文来执行一个函数

12,demo12:

parents()的用法:

$(this).parents("p").addClass("highlight");

parents( String expr )

取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。

13,demo13:

load()的用法:

$("#feeds").load("FAQ1.html",function() { alert("load is done");}

<div id="feeds"></div>

从远程的一个文件中载入HTML并且将它注入到DOM

14demo14:

next的用法:

$("p").next().html()

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素。

可以用一个可选的表达式进行筛选。

 posted on 2010-09-07 10:56  纳米程序员  阅读(359)  评论(0编辑  收藏  举报