JQuery3

1. 動畫效果

1.1 顯示與隱藏

<script type="text/javascript">
    $(function(){
        //一、 隱藏 hide()
        $('#b2').click(function() {
            
            // 隱藏標籤 hide()
            // 一、hide()
            //$('#d1').hide();
            
            // 二、hide(speed) :speed秒數 以毫秒爲單位 動畫執行的時間
            // $('#d1').hide(3000);
            
            // 三、hide(speed, callback)
            // speed秒數 以毫秒爲單位 動畫執行的事件
            // callback:回調函數 當動畫執行結束後調用該函數
            $('#d1').hide(3000, function(){
                alert('動畫結束')
            });
            
            
        // 二、顯示 show()  
        $('#b1').click(function(){
            $('#d1').show( )
        })    
        })
        

        // 三、顯示與隱藏
        $('#b3').click(function(){
            // 顯示或隱藏 toggle()
            $('#d1').toggle();
        })
    })
</script>

1.2 淡入與淡出

<script type="text/javascript">
    $(function () {
        // 淡出
        $('#b2').click(function () {
            // 淡出 fadeOut()
            // fadeOut(speed)
            // fadeOut(speed, callback)
            $('#d1').fadeOut(1000)
            
        })
        
        $('#b1').click(function () {
            // 淡入 fadeIn()
            // fadeIn(speed)
            // fadeIn(speed, callback)
            $('#d1').fadeIn(1000)
            
        })
        
        // 淡入與淡出
        $('#b3').click(function () {
            $('#d1').fadeToggle(1000)
            
        })
        
        // 透明度變化
        $('#b4').click(function () {
            $('#d1').fadeTo(1000, 0.3);
        })
        
    })
</script>

1.3 劃入與劃出

<script type="text/javascript">
    // 劃出 slideUp
    $('#b2').click(function () {
        // slideUp(speed, callback)    
        $('#d1').slideUp(1000)
            
    })
    
    $('#b1').click(function () {
        $('#d1').slideDown(1000)
        
    })
    
    $('#b3').click(function () {
        $('#d1').slideToggle(1000)
        
    })
    
                

</script>

1.4 animation

<script type="text/javascript">
    $(function(){
        $('#id1').click(function () {
           // 更改div的某一個樣式
           // animate(更改的樣式及樣式值(數據類型爲字典格式),動畫的持續時間)
           $('#div1').animate({width:'500px'}, 3000);
        })
        
        $('#id2').click(function () {
            // 更改div的寬度 高度 透明度 背景顏色
            // 若是想要經過動畫改顏色須要引入另外一個文件
            $('#div1').animate({width:'500px', height:'500px', 
            backgroundColor: 'blue', opacity:0.3}, 3000);
        })
        
        $('#id3').click(function  () {
            // 相對值：在上一次的基礎上進行操做
            // 位置向右下角位置移動20px
            // $('#div1').css({'position':'relative'})
            $('#div1').animate({width:'+=30px', height:'+=30px',
            left:'+=30px', top:'+=30px'},2000)
        })
        
        // 動畫隊列
        $('#id4').click(function(){
            $('#div1').animate({width:'500px'},1000);
            $('#div1').animate({height:'500px'},1000);
            $('#div1').animate({top:'500px'},1000);
            $('#div1').animate({left:'500px'},1000);
        })
        
        // 動畫隊列的設置：進入或移出動畫隊列
        // animate會自動將動畫放到動畫隊列中，但css不屬於動畫
        // 不會自動放到動畫隊列中，須要手動設置。
        $('#id5').click(function(){
            $('#div1').animate({width:'500px'},3000);
            $('#div1').animate({height:'500px'},3000);
            // queue 隊列 每一個能夠設置動畫的標籤都有
            // 將css放到動畫隊列中
            $('#div1').queue(function(){
                $('#div1').css('background-color','blue');
                // 讓後面的動畫繼續執行
                $('#div1').dequeue();
            })
            $('#div1').animate({width:'100px'},3000);
            $('#div1').animate({height:'100px'},3000);
        })
        
        // 結束動畫
        // 一、clearQueue
        // 二、stop(boolean, boolean);
        // 三、finish()
        $('#id6').click(function () {
            // clearQueue()
            // 當前正在執行的動畫繼續執行直到完成，但後面的動畫再也不執行
            $('#div1').clearQueue();
            
        })
        
        
        $('#id7').click(function () {
            // 當前正在執行的動畫當即結束，繼續執行後面的動畫
            // $('#div1').stop();
            //$('#div1').stop(false,false);
            //$('#div1').stop(false);
            
            // 結束全部動畫
            //$('#div1').stop(true);
            //$('#div1').stop(true, false);
            
            // 當即完成當前動畫，繼續執行後面的動畫
            // $('#div1').stop(false, true);
            
            // 當即完成當前動畫，再也不繼續執行後面的動畫
            //$('#div1').stop(true, true);
            
        })
        
        
        $('#id8').click(function(){
            // finish()
            // 直接完成全部動畫
            $('#div1').finish();
        })
        
        // jQuery：鏈式寫法
        // 當主語一致時候，可使用鏈式結構
        $('#id9').click(function(){
            $('#div1').animate({width:'500px'},1000).animate({height:'500px'},1000).animate({top:'500px'},1000).animate({left:'500px'},1000);
            
            
        })
        
        
        $('#id10').click(function () {
            //延遲動畫
            $('#div1').delay(5000).animate({width:'500px'});
        })
        
        
        
    })
