節(jié)點(diǎn)操作
| <style type="text/css"> |
| | |
| | </style> |
| | <script type="text/javascript" src="[js/jquery-1.12.4.min.js](js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | $(function(){ |
| | var $span = $('<span>span元素</span>'); |
| | var $p = $('<p>p段落元素</p>'); |
| | var $h = $('<h1>頁面標(biāo)題</h1>'); |
| |
|
| | /*插入子元素*/ |
| | //div中插入span和p（末尾追加） |
| | // $('#div1').append($span); |
| | // $('#div1').append($p); |
| |
|
| | // 把span和p插入div中 |
| | $span.appendTo('#div1'); |
| | $p.appendTo('#div1'); |
| |
|
| | //把子元素插入到父元素（前面追加） |
| | // $('#div1').prepend($span); |
| | // $('#div1').prepend($p); |
| | // $span.prependTo('#div1'); |
| | // $p.prependTo('#div1'); |
| |
|
| | //在div前邊插入兄弟h1標(biāo)題 |
| | // $('#div1').before($h); |
| | $h.insertBefore('#div1'); |
| |
|
| | //在后邊插入兄弟元素 |
| | //after() |
| | //insertAfter() |
| |
|
| | //刪除p標(biāo)簽 |
| | $p.remove(); |
| | }) |
| | </script> |
| | </head> |
| | <body> |
| | <div id="div1"></div> |
| | </body> |
| | </html> |
ajax
| <style type="text/css"> |
| | |
| | </style> |
| | <script type="text/javascript" src="[js/jquery-1.12.4.min.js](js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | $.ajax({ |
| | url: 'data.json',//請(qǐng)求的服務(wù)器路徑顶霞，實(shí)際開發(fā)中寫文檔接口的路徑 |
| | type: 'get',//分get/post請(qǐng)求摹察，涉及隱私或安全性要求較高的用 post涣达、安全要求不高及數(shù)據(jù)量較小的用get |
| | dataType: 'json',//要讀取什么格式的數(shù)據(jù)，還可以是xml script html upload等 |
| | // data:{page:1}//請(qǐng)求時(shí)要攜帶的參數(shù) |
| | }) |
| | .done(function(data){//成功的時(shí)候會(huì)執(zhí)行的函數(shù)芬膝，參數(shù)data是從后 臺(tái)接收到的數(shù)據(jù)嘉冒，這里是json格式的字符串 |
| | alert(data.name); |
| | console.log(data); |
| | }) |
| | .fail(function(){//失敗的時(shí)候會(huì)執(zhí)行的函數(shù) |
| | console.log("error"); |
| | }) |
| | /* |
| | .fail(function(XMLHttpRequest, textStatus, errorThrown) {//失斖芙薄（帶參數(shù)） |
| | console.log("error"); |
| | // 狀態(tài)碼 |
| | console.log(XMLHttpRequest.status); |
| | // 狀態(tài) |
| | console.log(XMLHttpRequest.readyState); |
| | // 錯(cuò)誤信息 |
| | console.log(textStatus); |
| | }) |
| | .always(function(){//不論成功與否都會(huì)執(zhí)行 |
| | console.log("always"); |
| | }) |
| | */; |
| | </script> |
jsonp
| <style type="text/css"> |
| | |
| | </style> |
| | <!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> -- > |
| | <script type="text/javascript"> |
| | // alert($);//function(a,b){return new n.fn.init(a,b)} |
| |
|
| | /* |
| | jsonp可以跨域請(qǐng)求數(shù)據(jù)的原理： |
| | 主要是利用了script標(biāo)簽可以跨域鏈接資源的特性 |
| | */ |
| | function aa(dat){ |
| | alert(dat.name); |
| | } |
| | </script> |
| | <script type="text/javascript" src="[js/data.js](js/data.js)"></script> |
jQuery-jsonp
| <style type="text/css"> |
| | |
| | </style> |
| | <script type="text/javascript" src="[js/jquery-1.12.4.min.js](js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | $.ajax({ |
| | url: 'http://localhost:8080/1803/js/data.js',//跨域請(qǐng)求的地址乍惊，也可用相對(duì)路徑j(luò)s/data.js |
| | type: 'get', |
| | dataType: 'jsonp',//使用jsonp跨域請(qǐng)求 |
| | jsonpCallback:'aa' |
| | }) |
| | .done(function(data) { |
| | alert(data.name); |
| | }) |
| | .fail(function() { |
| | console.log("error"); |
| | }); |
| | </script> |
jsonp公開接口
| <script type="text/javascript" src="[js/jquery-1.12.4.min.js](js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | //360搜索的公開接口 |
| | //https://sug.so.#/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=s |
| |
|
| | $(function(){ |
| | $('#txt01').keyup(function() { |
| | var val = $(this).val(); |
| | $.ajax({ |
| | url: 'https://sug.so.#/suggest?encodein=utf-8&encodeout=utf-8&format=json&fields=word',//請(qǐng)求360搜索的公開接口 |
| | type: 'get', |
| | dataType: 'jsonp',//跨域請(qǐng)求 |
| | data: {word: val},//攜帶參數(shù) |
| | jsonpCallback:'suggest_so'//指定360提供的jsonp的回調(diào)函數(shù) |
| | }) |
| | .done(function(data) { |
| | console.log(data); |
| | // alert(data.result.length);//10條數(shù)據(jù) |
| |
|
| | $('.list').empty();//先清空列表 |
| |
|
| | //模擬搜索聯(lián)想，循環(huán)插入新列表 |
| | for(var i=0; i<data.result.length; i++){ |
| | var $li = $('<li>'+data.result[i].word+'</li>'); |
| | $li.appendTo('.list'); |
| | } |
| | }) |
| | /*.fail(function(XMLHttpRequest, textStatus, errorThrown) {//失敗 |
| | console.log("error"); |
| | // 狀態(tài)碼 |
| | console.log(XMLHttpRequest.status); |
| | // 狀態(tài) |
| | console.log(XMLHttpRequest.readyState); |
| | // 錯(cuò)誤信息 |
| | console.log(textStatus); |
| | });*/ |
| | .fail(function(jqXHR, textStatus, errorThrown) {//失敗 |
| | console.log("error"); |
| | /*彈出jqXHR對(duì)象的信息*/ |
| | console.log(jqXHR.responseText); |
| | console.log(jqXHR.status); |
| | console.log(jqXHR.readyState); |
| | console.log(jqXHR.statusText); |
| | /*彈出其他兩個(gè)參數(shù)的信息*/ |
| | console.log(textStatus); |
| | console.log(errorThrown); |
| |
|
| | }); |
| | }); |
| | }) |
| |
|
| | |
| | </script> |
| | </head> |
| | <body> |
| | <input type="text" id="txt01"> |
| | <ul class="list"></ul> |
| | </body> |
