1.jQuery 是一个轻量级的javascript的框架 对javascript进行了封装
            提供了很多操作方式供开发者直接调用

2.jQuery的特点: 写的少 做得多
    a:强大的选择器
    b:出色的dom操作
    c:良好的兼容性
    d:可以提供方面的ajax操作

3.怎么写 jQuery
    a:引入jQuery
   

<script type="text/javaScript" src="jQueryxx.xx.js"></script> 
 
      jQuery 有不同的版本 
 
      jQuery1.xxxx.js 
 
      jQuery2z.xxxx.js



    b.写法
        1.复杂写法
         

$(document).ready( 
 
                         function () { 
 
                             alert("aa"); 
 
                         });


         2.简写
               

$(function () { 
 
                     alert("bb"); 
 
                 })


    c:选择器
       1.id选择器:
         

$(function () { 
 
                     alert($("#box").html());//获取id为box的内容且包括样式 
 
                     alert($("#box").text());//只获取id为box的内容不包括样式 
 
                     alert($("#box").html("<font>aaa</font>"));//将id为box的内容换成aaa且包括样式 
 
                     alert($("#box").text("<font>aaa</font>"));//将id为box的内容换成<font>aaa</font>且不包括样式 
 
                     //如果.html() .text() 中含有内容则替换原有内容,不然则输出原有内容 
 
                 })


        2.class选择器
                   

$(function () { 
 
                             $(".mybox").text("<font color='#ff0000'>bbbb</font>"); 
 
                             $(".mybox").html("<font color='#ff0000'>bbbb</font>"); 
 
                         });


        3.标签选择器中选择子代
                 

$(function () { 
 
                             $("p:eq(2)").text("bbbb");                 //获取第三个p标签  eq(x) 
 
                                                                         x从0开始算 
 
                             $("p:even").css({"background":"#ff0000"}); //获取奇数p标签 
 
                             $("p:odd").css({"background":"#0000ff"});   //获取偶数p标签 
 
                         }); 
 

                         <body> 
 
                         <p>段落1</p> 
 
                         <p>段落2</p> 
 
                         <p>段落3</p> 
 
                         <p>段落4</p> 
 
                         </body>


        4.相邻标签选择器的使用
                   

$(function () { 
 
                          //$("div p").css({"background":"#ff0000"});//后代选择器 
 
                    //  $("div>p").css({"background":"#0000ff"});//子代选择器 
 
                      $("div+p").css({"background":"#0000ff"});//紧跟在div后面的第一个p 
 
                      $("div~p").css({"background":"#0000ff"});//匹配div后面的所有p 
 
                      }); 
 
                  </script> 
 

              </head> 
 
              <body> 
 
              <p>段落1</p> 
 
              <div><p>段落2</p></div> 
 
              <p>段落3</p> 
 
              <div> 
 
                  <ul><li><p>段落4</p></li></ul></div> 
 
              <p>段落5</p>


        5.dom 操作
                   

$(function () { 
 
             //          $("#img").attr({src:"images/gotoTop1.png", 
 
             //                            width:50, 
 
             //                            title:"这是一张图片" 
 
             //                        }); 
 
             //            $("#img").removeAttr("title"); 
 
             //            $("#img").addClass("box");           //添加类样式 
 
             //            $("#img").removeClass("box");        //删除类样式 
 
             //            //如果存在就删除类样式,不存在就添加类样式 
 
             //            $("#img").toggleClass("box"); 
 
             //            $("#img").toggleClass("box"); 
 
                        var a = $("#shu").val("admin"); //获取id为shu的输入框并将初始值设为admin 
 
                        alert(a.val());  //获取输入的值 
 
                     });


       6.文档操作
       

function add() { 
 
                         $("#box").append("<div class='mybox'></div>");//在boxdiv后放一个属性为mybox的div 
 
                         $("<div class='mybox'></div>").appendTo($("#box"));//将一个属性为mybox的div放在boxdiv后 
 
                         $("#box").before("<div class='mybox'></div>");//在boxdiv前放一个属性为mybox的div 
 
                     } 
 
                     function bao() { 
 
                         $("#bao").wrap("<div class='mybox'></div>");//将baodiv用myboxdiv包含起来 
 
                     } 
 
                     function addquestion() { 
 
                         $("ol").append("<li><input type='text'/></li> ");//在ol中添加li li中添加输入框 
 
                     } 
 
                     function deletequestion() { 
 
                         $("ol li:last").remove();//将ol 中的最后一个li删除 
 
                     }


       7.动态效果展示
     

function show(){ 
 
                         $("#box").show(2000).delay(2000).hide(2000);//将boxdiv在两秒的时间内展现出来, 
 
                                                                     // 然后停留两秒,最后在两秒的时间内消失 
 
                     } 
 

             $( function(){ 
 
                          $("#box").slideDown(2000).delay(2000).slideUp(2000);//将boxdiv在两秒的时间内下降展现出来, 
 
                                                                            // 然后停留两秒,最后在两秒的时间内上升消失 
 
                  });


4.软件的版本
    xxxx@ 内测版本
    xxxxB 内测完成 已经修复了基本功能的bug 可以供外部用户测试的版本
    xxxxR 最终版本 正式版本
        软件名_大版本号_小版本号.js
           一般仅仅修改功能,新加入小功能  -》改 小版本号
           遇到整体架构  大功能的发布      -> 改 大版本号

5.
   区别:   window.onload                          $(document).ready()
             只能加载一次                            可以执行多次


       在页面所有元素加载完成后才能执行              在页面的所有标签加载完成后就可以触发