1. 事件冒泡和捕获
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1" style="background-color: yellow; width: 400px; height: 400px; margin-left: auto; margin-right: auto; ">
<div id="div2" style="background-color: yellowgreen; width: 200px; height: 200px; margin-left: auto; margin-right: auto; ">
<div id="div3" style="background-color: deepskyblue; width: 100px; height: 100px; margin-left: auto; margin-right: auto;">
</div>
</div>
</div>
<script type="text/javascript">
//1.事件冒泡：作用于子标签的事件会传递给父标签； 如果希望作用于子标签的事件不传递给父标签，需要在子标签中对事件进行捕获
//2.事件捕获: 事件对象.stopPropagation()
document.getElementById('div1').onclick = function(){
alert('div1被点击')
}
document.getElementById('div2').onclick = function(evt){
alert('div2被点击')
evt.stopPropagation()
}
document.getElementById('div3').onclick = function(evt){
alert('div3被点击')
//阻止当前事件被传递给父标签
evt.stopPropagation()
}
</script>
</body>
</html>
2. 动态添加和删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--==========js文件=============-->
<script type="text/javascript" src="js/tool.js"></script>
<!--===========样式表=============-->
<style type="text/css">
/*水果盒子*/
#box1{
margin-top: 30px;
margin-left: 40px;
}
.fruit{
width: 250px;
height: 60px;
margin-bottom: 2px;
line-height: 60px;
}
.fruit1{
background-color: rgb(80,141,141);
}
.name1{
float: left;
width: 225px;
height: 100%;
text-align: center;
color: white;
font-size: 25px;
}
.del{
float: right;
width: 25px;
height: 100%;
font-size: 25px;
color: white;
/*设置鼠标悬停时候的样式为手指*/
cursor: pointer;
}
/*输入框和按钮*/
#box2{
margin-left: 40px;
}
#box2 input{
width: 250px;
height: 60px;
border: 0;
border-bottom: 1px solid rgb(150,150,150);
text-align: center;
font-size: 25px;
vertical-align: bottom;
}
#box2 input:focus{
outline: 0;
}
#box2 button{
vertical-align: bottom;
width: 100px;
height: 40px;
color: white;
background-color: rgb(250,105,70);
font-size: 15px;
border: 0;
}
#box2 button:focus{
outline: 0;
}
</style>
</head>
<body>
<div id="box1">
<div class="fruit1 fruit">
<font class="name1">苹果</font><font class="del">×️</font>
</div>
<div class="fruit1 fruit">
<font class="name1">草莓</font><font class="del">×️</font>
</div>
<div class="fruit1 fruit">
<font class="name1">香蕉</font><font class="del">×️</font>
</div>
<div class="fruit1 fruit">
<font class="name1">榴莲</font><font class="del">×️</font>
</div>
</div>
<div id="box2">
<input type="" name="" id="furitName" value="" />
<button onclick="addAction()">确定</button>
</div>
<script type="text/javascript">
// function func1(){
// //全局变量
// a = 100
// //局部变量
// var b = 200
// }
// func1()
//=============添加水果============
function addAction(){
//1.获取输入框中的内容
inputNode = document.getElementById('furitName')
furitName = inputNode.value
if(furitName.length == 0){
alert('请输入水果名!')
return
}
inputNode.value = ''
//2.创建节点
var divNode = document.createElement('div')
divNode.style.backgroundColor = randomColor(0.5)
divNode.className = 'fruit'
var nameNode = document.createElement('font')
nameNode.className = 'name1'
nameNode.innerText = furitName
var delNode = document.createElement('font')
delNode.className = 'del'
delNode.innerText = '×'
delNode.onclick = delAction
//3.添加节点
divNode.appendChild(nameNode)
divNode.appendChild(delNode)
box1Node = document.getElementById('box1')
box1Node.insertBefore(divNode, box1Node.firstElementChild)
}
//===============删除水果====================
function delAction(){
console.log(this)
this.parentElement.remove()
}
delNodes = document.getElementsByClassName('del')
for(x=0;x<delNodes.length;x++){
delNode = delNodes[x]
delNode.onclick = delAction
}
</script>
</body>
</html>
3. 机动车限行查询
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--=======样式=============-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
height: 230px;
border-bottom: 1px solid rgb(150,150,150);
text-align: center;
position: relative;
}
#box1 div{
position: absolute;
bottom: 10px;
width: 100%;
}
/*=======输入框======*/
#carNo{
border: 0;
border-bottom: 1px dotted rgb(200,200,200);
width: 400px;
height: 60px;
text-align: center;
font-size: 30px;
vertical-align: bottom;
}
#carNo:focus{
outline: 0;
}
/*==========按钮===========*/
#box1 button{
width: 100px;
height: 40px;
font-size: 20px;
color: white;
background-color: red;
vertical-align: bottom;
}
/*===========插叙结果=============*/
#box2 p{
text-align: center;
font-size: 25px;
}
</style>
</head>
<body>
<!--==========内容===========-->
<div id="box1">
<div id="">
<input type="" name="" id="carNo" value="" placeholder="请输入车牌号"/>
<button onclick="queryAction()">查询</button>
<button onclick="clearAction()">清除</button>
</div>
</div>
<div id="box2"></div>
<!--===========js=============-->
<script type="text/javascript">
function isTrafficControl(carNo){
//0.今天是星期几
tody = new Date()
week = tody.getDay()
if(week == 0 || week == 6){
return false
}
//1.找到第一个数字字符
numer = ''
for(x=carNo.length-1;x>=0;x--){
ch = carNo[x]
if('0'<=ch && ch<='9'){
numer = ch
break
}
}
console.log('====：',numer)
//2.日期对应的车牌号是否限行
if(numer == week || numer==(week+5)%10){
return true
}
return false
}
//=============查询功能==============
function queryAction(){
//1.获取输入框中的内容
inputNode = document.getElementById('carNo')
carNumer = inputNode.value
console.log(carNumer)
result = ''
//2.判断是否是合法的车牌号
//第一位: 京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼
//第二位：A-Z
//后面：五位数字和字母结合
regular = /^[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼][A-Z][\dA-Z]{5}$/
if(regular.test(carNumer) == false){
result = carNumer+'不是合法的车牌号'
}else{
if(isTrafficControl(carNumer)){
result = carNumer+'今日限行!'
}else{
result = carNumer+'今日不限行!'
}
}
//3.在页面上显示结果
pNode = document.createElement('p')
pNode.innerText = result
document.getElementById('box2').appendChild(pNode)
}
//==================清除功能===================
function clearAction(){
document.getElementById('box2').innerHTML = ''
}
</script>
</body>
</html>
4. 城市下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select name="province" id="province">
</select>
<select name="city" id="city">
</select>
<script type="text/javascript">
//获取节点
provinceNode = document.getElementById('province')
cityNode = document.getElementById('city')
//城市数据
cityMessage = {
'四川省': ['成都市', '绵阳市','德阳市','自贡', '巴中', '宜宾', '眉山', '乐山'],
'重庆': ['南岸区', '沙坪坝', '璧山', '秀山', '合川', '丰都', '万州', '开州'],
'广东省': ['广州市','深圳', '佛山', '汕头', '珠海']
}
//==========显示省=========
for(province in cityMessage){
//创建每个省对应的节点
provinceOptNode = document.createElement('option')
provinceOptNode.innerText = province
provinceOptNode
provinceNode.appendChild(provinceOptNode)
}
//======显示市=============
function refreshCity(){
//清空
cityNode.innerHTML = ''
//根据省获取市的信息
citys = cityMessage[provinceNode.value]
//显示市信息
for(x=0;x<citys.length;x++){
city = citys[x]
cityOptNode = document.createElement('option')
cityOptNode.innerText = city
cityNode.appendChild(cityOptNode)
}
}
refreshCity()
//===========刷新市============
provinceNode.onchange = refreshCity
</script>
</body>
</html>
5. 动态添加背景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
height: 400px;
/*background-color: lightblue;*/
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
backgroundDatas = [
{img:'bg1.png', color:'rgb(207,26,26)'},
{img:'bg2.png', color: 'rgb(79,150,214)'}
]
//准备节点
boxNode = document.getElementById('box')
//准备数据
x = parseInt(Math.random()*backgroundDatas.length)
currentBgData = backgroundDatas[x]
//设置背景
boxNode.style = 'background: url(img/'+currentBgData.img+') no-repeat 200px center '+ currentBgData.color
// console.log(sty)
</script>
</body>
</html>
6. 按钮切换效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
button{
border: 0;
width: 150px;
height: 70px;
font-size: 25px;
}
button:focus{
outline: 0;
}
</style>
</head>
<body>
<button class="loginBtn">扫码登录</button>
<button class="loginBtn">账号登录</button>
<button class="loginBtn">微信登录</button>
<button class="loginBtn">QQ登录</button>
<!--<div id="box1">
</div>-->
<div id="box2" style="width: 300px; height: 400px; background-color: lightblue;">
</div>
<script type="text/javascript">
function func1(){
let num = 2
num = 100
num = 200
}
func1()
btnNodes = document.getElementsByClassName('loginBtn')
//保存当前被选中的节点
selectBtnNode = null
for(x=0;x<btnNodes.length;x++){
btnNode = btnNodes[x]
if(x == 0){
btnNode.style.color = 'red'
selectBtnNode = btnNode
}
//添加属性
btnNode.x = x
//绑定点击事件
btnNode.onclick = function(){
if(selectBtnNode == this){
return
}
selectBtnNode.style.color = 'black'
this.style.color = 'red'
//更新当前选中节点的值
var selectBtnNode = this
box2Node =document.getElementById('box2')
// document.getElementById('box2').innerText = this.x
switch(this.x){
case 0:
box2Node.innerHTML = ''
box2Node.style.backgroundColor = 'red'
break
case 1:
box2Node.innerHTML = ''
box2Node.style.backgroundColor = 'white'
box2Node.appendChild(document.createElement('input'))
break
}
}
}
</script>
</body>
</html>
7. jQuery基础
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1.导入jQuery-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
</head>
<body>
<script type="text/javascript">
//1.什么是jQuery
/*
jQuery本质就是js，它是为了能够更方便的使用js而封装的一个库
如果想要使用jQuery必须先导入jQuery的js文件
js可以将任何内容转换js对象，例如:document、节点、事件对象
jQuery提供的方法只支持jQuery对象
在jQuery中$代表jQuery, $() -> 创建jQuery对象的语法
document -> js对象； $(document) -> jQuery对象
*/
//2.ready方法 - 等待网页中内容加载完成
/*
和onload功能一样
$(document).ready(function(){
页面加载完成后才会执行的代码
})
简写:
$(function(){
页面加载完成后才会执行的代码
})
*/
// $(document).ready(function(){
//
// pNode = document.getElementById('p1')
// console.log(pNode)
// })
$(function(){
pNode = document.getElementById('p1')
console.log(pNode)
})
</script>
<p id="p1">我是段落1</p>
<div id="div1">
<p class="cp1">我是段落2</p>
<div id="div2">
<a href="">我是超链接</a>
<p>我是段落3</p>
<p>我是段落4</p>
<span id="">
<p>我是段落5</p>
</span>
<p>我是段落6</p>
</div>
</div>
<p class="cp1">我是段落2</p>
<script type="text/javascript">
//3.DOM操作
//1)获取节点
/*
语法: $(选择器)
说明: 选择器 - 和CSS中的选择器一样
a.普通选择器: 和css一样的
*/
var pNode = $('#p1')
console.log(pNode)
pNode.text('新的段落1')
pNodes = $('.cp1')
console.log(pNodes)
pNodes.text('新的段落2')
for(x=0;x<pNodes.length;x++){
//遍历取出来的是js对象
const p = pNodes[x]
// $(p).text(x)
}
pNode = $('div p')
console.log('===:',pNode)
/*
b.其他特殊情况
选择器1>选择器2 - 选中选择器中的选择器2对应的直系子标签
选择器1+选择器2 - 选中紧跟着选择器1的选择器2(选择器1和选择器2对应的标签必须是兄弟关系)
选择器~选择器2 - 选中离选择器1最近的选择器2(选择器1和选择器2对应的标签必须是兄弟关系)
选择器:first - 第一个选择器
选择器:last - 最后一个选择器
选择器 *:first-child - 选中选择器中第一个子标签
*/
pNode = $('div>p')
console.log('===:',pNode)
pNode = $('#p1 + div')
console.log('===:',pNode)
pNode = $('#p1~p')
console.log('===:',pNode)
pNode = $('p:first')
console.log('===:',pNode)
pNode = $('#div2>p:first')
console.log('===:',pNode)
pNode = $('#div2>p:last')
console.log('===:',pNode)
var xNode = $('#div2>*:first-child')
console.log('===:',xNode)
</script>
</body>
</html>
JS应用
1. 原生js
1.1 DOM操作
节点操作 - 获取节点
1.直接获取节点
a.通过标签的id值来获取指定的标签: document.getElementById(id值)
b.通过标签名来获取指定的标签: document.getElementsByTagName(标签名)
c.通过类名来获取指定的标签: document.getElementsByClassName(类名)
d.通过name属性的值来获取指定的标签(了解): document.getElementsByName('username')
2.获取父节点
a.获取子节点对应的父节点: 子节点.parentElement
3.获取子节点
a.获取所有的子节点: 父节点.children / 父节点.childNodes
b.获取第一个子节点: 父节点.firstElementChild
c.获取最后一个子节点: 父节点.lastElementChild
节点操作 - 创建添加和删除
1.创建节点: document.createElement(标签名)
2.添加节点: 父节点.appendChild(需要添加的节点) / 父节点.insertBefore(新节点, 指定节点)
3.删除节点: 父节点.removeChild(子节点) / 节点.remove()
4.拷贝节点: 节点.cloneNode() / 节点.cloneNode(true)
5.替换节点: 父节点.replaceChild(新节点, 子节点)
练习: 删除广告、动态添加和删除
作业: 成都汽车限号查询
1.2 BOM操作
1.window基本操作
a.打开新窗口：window.open(网页地址) / window.open('','','width=x?,height=y?')
b.关闭窗口: window.close()
c.移动当前窗口: 窗口对象.moveTo(x坐标, y坐标)
d.获取浏览器的宽度和高度: window.innerWidth, window.innerHeight / window.outerWidth, window.outerHeight
2.弹框
a. alert(提示信息) - 弹出提示信息(带确定按钮)
b. confirm(提示信息) - 弹出提示信息(带确定和取消按钮),返回值是布尔值，取消-false, 确定-true
c. prompt(提示信息,输入框中的默认值) - 弹出一个带输入框和取消，确定按钮的提示框; 点取消，返回值是null;点确定返回值是输入框中输入的内容
3.定时
a. setInterval(函数,时间) / clearInterval(定时对象)
b. setTimeout(函数,时间) / clearTimeout(定时对象)
1.3 事件
1.事件绑定
a. 在标签内部给事件源的事件属性赋值
b. 通过节点绑定事件1: 标签节点.事件属性 = 函数
c. 通过节点绑定事件2: 标签节点.事件属性 = 匿名函数
d. 通过节点绑定事件3: 节点.addEventListener(事件名,函数)
2.常见事件类型
a..onload - 页面加载完成对应的事件(标签加载成功)
window.onload = 函数
b.鼠标事件: onclick / onmouseover / onmouseout
c.键盘事件: onkeypress / onkeydown / onkeyup
d.输入框内容改变: 'onchange' - 输入框输入状态结束
3.事件捕获
事件对象.stopPropagation()
2. jQuery
2.1 基本操作
===========节点=============
1.获取节点
$(选择器)
console.log($('#div2>a')) //和后代选择器效果一样
console.log($('p + a')) //获取紧跟着p标签的a标签
console.log($('#p1~*')) //获取和id是p1的标签的后面的所有同级标签
console.log($('div:first')) //第一个div标签
console.log($('p:last')) //最后一个p标签
console.log($('div *:first-child')) //找到所有div标签中的第一个子标签
2.创建标签
('<div style="color: red">我是div</div>')
3.添加标签
父标签.append(子标签) - 在父标签的最后添加子标签
父标签.prepend(子标签) - 在父标签的最前面添加子标签
标签.before()
标签.after()
4.删除标签
标签.empty() - 清空指定标签
标签.remove() - 删除指定标签
==============属性================
1.普通属性的获取和修改 - 除了innerHTML(html), innerText(text)以及value(val)
标签.attr(属性名) - 获取指定的属性值
标签.attr(属性名, 值) - 修改/添加属性
//2.标签内容属性
// 双标签.html()
// 双标签.text()
// 单标签.val()
//注意：上面的函数不传参就是获取值，传参就是修改值
2.class属性 - HTML中一个标签可以有多个class值，多个值用空格隔开
标签.addClass(class值) - 给标签添加class值
标签.removeClass(class值) - 移除标签中指定的class值
3.样式属性
a.获取属性值
标签.css(样式属性名) - 获取样式属性值
b.修改和添加
标签.css(样式属性名, 值) - 修改属性值
标签.css({属性名:值, 属性名2:值2...}) - 同时设置多个属性
==============事件=============
1.标签.on(事件名,回调函数) - 给标签绑定指定的事件（和js中的addEventLinsenner一样）
事件名不需要要on
2.父标签.on(事件名,选择器,回调函数) - 在父标签上添加事件，传递给选择器对应的子标签
选择器 - 前面标签的后代标签(子标签/子标签的子标签)
2.2 Ajax
语法：
1.get请求
$.get(url,data,回调函数,返回数据类型)
- url：请求地址（字符串）
- data：参数列表 (对象)
- 回调函数：请求成功后自动调用的函数(函数名，匿名函数)
- 返回数据类型：请求到的数据的格式(字符串，例如：'json')
2.post请求
$.post(url,data,回调函数,返回数据类型)
- url：请求地址（字符串）
- data：参数列表 (对象)
- 回调函数：请求成功后自动调用的函数(函数名，匿名函数)
- 返回数据类型：请求到的数据的格式(字符串，例如：'json')
3.ajax
$.ajax({
'url':请求地址,
'data':{参数名1:值1, 参数名2:值2}，
'type':'get'/'post',
'dataType':返回数据类型,
'success':function(结果){
请求成功后要做的事情
}
})
