节点操作
| <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>页面标题</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标题 |
| | // $('#div1').before($h); |
| | $h.insertBefore('#div1'); |
| |
|
| | //在后边插入兄弟元素 |
| | //after() |
| | //insertAfter() |
| |
|
| | //删除p标签 |
| | $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',//请求的服务器路径，实际开发中写文档接口的路径 |
| | type: 'get',//分get/post请求，涉及隐私或安全性要求较高的用 post、安全要求不高及数据量较小的用get |
| | dataType: 'json',//要读取什么格式的数据，还可以是xml script html upload等 |
| | // data:{page:1}//请求时要携带的参数 |
| | }) |
| | .done(function(data){//成功的时候会执行的函数，参数data是从后 台接收到的数据，这里是json格式的字符串 |
| | alert(data.name); |
| | console.log(data); |
| | }) |
| | .fail(function(){//失败的时候会执行的函数 |
| | console.log("error"); |
| | }) |
| | /* |
| | .fail(function(XMLHttpRequest, textStatus, errorThrown) {//失败（带参数） |
| | console.log("error"); |
| | // 状态码 |
| | console.log(XMLHttpRequest.status); |
| | // 状态 |
| | console.log(XMLHttpRequest.readyState); |
| | // 错误信息 |
| | console.log(textStatus); |
| | }) |
| | .always(function(){//不论成功与否都会执行 |
| | 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可以跨域请求数据的原理： |
| | 主要是利用了script标签可以跨域链接资源的特性 |
| | */ |
| | 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',//跨域请求的地址，也可用相对路径js/data.js |
| | type: 'get', |
| | dataType: 'jsonp',//使用jsonp跨域请求 |
| | 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.360.cn/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.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&fields=word',//请求360搜索的公开接口 |
| | type: 'get', |
| | dataType: 'jsonp',//跨域请求 |
| | data: {word: val},//携带参数 |
| | jsonpCallback:'suggest_so'//指定360提供的jsonp的回调函数 |
| | }) |
| | .done(function(data) { |
| | console.log(data); |
| | // alert(data.result.length);//10条数据 |
| |
|
| | $('.list').empty();//先清空列表 |
| |
|
| | //模拟搜索联想，循环插入新列表 |
| | 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"); |
| | // 状态码 |
| | console.log(XMLHttpRequest.status); |
| | // 状态 |
| | console.log(XMLHttpRequest.readyState); |
| | // 错误信息 |
| | console.log(textStatus); |
| | });*/ |
| | .fail(function(jqXHR, textStatus, errorThrown) {//失败 |
| | console.log("error"); |
| | /*弹出jqXHR对象的信息*/ |
| | console.log(jqXHR.responseText); |
| | console.log(jqXHR.status); |
| | console.log(jqXHR.readyState); |
| | console.log(jqXHR.statusText); |
| | /*弹出其他两个参数的信息*/ |
| | console.log(textStatus); |
| | console.log(errorThrown); |
| |
|
| | }); |
| | }); |
| | }) |
| |
|
| | |
| | </script> |
| | </head> |
| | <body> |
| | <input type="text" id="txt01"> |
| | <ul class="list"></ul> |
| | </body> |