</script>

2. 數據請求

2.1

數據請求：
異步加載數據：頁面卡頓少
同步加載數據：當數據量較大，或者網絡很差，有可能頁面卡頓
同步請求：交易*/

異步加載
load(url, [callback])
url：接口 路由
callback：回調函數 不管數據是否請求成功，只要請求完成，就會執行

<script type="text/javascript"> 
     $('button').click(function(){
         // 一、load加載整個html文件
         // $('div').load('loadTest.html');
         
         //二、load加載部分html文件
         //$('div').load('loadTest.html #p2');
         
         //三、回調函數
         $('div').load('loadTest.html', function(responseText, status, XMLHttpRequest){
             console.log('加載完成')
             console.log(responseText); //請求的數據
             console.log(status);  // 請求結論 success   
             console.log(XMLHttpRequest); // 請求相關參數
             console.log(XMLHttpRequest.status); // 200
             /*
              * status:
              * 200 : 請求正確併成功
              * 4XX：請求錯誤，路徑參數錯誤
              * 5XX： 服務器錯誤
              * 3XX： 請求中轉
              * */
             /*
              * readyState:
              * 1：服務器鏈接已創建
              * 2： 請求已接收
              * 3：請求處理中
              * 4：請求已完成，且響應已就緒
              * */
         })
         
         
     })
</script>

2.2 getScript加載數據

<!--引入後當即執行-->
<!--<script src="jsTxst.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript">
    $('button').click(function () {
        //getScript('js文件路徑,[callback]')
        //getScript是全局函數，用$調用該函數
        // 若是js文件加載成功，會自動執行js文件中的內容
        
        //一、無回調函數
        $.getScript('jsTxst.js');
        
        //二、有回調函數
        $.getScript('jsTxst.js',function(){
            alert('完成了')
        });
    })
</script>

2.3 getJson加載數據

<script type="text/javascript">
    // Json:數組或字典 []  {}
    // JsonArray: 數組 最外層爲 []
    // JsonObject: 字典 最外層爲 {
    // JsonString: 字符串 很是少見
    
    //getJson('json文件路徑',[])
    //getJson是全局函數，用$調用該函數
    
    $('button').click(function(){
        // 若是咱們須要使用json文件中的數據，那麼咱們須要使用回調函數
        // json請求返回的數據是放在回調函數中的。放在函數中的第一個形參
        $.getJSON('a.json', function(data) {
            // data：存放返回的數據
            
            
        for(var i=0; i < data.length; i++){
                console.log(data[i]['name']);
                
                var $p = $('<p>'+data[i]['name']+ '</p>')
                $('div').append($p);
            }
        });
        
    })
        
</script>

2.4 getAndPost

