jquery2

時間 2019-12-11
原文原文鏈接
一.DOM(文檔)的操做    父子之間        1.父.append(子)        (在父元素的最後進行添加)            <body>            <!--子:string/jsDOM/jquery對象-->            <!--<a class="ccc" href="javascript:void(0);">連接</a>-->            <div class="aaa">            </div>            <script type="text/javascript" src="jQuery.js"></script>            <script>                $(function(){                    //string                        // 1.                            // $('.aaa').append('哈哈')                        //2.                            //$('.aaa').append('<h1> 哈哈 </h1>')                    //jsDOM                            //var oP=document.getElementsByClassName('aaa')[0];                            //oP.innerHTML='hehe';                            //$('.aaa').append(oP)                    //jquery                            //至關於將a標籤剪切到此位置                            //var oA=document.getElementsByClassName('ccc')[0];                            //$('.aaa').append($('.ccc'))                })            </script>            </body>        2.子.appendTo(父)        用法與append相同,但獲取的是子元素的jQuery對象,能夠鏈式編程            <body>            <a href="javascript:void(0);">點擊</a>            <div class="aaa"></div>            <script type="text/javascript" src="jQuery.js"></script>            <script>                $(function(){                    $('a').appendTo($('div')).mouseenter(function(){                        alert(111)                    })                })            </script>            </body>        3.父.prepend(子)            用法與append相同,不一樣的是子元素添加在父元素的首位        4.子.prependTo(父)            用法與appendTo相同,不一樣的是子元素添加在父元素的首位    兄弟之間        1.兄弟元素.after(要插入的兄弟元素)            在兄弟元素後插入該元素            <body>            <ul>                <li>aaa</li>            </ul>            <script src="jQuery.js"></script>            <script>                $(function(){                    $('li').after('<li>bbb</li>')                })            </script>            </body>        2.(要插入的兄弟元素).insertAfter(兄弟元素 )            在兄弟元素後插入該元素            <body>            <ul>                <li>aaa</li>            </ul>            <script src="jQuery.js"></script>            <script>                $(function(){                    $('<li>bbbnb</li>').insertAfter($('li'))                })            </script>            </body>        3.兄弟元素.before(要插入的兄弟元素)            在兄弟元素前插入該元素            用法與after相同        4.(要插入的兄弟元素).insertBefore(兄弟元素 )            在兄弟元素前插入該元素            用法與after相同    修改操做            <body>            <div class="aaa"></div>            <a href="javascript:void(0);"></a>            <div class="bbb"></div>            <script src="../day45/jQuery.js"></script>            <script>                $(function(){                    // $('div').replaceWith($('a'))                    // $('div').replaceWith('<a>haha</a>')                })            </script>            </body>    刪除操做            <body>            <div>                <ul>                    <li class="aaa">aaa</li>                    <li class="bbb">bbb</li>                    <li class="ccc">ccc</li>                </ul>            </div>            <script src="jQuery.js"></script>            <script>                $(function(){                    //刪除整個節點 事件也刪除                    $('.bbb').remove();                    //刪除整個節點 事件保留                    $('.aaa').detach();                    //清空選中元素的全部後代節點                    $('.ccc').empty()                })            </script>            </body>二.事件無三.ajax什麼是ajax    AJAX = 異步的javascript和XML（Asynchronous Javascript and XML）    簡言之，在不重載整個網頁的狀況下，AJAX經過後臺加載數據，並在網頁上進行顯示。    經過 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您可以把這些外部數據直接載入網頁的被選元素中。jquery的$.ajax()方法（重要）    query的$.ajax()方法 是作ajax技術常常使用的一個方法。    它的參數不少，總會有一些初學者記不住，在這裏，演示幾個常常使用的參數。後面講django課程部分會詳細講ajax技術的原理。你們先把每一個參數作個筆記。    參數以下：    1.url: 要求爲String類型的參數，（默認爲當前頁地址）發送請求的地址。    2.type: 要求爲String類型的參數，請求方式（post或get）默認爲get。注意其餘http請求方法，例如put和delete也可使用，但僅部分瀏覽器支持。    3.timeout: 要求爲Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。    4.async: 要求爲Boolean類型的參數，默認設置爲true，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲false。注意，    同步請求將鎖住瀏覽器，用戶其餘操做必須等待請求完成才能夠執行。    5.cache: 要求爲Boolean類型的參數，默認爲true（當dataType爲script時，默認爲false），設置爲false將不會從瀏覽器緩存中加載請求信息。    6.data: 要求爲Object或String類型的參數，發送到服務器的數據。若是已經不是字符串，將自動轉換爲字符串格式。get請求中將附加在url後    。防止這種自動轉換，能夠查看　　processData選項。對象必須爲key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換爲&foo1=bar1&foo2=bar2。    若是是數組，JQuery將自動爲不一樣值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2。    7.dataType: 要求爲String類型的參數，預期服務器返回的數據類型。若是不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，    並做爲回調函數參數傳遞。可用的類型以下：    　　xml：返回XML文檔，可用JQuery處理。    　　html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行。    　　script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），全部post請求都將轉爲get請求。    　　json：返回JSON數據。    　   jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個「?」爲正確的函數名，以執行回調函數。    　　text：返回純文本字符串。    8.beforeSend： 要求爲Function類型的參數，發送請求前能夠修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。    在beforeSend中若是返回false能夠取消本次ajax請求。XMLHttpRequest對象是唯一的參數。 function(XMLHttpRequest)    { this; //調用本次ajax請求時傳遞的options參數 } 9.complete：    要求爲Function類型的參數，請求完成後調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。     function(XMLHttpRequest, textStatus){ this; //調用本次ajax請求時傳遞的options參數 }    10.success：    　　要求爲Function類型的參數，請求成功後調用的回調函數，有兩個參數。    　　(1)由服務器返回，並根據dataType參數進行處理後的數據。    　　(2)描述狀態的字符串。 function(data, textStatus){ //data多是xmlDoc、jsonObj、html、text等等    11.error: 要求爲Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。    ajax事件函數以下： function(XMLHttpRequest, textStatus, errorThrown){ //一般狀況下textStatus和errorThrown只有其中一個包含信息 this; //調用本次ajax請求時傳遞的options參數 }    12.contentType： 要求爲String類型的參數，當發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"。    該默認值適合大多數應用場合。    13.dataFilter： 要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，    type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 function(data, type){ //返回處理後的數據 return data; }    14.dataFilter： 要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，    type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 function(data, type){ //返回處理後的數據 return data; }    15.global： 要求爲Boolean類型的參數，默認爲true。表示是否觸發全局ajax事件。設置爲false將不會觸發全局ajax事件，    ajaxStart或ajaxStop可用於控制各類ajax事件。    16.ifModified： 要求爲Boolean類型的參數，默認爲false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。    默認值是false，即忽略頭信息。    17.jsonp： 要求爲String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，    例如{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。    18.username： 要求爲String類型的參數，用於響應HTTP訪問認證請求的用戶名。    19.password： 要求爲String類型的參數，用於響應HTTP訪問認證請求的密碼。    20.processData： 要求爲Boolean類型的參數，默認爲true。默認狀況下，發送的數據將被轉換爲對象（從技術角度來說並不是字符串）    以配合默認內容類型"application/x-www-form-urlencoded"。若是要發送DOM樹信息或者其餘不但願轉換的信息，請設置爲false。    21.scriptCharset： 要求爲String類型的參數，只有當請求時dataType爲"jsonp"或者"script"，而且type是GET時纔會用於強制修改字符集(charset)。    一般在本地和遠程的內容編碼不一樣時使用獲得的json數據可使用在線格式化工具,獲得格式清晰的json數據{    "HeWeather6": [        {            "basic": {                "cid": "CN101010100",                "location": "北京",                "parent_city": "北京",                "admin_area": "北京",                "cnty": "中國",                "lat": "39.90498734",                "lon": "116.4052887",                "tz": "+8.00"            },            "update": {                "loc": "2018-10-13 09:45",                "utc": "2018-10-13 01:45"            },            "status": "ok",            "daily_forecast": [                {                    "cond_code_d": "101",                    "cond_code_n": "101",                    "cond_txt_d": "多雲",                    "cond_txt_n": "多雲",                    "date": "2018-10-13",                    "hum": "35",                    "mr": "10:21",                    "ms": "20:32",                    "pcpn": "0.0",                    "pop": "1",                    "pres": "1025",                    "sr": "06:23",                    "ss": "17:36",                    "tmp_max": "20",                    "tmp_min": "8",                    "uv_index": "4",                    "vis": "20",                    "wind_deg": "281",                    "wind_dir": "西北風",                    "wind_sc": "1-2",                    "wind_spd": "8"                },                {                    "cond_code_d": "100",                    "cond_code_n": "101",                    "cond_txt_d": "晴",                    "cond_txt_n": "多雲",                    "date": "2018-10-14",                    "hum": "38",                    "mr": "11:20",                    "ms": "21:15",                    "pcpn": "0.0",                    "pop": "3",                    "pres": "1022",                    "sr": "06:24",                    "ss": "17:34",                    "tmp_max": "22",                    "tmp_min": "9",                    "uv_index": "6",                    "vis": "19",                    "wind_deg": "233",                    "wind_dir": "西南風",                    "wind_sc": "1-2",                    "wind_spd": "3"                },                {                    "cond_code_d": "104",                    "cond_code_n": "104",                    "cond_txt_d": "陰",                    "cond_txt_n": "陰",                    "date": "2018-10-15",                    "hum": "43",                    "mr": "12:14",                    "ms": "22:02",                    "pcpn": "0.0",                    "pop": "23",                    "pres": "1023",                    "sr": "06:25",                    "ss": "17:33",                    "tmp_max": "19",                    "tmp_min": "10",                    "uv_index": "2",                    "vis": "19",                    "wind_deg": "351",``````                    "wind_dir": "北風",                    "wind_sc": "1-2",                    "wind_spd": "2"                }            ]        }    ]}ajax的get請求    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Title</title>    </head>    <body>    <input type="text" placeholder="請輸入城市">    <input type="button" value="獲取最新的天氣">    <div class="show"></div>    <script src="jQuery.js"></script>    <script>        $(function(){            $('input[type=button]').click(function(){                $.ajax({                     url:'https://free-api.heweather.com/s6/weather/forecast?location=北京&key=838637ffb76b48bb965a95d808045cea',                     type:'get',                     // dataType:'text',                     success:function(data){                       console.log(data);                       console.log(data.HeWeather6[0].daily_forecast[0].cond_txt_d);                       //獲取json字符串中的某一個值,應該用點key的方式,而不是字典名[key]                       // console.log(data[HeWeather6]);錯的                        $('.show').html(data.HeWeather6[0].daily_forecast[0].cond_txt_d)                     },                     error:function(error){                        console.log(error)                     }                        });                    })             })    </script>    <!--838637ffb76b48bb965a95d808045cea-->    <!--https://free-api.heweather.com/s6/weather/forecast?location=北京&key=838637ffb76b48bb965a95d808045cea-->    </body>    </html>
相關標籤/搜索
jquery2
jquery2.x
JQuery
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。