一.jQuery的文档操作******
之前js中学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作，大家也能发现，大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。
看一个我们JS操作DOM的例子:
var oUl = document.getElementsByTagName(‘ul‘)[0];var oLi = document.createElement(‘li‘);oLi.innerHTML = ‘赵云‘;oUl.appendChild(oLi);
1.插入操作
(1).知识点1:
语法:
父元素.append(子元素)
解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素
代码如下:
var oli = document.createElement(‘li‘);oli.innerHTML = ‘哈哈哈‘;$(‘ul‘).append(‘<li>1233</li>‘);$(‘ul‘).append(oli);$(‘ul‘).append($(‘#app‘));
PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。
(2).知识点2:
语法:
子元素.appendTo(父元素)
解释：追加到某元素子元素添加到父元素
$(‘<li>天王盖地虎</li>‘).appendTo($(‘ul‘)).addClass(‘active‘)
PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素
(3).知识点3:
语法:
父元素.prepend(子元素)；
解释：前置添加, 添加到父元素的第一个位置
$(‘ul‘).prepend(‘<li>我是第一个</li>‘)
(4).知识点4:
语法:
子元素.prependTo(父元素)；
解释：前置添加, 添加到父元素的第一个位置
$(‘<a href="#">百度一下</a>‘).prependTo(‘ul‘)
(5).知识点5:
语法:
兄弟元素.after(要插入的兄弟元素)；要插入的兄弟元素.inserAfter(兄弟元素)；
解释：在匹配的元素之后插入内容
$(‘ul‘).after(‘<h4>我是一个h3标题</h4>‘)$(‘<h5>我是一个h2标题</h5>‘).insertAfter(‘ul‘)
(6).知识点6:
语法:
兄弟元素.before(要插入的兄弟元素)；要插入的兄弟元素.inserBefore(兄弟元素)；
解释：在匹配的元素之后插入内容
$(‘ul‘).before(‘<h3>我是一个h3标题</h3>‘)$(‘<h2>我是一个h2标题</h2>‘).insertBefore(‘ul‘)
2.克隆操作
语法:
$(选择器).clone();
解释：克隆匹配的DOM元素
$(‘button‘).click(function() { ?// 1.clone()：克隆匹配的DOM元素 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力) ?$(this).clone(true).insertAfter(this);})3.修改操作
(1).知识点1:
语法:
$(selector).replaceWith(content);
解释: 将所有匹配的元素替换成指定的string、js对象、jquery对象.
//将所有的h5标题替换为a标签$(‘h5‘).replaceWith(‘<a href="#">hello world</a>‘)//将所有h5标题标签替换成id为app的dom元素$(‘h5‘).replaceWith($(‘#app‘));
(2).知识点2:
语法:
$(‘<p>哈哈哈</p>‘)replaceAll(‘h2‘);
解释: 替换所有; 将所有的h2标签替换成p标签.
$(‘<br/><hr/><button>按钮</button>‘).replaceAll(‘h4‘)
4.删除操作:
(1).知识点1:
语法:
$(selector).remove();
解释：删除节点后，事件也会删除（简言之，删除了整个标签）
$(‘ul‘).remove();
(2).知识点2:
语法:
$(selector).detach();
解释：删除节点后，事件会保留
var $btn = $(‘button‘).detach() //此时按钮能追加到ul中 $(‘ul‘).append($btn)
(3).知识点3:
语法:
$(selector).empty(); 好
解释: 清空选中元素中的所有后代节点
//清空掉ul中的子元素，保留ul$(‘ul‘).empty()
二.简单接触ajax
1.申请一个和风天气账号
2.ajax
//get请求$.ajax({ ??url:‘请求的地址‘, ??type:‘get‘, ??success:function(data){ ?????}, ??error:function(err){ ??}});3.ajax的get请求
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title></head><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(event) { ???????????????????????????????// ajax ???????????????var cityVal = $(‘input[type=text]‘).val(); ???????????????$.ajax({ ???????????????????url:`https://free-api.heweather.com/s6/weather/now?location=${cityVal}&key=你的key`, ???????????????????type:‘get‘, ???????????????????success:function (data) { ???????????????????????console.log(data); ???????????????????????console.log(data.HeWeather6[0].now.tmp); ???????????????????????console.log(data.HeWeather6[0].now.cond_txt); ???????????????????????var tmp = data.HeWeather6[0].now.tmp; ???????????????????????var nowTmp = `${tmp}℃`; ???????????????????????$(‘.box‘).html(nowTmp) ???????????????????}, ???????????????????error:function (err) { ???????????????????????console.log(err); ???????????????????} ???????????????}); ???????????}); ????????}) ???</script></body></html>4.初始化获取和风天气数据
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title></head><body> ???<div class="box"></div> ???<script src="jquery.js"></script> ???<script> ???????$(function () { ???????????????//加载第一个和风天气的数据 ???????????????// setTimeout(init,2000) ???????????????????????????????//函数对象 ???????????????var init = function(){ ???????????????????$.ajax({ ???????????????????url:`https://free-api.heweather.com/s6/weather/now?location=beijing&key=你的key`, ???????????????????type:‘get‘, ???????????????????success:function (data) { ???????????????????????console.log(data); ???????????????????????console.log(data.HeWeather6[0].now.tmp); ???????????????????????console.log(data.HeWeather6[0].now.cond_txt); ???????????????????????var tmp = data.HeWeather6[0].now.tmp; ???????????????????????var nowTmp = `${tmp}℃`; ???????????????????????$(‘.box‘).html(nowTmp) ???????????????????}, ???????????????????error:function (err) { ???????????????????????console.log(err); ???????????????????} ???????????????}); ???????????????} ???????????????????????????????setTimeout(init,2000) ???????????????}); ???</script></body></html>5.鼠标悬浮显示天气
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????.box{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: red; ???????????display: none; ???????} ???</style></head><body> ???<a href="javascript"></a> ???<div class="box"></div> ???<script src="jquery.js"></script> ???<script> ???????$(function () { ???????????var HeWeather6Data = null; ???????????????//加载第一个和风天气的数据 ???????????????var init = function(){ ???????????????????$.ajax({ ???????????????????url:`https://free-api.heweather.com/s6/weather/now?location=beijing&key=你的key`, ???????????????????type:‘get‘, ???????????????????success:function (data) { ???????????????????????HeWeather6Data = data; ???????????????????????????????????????????????var cityName = data.HeWeather6[0].basic.location; ???????????????????????????????????????????????$(‘a‘).html(cityName) ???????????????????}, ???????????????????error:function (err) { ???????????????????????console.log(err); ???????????????????} ???????????????}); ???????????????} ???????????????init(); ???????????????????????????????$(‘a‘).mouseenter(function() { ???????????????????????????????????????setTimeout(function () { ???????????????????????$(‘.box‘).show(); ???????????????????????console.log(HeWeather6Data); ???????????????????????????????????????????}, 1000) ???????????????}); ???????????????//函数对象 ???????????}); ???</script></body></html>6.和风获取三天的天气
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????.box{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: red; ???????????display: none; ???????} ???</style></head><body> ???<a href="javascript"></a> ???<div class="box"> ???????<ul> ???????????<li> ???????????????<img src="" alt=""> ???????????</li> ???????????<li> ???????????????<img src="" alt=""> ???????????</li> ???????????<li> ???????????????<img src="" alt=""> ???????????</li> ???????</ul> ???</div> ???<script src="jquery.js"></script> ???<script> ???????$(function () { ???????????var HeWeather6Data = null; ???????????var weatherArry = []; ???????????????//加载第一个和风天气的数据 ????????????????function init(){ ???????????????????//获取实况天气 ???????????????????getNowWeather(); ???????????????????getForecastWeather(); ???????????????} ???????????????init(); ???????????????function getNowWeather () { ???????????????????$.ajax({ ???????????????????????url:`https://free-api.heweather.com/s6/weather/now?location=beijing&key=你的key`, ???????????????????????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.com/s6/weather/forecast?location=beijing&key=你的key‘, ???????????????????????type:"get", ???????????????????????success:function (data) { ???????????????????????????console.log(data.HeWeather6[0].daily_forecast); ???????????????????????????weatherArry = data.HeWeather6[0].daily_forecast; ???????????????????????????????????????????????????} ???????????????????}) ???????????????}; ???????????????//更新天气 ???????????????setInterval(function () { ???????????????????getForecastWeather(); ???????????????},1000*60*60*3) ???????????????????????????????$(‘a‘).mouseenter(function() { ???????????????????????????????????????setTimeout(function () { ???????????????????????$(‘.box‘).show(); ???????????????????????weatherArry.forEach(function(item,index){ ???????????????????????????console.log(item,index); ???????????????????????????// item {} ???????????????????????????var cond_code = item.cond_code_d; ???????????????????????????$(‘.box ul li img‘).eq(index).attr(‘src‘,`./images/${cond_code}.png`); ???????????????????????}) ???????????????????????????????????????????????????????????????????}, 1000) ???????????????}); ???????????????//函数对象 ???????????}); ???????</script></body></html>7.请求数据处理的情况
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????.content{ ???????????display: none; ???????} ???</style></head><body> ???<div class="box">alex</div> ???<div class="content"> ???????<!-- <div class="item"></div> ???????<div class="item"></div> ???????<div class="item"></div> --> ???</div> ???<script src="jquery.js"></script> ???<script> ???????????????$(function () { ???????????????document.getElementsByClassName(‘box‘)[0].addEventListener(‘click‘,function () { ???????????????alert(1); ???????????????????????????},false); ???????????$(‘.box‘).mouseenter(function(event) { ???????????????$.ajax({ ???????????????????????url:‘https://free-api.heweather.com/s6/weather/forecast?location=beijing&key=你的key‘, ???????????????????????type:"get", ???????????????????????success:function (data) { ???????????????????????????console.log(data.HeWeather6[0].daily_forecast); ???????????????????????????var datas = data.HeWeather6[0].daily_forecast ???????????????????????????$(‘.content‘).show(); ???????????????????????????$(‘.content‘).empty(); ???????????????????????????datas.forEach(function(item,index) { ???????????????????????????????// $(‘.content .item‘).eq(index).html(item.tmp_max); ????????????????????????????????$(‘<div class="item"></div>‘).appendTo(‘.content‘).html(item.tmp_max); ???????????????????????????}) ???????????????????????????????????????????????????} ???????????????????}) ???????????}); ???????????$(‘.box‘).mouseleave(function() { ???????????????$(‘.content‘).hide(); ???????????}); ???????}) ???</script> ???</body></html>jQuery的文档操作(重点)/简单接触ajax(和风天气)
原文地址：https://www.cnblogs.com/rixian/p/9755685.html