1 事件的冒泡和捕获
- .事件冒泡：作用于子标签的事件会传递给父标签； 如果希望作用于子标签的事件不传递给父标签，需要在子标签中对事件进行捕获
- 事件捕获: 事件对象.stopPropagation()
<!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">
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>
实现城市下拉菜单
<!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
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>
动态添加背景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
height: 400px;
}
</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
</script>
<body>
</html>
安妞切换效果
<!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">
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'
//更新当前选中节点的值
selectBtnNode = this
box2Node =document.getElementById('box2')
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
case 2:
box2Node.innerHTML = ''
box2Node.style.backgroundColor = 'goldenrod'
box2Node.appendChild(document.createElement("button"))
break
case 3:
box2Node.innerHTML = ''
}
}
}
</script>
</body>
</html>
practice : 网页安妞切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
text-align: center;
}
.button{
width: 50px;
height: 40px;
border: 0;
color: white;
background-color: rgba(0,0,0,0);
cursor: pointer;
}
.button:focus{
outline: 0;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="box1" style="background-color: rgb(200,200,200);height: 40px;">
<button class="button" id="www">网页</button>
<button class="button">视频</button>
<button class="button">图片</button>
<button class="button">科技</button>
<button class="button">新闻</button>
<button class="button">动漫</button>
<button class="button">音乐</button>
</div>
<script type="text/javascript">
name = "张山"
age = 19
message = `我叫${name},今年${age}岁了`
console.log(message)
butNodes = document.getElementsByClassName("button")
seltNode = butNodes[0]
butNodes[0].style.color = "red"
for (x=0;x<butNodes.length;x++){
butNode = butNodes[x]
butNode.x = x
butNode.onclick = clickAction
}
function clickAction(){
if (seltNode == this){
return
}
this.style.color = "red"
seltNode.style.color = "white"
seltNode = this
}
</script>
</body>
</html>
2 jQuery 基础
2.1 jQuery简介
- jQuery本质就是js，它是为了能够更方便的使用js而封装的一个库
- 如果想要使用jQuery必须先导入jQuery的js文件
- js可以将任何内容转换js对象，例如:document、节点、事件对象
- jQuery提供的方法只支持jQuery对象
- 在jQuery中
() -> 创建jQuery对象的语法
- document -> js对象； $(document) -> jQuery对象
2.2 ready方法 - 等待网页中内容加载完成
- 和onload功能一样
- 语法：
(function(){
页面加载完成后才会执行的代码})
2.3 节点操作
2.3.1 获取节点
- 语法: $(选择器)
- 说明: 选择器 - 和CSS中的选择器一样
2.3.2 选择器
- 普通选择器: 和css一样的
- 其他特殊情况
- 选择器1>选择器2 - 选中选择器中的选择器2对应的直系子标签
- 选择器1+选择器2 - 选中紧跟着选择器1的选择器2(选择器1和选择器2对应的标签必须是兄弟关系)
- 选择器~选择器2 - 选中离选择器1最近的选择器2(选择器1和选择器2对应的标签必须是兄弟关系)
- 选择器:first - 第一个选择器
- 选择器:last - 最后一个选择器
- 选择器>*:first-child - 选中选择器中第一个子标签 first不是子标签
- 选择器 *:first-child - 选中选择器中第一个子标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1.导入jQuery-->
<!--导入本地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">
// $(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)获取节点
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)
//其它选择器
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>
2.3.3 创建节点
语法:
("<p id='p1'>我是一个段落</p>")
2.3.4 添加节点
- jq节点1.append(jq节点2) - 在节点1中的最后添加节点2
- 节点1.prepend(节点2) - 在节点1的最前面插入节点2
- 节点1.before(节点2) - 在节点1的前面插入节点2
- 节点1.after(节点2) - 在节点1的后面插入节点2
2.3.5 删除标签
- jq对象.remove() - 删除指定节点
- jq对象.empty() - 清空指定节点
2.4 属性操作
2.4.1 标签内容属性: innerHTML、innerText、value
- html方法(相当于innerHTML)
- 节点.html() - 获取节点内容
- 节点.html(值) - 给节点内容赋值
- text()方法(相当于innerText)
- val()方法(相当于value)
2.4.2 普通属性
- 节点.attr(属性名) - 获取指定节点指定属性的值
- 节点.attr(属性名,值) - 修改指定节点直接属性的值
- class属性
- 节点.addClass(值) - 添加class属性值
- 节点.removeClass(值) - 移除指定的class值
2.4.3 样式属性
- 获取样式属性的值 节点.css(样式属性名)
- 修改样式属性的值 节点.css(样式属性名,值)
- 节点.css(对象) - 同时设置多种样式
2.4.4 事件绑定
- 方法一：直接绑定
- 节点.on(事件名,函数) - (和js中的addEventLinsenner功能一样)
- 注意: this是js对象，evt是jQuery对象
- evt是事件对象不是节点对象，所以获取属性的时候以对象获取属性的方式来获取console.log(evt.clientX, evt.clientY)
- 方式二:
- 节点.on(事件名,选择器,函数) - 给指定节点绑定指定事件， 并且让节点中选择器对应的子标签对事件做出反应
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.c1{
color: red;
}
.c2{
background-color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<!--=========1.节点操作===========-->
<div id="box1" style="background-color: yellowgreen;">
<p id="p1">我是段落</p>
</div>
<!--========2.属性操作==========-->
<div id="box2">
<h1 class="c1" id="h1">我是标题0</h1>
<div id="div1">
<h1 class="c1">我是标题1</h1>
</div>
<div id="div2"></div>
<input class="c1" type="text" name="" id="" value="" />
</div>
<!--========3.事件绑定=========-->
<button>暂停</button>
<div id="box3">
<input type="button" name="" id="" value="按钮1" />
<input type="button" name="" id="" value="按钮2" />
</div>
<script type="text/javascript">
//1.创建节点(标签)
aNode = $("<a href='https://www.baidu.com'>百度一下</a>")
//2.添加节点
//1)jq节点1.append(jq节点2) - 在节点1中的最后添加节点2
$('#box1').append(aNode)
$('#box1').append($('<img src="img/luffy.jpg"/>'))
//2)节点1.prepend(节点2) - 在节点1的最前面插入节点2
$('#box1').prepend($('<h1>我是标题1</h1>'))
//3)节点1.before(节点2) - 在节点1的前面插入节点2
$('#p1').before($('<p>我是段落0</p>'))
//4)节点1.after(节点2) - 在节点1的后面插入节点2
$('#p1').after($('<p>我是段落2</p>'))
//3.删除标签
//1)jq对象.remove() - 删除指定节点
$('#box1 p').remove()
//2)jq对象.empty() - 清空指定节点
$('#box1').empty()
//$('#box1 *').remove() # '#box1 *' 选中id是box1中所有的后代
//2.=============属性操作===============
//1)标签内容属性: innerHTML、innerText、value
//a.html方法(相当于innerHTML)
//节点.html() - 获取节点内容
//节点.html(值) - 给节点内容赋值
//b.text()方法(相当于innerText)
console.log($('#box2 #div1').html())
$('#box2 #div1').html('<a href="https://www.baidu.com">我是超链接</a>')
//c.val()方法(相当于value)
$('#box2 input').val('小明')
//2)普通属性
//节点.attr(属性名) - 获取指定节点指定属性的值
//节点.attr(属性名,值) - 修改指定节点直接属性的值
console.log($('#box2 input').attr('type'))
$('#box2 input').attr('type', 'password')
//3)class属性
//节点.addClass(值) - 添加class属性值
$('#h1').addClass('c2')
//节点.removeClass(值) - 移除指定的class值
$('#h1').removeClass('c1')
//3.==========样式属性=============
//1)获取样式属性的值
//节点.css(样式属性名)
console.log($('#h1').css('color'))
//2)修改样式属性的值
//节点.css(样式属性名,值)
$('#h1').css('color', 'deeppink')
$('#h1').css('font-size', '30px')
//节点.css(对象) - 同时设置多种样式
$('#h1').css({
'width':'300px',
'color':'blue',
'text-decoration': 'underline'
})
console.log($('#h1'))
//4.============事件绑定============
//方法一：直接绑定
//节点.on(事件名,函数) - (和js中的addEventLinsenner功能一样)
//注意: this是js对象，evt是jQuery对象
$('button').on('click', function(evt){
console.log(this)
console.log(evt)
//1）this是js对象
//====js代码
// if(this.innerText == '暂停'){
// this.innerText = '播放'
// }else{
// this.innerText = '暂停'
// }
//====jQuery代码
if($(this).text() == '暂停'){
$(this).text('播放')
}else{
$(this).text('暂停')
}
// 2)evt是事件对象不是节点对象，所以获取属性的时候以对象获取属性的方式来获取
console.log(evt.clientX, evt.clientY)
})
//方式二:
//节点.on(事件名,选择器,函数) - 给指定节点绑定指定事件，
// 并且让节点中选择器对应的子标签对事件做出反应
//错误示范:新添加的标签没有绑定上对应的事件
/*
$('#box3 input').on('click', function(){
console.log(this)
alert(this.value+'被点击')
})
$('#box3').append($('<input type="button" value="按钮3"/>'))
*/
//#box3 选择器
$('#box3').on('click','input', function(){
console.log(this)
alert(this.value+'被点击')
})
$('#box3').append($('<input type="button" value="按钮3"/>'))
</script>
</body>
</html>
2 Ajax请求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
//1.什么是Ajax
//Ajax就是异步js，专门用来提供异步网络请求操作
/*
$.ajax({
type:请求方式(get/post),
url:请求地址,
data:请求参数,
async:是否异步,
dataType:返回的数据类型
success:请求成功后调用的函数,函数的参数就是请求结果
})
*/
/*
$.ajax({
type:"get",
url:"https://www.apiopen.top/satinApi",
data:{type:1,page:1},
async:true,
dataType:'json',
success:function(result){
console.log(typeof(result))
console.log(result)
}
});*/
$.ajax({
type:"get",
url:"http://rap2api.taobao.org/app/mock/177073/getShoppingCartList",
async:true,
dataType:'json',
success:function(result){
console.log(typeof(result))
console.log(result)
}
});
</script>
</body>
</html>
practice： 周公解梦
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
height: 250px;
/*background-color: lightblue;*/
border-bottom: 1px solid rgb(150,150,150);
position: relative;
}
/*盒子*/
#box1 div{
position: absolute;
bottom: 5px;
width: 100%;
text-align: center;
}
/*输入框*/
#box1 input{
border: 0;
border-bottom: 1px dotted rgb(200,200,200);
width: 300px;
height: 60px;
font-size: 25px;
text-align: center;
vertical-align: bottom;
}
#box1 input:focus{
outline: 0;
}
/*按钮*/
#box1 button{
width: 100px;
height: 40px;
background-color: orangered;
color: white;
font-size: 20px;
vertical-align: bottom;
}
#box2 p{
/*background-color: yellow;*/
width: 400px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="box1">
<div id="">
<input type="" name="" id="" value="" />
<button>查询</button>
</div>
</div>
<div id="box2">
<p></p>
</div>
<script type="text/javascript">
//===查询事件
$('#box1 button').on('click', function(evt){
//1.获取输入框中的内容
const value = $('#box1 input').val()
//2.网络请求
$.ajax({
type:"get",
url:"http://api.tianapi.com/txapi/dream/",
data:{
key:'772a81a51ae5c780251b1f98ea431b84',
word:value
},
async:true,
success:function(result){
let message = result['newslist'][0]['result']
//console.log('===:',message)
$('#box2 p').html(message)
}
});
})
</script>
</body>
</html>
