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

总述：百度页面
- 百度页面一：
- 百度页面二：

总述：百度页面

     这里主要讲下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=$("<span></span>");$.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则是鼠标在离开子元素时就触发了。