<script type="text/javascript">
    /*  說明: 以xampp集成環境爲例子
    須要將該文件放到xampp目錄下的htdocs目錄中
    在瀏覽器中輸入你文件的路徑 如
    http://localhost/a/getAndPost.html 
    */
        
    
    /*
     * get: url必須是完整的
     * post：url是分開的 
     * IP地址與參數是分開的
     * */
    $('#b1').click(function(){
        // get請求
        // $.get(url, [data], [callback])
        // url:請求地址 
        // data:接口的參數
        //當get請求須要參數的時候，參數的傳入格式爲：
        // data參數格式:{key:value, key2:value2...}
        // key值:
        
        
        // callback：回調函數：回調函數中有一個參數，存放請求下來的數據
        
        // php文件只能在服務器端執行
        
        /*$.get('getTest.php', function(data){
            console.log(data);
        })*/
        
        var $i1 = $('#user').val()
        var $i2 = $('#pass').val()
        $.get('get.php',{username:$i1, content:$i2}, function(data){
            console.log(data);
        })
        
    })
    
    // post請求
    $('#b2').click(function(){
        // post請求
        // $.post(url, [data], [callback])
        // url:請求地址 
        // data:接口的參數
        //當post請求須要參數的時候，參數的傳入格式爲：
        // data參數格式:{key:value, key2:value2...}
        // key值:
        
        
        // callback：回調函數：回調函數中有一個參數，存放請求下來的數據


        var $i1 = $('#user').val()
        var $i2 = $('#pass').val()
        $.post('nextPost.php',{username:$i1, content:$i2}, function(data){
            console.log(data);
        })
        
    })
    
</script>

2.5 ajax

<script type="text/javascript">    
    // ajax  : 全局函數 $.ajax(options)
    // options： 數據類型爲字典類型 元素ajax所須要的各類參數
    
    
    
    $('#b1').click(function(){
        // 獲取輸入框中的值
        var $i1 = $('#user').val();
        var $i2 = $('#pass').val();
    
    
        $.ajax({
            // type: 設置請求類型 get post
            type:"get",
            // url 接口
            url:"get.php",
            // async 是否執行異步請求
            async:true,
            // data：接口所需接收的參數  數據格式爲字典類型
            data:{username:$i1, content:$i2},
            // dataType 返回的數據格式類型，默認就是json
            dataType:'json',
            // success 數據請求成功時調用，須要接受一個函數類型的參數
            // 該函數有一個默認的形參，形參表明請求時返回的數據
            success: function(data){
                console.log(data);
            },
            // error 當數據請求失敗時調用，須要接受一個函數類型的參數
            error: function(){
                console.log('請求失敗')
            }
            
            // 後期必需要寫的參數： type, url data success
            
            
            });
        
    })
    
    
    $('#b2').click(function(){
        // 獲取輸入框中的值
        var $i1 = $('#user').val();
        var $i2 = $('#pass').val();
        
        $.ajax({
            // type: 設置請求類型 get post
            type:"post",
            // url 接口
            url:"nextPost.php",
            // async 是否執行異步請求
            async:true,
            // data：接口所需接收的參數  數據格式爲字典類型
            data:{username:$i1, content:$i2},
            // dataType 返回的數據格式類型，默認就是json
            dataType:'json',
            // success 數據請求成功時調用，須要接受一個函數類型的參數
            // 該函數有一個默認的形參，形參表明請求時返回的數據
            success: function(data){
                console.log(data);
            },
            // error 當數據請求失敗時調用，須要接受一個函數類型的參數
            error: function(){
                console.log('請求失敗')
            }
            
            // 後期必需要寫的參數： type, url data success
                        
        });
        
    })
    
</script>

2.6 ajax序列化操做與ajax的開始與結束

<script type="text/javascript">
        $('#button').click(function(){
                    
            $(document).ajaxStart(function(){
            console.log('開始請求');
            })
        
            $(document).ajaxStop(function(){
            console.log('結束請求')
            })    
            
            // 表單序列化
            $.ajax({
                type:"post",
                url:"post.php",
                async:true,
                // serialize 表單序列化操做
                // 注 全部的input要寫在form 中 input 要有name屬性
                // 而且name屬性的值要根據接口所須要的參數的key值來
                // 肯定，不能隨意寫。
                
                data:$('form:eq(0)').serialize(),
                success:function(data){
                    console.log(data);
                }
                
            });
            
        })
    </script>