JasonBie

jQuery概述

jQuery是集JavaScript, CSS, DOM, Ajax于一体的强大框架体系。主旨:Write less, do more。
1. jQuery基本功能
1)访问和操作DOM元素
2)控制页面样式(可以兼容各种浏览器)
3)对页面事件的处理
4)大量插件在页面中的运用
5)与Ajax技术的完美结合
2. 搭建jQuery开发环境
1)在http://jquery.com下载。
2)在script标签中引用:
<script language="javascript" type="text/javascript" src="Jscript/jquery-1.7.1.js"></script>
3. 简单弹出窗口的例子
<html>
<head>
    <title>jQuery程序1</title>
    <script language="javascript" type="text/javascript" 
            src="jquery/jquery-1.7.1.js"></script>
    <script type="text/javascript">
           $(document).ready(function(){
              alert("Hello!!!");           
           })
    </script>
</head>
<body>
</body>
</html>
$(document).ready(function(){})即是jQuery代码,相当于window.onload,可以简写成$(function(){})
4. jQuery的链式写法
    <script type="text/javascript">
         $(function(){
          $(".divTitle").click(function(){
            $(this).addClass("divCurrColor").next(".divContent").css("display","block");
          });
         });
    </script>
5. jQuery访问DOM对象
JavaScript方式:
var tDiv=document.getElementById("divTmp");
var oDiv=document.getElementById("divOut");
var cDiv=tDiv.innerHTML;
oDiv.innerHTML=cDiv;
jQuery方式:
var tDiv=$("#divTmp");
var oDiv=$("#divOut");
var cDiv=tDiv.html();
oDiv.html(cDiv);
6. 动态切换CSS样式:
$(function(){
$(".divDefault").click(function(){
$(this).toggleClass("divClick").html("点击后的样式");
});
});

posted on 2012-01-18 17:10  JasonBie  阅读(180)  评论(0编辑  收藏  举报

导航