# 前端 day03
内容回顾
javascript:1.ECMAScript5.0 es6(阮一峰) es7 es8(1)声明变量 var let(2)内置函数 Date Math.random()(3)if else switch while do-while for(4)var a = 5;//先赋值var a = a++;//var x = ++a;2.DOMDocument Object Model(1)获取DOM对象getElementById()getElementsByTagName()getElementsByClassName()(2)onclick 点击onmouseover 鼠标悬浮onmouseout 鼠标移出onmouseenter 鼠标进入onmouseleave 鼠标离开(3)一、值得操作 <div class='box'></div> too liangoDiv.innerText = 'too liang'; 仅仅的设置文本oDiv.innerHTML = '<h2>too liang</h2>'; 文本和标签一起渲染oInput.value = 'alex'; 仅仅是对表单控件 有效二、标签属性操作：设置类名： oDiv.className += ' active'; 追加类名设置id：oDiv.id = 'box'titleimg中的src设置a中的hrefinput id name placeholde.... value三、样式操作oDiv.style.(css中所有的样式属性)注意：如果margin-left 使用js的时候marginLeftDOM的三步走：1.事件对象2.事件3.事件驱动注释法排错DOM的增删改建
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>// 1.DOM元素加载 2、图片资源//1.等待DOM和图片资源加载完成之后才调用次方法//2.事件覆盖现象//程序入口函数window.onload = function () {// alert(1);//// var a = 10;// alert(a);function $(idName) {return document.getElementById(idName);}// var oBtn = document.getElementById('btn');// var oDiv = document.getElementById('box');$('btn').onclick = function () {//1.DOM的创建var oP = document.createElement('p');//2.DOM的追加 父.appendChild(子)$('box').appendChild(oP);//3.DOM的修改oP.innerText = 'alex';oP.id = 'p1';var oA = document.createElement('abc');oA.innerText = '321';$('box').insertBefore(oA,oP)}$('del').onclick = function () {//4.DOM删除$('box').removeChild($('p1'));}};</script></head>
<body><button id="btn">追加</button><button id="del">删除</button><div id="box"><!--p--></div>
</body>
</html>JS中的BOM
Browser Object Model
window对象时BOM的顶层对象
alert方法其实是window.alert，点可以不写
window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。
href：跳转hash 返回url中#后面的内容，包含#host 主机名，包括端口hostname 主机名pathname url中的路径部分protocol 协议 一般是http、httpssearch 查询字符串举例1：
<body>
<div>smyhvae</div>
<script>var div = document.getElementsByTagName("div")[0];div.onclick = function () {location.href = "http://www.baidu.com"; //点击div时，跳转到指定链接// window.open("http://www.baidu.com","_blank"); //方式二}</script>
</body>JS中的定时器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body>
<div id="box"></div>
<a href="http://www.baidu.com" target="_blank">百度</a>
<button id="btn">跳转</button>
<script>var oDiv = document.getElementById('box');var num = 0;setInterval(function () {// num+=3;console.log(num);oDiv.style.marginLeft = num+'px';},30);//用定时器 先清定时器 再开定时器/*//定时器 一次性定时器 js单线程//1.回调函数 2.时间 毫秒1000毫秒=1秒//不等待 解决数据阻塞var timer = setTimeout(function () {console.log('走动了');},1000);console.log('dddd');console.log(2);//history模块 hash模式///xxxx/indexvar oBtn = document.getElementById('btn');oBtn.onclick = function () {//需求：打开百度// console.log(location);// location.href = 'http://www.baidu.com';// open('http://www.baidu.com','_self');// open('http://www.baidu.com','_blank')//全局刷新 刷新整个页面window.location.reload();// clearTimeout(timer);}*/</script>
</body>
</html>JS的面向对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>// var arr = [1,2,3];// var arr = new Array()// js es5中没有class的概念// class Dog// self.name = name// def eat()// Dog()function Dog(name,age){this.name = name;this.age = age;}//就是Dog的父类Dog.prototype.eat = function () {console.log(this.name);}
// 没对象 new一个var d1 = new Dog('太量',20);console.log(d1);d1.eat();console.log(Dog.prototype );console.log(d1.__proto__);console.log(Dog.prototype === d1.__proto__ );</script></body>
</html>JQuery入门
F12 里的network里的那些name，都是相当于每一个请求。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./index.css">
</head>
<body><div class="box">alex</div>
<!--jquery的核心思想 write less do more 写的少 做的多-->
<!--1.引包 前端 一个js文件就是一个模块-->
<script src="jquery-3.3.1.js"></script><script>//1.入口函数console.log($(document));// console.log(jQuery);//当文档加载时候 调用此方法// $(document).ready(function () {////////// });$(function () {//jquery转jsconsole.dir($('.box')[0])$('.box').click(function () {// $('.box').css('background-color','green');// $('.box').css({// 'width':500,// 'backgroundColor':'green'// });//this指的是js对象console.log(this)// js转换jquery对象$(this).css('background-color','green');})});
</script>
</body>
</html>jQuery的基本选择器
$(this).text() text括号里不传值表示查看值，传了值表示设置值。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><div class="box"><p>alex</p></div><div class="box">tailiang</div><input type="text"><script src="jquery-3.3.1.js"></script><script>$(function () {// var oBoxs = document.getElementsByClassName('box');// console.log(oBoxs);var arr = [1,2];console.log(arr);//类选择器 类似数组 数组的索引 长度length 但是原型的方法不一样： 伪数组console.log( $('.box'));// $('.box').push('4');// console.log( $('.box'));//jquery 内部遍历 对jsdom对象添加点击事件$('.box').click(function () {//对值得操作// alert(this.innerText);// alert($(this).text());// alert($(this).html());$(this).text('nvshen');});//设置 获取// $('input').val('123');});</script>
</body>
</html>高级选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul class="lists"><li>alex</li><li>alex2</li></ul><script src="jquery-3.3.1.js"></script><script>$(function () {//链式编程 返回的是jQuery对象$('ul li').css({'color':'red'}).click(function(){console.log($(this).text().trim())})});</script>
</body>
</html>基本过滤选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li>alex1</li><li>alex2</li><li>alex3</li><li>alex4</li><li>alex5</li><li>alex6</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>$(function () {//基本过滤选择器$('ul li:eq(0)').css('color','green');$('ul li:gt(1)').css('color','red');$('ul li:first').css('color','yellow');});
</script>
</body>
</html>筛选的方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li>alex1<a href="#">alex1</a></li><li>alex2</li><li class="item3">alex3</li><li>alex4</li><li>alex5</li><li>alex6</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>$(function () {//筛选方法// $('ul').find('.item3').css('color','red');//获取的亲儿子$('ul').children().css('color','green');//获取的亲爹$('ul').parent().css('background','yellow');$('ul li').eq(2).css('color','red');});
</script>
</body>
</html>siblings选项卡
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0;margin: 0;}ul{width: 300px;list-style: none;background-color: purple;overflow: hidden;margin: 100px auto;}ul li {float: left;width: 75px;height: 80px;line-height: 80px;text-align: center;color: #fff;}li span.active{color: red;}</style>
</head>
<body>
<ul><li><span>热门</span></li><li><span>洗衣机</span></li><li><span>洗衣机</span></li><li><span>冰箱</span></li>
</ul><script src="jquery-3.3.1.js"></script>
<script>$(function () {$('ul li span').eq(0).addClass('active');$('ul li').click(function () {//siblings 除了它自己之外的兄弟元素// $(this).children().addClass('active').parent().siblings('li').children().removeClass('active');$(this).find('span').addClass('active').parent().siblings('li').children().removeClass('active');})});
</script>
</body>
</html>选项卡完整版
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0;margin: 0;}ul{width: 300px;list-style: none;background-color: purple;overflow: hidden;}ul li {float: left;width: 75px;height: 80px;line-height: 80px;text-align: center;color: #fff;}li.active{color: red;}.content{width: 300px;height: 300px;/*background-color: red;*/}.content div{width: 100%;height: 100%;color: #000;line-height: 300px;font-size: 100px;text-align: center;}</style>
</head>
<body>
<ul><li class="active">a</li><li>b</li><li>c</li><li>d</li>
</ul>
<div class="content"><div>1</div><div style="display: none">2</div><div style="display: none;">3</div><div style="display: none;">4</div>
</div><script src="jquery-3.3.1.js"></script>
<script>$(function () {$('ul li').click(function () {console.log( $(this).index());var i = $(this).index()//修改 小导航 选项切换$(this).addClass('active').siblings('li').removeClass('active');//修改对应的内容 选项切换$('.content div').eq(i).css('display','block').siblings('div').css('display','none');});});
</script>
</body>
</html>对类的操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" class="box"></div>
<script src="jquery-3.3.1.js"></script>
<script>$(function () {$('#box').addClass('active tt uu ii');$('#box').removeClass('active tt');})
</script>
</body></html>标签属性、对象属性的操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="" alt="">
<a href=""></a>
<input type="radio" name = 'sex' checked = 'addadadad' id="nan">男
<input type="radio" name = 'sex' id="nv">女
<script src="jquery-3.3.1.js"></script><script>$(function () {//设置单个属性// $('img').attr('src','./timg.jpg');//设置多个属性$('img').attr({id:'img1',src:'./timg.jpg',// 除了class属性 其它的属性都可以设置title:'啊 美女'});//获取console.log( $('img').attr('title'));//删除标签属性$('img').removeAttr('id title');//标签属性console.log($('#nan').attr('checked'));//获取jsDOM对象的属性 用在单选按钮上多console.dir($('#nan')[0])console.log($('#nan').prop('checked'));console.log($('#nv').prop('checked'));});
</script>
</body>
</html>动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 200px;height: 200px;background-color: red;display: none;}</style>
</head>
<body>
<button>动画</button><div class="box"></div>
<script src="jquery-3.3.1.js"></script><script>$(function () {var isShow = true;$('button').click(function () {// $('.box').hide(3000);// $('.box').show(3000,function () {// $(this).text('alex');// });/*if (isShow){$('.box').show(3000,function () {$(this).text('alex');isShow = false;});}else{$('.box').hide(3000,function () {$(this).text('');isShow = true;});}*///使用jquery的动画 先停止 动画 在 开动画// $('.box').stop().toggle(500);//卷帘门动画// $('.box').slideDown(500);// $('.box').stop().slideToggle(500);//淡入 显示// $('.box').fadeIn(2000);// $('.box').stop().fadeToggle(2000);})});
</script>
</body>
</html>自定义动画
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>div {position: absolute;left: 20px;top: 30px;width: 100px;height: 100px;background-color: green;}</style><script src="jquery-3.3.1.js"></script><script src="jquery.color.js"></script><script>$(function () {$("button").click(function () {var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};var json2 = {"width": 100,"height": 100,"left": 100,"top": 100,"border-radius": 100,"backgroundColor": '#ff6700'};//自定义动画$("div").animate(json, 1000, function () {$("div").animate(json2, 3000, function () {alert("动画执行完毕！");});});})})</script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>单双击问题解决
<!DOCTYPE html><head><meta charset="UTF-8"><title>Title</title><style>.box {width: 200px;height: 300px;color: red;font-size: 30px;cursor: pointer;}</style>
</head>
<body><div class="head"><div class="container"><button class="box">按钮</button></div></div><script src="jquery.js"></script><script>var time = null;
$('.box').click(function () {// 取消上次延时未执行的方法clearTimeout(time);//执行延时time = setTimeout(function(){//do function在此处写单击事件要执行的代码console.log('单机')},300);
});$('.box').dblclick(function () {// 取消上次延时未执行的方法clearTimeout(time);//双击事件的执行代码console.log('双击')
});</script>
</body>
</html>ajax 练习
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>天气预报</title><style>* {margin: 0;padding: 0;}.head {width: 200px;height: 100px;background-color: dimgrey;color: red;text-align: center;line-height: 100px;cursor: pointer;font-size: 40px;}.ret {width: 500px;height: 250px;background-color: pink;display: none;overflow: hidden;}.ret .tian {width: 150px;height: 100%;float: left;font-size: large;color: #0e90d2;margin-right: 10px;position: relative;}.tian .date {position: absolute;top:-15px;width: 100%;height: 50px;left:-10px;}.tian .img {position: absolute;top: 55px;left: 15px;}.tian .tmp {position: absolute;top: 115px;left: 20px;}.tian .cond {position: absolute;top: 146px;left: 50px;}.tian .wind {position: absolute;top: 178px;left: 42px;}</style>
</head>
<body><div class="head">查询天气<div class="ret"><div id="jintian" class="tian"></div><div id="mingtian" class="tian"></div><div id="houtian" class="tian"></div></div></div><script src="./jquery.js"></script><script>$(function () {var timer = null;$('.head').mouseenter(function () {$.ajax({url:"https://free-api.heweather.com/s6/weather/forecast?location=北京&key=5aa044253c234fec8696a4cc2e3430fd",type: "get",success:function (data) {console.log(data)var jintian = data.HeWeather6[0].daily_forecast[0];var mingtian = data.HeWeather6[0].daily_forecast[1];var houtian = data.HeWeather6[0].daily_forecast[2];console.log(jintian,mingtian,houtian);$('#jintian').empty();$('#jintian').append(`<span id="date">${jintian.date}</span>`);$('#jintian').append(`<img src="./tupian/${jintian.cond_code_d}.png" alt="出不来了">`);$('#jintian').append(`<span id="tmp">${jintian.tmp_min} ~ ${jintian.tmp_max} ℃</span>`);$('#jintian').append(`<span id="cond">${jintian.cond_txt_d}</span>`);$('#jintian').append(`<span id="wind">${jintian.wind_dir}</span>`);$('#jintian #date').addClass('date');$('#jintian img').addClass('img');$('#jintian #tmp').addClass('tmp');$('#jintian #cond').addClass('cond');$('#jintian #wind').addClass('wind');// 明天的$('#mingtian').empty();$('#mingtian').append(`<span id="date">${mingtian.date}</span>`);$('#mingtian').append(`<img src="./tupian/${mingtian.cond_code_d}.png" alt="出不来了">`);$('#mingtian').append(`<span id="tmp">${mingtian.tmp_min} ~ ${mingtian.tmp_max} ℃</span>`);$('#mingtian').append(`<span id="cond">${mingtian.cond_txt_d}</span>`);$('#mingtian').append(`<span id="wind">${mingtian.wind_dir}</span>`);$('#mingtian #date').addClass('date');$('#mingtian img').addClass('img');$('#mingtian #tmp').addClass('tmp');$('#mingtian #cond').addClass('cond');$('#mingtian #wind').addClass('wind');// 后天的$('#houtian').empty();$('#houtian').append(`<span id="date">${houtian.date}</span>`);$('#houtian').append(`<img src="./tupian/${houtian.cond_code_d}.png" alt="出不来了">`);$('#houtian').append(`<span id="tmp">${houtian.tmp_min} ~ ${houtian.tmp_max} ℃</span>`);$('#houtian').append(`<span id="cond">${houtian.cond_txt_d}</span>`);$('#houtian').append(`<span id="wind">${houtian.wind_dir}</span>`);$('#houtian #date').addClass('date');$('#houtian img').addClass('img');$('#houtian #tmp').addClass('tmp');$('#houtian #cond').addClass('cond');$('#houtian #wind').addClass('wind');},error:function (err) {alert(err);}});clearTimeout(timer);timer = setTimeout(function () {$('.ret').css('display','block');},100);});$('.head').mouseleave(function () {$('.ret').css('display','none');})});</script>
