节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<style type="text/css">
</style>
<script type="text/javascript" src="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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<style type="text/css">
</style>
<script type="text/javascript" src="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>
</head>
<body>
</body>
</html>
....................................................................................................................................................................
jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp</title>
<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"></script>
</head>
<body>
</body>
</html>
...................................................................................................................................................................
jQuery-jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-jsonp</title>
<style type="text/css">
</style>
<script type="text/javascript" src="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>
</head>
<body>
</body>
</html>
