用原始代码制作简易的百度页面

总述：百度页面

     这里主要讲下ajax的实现和鼠标移到一个块上所触发的事件；

百度页面一：

代码：

   <script>
    function weatherInformation() {
       $.ajax({
           url: "http://api.k780.com:88/?app=weather.today&weaid=1&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=?",
           dataType:"jsonp",
           type:"Post",
           jsonpCallback: "jsonpCallback",
           success:function(data){
               var $sp=$("");
               $.each(data,function(k,v){
                   if(k=="success"){

                   }else {
                       $("#tianqi").html(v.citynm+" "+":"+" "+v.weather_curr+" "+"|"+" "+v.temperature+" "+v.wind);
                   }
               });
           },
           error:function(responseText, textStatus, XMLHttpRequest){
               alert( textStatus);
           }
       });
       setInterval(weatherInformation,300000);
    }
    weatherInformation();
</script>

代码描述：
如上图，页面左上角的天气实时信息是通过ajax实现的，并且设置了时间设定器setInterval()，每隔5分钟回调一次weatherInformation函数，从而更新一次天气信息；
ajax实现：在不加载整个页面的情况下，通过后台服务器加载数据，并在网页内显示天气信息，不用等待结果，页面其它部分可先行加载；ajax括号中的参数就是json，通过post协议向服务器发送页面请求，地址就是url，数据类型是jsonp,请求成功时服务器反回的数据就是json,对json对象作出判断，如果k是"success"什么都不做，否则就取v的值,显示到页面中;请求失败时则显示parsererror.

百度页面二：

代码：

 $(document).ready(function(){
       $("#block").mouseover(function(){
           $("#block1").show(1000);
           $(".k1 ,.k2, .k3, .k4, .k5, .k6").mouseover(function () {
              $(this).css("text-decoration","underline");
           });
           $(".k1 ,.k2, .k3, .k4, .k5, .k6").mouseout(function () {
               $(this).css("text-decoration","none");
           });
           $("#block").hide(1000);
       });
       $("#block1").bind('mouseleave',function(event){
           console.log("zhixing");
           $(this).hide(1000);
           console.log("xiaoshi");
           $("#block").show(1000);
       })
   })   

代码描述：
如上图，右上角原是"更多产品",在原代码中用div显示出来的，现在出现了一个栏目条，这里给div加了mouseover()，当鼠标经过"更多产品时"，div隐藏，栏目条(#block1)显示，栏目条中的文字(.k1 ,.k2, .k3, .k4, .k5, .k6)显示下划线，这里又添加了个mouseover事件，并给栏目条中的文字添加了css样式(“text-decoration”,“underline”),鼠标离开时则触发mouseout事件，css中的text-decoration为none；
当鼠标离开栏目条(#block1)时，#block1上添加bind函数，在bind函数中，为被选元素添加一个或多个事件处理程序，并执行事件发生时运行的函数，这里添加了mouseleave事件，当鼠标离开div时，栏目条(#block1)1s隐藏,div(#block)1s显示。
PS:mouseout与mouseleave的区别，mouseleave是在鼠标离开被选元素时触发，而mouseout则是鼠标在离开子元素时就触发了。