论坛首页 → 入门技术论坛 →

初学Jquery

浏览 3999 次
锁定老帖子 主题：初学Jquery
精华帖 (0) :: 良好帖 (0) :: 新手帖 (7) :: 隐藏帖 (0)
作者 正文
  • redsoft
  • 等级: 初级会员
  • 性别:
  • 文章: 35
  • 积分: 70
  • 来自: 成都
   发表时间：2009-08-07   最后修改：2009-12-15
知道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>



分析一下：

$(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>



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")看看效果。



对象的效果还有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>



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!



jquery为我们的应用程序编写js脚本提供了许多方便，并且很好的现实了html代码与js分离，在用jquery的时候，我确实感觉到了它的优雅。
返回顶楼
         
  • andrewYe
  • 等级: 初级会员
  • 性别:
  • 文章: 14
  • 积分: 40
  • 来自: 成都
   发表时间：2009-12-09  
貌似$(document).ready()和onload()是有区别的哦
返回顶楼
          回帖地址
0 请登录后投票
  • redsoft
  • 等级: 初级会员
  • 性别:
  • 文章: 35
  • 积分: 70
  • 来自: 成都
   发表时间：2009-12-14  
谢谢指点！经参考其他资料区别主要是$(document).ready()表示DOM文档载入完成后将执行的函数，是“DOM文档载入完成后”，而window.onload()是指“页面加载完成后”将执行的函数。“页面加载完成”包括不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后，所以基本$(document).ready()是在window.onload()之前或者同时发生。

另：$(document).ready()相当于DOMContentLoaded();但貌似ie不支持。
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics