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(結果){
? 請求成功后要做的事情
? }
? })
