内容回顾
# 前端和后端交互的过程
# html
# head
# meta 设置页面的一些编码 和搜索相关的关键字 概要
# title 设置网页的标题
# link 引入css文件的
# style css样式
# body
# 行内标签 : span a img
# 块级标签 : p div h1-h6 li ul ol dl table
# form表单
# input
# text password radio checkbox submit
# file button reset date hidden
# select
# textarea
# css 处理标签的样式
# 引入样式
# link
# style
# 颜色
# rgb/#FFFFFF/white/rgba
# 选择器
# 标签选择器 类选择器. id选择器# 通用选择器*
# 后代选择器 div a
# 子代选择器 div>a
# 属性选择器 input[type='text']
# 交集选择器 div.类名
# 并集选择器 ul,li,ol,dl
# 伪元素选择器 .clearfix:after
# 优先级
# 行内 > id > 类 > 标签 > 继承
# 字体 font-size 默认是16px
# 文本 text-align text-decoration
# 背景图片 background-image
# 边框 : 设置宽度 设置颜色 设置style
# border-bottom:solid 1px gray
# border-right:solid 1px gray
# border : solid 1px gray
# border-radus: 10px 圆角
# 块及标签和行内标签的转换
# display : block /inline-block /inline/none
# block --> inline-block
# a --> inline-block
# 盒模型
# margin
# border
# padding
# content
# 浮动
# float : left/right
# div
# div1 浮动
# div2 clear:both
# overflow 设置了也可以清除浮动
# 定位
# 相对定位 : 相对之前的位置移动
# 绝对定位 : 相对整个网页位置固定,会随着混动轴的移动而移动
# 固定定位 : 相对整个浏览器窗口的,不会随着混动轴的移动而移动
# z-index 设置页面上的标签哪个在上哪个在下
# opacity 整个标签的透明度
今日内容
# javascript
# 对于前段页面的展示开发
# 语法逻辑不够严谨
# 部分分类
# ECMAscript js的标准语法
# BOM browser object modle 操作浏览器的语法
# DOM document object modle 文档对象模型
# js的引入
# 直接写在script标签中
# 使用script标签src引入
# 输出
# alert('直接在页面上弹出的内容')
# console.log('在控制台输出的内容')
# 注释
# //被注释的代码
js引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
// alert('是否满18岁')
console.log('任何东西')
</script>
<script src="js引入.js"></script>
</html>
运算符
# ===类型和值都相等
# ++ --
# var a = 1;
# var b = a++;
# b = 1 a=2 a先赋值给b,然后再自加1
# var a = 1;
# var b = ++a;
# b = 2 a = 2 a先自加,然后再赋值给b
Js的基础语法
# 定义变量:
# 变量名由 数字 字母 下划线 $组成
# var 变量名 = 变量的值
# 可以定义变量先不赋值 var a;
# 基础的数据类型
# 查看类型 typeof 变量/typeof(变量)
# 数字类型 number
# 整数 和 小数
# 字符串 string
# '字符串1' "字符串2"
# length
# 去空白 切割 切片 大小写转换
# 布尔值 Boolean
# true false
# 布尔值 : Boolean(值)
# false : 0,undefined,'',null,NaN
# true : [] {}
# 数组对象
# var a = [1,2,3,4]
# 对象
# var obj = {}
# var obj.属性名 = 属性值
# json对象
# json对象 = JSON.stringpy(obj对象)
# obj = JSON.parse(json对象)
# 日期对象 Date对象
# var obj = new Date()
# var obj = new Date(2019,10,20,12,12,12)
# 正则对象 RegExp对象
# var re = new RegExp('\\d');
# var re2 = /^1[3-9]\d{9}$/
# re2.test('待匹配的字符串')
# re2.test('13737373377')
# 字符串使用正则 g表示匹配多个,i表示不区分大小写
# str.match(/正则表达式/gi)
# str.search(/正则表达式/i)
# Math 数学对象
# 求100-200之间的随机数 :100+Math.random()*(200-100)
# 数据类型的转换
# 字符串转数字
# parseInt
# parseFloat
# 数字转字符串
# String(数字)
# 数字变量.tostring()
# boolean转换
# Boolean(任意数据)
# 流程控制
# if
# for(var i=0,i<=xxx,i++) 推荐你使用
# while
# a>b ? a:b
# 函数
# function 函数名(){
# 函数体
# return 一个值
# }
# 函数名()
# 1. 函数只能有一个返回值
# 2. 函数的参数和接收与否没有直接关系
# foreach
# map
dom操作
# 查找节点
# 直接查找
# obj = document.getElementById('元素的id') 永远只会找到一个标签
# objs = document.getElementsByClassName('元素的class') 永远得到数组
# objs = document.getElementsByTagName('元素的标签名') 永远得到属组
# 间接查找
# 找父亲 obj.parentElement
# 找儿子 obj.children
# obj.firstElementChild
# obj.lastElementChile
# 找哥哥 obj.previousElementSibling
# 找弟弟 obj.nextElementSibling
# 操作节点本身
# 创建节点
# obj = document.createElement('p')
# <p></p>
# obj.innderText = 'p标签'
# <p>p标签</p>
# 添加节点
# 父节点.appendChild(子节点对象)
# 父节点.insertBefore(要添加的子对象,参考节点对象)
# 删除节点
# 父节点.removeChild(子节点对象)
# 克隆节点
# 节点.cloneNode() 只拷贝一层
# 节点.cloneNode(True) 拷贝所有子节点
# 替换节点
# 父节点.replaceChild(新对象,旧子节点)
# 操作节点内的文本
# innerText : pobj.innerText = '<a>我是一个a标签</a>'
# innerHtml : pobj.innerHTML = '<a href="http://www.mi.com">我是一个a标签</a>'
# 操作值
# .value
# 操作属性
# obj.setAttribute('属性名','属性值')
# obj.getAttribute('属性名')
# obj.removeAttribute('属性名')
# 操作类
# obj.classList.add('类名')
# obj.classList.remove('类名')
# obj.classList.contains('类名') 判断是否包含
# obj.classList.toggle('类名') 有就去掉,没有就加上
# 操作样式
# obj.style.样式名 = 样式值
作业
# 5.模态框案例
# 7.留言板
# 9.tab选项卡
红绿灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
border: solid darkgray 5px;
display: inline-block;
padding: 5px;
border-radius: 10px;
}
.light{
float: left;
height: 100px;
width: 100px;
border-radius: 50%;
background-color: lightgray;
margin-left: 5px;
}
.clearfix:after{
content: '';
clear: both;
display: inline-block;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="container clearfix">
<div class="light red"></div>
<div class="light"></div>
<div class="light"></div>
</div>
</div>
<script>
function change_color() {
var lights = document.getElementsByClassName('light')
if(lights[0].classList.contains('red')){
lights[0].classList.remove('red')
lights[1].classList.add('yellow')
}else if(lights[1].classList.contains('yellow')){
lights[1].classList.remove('yellow')
lights[2].classList.add('green')
}
else{
lights[2].classList.remove('green')
lights[0].classList.add('red')
}
}
setInterval(change_color,3000)
</script>
</body>
</html>
联动效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<select name="province" id="province">
<option value="0" selected>请选择省</option>
</select>
<select name="city" id="city">
<option>请选择市:</option>
</select>
</body>
<script>
data = {"河北": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}
var select1 =document.getElementById('province')
for(i in data){
var option = document.createElement('option')
option.innerText = i
select1.appendChild(option)
}
select1.onchange = function () {
var select2 =document.getElementById('city')
select2.innerText = null
var choosed = select1.options[this.options.selectedIndex].innerText
for(var i=0;i<data[choosed].length;i++){
var option = document.createElement('option')
option.value = i
option.innerText = data[choosed][i]
select2.appendChild(option)
}
}
</script>
</html>
作业1-选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#tab{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
ul{
width: 100%;
overflow: hidden;
}
ul li{
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc;
}
ul li a{
text-decoration: none;
color:black;
}
li.active{
background-color: red;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
p.active{
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">图片</a>
</li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
// //需求:鼠标放到上面的li上,li本身变色(添加类),对应的p也显示出来(添加类);
//思路:1.点亮上面的盒子。 2.利用索引值显示下面的盒子。
var tabli = document.getElementsByTagName('li');
var tabContent = document.getElementsByTagName('p')
for(var i = 0; i < tabli.length; i++){
// 绑定索引值(新增一个自定义属性:index属性)
tabli[i].index = i;
tabli[i].onclick = function(){
// 1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for(var j = 0; j < tabli.length; j++){
tabli[j].className = '';
tabContent[j].className = '';
}
this.className = 'active'
tabContent[this.index].className = 'active';//【重要代码】
}
}
}
</script>
</html>
dom操作1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.foo{
background-color: red;
}
</style>
</head>
<body>
<div id = 'd1'>
<p class="foo">我是一个p</p>
<div class="foo">
<div>
我是一个div
</div>
</div>
<a href="">baidu</a>
</div>
</body>
<script>
// var obj = document.getElementById('d1')
// console.log(obj)
// console.log(obj.children)
//
// var objs = document.getElementsByClassName('foo')
// console.log(objs[0])
// console.log(objs[1])
// var objs = document.getElementsByTagName('div')
// console.log(objs)
// var p_obj = document.getElementsByClassName('foo')[0]
// console.log(p_obj.parentElement)
// var p_obj = document.getElementsByClassName('foo')[0]
// console.log(p_obj.nextElementSibling)
// var div_obj = document.getElementsByClassName('foo')[1]
// console.log(div_obj.previousElementSibling)
// var p = document.createElement('p')
// p.innerText = 'P BLABLABLA'
// var obj = document.getElementById('d1')
// var p2 = obj.firstElementChild
// // obj.appendChild(p)
// obj.insertBefore(p,p2)
// var obj = document.getElementById('d1')
// var a_obj = document.getElementsByTagName('a')[0]
// obj.removeChild(a_obj)
// var obj = document.getElementById('d1')
// var new_obj = obj.cloneNode(true)
// console.log(new_obj)
// var p = document.createElement('p')
// p.innerText = 'P BLABLABLA'
// var obj = document.getElementById('d1')
// var p_obj = obj.firstElementChild
// obj.replaceChild(p,p_obj)
</script>
</html>
dom操作2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.lis{
background-color: red;
}
.lis2{
color: yellow;
}
</style>
</head>
<body>
<input type="text" id="username">
<input type="password" id="password">
<div>
<p><a id="baidu" href="http://www.baidu.com" class="lis">小米</a></p>
<ul id="ulist">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<button onclick="f()">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
</body>
<script>
var btn2 = document.getElementById('btn2')
btn2.onclick = f
function f() {
var ulobj = document.getElementById('ulist');
var liobj = document.createElement('li');
liobj.innerText = 'new item';
ulobj.appendChild(liobj)
}
var btn3 = document.getElementById('btn3')
btn3.onclick = function() {
var ulobj = document.getElementById('ulist');
var liobj = document.createElement('li');
liobj.innerText = 'new item';
ulobj.appendChild(liobj)
}
// var pobj = document.getElementsByTagName('p')[0]
// // pobj.innerText = '<a>我是一个a标签</a>' //不认识html
// pobj.innerHTML = '<a href="http://www.mi.com">我是一个a标签</a>'
//
// var obj = document.getElementsByTagName('input')[0]
// console.log(obj.value) //获取值
// obj.value = 'xxx' //设置值
// var obj = document.getElementById('baidu')
// console.log(obj.getAttribute('href'))
// obj.removeAttribute('href')
// obj.setAttribute('href','http://www.mi.com')
// var obj=document.getElementById('baidu')
// console.log(obj.classList)
</script>
</html>
js函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
// function f(a,b) {
// console.log('wahaha',a,b)
// var c = a+b
// return [c,a,b]
// }
// var ret = f(1,2,3,4,5,6,7)
// console.log(ret)
// function sum() {
// var s_value = 0
// for(var i=0;i<arguments.length;i++){
// console.log(i,s_value)
// s_value += arguments[i]
// }
// return s_value
// }
// var res = sum(1,2,3,4,5,6)
// console.log(res)
// var a = ['a','b','c']
// a.forEach(fn)
// function fn(n) {
// console.log(n)
// }
// var a = ['a','b','c']
// var ret = a.map(fn)
// function fn(n) {
// console.log(n)
// return n+'xxxxx'
// }
// console.log(ret)
// function fn(){
// a = 'abc' //全局变量
// var b = 'aaa' //局部变量
// console.log(a,b)
// }
// fn()
// console.log(a)
</script>
</html>
js流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
var score = 70
if(score>=90){
console.log('优秀');
}
else if(score>=80){
console.log('良好');
}
else if(score>=70){
console.log('及格');
}
else{
console.log('不及格');
}
*/
// var res = score>80 ? '及格':'不及格'
// console.log(res)
// var arr = ['a','b','c','d']
// for (n in arr){
// console.log(n)
// }
// for(var i = 0;i<=arr.length;i++){
// console.log(arr[i])
// }
// while (score>70){
// console.log(score)
// score -= 1
// }
</script>
</head>
<body>
</body>
</html>
js定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// var t1 = setTimeout(fn,5000)
// var t2 = setTimeout(fn,1000)
// var t3 = setTimeout(fn,2000)
// var t4 = setTimeout(fn,3000)
// var t5 = setTimeout(fn,4000)
// function fn() {
// alert('hello,world')
// }
// function fn() {
// alert('hello,world')
// }
// clearTimeout(t2)
// clearTimeout(t3)
// clearTimeout(t4)
var t = setInterval(fn,1000)
function fn() {
console.log('hello')
}
clearInterval(t)
</script>
</head>
<body>
</body>
</html>