day03 jQuery jQuery:文档操作 ajax请求 js的调用事件
MVC架构模式: data Model, View, Controller
一.jQuery的操作
1.jQuery: 文档操作: 对DOM对象的操作
1.1.内部插入:(父子)
$('.box').append('<h1>h1标题</h1>') //追加: 向父元素中添加'新'的子元素,子元素可以为: string | element(js对象) | jquery元素
var oA = document.getElementById('baidu')
$('.box').append(oA) //移动: 如果子元素是获取出来的(已存在)的js,jQuery对象,就是移动操作,而不是追加
$('<h4>h4标题</h4>').appendTo('.box') //追加: 和上边的相反: 是新子元素追加到父元素上;1.返回的是新子元素的jQuery对象; 2.如果返回父元素jQuery,用end()
$('.box').prepend('<h1>h1标题</h1>') //前置追加:
$('<h4>h4标题</h4>').prependTo('.box') //前置追加:
<body>
<a href="script:void(0);" id="baidu">百度一下</a>
<div class="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
var oA = document.getElementById('baidu');
var oP = document.createElement('p');
oP.innerText = 'p标签';
$('.box').append('文本'); //可以是文字
$('.box').append('<h1>h1标题</h1>'); //可以是文字, html部分渲染出来
$('.box').append(oA); //可以是js对象
$('.box').append($('#baidu')); //可以是jQuery对象
$('<h4>h4标题</h4>').appendTo('.box');
});
</script>
</body>
1.2.外部插入:(兄弟)
$('.item').after('<li class="item1">wukong</li>') //插入: 向兄弟元素之后插入'新'的兄弟元素
$('<li class="item1">datang</li>').insertAfter('.item1') //插入: 和上面的方向相反
$('.item').before('<li class="item1">wukong</li>') //插入: 向兄弟元素之前插入'新'的兄弟元素
$('<li class="item1">datang</li>').insertBefore('.item1') //插入: 和上面的方向相反
<body>
<ul>
<li class="item">bajie</li>
</ul>
<script src="jquery.js"></script>
<script>
$(function () {
$('.item').after('<li class="item1">wukong</li>');
$('<li class="item1">datang</li>').insertAfter('.item1');
});
</script>
</body>
1.3.包裹
1.4.替换
$('.item').replaceWith('<li class="item1">wukong</li>') //替换: 将前面的jQuery用后面的东西替换掉
$('<li class="item1">wukong</li>').replaceAll('.item') //替换: 和上面的方向相反
<body>
<ul>
<li class="item">bajie</li>
</ul>
<script src="jquery.js"></script>
<script>
$(function () {
$('.item').replaceWith('<li class="item1">wukong</li>')
});
</script>
</body>
1.5.删除
var $oBtn = $('#btn').remove() //删除: 自己删自己,返回的是自己的jQuery对象,之前jQuery对象的事件不保留
$('.box').append($oBtn) //
var oBtn2 = $(this).detach() //删除: 自己删自己,返回的是自己的jQuery对象,之前jQuery对象的事件保留
$('.box').append(oBtn2) //
$('ul').empty() //清空: 删除所有后代节点
$('ul').html('') //清空: 和上面的效果一样
<body>
<button id="btn1">删除1</button>
<button id="btn2">删除2</button>
<ul>
<li class="item">bajie</li>
</ul>
<div class="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
// 1.remove()
$('#btn1').click(function () {
var oBtn1 = $(this).remove();
$('.box').append(oBtn1); //之前的按钮加回来: 再去点击: 原来的事件不会再生效, 因为remove()时它自己的事件也删了
});
// 2.detach()
$('#btn2').click(function () {
var oBtn2 = $(this).detach();
$('.box').append(oBtn2); //之前的按钮加回来: 再去点击:事件依然会生效 (detach 分离)
//3.empty()
$('ul').empty(); //和$('ul').html('')效果一样
});
});
</script>
</body>
1.6.复制
二.ajax介绍
1.ajax是什么?
叫做:异步的JavaScript和xml (asynchronous javascript and xml)
xml: 之前的一种传输对象, 现在也在用它进行传输
2.ajax的作用
通过http请求加载远程数据
在不重载整个网页的情况下: ajax通过后台加载数据, 并在网页上进行显示
通过jQuery的ajax方法, 能够使用http get和http post从远程服务器上请求文本,html,xml,或json, 同时能把这些外部数据直接载入网页的被选元素中
3.$.ajax(url,[settings])参数介绍
url: "string" //默认为当前页面, 发送请求的url地址
type: "string" //默认为get: 请求方式: get或post,put和delete
timeout: number //可选的: 设置请求超时时间,毫秒; 此设置将覆盖$.ajaxSetup()方法的全局设置
async: boolean //默认为true: 异步请求; false: 同步请求; 注意: 同步请求将锁住浏览器,用户的其他操作必须等待
cache: boolean //默认为true: (当dataType为script时,默认为flase), 设置false时将不会从浏览器缓存中加载请求信息
data: object或string //如果type: "post": 发送到服务器的数据, 用data提交过去
dataType: "string" //预期服务器返回的数据类型,如果不指定: jquery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数的参数
"xml" //返回xml文档, 可用jquery处理
"html" //返回纯文本HTML信息; 包含的script标签会在插入DOM的时候执行
"script" //返回纯文本JavaScript代码, 不自动缓存结果.除非设置了cache:true, 注意在远程请求时(不在同一个域下),所有的post请求都会转换为get请求
"json" //返回json数据
"jsonp" //返回jsonp格式, 使用jsonp形式调用函数时,例如myrul?callback=?, jquery将自动替换后一个?问号为正确的函数名, 以执行回调函数
"text" //返回纯文本字符串
beforeSend: function //请求之前: 做的一些事情
success: function //请求之后: 成功后的回调函数
error: function //请求之后: 失败后的回调函数
三.jQuery: ajax
1.1.ajax请求
$.ajax({url,[settings]})
1.1.1.点击按钮时,获取天气
<body>
<input type="text" placeholder="请输入城市">
<input type="button" value="获取最新的天气">
<div class="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
$('input[type=button]').click(function () {
var cityVal = $('input[type=text]').val(); //获取用户输入的城市
var webKey = '5f4ed86076a3429e9b3e3ba1931b8578'; //获取和风天气的秘钥key
$.ajax({
url: `https://free-api.heweather.net/s6/weather/now?location=${cityVal}&key=${webKey}`,
type: 'get',
success: function (data) {
console.log(data); //后端返回给ajax一个json对象: data,具体格式见附件1
console.log(data.HeWeather6[0].now.tmp);
console.log(data.HeWeather6[0].now.cond_txt);
var tmp = data.HeWeather6[0].now.tmp;
$('.box').html(`${tmp}℃`);
},
error: function (err) {
console.log(err);
}
})
})
})
</script>
</body>
1.1.2.页面初始化时获取天气
var cityVal = 'beijing'; //事先固定一个城市名,可以把ajax请求写到一个函数里,设置一个定时器,每几分钟请求一次
1.1.3.鼠标悬浮时显示详细天气
注意: 是页面初始化的时候获取的天气, 然后悬浮的时候取用
而不是你鼠标悬浮的时候才去获取
如何更新天气:
单独搞个定时器,固定时间间隔调用初始天气的函数
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
text-decoration: none;
color: #669900;
}
.box{
width: 200px;
height: 200px;
display: none;
}
</style>
</head>
<body>
<a href="javascript:void(0)"></a>
<div class="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
var HeWeather6Data = null; //搞个全局变量,接收和风天气后天发回的json,在$.ajax()外面使用时方便,不写也行
initWeather(); //执行初始天气函数
function initWeather() { //写个初始天气的函数: 把ajax请求放里面
var cityVal = 'beijing';
var webKey = '5f4ed86076a3429e9b3e3ba1931b8578';
$.ajax({
url: `https://free-api.heweather.net/s6/weather/now?location=${cityVal}&key=${webKey}`,
type: 'get',
success: function (data) {
HeWeather6Data = data; //把json搞成全局的,这个才是重点
var cityName = data.HeWeather6[0].basic.location;
$('a').html(cityName)
},
error: function (err) {
console.log(err);
}
})
}
$('a').mouseenter(function () { //鼠标悬浮,延迟一秒显示隐藏的盒子
setTimeout(function () {
$('.box').show().html(HeWeather6Data.HeWeather6[0].now.tmp+'℃');
},1000)
})
})
</script>
</body>
</html>
1.1.4.悬浮鼠标显示未来3天的天气
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
text-decoration: none;
color: #669900;
}
.box{
width: 200px;
height: 200px;
display: none;
}
</style>
</head>
<body>
<a href="javascript:void(0)"></a>
<div class="box">
<ul>
<li>
<img src="" alt="" width="60px">
</li>
<li>
<img src="" alt="" width="60px">
</li>
<li>
<img src="" alt="" width="60px">
</li>
</ul>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
var HeWeather6Data = null; //全局变量: 接收一天天气
var weatherArray = []; //全局变量: 接收三天天气
var cityVal = 'beijing';
var webKey = '5f4ed86076a3429e9b3e3ba1931b8578';
var init = function () {
getNowWeather(); //执行函数: 获取当前的天气
getForecastWeather(); //执行函数: 获取未来三天天气
};
init();
function getNowWeather() { //创建函数: 获取当前的天气
$.ajax({
url: `https://free-api.heweather.net/s6/weather/now?location=${cityVal}&key=${webKey}`,
type: 'get',
success: function (data) {
HeWeather6Data = data;
var cityName = data.HeWeather6[0].basic.location;
$('a').html(cityName);
},
error: function (err) {
console.log(err)
}
});
}
function getForecastWeather() { //创建函数: 获取未来三天天气
$.ajax({
url: `https://free-api.heweather.net/s6/weather/forecast?location=${cityVal}&key=${webKey}`,
type: 'get', //(forecast 预测)
success: function (data) {
console.log(data);
weatherArray = data.HeWeather6[0].daily_forecast; //(daily 每天)
},
error: function (err) {
console.log(err)
}
});
}
setInterval(function () { //天气的更新: 未来三天的天气3个小时自动更新一次
getForecastWeather();
},1000*60*60*3);
$('a').mouseenter(function () {
setTimeout(function () {
$('.box').show(); //遍历数组的函数.forEach()
weatherArray.forEach(function (item,index) { //[1,2,3,].forEach(function(item,index){ ... }); item 每一项, index 索引
console.log(item,index);
var cond_code = item.cond_code_d;
$('.box ul li img').eq(index).attr('src',`images/${cond_code}.png`);
})
},1000)
})
});
</script>
</body>
</html>
1.1.5.请求数据的处理情况:
通过ajax从后台取到数据,然后通过DOM的操作展示在页面上,这就是数据驱动视图,这里的驱动器就是DOM操作
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.content{
display: none;
}
</style>
</head>
<body>
<div class="box">bajie</div>
<div class="content">
<!--未来要追加的<div class="item"></div>-->
<!--未来要追加的<div class="item"></div>-->
<!--未来要追加的<div class="item"></div>-->
</div>
<script src="jquery.js"></script>
<script>
$(function () {
$('.box').mouseenter(function () {
var cityVal = 'beijing';
var webKey = '5f4ed86076a3429e9b3e3ba1931b8578';
$.ajax({
url: `https://free-api.heweather.net/s6/weather/forecast?location=${cityVal}&key=${webKey}`,
type: 'get',
success: function (data) {
console.log(data);
weatherArray = data.HeWeather6[0].daily_forecast;
$('.content').show();
$('.content').empty(); //追加DOM前先清空, 以免重复追加
weatherArray.forEach(function (item,index) {
$('<div class="item"></div>').appendTo('.content').html('max temperature:'+item.tmp_max+'℃');
})
},
error: function (err) {
console.log(err)
}
});
$('.box').mouseleave(function () {
$('.content').hide();
})
})
})
</script>
</body>
</html>
1.2.ajax事件
1.3.其他
四.js中: 调用事件的另一种方法
objDiv.addEventListener('click', function(){ ... }) //添加事件
document.removeEventListener('box'); //移出事件
var objDiv = docoment.getElementsByClassName('box')[0]
objDiv.addEventListener('click',function () { //添加事件监听函数
alert(1);
},false); //true false是否支持冒泡
document.removeEventListener('box'); //好处: 恰当的时机可以移除某个事件, 不让它执行某个操作
附件1:一天天气
和风天气后台返回给ajax一个json对象: data: {HeWeather6: Array(1)}
data对象里: 一个HeWeather6对应的是一个数组
数组只有一个元素,[0]是个对象
对象里面:有4个对象
其中: now对象里面就是我们需要展示的现在的天气
{
"HeWeather6": [{
"basic": {
"cid": "CN101010100",
"location": "北京",
"parent_city": "北京",
"admin_area": "北京",
"cnty": "中国",
"lat": "39.90498734",
"lon": "116.4052887",
"tz": "+8.00"
},
"update": {
"loc": "2019-11-26 20:30",
"utc": "2019-11-26 12:30"
},
"status": "ok",
"now": {
"cloud": "91",
"cond_code": "100",
"cond_txt": "晴",
"fl": "-3",
"hum": "44",
"pcpn": "0.0",
"pres": "1029",
"tmp": "-1",
"vis": "16",
"wind_deg": "356",
"wind_dir": "北风",
"wind_sc": "0",
"wind_spd": "1"
}
}]
}
附件2:三天天气
{
"HeWeather6": [{
"basic": {
"cid": "CN101010100",
"location": "北京",
"parent_city": "北京",
"admin_area": "北京",
"cnty": "中国",
"lat": "39.90498734",
"lon": "116.4052887",
"tz": "+8.00"
},
"update": {
"loc": "2019-11-27 09:56",
"utc": "2019-11-27 01:56"
},
"status": "ok",
"daily_forecast": [{
"cond_code_d": "100",
"cond_code_n": "100",
"cond_txt_d": "晴",
"cond_txt_n": "晴",
"date": "2019-11-27",
"hum": "23",
"mr": "07:31",
"ms": "17:31",
"pcpn": "0.0",
"pop": "2",
"pres": "1034",
"sr": "07:13",
"ss": "16:50",
"tmp_max": "4",
"tmp_min": "-6",
"uv_index": "4",
"vis": "25",
"wind_deg": "15",
"wind_dir": "东北风",
"wind_sc": "1-2",
"wind_spd": "8"
}, {
"cond_code_d": "100",
"cond_code_n": "101",
"cond_txt_d": "晴",
"cond_txt_n": "多云",
"date": "2019-11-28",
"hum": "22",
"mr": "08:38",
"ms": "18:18",
"pcpn": "0.0",
"pop": "0",
"pres": "1029",
"sr": "07:14",
"ss": "16:50",
"tmp_max": "3",
"tmp_min": "-5",
"uv_index": "4",
"vis": "25",
"wind_deg": "238",
"wind_dir": "西南风",
"wind_sc": "1-2",
"wind_spd": "8"
}, {
"cond_code_d": "104",
"cond_code_n": "104",
"cond_txt_d": "阴",
"cond_txt_n": "阴",
"date": "2019-11-29",
"hum": "90",
"mr": "09:39",
"ms": "19:11",
"pcpn": "0.0",
"pop": "1",
"pres": "1022",
"sr": "07:15",
"ss": "16:50",
"tmp_max": "1",
"tmp_min": "-4",
"uv_index": "2",
"vis": "3",
"wind_deg": "176",
"wind_dir": "南风",
"wind_sc": "1-2",
"wind_spd": "10"
}]
}]
}