百度空间 | 百度首页 
 
查看文章
 
轻量级JS库JQuery!
2007年03月17日 星期六 21:57

说它轻量 其实一点也不轻量,这个库的语法太酷了

极大减少代码编写量,提高代码与页面的分离度.看个例子先

先加入类库

<script src="lib/jquery.js" type="text/javascript"></script>

<script>

   $(document).ready(function(){

$("#faq").find("dd").hide().end().find("dt").css("cursor","hand").click(function(){
     var a = $(this).next();
     if (a.is(":visible")) {
         a.slideUp(1000);
     }else {
         a.slideDown(1000);
     }
    });

});

</script>

<div id="faq">
<dt>问题1</dt>
     <dd>答案1</dd>

<dt>问题2</dt>
     <dd>答案2</dd>

<dt>问题3</dt>
     <dd>答案3</dd>
</div>

能看出上边的js代码作了什么工作吗?

没错. 当点击dt元素时 开关下面的答案.slideUp(1000)函数中的1000是1000毫秒 .

代码少吧?再举个例子,大家在很多站点估计都看到过这样的效果,

当输入框获得焦点时候,边框颜色改变加亮,当离开输入框时,边框颜色还原

以前我们可能在每个<input type="text">里加上 onfocus="this.className='red'" onblur="this.className='blue'" ,是不是很麻烦? 利用Jquery我们可以这样写

$("input[@type=text],textarea").addClass("blue")

.focus(function(){$(this).removeClass("blue");$(this).addClass("red")})

.blur(function(){$(this).remove("red");$(this).addClass("blue")});

这句代码不但所有text类型的input框 甚至包括textarea多文本框都一步实现了这样的效果.

Is it cool enough?

想更多了解JQuery库,去Baidu 或 Google下吧

jQuery Docs - 1.1 API 中文版http://jquery.org.cn/api/cn/index.xml


类别:web2.0&js&ajax | 添加到搜藏 | 浏览() | 评论 (2)
 
最近读者:
 
网友评论:
1
2007年03月30日 星期五 02:20 | 回复
blog的技术含量挺高啊 呵呵
 
2
2007年04月13日 星期五 14:57 | 回复
我晕……]
 
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2009 Baidu