【原】初学Jquery

知道Jquery已经很长时间了,但从来没有应用过,今天打算学习一些简单的功能以及在日常项目中经常使用的效果。

官方网站:http://jquery.com/   下载地址:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=

其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

 

1、首先来看一个click点击实例:

html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divclick").click(function(){alert("hello jquery");});
});
</script>
</HEAD>
<BODY>
  <div id="divclick">1、鼠标点击时触发——点击此处</div>
  <hr />
</BODY>
</HTML>

image

分析一下:

$(document).ready(function(){}); 当文档对象载入完成后的事件。相当于我们以往在body标签的写onload(function(){})。

$("#divclick").click(function(){alert("hello jquery");}); 对ID为divclick的对象的一个鼠标点击事件进行了处理,$("#divclick")等价于document.getElementById("divclick")。

跟以往的对比,1、获取一个对象不用document.getElementById("divclick")这样长的方法,只需$("#divclick").2、以往事件总是与函数放在dom对象里面写的如:<div id=”divclick” onclick=”a()”>点击</div> 现在只需$("#divclick").click(),对对象的事件处理放在javascript代码里,实现了javascrīpt代码与html代码分离。

 

2、动态为对象增加样式

css code:

<style>
.red{
color:red;
}
</style>

javascript code:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divcssclass").click(function(){$("#divcssclass").addClass("red");});
});
</script>

dom code:

<div id="divcssclass">2、点击后字体颜色变成红色——点击</div>

image

 

3、对象效果,show()、hide()方法

show():显示隐藏的匹配元素

hide():隐藏所有匹配的元素

例如:

javascript code:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divclickshow").click(function(){$("#divshow").show();});
$("#divclickhide").click(function(){$("#divshow").hide();});
});
</script>

dom code:

<span id="divshow" style="display:none">3、显示隐藏的匹配元素</span>
  <span id="divclickshow">显示</span>
  <span id="divclickhide">隐藏</span>

如果还想在显示或隐藏的时候来点动画的话:可以用show("slow")和hide("slow")看看效果。

image

对象的效果还有toggle()slideDown(speed, [callback])fadeIn(speed, [callback])等等。。。。在jquery的API手册里都有。

 

4、利用Jquery实现的菜单

先来认识将要用到的知识:

1、$("#mainNav > li"),匹配ID为mainNav的对象下面所有的子元素li。结果是一个数组对象。

2、li.each(function(i){}),上面说到获得的li是一个数组对象,此方法为遍历这个对象,function(i){}中的i为遍历对象的索引。

3、li.eq(i).hover(),当li数组成员索引为i时调用hover方法。

4、hover(over, out),鼠标移动到一个对象上面及移出这个对象的方法,over是鼠标移动到该对象时调用的方法,out是鼠标离开该对象时调用的方法。

css code:
  <style type="text/css">
    *{ margin:0px; padding:0px; list-style:none; }
    body{ font-size:12px;   }
    .nav{ float:left; clear:both; margin:100px; display:inline;  }
    .nav li{ float:left; position:relative;  }
    .nav li a{ display:block; width:60px; padding:8px 0px 6px; text-align:center; color:#000; background:#ccc; text-decoration:none; }
    .nav li a:hover { background:#666; color:#fff; }
    .nav li ul{ position:absolute; display:none;  }
    .nav li ul li {  float:none; }
    .nav li ul li a{ background:#eee; }
  </style>

javascript code:
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    var li = $("#mainNav > li"); //找到#mainNav中子元素li,得到数组li;
    li.each(function(i){ //循环每一个LI
        li.eq(i).hover(
            function(){
                $(this).find("ul").show(); //鼠标移到到上面时找到li里面的ul元素设置为显示
            },
            function(){
                $(this).find("ul").hide(); //鼠标离开时找到li里面的ul元素设置为隐藏
            }
        )
    })
})
  </script>
dom code:

<BODY>
  <ul id="mainNav" class="nav" >
    <li><a href="#">首 页</a></li>

    <li><a href="#">公司简介</a>   
        <ul>
            <li><a href="#">员工介绍</a></li>
        </ul>
    </li>

    <li><a href="#" >部门情况</a>
        <ul>
            <li><a href="#">技术部</a></li>
            <li><a href="#">运维部</a></li>
        </ul>
    </li>
</ul>
</BODY>

image

 

5、Jquery实现ajax

如果手动创建XMLHttpRequest对象发送异步请求,过去我们要写一大段代码,如:

<script type="text/javascript">
var req = null;
    function processReqChange() {
      if (req.readyState == 4 && req.status == 200 ) {
        var dobj = document.getElementById( 'htmlDiv' );
        dobj.innerHTML = req.responseText;
      }
    }

    function loadUrl( url ) {
      if(window.XMLHttpRequest) {
        try { req = new XMLHttpRequest();
        } catch(e) { req = false; }
      } else if(window.ActiveXObject) {
        try { req = new ActiveXObject('Msxml2.XMLHTTP');
        } catch(e) {
        try { req = new ActiveXObject('Microsoft.XMLHTTP');
        } catch(e) { req = false; }
      } }
      if(req) {
        req.onreadystatechange = processReqChange;
        req.open('GET', url, true);
        req.send('');
      }
    }
    loadUrl( “aaa.html”);

</script>      ——最后将异步执行的结果,赋到id为htmlDiv元素之上。

因为jquery底层已经对ajax进行了现实,大多数情况下你无需直接操作XMLHttpRequest对象,在高层你只需调用$.get, $.post 等。如:

javascript code:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#divclickajax").click(function(){
    $.get("aaa.html",function(text){
    alert(text);
    });
    });
})
  </script>

dom code:

<div id="divclickajax">点击执行ajax请求</div>

aaa.html 内容:

ajax text!

 

image


 

jquery为我们的应用程序编写js脚本提供了许多方便,并且很好的现实了html代码与js分离,在用jquery的时候,我确实感觉到了它的优雅。

posted on 2009-08-07 15:14  RedSoft  阅读(956)  评论(2编辑  收藏  举报