week2-wed前端
2018-12-10 本文已影响0人
憨猜猜
01-基础语言（对象）
<script type="text/javascript">
//1.什么是对象(Object) - 和Python中的对象一样，有对象属性和对象方法。
//2.创建对象
/* a.创建对象字面量
* 对象字面量: {属性名1:属性值1, 属性名2:属性值1}
* 注意：当属性值是普通值我们叫这个属性为对象属性；当属性值是函数这个属性就是对象方法
*/
p1 = {
name:'余婷',
age:10,
eat:function(){
console.log('吃饭!')
}
}
p2 = {
name:'小明',
age:18,
eat:function(){
console.log('吃饭!')
}
}
/* b.通过构造方法创建对象
* 声明构造方法（类似python声明类）
* - 声明一个函数，使用函数名来作为类名，在函数中通过this关键字来添加对象属性和对象方法
* - 构造方法的函数名，首字母大写
* - this类似python中的self
* 通过构造方法创建对象
* - 对象 = new 构造方法()
*/
function Person(name1='张三', age1=18, sex1='男'){
//添加对象属性
this.name = name1
this.age = age1
this.sex = sex1
//添加对象方法
this.eat = function(food){
console.log(this.name+'在吃'+food)
}
//返回对象
return this
}
//创建Person的对象
p3 = new Person()
p4 = new Person('小明')
//使用对象属性和方法
console.log(p3, p4, p3===p4, p3.age, p4.name)
p4.eat('苹果')
//调用函数，获取返回值
win1 = Person()
console.log(win1)
win1.alert('我是window')
// c.函数中this关键字
/* 当调用函数的时候前面加关键字new,就是这个函数当成构造函数创建对象，函数中的this就是当前对象;
* 直接调用函数的时候，函数中的this是window对象
*/
//3.使用对象属性（获取属性值）
/*
* a. 对象.属性 - p5.name
* b. 对象[属性名]
*/
var t = 'age'
p5 = new Person('小花', 20, '女')
console.log(p5.name)
console.log(p5['name'], p5[t])
p5.eat('面条')
//4.修改对象属性的值
/* 属性存在的时候是修改，不存在的时候就是添加
* 对象.属性 = 值
* 对象[属性名] = 值
*/
//修改属性值
p5.name = '小红'
console.log(p5)
p5['age'] = 30
console.log(p5)
//添加属性
p5.num = '100222'
p5['num2'] = '110222'
console.log(p5)
//给对象添加属性只作用于一个对象,不影响其他对象
console.log(p4)
//构造方法名(类名).prototype.属性 = 值 --- 给指定构造方法创建的所有的对象都添加指定的属性
Person.prototype.aaa = '123'
p6 = new Person()
p6.aaa = 'abc'
console.log(p6.aaa)
console.log(p5.aaa)
//给String类型添加方法
String.prototype.ytIndex = function(x){
return this[x]
}
str1 = new String('abcdef')
console.log(str1.ytIndex(0))
console.log('hello'.ytIndex(3))
//练习：用一个数组保存多个学生对象，要求学生对象中有姓名，年龄和成绩。最后所有学生按成绩进行排序
function Student(name, age, score){
this.name = name;
this.age = age;
this.score = score;
return this;
}
students = [new Student('小明', 18, 90), new Student('小红', 20, 78),
new Student('小花', 19, 98)];
//sort方法排序后，原数组会改变，也会产生新的数组
newStudents = students.sort(function(a,b){
return a.score - b.score;
});
console.log(newStudents, students)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
02-DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1" class="c1">我是段落1</p>
<a href="" id="a1">百度一下</a>
<a href="" class="c1">刷新</a>
<input type="text" name="username" value="" />
<input type="password" name="username" value="" />
</body>
</html>
<!--
1.什么是DOM(文档对象模型)
DOM是document object mode的缩写
DOM模型就是一个树结构，里面是由各种节点组成
2.document对象 - js写好的一个对象,代码的是网页内容结构
通过document对象可以拿到网页中所有内容对应的节点
3.获取节点(在js中获取网页中的标签)
-->
<script type="text/javascript">
//============节点操作=============
//1.直接获取节点
//a.通过标签的id值来获取指定的标签
/* document.getElementById(id值) - 返回节点对象
* 如果html中同样的id对应的标签有多个，只能取一个。所有一般在使用id的时候id要唯一
*/
var pNode = document.getElementById('p1')
console.log(pNode)
//b.通过标签名来获取指定的标签
/* document.getElementsByTagName(标签名) - 返回的是一个数组对象，数组中是节点
*/
var aNodeArray = document.getElementsByTagName('a')
for(x in aNodeArray){
// 拿到aNodeArray对象中的所有属性,这儿除了a标签以外还有length，item等其他非标签对象
var aNode = aNodeArray[x]
// 只对标签进行操作
if(typeof(aNode) == 'object'){
console.log(aNode, '是标签！')
}
}
//c.通过类名来获取指定的标签
/* document.getElementsByClassName(类名) - 获取所有class属性值是指定的值的标签,
返回的是一个数组对象
*/
var c1NodeArray = document.getElementsByClassName('c1')
console.log(c1NodeArray)
//d.通过name属性的值来获取指定的标签(了解)
/* document.getElementsByName('username') - 返回一个节点数组对象
*/
console.log(document.getElementsByName('username'))
</script>
03-DOM间接获取节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box1">
box1
<div id="box11">
div11
</div>
<div id="box12">
div12
</div>
<div id="box13">
div13
</div>
</div>
</body>
</html>
<script type="text/javascript">
var box11Node = document.getElementById('box11');
//1.获取父节点
// 子节点.parentElement - 获取子节点对应的父节点
var box1Node = box11Node.parentElement;
var box1Node2 = box11Node.parentNode;
console.log(box1Node, box1Node2);
//2.获取子节点
//a.获取所有的子节点
//父节点.children - 返回一个数组对象
var allChildArray = box1Node.children
console.log(allChildArray)
//父节点.childNodes - 获取父节点下所有的内容（包括子节点和文本）
var allChildArray2 = box1Node.childNodes
console.log(allChildArray2)
//b.获取第一个子节点
//父节点.firstElementChild
var childNode = box1Node.firstElementChild
console.log(childNode)
//c.获取最后一个子节点
var childNode2 = box1Node.lastElementChild
console.log(childNode2)
</script>
04-DOM创建和删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="addDiv()">添加</button>
<p id="p1", class="cp1" style="color: darkseagreen;">我是段落</p>
<div id="div1" style="height: 400px; background-color: lightgoldenrodyellow;">
<div id="div11" style="height: 60px; width: 120px; background-color: yellowgreen;">
</div>
</div>
</body>
</html>
<script type="text/javascript">
var pNode = document.getElementById('p1');
//获取标签内容
var content = pNode.innerHTML;
//修改标签内容
pNode.innerHTML = '我不是段落，哈哈~'
//获取标签样式中的文字颜色
var pColor = pNode.style.color;
//修改标签样式
pNode.style.color = 'salmon'
pNode.style.fontSize = '30px'
console.log(content, pColor)
//1.创建节点
//document.createElement(标签名) - 创建指定标签节点(创建后不会自动添加到浏览器上)
/* a.节点属性：
* 标签节点就是标签对象，可以通过document去网页中获取到，也可以自己创建
* 标签对象中有相应的标签相关的属性，可以通过标签节点获取或者修改这些属性值。
* 例如，a标签节点有：href属性, id属性, className属性, style属性等....
* img标签节点有：src属性,id属性，style属性,alt属性, title属性等....
*
* b.innerHTML和innerText属性
* innerHTML - 双标签的标签内容(包含其他标签)
* innerText - 双标签的标签内容(侧重只有文字)
*/
//创建一个div标签对象
var divNode = document.createElement('div')
divNode.innerText = '我是box1'
//创建一个img标签对象
var imgNode = document.createElement('img')
imgNode.src = 'img/thumb-1.jpg'
//2.添加节点
//a.在指定的标签中的最后添加一个节点
//父节点.appendChild(需要添加的节点)
var div1Node = document.getElementById('div1')
function addDiv(){
var divNode = document.createElement('div')
divNode.innerText = '我是box1'
div1Node.appendChild(divNode)
}
//b.在指定的节点前插入一个节点
//父节点.insertBefore(新节点, 指定节点) --- 在父节点中的指定节点前插入新节点
div1Node.insertBefore(imgNode, div1Node.firstChild)
//3.删除节点
//父节点.removeChild(子节点) - 删除父节点中指定的子节点
div1Node.removeChild(imgNode)
//清空标签（删除所有的子标签）
div1Node.innerHTML = null
//节点.remove() - 将节点从浏览器中删除
</script>
05-删除广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#hide{
display: none;
}
#ad{
height: 100px;
background-color: lightgoldenrodyellow;
}
#ad img{
width: 100%;
height: 100%;
}
#ad #close{
position: absolute;
top: 10px;
right: 15px;
width: 30px;
height: 30px;
background-color: lightgray;
color: white;
text-align: center;
line-height: 30px;
}
#content{
height: 400px;
background-color: deepskyblue;
}
</style>
</head>
<body>
<!--html-->
<div id="ad">
<img src="img/picture-1.jpg"/>
<div id="close" onclick="close1()" style="cursor: pointer;">
X
</div>
</div>
<div id="content"></div>
<!--js-->
<script type="text/javascript">
//产生0~255的随机整数
//parseInt() - 转换成整数
//parseFloat() - 转换成小数
//Math.random() - 产生随机数0~1(小数)
num = parseInt(Math.random()*255)
console.log(num)
function close1(){
var adNode = document.getElementById('ad')
// adNode.parentNode.removeChild(adNode)
// 直接移除指定标签
// adNode.remove()
//让指定的标签不显示
adNode.style.display = 'none'
}
</script>
</body>
</html>
06-添加动态和删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#top{
margin-left: 60px;
margin-top: 60px;
}
#top div{
width: 200px;
height: 50px;
color: white;
font-size: 20px;
margin-bottom: 2px;
text-align: center;
line-height: 50px;
}
#top div font{
position: absolute;
right: 3px;
/*将光标变成手*/
cursor: pointer;
}
#bottom{
margin-left: 60px;
}
#bottom #text{
display: inline-block;
width: 200px;
height: 50px;
border: none;
outline: none;
/*让光标在中间*/
text-align: center;
border-bottom: 2px solid lightgrey;
font-size: 16px;
}
#bottom #button{
display: inline-block;
width: 100px;
height: 30px;
border: none;
outline: none;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<div id="top">
</div>
<!--添加默认的水果标签-->
<script type="text/javascript">
var fruitArray = ['香蕉', '苹果', '草莓', '火龙果'];
for(index in fruitArray){
fruitName = fruitArray[index];
creatFruitNode(fruitName, 'darkgreen')
}
//==========删除水果=============
function delFruit(){
//在这儿，点击的是哪个标签this就指向谁
this.parentElement.remove()
}
//添加节点
function creatFruitNode(fruitName, color1){
//创建标签
var fruitNode = document.createElement('div')
fruitNode.innerHTML = fruitName;
var fontNode = document.createElement('font');
fontNode.innerText = '×';
//给点击事件绑定驱动程序
fontNode.onclick = delFruit;
fruitNode.appendChild(fontNode);
//设置背景颜色
fruitNode.style.backgroundColor = color1
//添加标签
var topNode = document.getElementById('top')
topNode.appendChild(fruitNode)
}
</script>
<div id="bottom">
<input type="text" name="" id="text" value="" />
<input type="button" name="" id="button" value="确定" onclick="addFruit()"/>
</div>
<script type="text/javascript">
//=========产生随机颜色=============
function randomColor(){
var num1 = parseInt(Math.random()*255);
var num2 = parseInt(Math.random()*255);
var num3 = parseInt(Math.random()*255);
return 'rgb('+num1+','+num2+','+num3+')';
}
//==========添加水果==============
function addFruit(){
//获取输入框中的内容
var inputNode = document.getElementById('text');
var addName = inputNode.value;
if(addName.length == 0){
alert('输入的内容为空！');
return;
}
//清空输入框中的内容
inputNode.value = '';
//创建标签
var fruitNode = document.createElement('div');
fruitNode.innerHTML = addName;
var fontNode = document.createElement('font');
fontNode.innerText = '×';
//给点击事件绑定驱动程序
fontNode.onclick = delFruit;
fruitNode.appendChild(fontNode);
//创建随机颜色
//'rgb(255, 0, 0)'
fruitNode.style.backgroundColor = randomColor();
var topNode = document.getElementById('top');
topNode.insertBefore(fruitNode, topNode.firstChild);
}
</script>
</body>
</html>
07-DOM属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/a1.jpg"/>
<button disabled="disabled">点我啊~</button>
</body>
</html>
<script type="text/javascript">
var imgNode = document.getElementsByTagName('img')[0]
// 1.属性的点语法操作
// 节点.属性 - 获取属性值; 节点.属性 = 新值 - 修改属性的值
console.log(imgNode.src)
imgNode.title = '图片1'
var name = 'src'
//2.通过相应方法对属性进行操作
//a.获取属性
//节点.getAttribute(属性名)
var srcAttr = imgNode.getAttribute(name)
console.log(srcAttr)
//b.给属性赋值
//节点.setAttribute(属性名, 值)
imgNode.setAttribute('title', '帅哥1')
//c.删除属性
//节点.removeAttribute(属性)
var buttonNode = document.getElementsByTagName('button')[0]
//让按钮可以点击
buttonNode.disabled = ''
//添加属性
buttonNode.ytIndex = 100
//删除属性
buttonNode.removeAttribute('ytIndex')
</script>
08-BOM基础
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom操作</title>
</head>
<body>
<button onclick="windowAction()">打开窗口</button>
<div id="div1" style="height: 60px; background-color: salmon; width: 120px;"
onclick="closeAction()">
</div>
</body>
</html>
<script type="text/javascript">
//1.什么是BOM - 浏览器对象模型(browser object model)
//js中提供了一个全局的window对象，用来表示当前浏览器
//js中声明的全局变量，其实都是绑定在window对象中的属性
（使用window的属性和方法的时候，前面'window.'可以省略）
var a = 100; //window.a = 100
console.log(a, window.a)
//window.alert('你好！')
//alert('你好！')
//2.window基本操作
//a.打开新窗口
//window.open('http://www.baidu.com')
//b.关闭窗口
//window.close()
//c.移动当前窗口
//窗口对象.moveTo(x坐标, y坐标)
function windowAction(){
myWindow = window.open('','','width=200,height=300')
myWindow.moveTo(300, 300)
//d.调整窗口大小
myWindow.resizeTo(400, 400)
//e.刷新(暂时看不到效果)
//true -> 强制刷新
window.reload(true)
}
//f.获取浏览器的宽度和高度
//innerWidth\innerHeight - 浏览器显示内容部分的宽度和高度
//outerWidth\outerHeight - 整个浏览器的宽度和高度
console.log(window.innerWidth, window.innerHeight)
console.log(window.outerWidth, window.outerHeight)
//3.弹框
//a.alert(提示信息) - 弹出提示信息(带确定按钮)
//window.alert('alert弹出!')
//b.confirm(提示信息) - 弹出提示信息(带确定和取消按钮),返回值是布尔值，取消-false, 确定-true
//result = window.confirm('confirm,是否删除？')
//console.log('======:',result)
function closeAction(){
var result = window.confirm('是否删除?')
if(result==false){
return
}
var divNode = document.getElementById('div1')
divNode.remove()
}
//c.prompt(提示信息,输入框中的默认值) - 弹出一个带输入框和取消，确定按钮的提示框;
// 点取消，返回值是null;点确定返回值是输入框中输入的内容
var result = window.prompt('message', 'defalut')
console.log(result)
</script>
09-定时事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="time">0</p>
<button onclick="clearBoom()">拆炸弹!</button>
</body>
</html>
<script type="text/javascript">
//1.
//setInterval(函数,时间) - 每隔指定的时间调用一次函数，时间单位是毫秒;返回定时
//clearInterval(定时对象) - 停止定时
//1000毫秒 = 1秒
var pNode = document.getElementById('time')
var num = 0
//开始定时
var interval1 = window.setInterval(function(){
//这个里面的代码每个1秒会执行一次
num ++
//console.log(num)
pNode.innerText = num
if(num == 10){
//停止指定的定时
window.clearInterval(interval1)
}
}, 1000)
//2.
//setTimeout(函数,时间) - 隔指定的时间调用一次函数(函数只会调用一次，就像定时炸弹)
//clearTimeout(定时对象) - 停止定时
var message = '爆炸!!!!!!!!!!!'
var timeout1 = window.setTimeout(function(){
console.log(message)
}, 10000)
function clearBoom(){
//
window.clearTimeout(timeout1)
console.log('炸弹被拆除')
}
</script>
10-自动跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#box1{
width: 400px;
height: 150px;
background-color: lightcyan;
margin-left: auto;
margin-right: auto;
border: 2px dotted lightgrey;
display: none;
}
#box1 p{
line-height: 70px;
margin-left: 20px;
}
#box1 font{
position: absolute;
right: 20px;
bottom: 15px;
color: darkslateblue;
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="showBox()">进入百度</button>
<div id="box1">
<p>5s后自动跳转到百度...</p>
<!--<a href="http://www.baidu.com", target="_blank">马上跳转</a>-->
<font onclick="jump()">马上跳转</font>
</div>
</body>
</html>
<script type="text/javascript">
var box1Node = document.getElementById('box1');
var pNode = box1Node.firstElementChild;
function showBox(){
if(box1Node.style.display == 'block'){
return
}
//显示提示框
box1Node.style.display = 'block';
//开始倒计时
var time = 5;
interval1 = window.setInterval(function(){
time--;
pNode.innerText = time+'s后自动跳转到百度...'
if(time === 0){
//停止定时
window.clearInterval(interval1)
//打开网页
window.open('https://www.baidu.com')
//隐藏提示框
box1Node.style.display = 'none'
pNode.innerText = '5s后自动跳转到百度...'
}
}, 1000);
}
function jump(){
//停止定时
window.clearInterval(interval1)
//打开网页
window.open('https://www.baidu.com')
//隐藏提示框
box1Node.style.display = 'none'
pNode.innerText = '5s后自动跳转到百度...'
}
</script>
11-事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
margin-left: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<!--a.-->
<div id="div1" style="width: 200px; height: 200px; background-color: yellowgreen;">
</div>
<button id="btn1" onclick="alert('弹框')">弹出弹框</button>
<button id="btn11" onclick="showAlert()">弹出弹框2</button>
<button id="btn2">改变背景颜色</button>
<button id="btn3">改变字体颜色</button>
<button id="btn4">改变样式</button>
</body>
</html>
<script type="text/javascript">
//js是事件驱动语言
//1.事件三要素(事件源、事件、事件驱动程序)
/* 例如：
* 小明打狗，狗嗷嗷叫！ --- 事件;在这个事件中狗是事件源, 狗被打就是事件，狗嗷嗷叫就是事件驱动程序
* 小明打狗，他老爸就打他 --- 狗是事件源,狗被打是事件，小明被打是事件驱动程序
* 点击按钮，就弹出一个弹框 - 事件源：按钮, 事件：点击, 驱动程序：弹出弹框
*/
//2.绑定事件
/*
* 第一步：获取事件源
* 第二步：绑定事件
* 第二步：写驱动程序
*/
//a.在标签内部给事件源的事件属性赋值
//<标签 事件属性='驱动程序'></标签>
//<标签 事件属性='函数名()'></标签> - 一般不这样绑定
//注意：这个时候被绑定的驱动程序如果是函数，那么这个函数中的this关键字是window
function showAlert(){
console.log(this)
}
//b.通过节点绑定事件1
//标签节点.事件属性 = 函数
//注意：这个时候函数中的this是事件源
var btnNode = document.getElementById('btn2');
function changeColor(){
console.log(this)
this.style.backgroundColor = 'skyblue'
}
btnNode.onclick = changeColor;
//c.通过节点绑定事件2
//标签节点.事件属性 = 匿名函数
//注意：这个时候函数中的this是事件源
var btn3Node = document.getElementById('btn3');
btn3Node.onclick = function(){
this.style.color = 'red';
}
//d.通过节点绑定事件3
//节点.addEventListener(事件名,函数) - 指定的节点产生指定的事件后调用指定函数
//事件名 - 字符串，去掉on
//注意：这个时候函数中的this是事件源; 这种方式可以给同一个节点的同一事件绑定多个驱动程序
var btn4Node = document.getElementById('btn4');
btn4Node.addEventListener('click', function(){
this.style.color = 'yellow';
});
btn3Node.addEventListener('click', function(){
this.style.backgroundColor = 'yellow';
})
//3.获取事件对象
//当事件的驱动程序时一个函数的时候，函数中可以设置一个参数，来获取当前事件的事件对象
var div1Node = document.getElementById('div1');
div1Node.onclick = function(evt){
//参数evt就是事件对象
//a.clientX/clientY - 事件产生的位置的坐标(相对浏览器内容部分)
console.log(evt.clientX, evt.clientY);
console.log(evt.offsetX, evt.offsetY);
console.log(this.style.width)
if(evt.offsetX < 100){
this.style.backgroundColor = 'red';
}else{
this.style.backgroundColor = 'yellow';
}
}
</script>
12-常见的事件类型
<!--
常见事件类型
1.onload - 页面加载完成对应的事件(标签加载成功)
window.onload = 函数
2.鼠标事件
onclick - 点击
onmouseover
onmouseout
...
3.键盘事件
onkeypress - 按下弹起
onkeydown
onkeyup
4.输入框内容改变
onchange - 输入框输入状态结束
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.在页面加载完成后才去获取节点
window.onload = function(){
var pNode = document.getElementById('p1')
console.log(pNode)
//点击事件
pNode.onclick = function(){
alert('被点击!');
}
//鼠标进入事件
pNode.onmouseover = function(){
this.innerText = '鼠标进入';
this.style.backgroundColor = 'red';
}
//鼠标移出事件
pNode.onmouseout = function(){
this.innerText = '输入移出';
this.style.backgroundColor = 'white';
}
//鼠标按下事件
pNode.onmousedown = function(){
this.innerText = '鼠标按下';
}
pNode.onmouseup = function(){
this.innerText = '鼠标弹起';
}
pNode.onmousewheel = function(){
this.innerText = '鼠标滚动';
console.log('鼠标滚动')
}
}
</script>
</head>
<body>
<p id="p1" style="height: 200px;">我是段落</p>
<textarea name="" rows="4" cols="100"></textarea>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=
1544525699572&di=6bd446b73556fbdfd6407aaf22f428ee&imgtype=0&src
=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F5842337e52dde.jpg"/>
</body>
</html>
<script type="text/javascript">
var textareaNode = document.getElementsByTagName('textarea')[0]
textareaNode.onkeypress = function(evt){
//键盘事件对象: key属性 - 按键的值, keyCode属性 - 按键的值的编码
console.log(evt);
}
textareaNode.onchange = function(evt){
alert('onchange事件')
}
</script>
13-事件冒泡和捕获
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 400px;
height: 400px;
margin: auto;
background-color: hotpink;
}
#box2{
width: 300px;
height: 300px;
margin: auto;
background-color: yellowgreen;
}
#box3{
width: 150px;
height: 150px;
margin: auto;
background-color: lightgrey;
}
</style>
<script type="text/javascript">
window.onload = function(){
//获取节点
var box1Node = document.getElementById('box1')
var box2Node = document.getElementById('box2')
var box3Node = document.getElementById('box3')
//绑定事件
//1.事件冒泡：在子标签上产生的事件会传递给父标签
box1Node.onclick = function(evt){
// console.log()
alert('box1被点击')
}
box2Node.onclick = function(evt){
// console.log('box2被点击')
alert('box2被点击')
evt.stopPropagation()
}
box3Node.onclick = function(evt){
// console.log('box3被点击')
alert('box3被点击')
//2.捕获事件 - 阻止事件从子标签传递给父标签
evt.stopPropagation()
}
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
</body>
</html>
14-成都限行查询
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
border: 0;
}
#box1{
border-bottom: 1px solid #808080;
text-align: center;
margin-top: 200px;
}
#box1 input{
font-size: 40px;
outline: none;
text-align: center;
border-bottom: 1px dotted #909090;
margin-bottom: 10px;
/*设置垂直方向的对齐方式*/
vertical-align: middle;
}
#box1 button{
width: 80px;
height: 40px;
color: white;
background-color: red;
font-size: 20px;
}
#box2{
text-align: center;
font-size: 35px;
}
</style>
</head>
<body>
<!--=============html============-->
<div id='box1'>
<input type="text" name="" id="" value="" placeholder="请输入车牌号"/>
<button id="btn1">查询</button>
<button id="btn2">清除</button>
</div>
<div id='box2'></div>
<!--=============js============-->
<script type="text/javascript">
//1.========获取需要的节点==========
var carNumNode = document.getElementsByTagName('input')[0];
var queryBtnNode = document.getElementById('btn1');
var clearBtnNode = document.getElementById('btn2');
var resultBoxNode = document.getElementById('box2');
var reObj = /^[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼]
[A-Z]\s+[A-Z\d]{5}$/;
//2.==========是否限行============
function idTrafficControls(carNumber){
//a.获取最后一个数字
var isNumber = false; //车牌号是包含数字
for(var x=carNumber.length-1;x>=0;x--){
var number1 = carNumber[x];
//如果是数字
if(number1>='0' && number1 <= '9'){
isNumber = true;
break;
}
}
if(!isNumber){
return carNumber+'不是有效车牌号';
}
//b.判断数字是否限行: 1/6 - 1; 2/7 - 2 3/8 - 3 4/9-4 5/0-5
//获取当前时间
var now = new Date();
// var year = now.getFullYear(); //年
// var month = now.getMonth(); //月
// var day = now.getDate(); //天/日/号
//获取星期几
var week = now.getDay();
if(week > 5){
return carNumber+'今日不限行';
}
if(week == number1 || (week+5)%10 == number1 ){
return carNumber+'今日限行';
}else{
return carNumber+'今日不限行';
}
}
//3.===========查询===============
queryBtnNode.onclick = function(){
//a.获取输入框中的内容
var carNum = carNumNode.value;
//创建新的节点
var newNode = document.createElement('p');
//b.判断输入的车牌号是否符合要求:地名+大写字母 5个数字和字母混合
//正则对象.test(字符串) - 匹配,返回值是布尔
if(reObj.test(carNum)){
//判断车牌号是否限行
var message = idTrafficControls(carNum);
newNode.innerText = message;
}else{
newNode.innerText = carNum+'不是有效的车牌号';
}
//c.添加节点
resultBoxNode.appendChild(newNode);
}
//================4.清除=================
clearBtnNode.onclick = function(){
resultBoxNode.innerHTML = '';
}
</script>
</body>
</html>
15-广告轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#bigImg{
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="smallBox">
</div>
<div id="bigBox">
<img id="bigImg"/>
</div>
<script type="text/javascript">
//0.获取节点
var smallBoxNode = document.getElementById('smallBox');
var bigBoxNode = document.getElementById('bigBox');
var bigImgNode = document.getElementById('bigImg');
//1.获取数据源
var imgArray = [
{
name:'图一',
small_url:'img/thumb-1.jpg',
big_url:'img/picture-1.jpg'
},
{
name:'图二',
small_url:'img/thumb-2.jpg',
big_url:'img/picture-2.jpg'
},
{
name:'图三',
small_url:'img/thumb-3.jpg',
big_url:'img/picture-3.jpg'
}
];
//2.将数据展示在浏览器相应的位置
var currentSmallNode = null
for(var x in imgArray){
//根据小图创建节点
var imgObj = imgArray[x];
var smallImgNode = document.createElement('img');
if(x == 0){
smallImgNode.style.borderBottom = '1px solid red';
currentSmallNode = smallImgNode;
currentSmallNode.index = 0;
}
smallImgNode.src = imgObj.small_url;
//在节点对象中保存和节点相关的信息
smallImgNode.info1 = imgObj;
//添加节点
smallBoxNode.appendChild(smallImgNode);
//绑定事件
smallImgNode.onclick = function(){
// console.log(this.info1)
bigImgNode.src = this.info1.big_url;
//将之前选中的下边框去掉
currentSmallNode.style.border = 'none';
//选中谁就给谁加下边框
this.style.borderBottom = '1px solid red';
//更新当前节点的值
currentSmallNode = this;
}
}
//3.大图默认显示
bigImgNode.src = imgArray[0].big_url;
// var index = 0;
//4.定时事件
var inter1 = window.setInterval(function(){
var index = currentSmallNode.index;
var SmallImgNodeArray = smallBoxNode.children
index ++;
if(index == SmallImgNodeArray.length){
index = 0;
}
var smallImgNode = SmallImgNodeArray[index];
bigImgNode.src = smallImgNode.info1.big_url;
currentSmallNode.style.border = 'none';
smallImgNode.style.borderBottom = '1px solid red';
currentSmallNode = smallImgNode;
currentSmallNode.index = index;
}, 2000);
</script>
</body>
</html>
16-修改标签的层次关系
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
}
#div1{
background-color: lightpink;
position: absolute;
top: 100px;
left: 100px;
/*默认都是0，这个值大的在上面，小的在下面*/
/*z-index: 1;*/
}
#div2{
background-color: lightgreen;
position: absolute;
top: 150px;
left: 150px;
/*z-index: 2;*/
}
#div3{
background-color: cornflowerblue;
position: absolute;
top: 20px;
left: 200px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script type="text/javascript">
var div1Node = document.getElementById('div1');
div1Node.style.left = '100px';
div1Node.style.top = '100px';
var div2Node = document.getElementById('div2');
div2Node.style.left = '150px';
div2Node.style.top = '150px';
var div3Node = document.getElementById('div3');
div3Node.style.left = '20px';
div3Node.style.top = '200px';
var divNodeArray = document.getElementsByTagName('div')
//保存最上层的标签的z-index的值
var maxZ = 0;
var offsetX1, offsetY1;
//修改层次(鼠标按下)
function clickAction(evt){
maxZ++;
this.style.zIndex = maxZ;
this.isDown = true;
offsetX1 = evt.offsetX;
offsetY1 = evt.offsetY;
}
//移动事件驱动程序
function dragAction(evt){
//按住不放的时候移动
if(this.isDown){
var left = parseInt(this.style.left.slice(0,-2));
var top = parseInt(this.style.top.slice(0,-2));
this.style.left = (left+(evt.offsetX-offsetX1))+'px';
this.style.top = (top+(evt.offsetY-offsetY1))+'px';
}
}
//绑定事件
for(x in divNodeArray){
var divNode = divNodeArray[x];
//绑定按下事件
divNode.onmousedown = clickAction;
divNode.onmousemove = dragAction;
divNode.onmouseup = function(){
this.isDown = false;
}
divNode.onmouseleave = function(){
this.isDown = false;
}
}
</script>
</body>
</html>
17-jQuery基础
<!--1.什么是jQuery
jQuery就是javascript的一个第三方库，主要针对标签操作进行封装(包括节点操作,属性操作,样式操作,事件等)，
目的是为了让js写起来更快更方便
2.怎么写jQuery代码
a.通过script标签导入jQuery文件
b.在jQuery中所有的内容都是封装到jQuery对象中的，jQuery对象可以用'$'代替
3.节点操作
window.onload - 当网络中的内容全部加载成功后触发的事件(如果有网络图片，会等图片加载成功)
$(函数) - 函数中的函数体会等标签全部添加成功后执行
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导入jQuery本地文件-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--企业开发的时候，通过cdn加速，去服务器直接到入jQuery文件-->
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
<script type="text/javascript">
//1.等待加载完成
//a.
// window.onload = function(){
//
// }
//b.等待页面中所有的标签添加成功,就会触发
//完整版
// $(document).ready(function(){
//
// })
//简写版
$(function(){
var inter1;
function timeAction(){
inter1 = window.setInterval(function(){
console.log('！！！！')
}, 1000);
}
timeAction()
$('#aa').on('click',function(){
if(inter1){
window.clearInterval(inter1)
inter1 = null
}else{
timeAction()
}
});
console.log(document.getElementsByTagName('p')[0])
//2.获取节点操作(选择器)
//a.选择器直接选中相应的标签
// $(选择器) - 选择器是在css中怎么写这儿就怎么写
//$('标签选择器') - 选择网页中所有的指定标签,返回是jQuery对象不是数组
//注意：如果选择器同时选中了多个，返回值和选中一个的时候的类型是一样的。
// 可以通过结果直接对选中的所有标签一起操作
var divNodes = $("div");
console.log('====',divNodes);
divNodes.css('color','red');
var div11Node = $('#div11');
console.log(div11Node);
console.log($('.cdiv1'))
console.log($('a,p'))
console.log($('#div2 a'))
//b.父子选择器
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标签中的第一个子标签
//3.创建标签
//$('HTML标签语法') ,例如：$('<div style="color: red">我是div</div>')
var imgNode = $('<img src="img/a1.jpg"/>')
var divNode = $('<div style="background-color: #00BFFF; width: 100px; height: 100px;"></div>')
//4.添加标签
/*
* 父标签.append(子标签) - 在父标签的最后添加子标签
* 父标签.prepend(子标签) - 在父标签的最前面添加子标签
*/
$('body').append(imgNode)
$('body').prepend(divNode)
$('h1').before($('<h1 style="color:yellowgreen;">我是标题0</h1>'))
$('h1').after($('<h2 style="color: slateblue;">我是标题22</h2>'))
//5.删除标签
//标签.empty() - 清空指定标签
//标签.remove() - 删除指定标签
$('#div2').empty()
$('h1').remove()
//6.拷贝和替换(见手册)
})
</script>
</head>
<body>
<div id="aa">
你好
</div>
<p >我是段落0</p>
<a href="">百度0</a>
<div id="div1" class="cdiv1">
<p id="p1">我是段落</p>
<a href="">百度1</a>
<div id="div11">
我是div11
</div>
<h1>我是标题1</h1>
<a href="">百度11</a>
</div>
<div id="div2">
<a href="">百度2</a>
我是div2
<p id="p2">我是段落2</p>
</div>
</body>
</html>
18-jQuery属性和样式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//1.普通属性的获取和修改 - 除了innerHTML,innerText以及value
//标签.attr(属性名) - 获取指定的属性值
//标签.attr(属性名, 值) - 修改/添加属性
var text1 = $('img').attr('src') // 获取属性的值的时候只获取被选中标签中的第一个标签
console.log(text1)
console.log($('a').attr('href'))
$('img').attr('title', '图片1') // 修改和添加会针对所有选中的标签
//2.标签内容属性
// 双标签.html()
// 双标签.text()
// 单标签.val()
//注意：上面的函数不传参就是获取值，传参就是修改值
console.log($('p').html()) // 取完整代码
console.log($('p').text()) // 只取文字
console.log($('input').val()) //单标签中的val属性
$('p').html('我是新的段落') //
$('input').val('请输入账号')
//3.class属性 - HTML中一个标签可以有多个class值，多个值用空格隔开
//标签.addClass(class值) - 给标签添加class值
//标签.removeClass(class值) - 移除标签中指定的class值
$('div').addClass('w')
$('#div1').removeClass('c')
//4.样式属性
//a.获取属性值
//标签.css(样式属性名) - 获取样式属性值
var height = $('p').css('height')
console.log(height)
//b.修改和添加
//标签.css(样式属性名, 值) - 修改属性值
$('p').css('background-color', 'cornflowerblue')
//标签.css({属性名:值, 属性名2:值2...}) - 同时设置多个属性
$('p').css({
"color":"yellow",
'font-size':'30px'
})
//5.事件
//a.标签.on(事件名,回调函数) - 给标签绑定指定的事件（和js中的addEventLinsenner一样）
//事件名不需要要on
$('button:first').on('mouseover',function(){
console.log(this)
//注意: this - js对象, 可以直接js对象的属性和方法
// $(this) - jQuery对象，可以使用jQuery对象的属性和方法
// $(js对象) - 将js对象转换成jQuery对象
//this.innerText = '进入！'
$(this).text('进入~')
});
//b.父标签.on(事件名,选择器,回调函数) - 在父标签上添加事件，传递给选择器对应的子标签
//选择器 - 前面标签的后代标签(子标签/子标签的子标签)
$('#v01').on('click','.v011 .v0111',function(){
console.log(this)
})
})
</script>
<style type="text/css">
.b{
background-color: yellowgreen;
}
.c{
color: red;
}
.h{
height: 100px;
}
.w{
width: 200px;
/*background-color: skyblue;*/
}
p{
height: 50px;
}
#v01, #v02{
width: 800px;
height: 200px;
background-color: yellow;
}
#v02{
background-color: salmon;
}
.v011{
width: 100px;
height: 100px;
background-color: seagreen;
margin-top: 10px;
display: inline-block;
}
</style>
</head>
<body>
<div id="v01">
<div class="v011">
div1
<div class="v0111" style="width: 50px; height: 50px; background-color: skyblue;">
</div>
</div>
<div class="v011">
div2
</div>
<div class="v011">
div3
</div>
</div>
<div id="v02">
</div>
<script type="text/javascript">
$(function(){
})
</script>
<button>修改</button>
<div id="div1" class="b c">
div1
</div>
<div id="" class="c h">
div2
</div>
<div id="" class="b h">
div3
</div>
<p style="width: 300px;>我是段落<a href="">哈哈</a></p>
<a href="http://www.baidu.com">我是超链接</a>
<img src="img/a1.jpg" id="img1"/>
<input type="text" name="" id="" value="请输入...." />
<img src="img/slide-1.jpg"/>
<img src="img/picture-1.jpg"/>
<input type="text" name="" id="" value="=====" />
</body>
</html>
19-jQuery的动态添加和删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
.fruit{
width: 150px;
height: 50px;
background-color: green;
margin-bottom: 10px;
text-align: center;
line-height: 50px;
position: relative;
}
.fruit font{
position: absolute;
right: 15px;
color: white;
}
</style>
</head>
<body>
<div id="top">
</div>
<!--添加默认显示的水果标签-->
<script type="text/javascript">
var fruitArray = ['苹果','香蕉', '火龙果', '荔枝'];
for(var x in fruitArray){
//取水果名
var fruitName = fruitArray[x];
//创建标签对象
var fruitNode = $("<div class='fruit'>"+fruitName+"</div>")
fruitNode.append($('<font>×</font>'))
//添加标签
$('#top').append(fruitNode)
}
</script>
<div id="bottom">
<input type="text" placeholder="水果" />
<button>添加</button>
</div>
<!--添加新水果-->
<script type="text/javascript">
$('#bottom button').on('click',function(){
//获取输入框中的内容
var newName = $('#bottom input').val();
//创建新标签
var newNode = $('<div class="fruit"></div>').text(newName)
newNode.append($('<font>×</font>'))
//添加
$('#top').prepend(newNode)
});
//删除水果
$('#top').on('click', 'font',function(){
$(this).parent().remove();
})
</script>
</body>
</html>
20-Ajax的使用
<!--
Ajax(由jQuery封装的) - asynchronous javascript + xml(异步js+xml)
一般用来做网络数据请求，类似python中requests库(http请求)
语法：
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(结果){
请求成功后要做的事情
}
})
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<button>刷新</button><br />
<!--1.get请求-->
<script type="text/javascript">
//1.请求数据
var page = 1;
function getData(){
var url = 'https://www.apiopen.top/satinApi'
page++
$.get(url, {'type':'2', 'page':page}, function(re){
//re就是请求结果
// console.log(re)
var allData = re.data;
for(var x in allData){
var data = allData[x];
var bimageuri = data.profile_image;
var imgNode = $('<img style="width: 100px; height: 100px;"/>').attr('src', bimageuri)
$('body').append(imgNode)
}
});
}
//2.刷新
$('button').on('click',getData);
</script>
</body>
</html>
