前端 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.DOM
Document Object Model
(1)获取DOM对象
getElementById()
getElementsByTagName()
getElementsByClassName()
(2)onclick 点击
onmouseover 鼠标悬浮
onmouseout 鼠标移出
onmouseenter 鼠标进入
onmouseleave 鼠标离开
(3)
一、值得操作 <div class='box'></div> too liang
oDiv.innerText = 'too liang'; 仅仅的设置文本
oDiv.innerHTML = '<h2>too liang</h2>'; 文本和标签一起渲染
oInput.value = 'alex'; 仅仅是对表单控件 有效
二、标签属性操作：
设置类名： oDiv.className += ' active'; 追加类名
设置id：oDiv.id = 'box'
title
img中的src设置
a中的href
input id name placeholde.... value
三、样式操作
oDiv.style.(css中所有的样式属性)
注意：如果margin-left 使用js的时候marginLeft
DOM的三步走：
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、https
search 查询字符串
举例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{
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/index
var 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转js
console.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{
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{
300px;
list-style: none;
background-color: purple;
overflow: hidden;
margin: 100px auto;
}
ul li {
float: left;
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{
300px;
list-style: none;
background-color: purple;
overflow: hidden;
}
ul li {
float: left;
75px;
height: 80px;
line-height: 80px;
text-align: center;
color: #fff;
}
li.active{
color: red;
}
.content{
300px;
height: 300px;
/*background-color: red;*/
}
.content div{
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{
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;
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 {
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 {
200px;
height: 100px;
background-color: dimgrey;
color: red;
text-align: center;
line-height: 100px;
cursor: pointer;
font-size: 40px;
}
.ret {
500px;
height: 250px;
background-color: pink;
display: none;
overflow: hidden;
}
.ret .tian {
150px;
height: 100%;
float: left;
font-size: large;
color: #0e90d2;
margin-right: 10px;
position: relative;
}
.tian .date {
position: absolute;
top:-15px;
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>