锋利的JQuery 第四章后续部分

4.2JQuery中的动画

hide(1000) 和show(1000) 可以把元素隐藏和显示，隐藏类似于向左上角收起的效果，显示的时候是从左侧想右侧显示

 

fadeOut()作用是逐渐降低元素的透明度，直至消失，fadeIn()增加元素的透明度直至显示。

 

sideUp()作用是由下到上缩短显示，sideDown()作用是由上至下拉伸显示（俗名：拉窗帘效果）；

 

animate() 自定义动画

1.所有JQ中的动画方法都可以使用回调函数，就是所有动画执行完成后执行的方法，叫做回调函数例如：

 $(function(){

           functionanimateIt() {

            $("#mover").slideToggle("slow",animateIt);

        }//回调自己本身回调函数，slideToggle用于交互的（窗帘）动画

       $("#panel").click(function(){

              $(this).animate({top:"200px" , width :"200px"}, 3000 ,function(){

                         $(this).css("border","5pxsolid blue");

                     })

                     

       });

   });

2.停止元素的动画

stop()  

4.2.7交互动画

上面其实已经使用过一个，slideToggle("slow")，当然还有很多，例如:前面几章说过toggle()方法可以切换元素的可见状态，但是最新版JQ1.11里有问题，动画效果组合toggle使用就起到了 相互切换的效果了~~以下是书中提到的动画切换的效果：

slideToggle()拉窗帘的效果实现，书上解释：通过改变元素的高度来切换元素的可见性。

fadeToggle()通过改变元素的通明度调整可见性。$(this).next().fadeToggle(600, 0.1);

 

 

下一章第五章是对表格的操作和更多的应用，话说先跨过，先学第6章，后续再补第5章内容， 下面说点额外JS的话题，也是今天看到就顺便说说。 

JS中事件对象

为了兼容浏览器，所以才用如下方式：

oP.οnclick=function(oEvent){

 if(window.event){

  oEvent=window.event;  }}

表单中文本框，自动获取标签默认的内容，并选择默认文本

<input type="text"name="name" id="name" class="txt" value="姓名" οnmοuseοver="this.focus()"οnfοcus="this.select()">

 

 

为了第六章内容先温习下JS中 的AjaxJS中的Ajax get 和post方法

<scriptlanguage="javascript">

var xmlHttp;

function createXMLHttpRequest(){

    if(window.ActiveXObject)

        xmlHttp= new ActiveXObject("Microsoft.XMLHttp");

    elseif(window.XMLHttpRequest)

        xmlHttp= new XMLHttpRequest();

}

function createQueryString(){

    varfirstName = document.getElementById("firstName").value;

    varbirthday = document.getElementById("birthday").value;  

    varqueryString = "firstName=" + firstName + "&birthday=" +birthday;

    returnencodeURI(encodeURI(queryString));   //两次编码解决中文乱码问题

}

function doRequestUsingGET(){

    createXMLHttpRequest();

    varqueryString = "9-3.aspx?";

    queryString+= createQueryString() + "&timestamp=" + new Date().getTime();

    xmlHttp.onreadystatechange= handleStateChange;

    xmlHttp.open("GET",queryString);

    xmlHttp.send(null);

}

function doRequestUsingPOST(){

    createXMLHttpRequest();

    varurl = "9-3.aspx?timestamp=" + new Date().getTime();

    varqueryString = createQueryString();

    xmlHttp.open("POST",url);

    xmlHttp.onreadystatechange =handleStateChange;

    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    xmlHttp.send(queryString);

}

function handleStateChange(){

    if(xmlHttp.readyState== 4 && xmlHttp.status == 200){

        varresponseDiv = document.getElementById("serverResponse");

        responseDiv.innerHTML= decodeURI(xmlHttp.responseText);    //解码

    }

}

</script>