Jquery(二)

来源：互联网发布：宝宝生长曲线图软件编辑：程序博客网时间：2024/06/04 22:47

☆ 1.第一个jQuery程序

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>第一个jQuery程序</title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <!--    导入jQuery插件  -->  <script type="text/javascript" src="jquery-1.6.4.min.js"></script><script type="text/javascript">    /*        javascript中的页面加载完毕 执行一个函数        window.onload=function(){}        onload=function(){}        jQuery中的页面加载完毕 执行一个函数        1.$(document).ready(function(){});        2.$().ready(function(){});        3.$(function(){});    */    /*    //第一种书写方式    $(document).ready(function(){        alert("这是我的第一个jQuery程序");    });    */    //第二种书写方式    /*    $().ready(function(){        alert("HelloWorld");    });    */    //第三种    $(function(){        //弹出一个窗口        alert("Hello jQuery");    });</script> </head> <body> </body></html>

☆ 2. jQuery中的三个基本选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>jQuery中的三个基本选择器</title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <script type="text/javascript" src="jquery-1.6.4.min.js"></script>  <script type="text/javascript">    /*        jQuery中的三个基本的选择器:        1.id选择器        2.标签选择器        3.类选择器        jQuery有完善的错误处理机制    */    //页面加载完毕 执行一个函数    $(document).ready(function(){        //id选择器        $("#h02").css("color","red");        //标签选择器        $("h3").css("color","orange");        //类选择器        $(".p01").css("color","green");    });  </script> </head> <body>  <h2 id="h06">jQuery是什么?</h2><p class="p01">jQuery是优秀的JavaScript框架，能方便的处理html文档、事件、动画以及Ajax交互效果。</p><h3>    Hello jQuery</h3> </body></html>

☆ 3.javascript和jQuery的区别

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>javascript和jQuery的区别 </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <script type="text/javascript">    window.onload=function(){        var h01Node=document.getElementById("h02");        h01Node.style.color="red";    }  </script> </head> <body> <body>  <h2 id="h04">jQuery是什么?</h2><p class="p01">jQuery是优秀的JavaScript框架，能方便的处理html文档、事件、动画以及Ajax交互效果。</p><h3>    Hello jQuery</h3> </body></html>

0 0