建网站——利用JQUERY自己写JS（一）

leo280 · 发表于 2009-5-4 17:06:17

在本站浏览了一些时间，感觉很多人对建站有兴趣，所以摘录一些对大家有用的东西。
现在很多网站都有漂亮的JS来控制对象，使网站看起来更生动，更漂亮，在这里我介绍一款JS库——JQUERY（很早以前就出来了，炒旧饭的话可不要扔我啊），这个库会使你在写JS时显得更省事，更简单！
首先，当然是下载JQUERY文件，放到网站相关目录；
其次，就是用<script src="jquery.js" type="text/javascript"></script>来连接这个库文件。
好了，准备工作做好了，下面一些笔记是这次讲座的关键，这些代码或许开始看的时候很吃力，但是久了就感到有无限的魔力在里面了！

1, ：eq()和nth-child()
看下面代码：
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$("#selected-plays > li:eq(1)").addClass("a");
//等价于  $("#selected-plays > li:nth-child(2)").addClass("a");
//注意：js数组是从 0 开始的，所以eq（1）是取第二个元素。
//而css选择器:nth-child（）是从 1 开始的，所以要选择第二个元素，得使用 :nth-child(2)  ，而不是:nth-child(1)。
  })
</SCRIPT>

2，:odd 和  :even
:odd    : 奇数行
:even    : 偶数行
新手经常会说，好像跟我们做的相反？
其实与 :eq() 选择器一样，下标都是从 0开始的，
也就是  表格的第一行编号是 0  （偶数）；
第二行编号是 1 （奇数）；以此类推。。。

3, $("tr:odd").addClass()
可以写成  $("tr").filter(":odd").addClass()

4，$('td:contains("cssrain")')       //取得包含字符串 cssrain 的所有td

5，jquery 转 dom ：
$("td").get(0).tagName 或 $("td")[0].tagName

6，load():
jquery中的load（）有2层意思，
第一层意思可以等价于 dom中 window.onload
第二层意思可以load（url ）。

7：ready简写：
1;
$(document).ready(function(){
//do something
})
2;
$().ready(function(){
//do something
})
3;
$(function(){
//do something
})

8，事件冒泡：
正常的来说：点击B  会触发a的click。
如果我们不想触发A，可以用stopPropagation() 阻止冒泡.
具体例子：
<div id="a">aaaaaaa
<div id="b">bbbbbbbb</div>
aaaaaa</div>
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#a').click(function(){
alert("A")
})
$('#b').click(function(e){
alert("B")
e.stopPropagation();//阻止冒泡，从来不输出 “A" 。可以去掉，试试对比效果。
})
})
</SCRIPT>

9, hide()show()会记住上一次的dipslay状态
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').toggle(function(){
$('#a').hide();//display : none ，记住display 为 inline
$('#b').hide();//display : none ，记住display 为 block
},function(){
$('#a').show(); //display : inline
$('#b').show(); //display : block
})
})
</SCRIPT>
<DIV id="a" style="display:inline;">a</div>
<DIV id="b" style="display:block;">b</div>
<input type="button" id="test" value="test" />

10, hide()  show()加时间参数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').toggle(function(){
$('#a').hide(500);//display : none
$('#b').hide(500);//display : none
},function(){
$('#a').show(500); //display : inline
$('#b').show(500); //display : block
})
})
</SCRIPT>
<DIV id="a" style="display:inline;">a</div>
<DIV id="b" style="display:block;">b</div>
<input type="button" id="test" value="test" />

11，效果：
show(), hide()会同时修改多个样式属性  : 高度，宽度和不透明度。
fadeIn() fadeOut() : 不透明度
fadeTo() : 不透明度
slideDown() , slideUp()  :高度
如果都不能满意，只能用animate（）了
animate()提供了更为强大的，复杂的效果。

12，animate() :
之前 .show('slow');  // slow代表的是0.6秒内同时改变高度，宽度和透明度。如果用时间表示是 600 ；===  .show(600);
那么我们再来看看 animate()
animate({heigth : 'slow' ,width : 'slow' } , 'slow' )
这里之所以可以 height : 'slow' 其实就跟 .show('slow')  类似，当然他前面规定了height  。。

13,做动画之前先确定位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#a').css("position","absolute");//如果把这句去掉，动画就没了。
/*
在使用.animate之前，请先把位置确定，不管你是用的 absolute 还是relative
总之要设置其中的一种，因为所有的块级元素默认是static。
其实是跟css有关。
*/
$('#test').click(function(){
$('#a').animate({ left : '300' } , 'slow' )
})
})
</SCRIPT>
<DIV id="a" >a</div>
<input type="button" id="test" value="test" />

leo280 · 发表于 2009-5-4 17:07:28

娃娃头像是
：o

logosxiang · 发表于 2009-5-7 07:17:26

好东西，感谢楼主分享。。。学习啦~:)

szc438357075 · 发表于 2009-5-19 20:57:40

不错谢谢分享

账号		自动登录	找回密码
密码			注册[Register]