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>