一.基础语法(对象)
<script type="text/javascript">
//1.什么是对象 - 和python中的对象一样，有对象属性和对象方法。
//2.创建对象
/*
* a.创建对象字面量
* 对象字面量:{属性名1:属性值1,属性名2:属性值2}
* 注意：当属性值是普通值我们叫这个属性为对象属性；当属性值是函数这个属性就是对象方法
*/
p1 = {name:'ddf',age:18,eat:function(){
console.log('吃饭!')
}}
/*
* b.通过构造方法创建对象
* 声明构造方法(类似python声明类) - 声明一个函数，使用函数名来作为类名，
* 在函数中通过this关键字来添加对象属性和对象方法
* 构造方法的函数名，首字母大写
* this类似python中的self
* 通过构造方法创建对象
* - 对象 = new 构造方法()
*
*/
function Person(name1='dyf',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.对象.属性
* 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'] = '89757'
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.ddfindex = function(x){
return this[x]
}
str1 = new String('abcdfg')
console.log(str1.ddfindex(0))
console.log('hello'.ddfindex(3))
//练习：用一个数组保存多个学生对象，要求学生对象中有姓名，年龄和成绩。最后所有学生按成绩进行排序
students = []
function Student(name1='dyf',age1=18,score1=98){
this.name = name1
this.age = age1
this.score = score1
return this
}
//sort方法原数组会改变也会产生新的数组
students=[new Student('古德里安',18,88),new Student('曼斯坦因',20,55),new Student('隆美尔',30,99)]
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>
二.DOM获取节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1" class="c1">我是段落1</p>
<a href="http://www.baidu.com" 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 model的缩写
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')
// console.log(aNodeArray)
for(x in aNodeArray){
//拿到aNodeArray对象中的所有属性，这儿除了a标签以外还有length，item等其他非标签对象属性
var aNode = aNodeArray[x]
// console.log(aNode,typeof(aNode))
//只对标签就行操作
if(typeof(aNode) == 'object'){
console.log(aNode,'是标签')
}
}
//c.通过类名来获取指定的标签
/*
* document.getElementsByClassName(类名) - 获取所有class属性值是指定的值的标签，返回的是一个数组对象
*
*/
var c1NodeArray = document.getElementsByClassName('c1')
console.log(c1NodeArray)
//d.通过name属性的值来获取指定的标签(了解)
/*
* document.getElementsByName() - 返回一个节点数组对象
*/
console.log(document.getElementsByName('username'))
</script>
三.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')
console.log(box11Node)
console.log('===========')
//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>
四.创建添加和删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#div2{
position: absolute;
width: 200px;
height: 200px;
background-color: yellow;
left: 30px;
}
#div2 #div21{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<button onclick="addDiv()">添加</button>
<p id="p1" class="cp1" style="color: darkseagreen;">我是毛泽西</p>
<div id="div1" style="height: 400px;background-color: yellowgreen;">
<div id="div11" style="height: 60px;background-color: deeppink;">
</div>
</div>
<div id="div2">
<div id="div21">
</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 = 'pink'
pNode.style.fontSize = '30px'
console.log(content,pColor)
//1.创建节点
//document.createElement(标签名) - 创建指定标签节点(创建后不会自动添加到浏览器上)
/*
* a.节点属性
* 标签节点就是标签对象，可以通过document去网页中获取得到，也可以自己创建
* 标签对象中有相应的标签相关的属性，可以通过标签节点获取或者修改这些属性值。
* 例如，a标签节点有：href属性，id属性，className属性，style属性等...
* img标签节点有：src属性，id属性，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/9.png'
//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() - 将节点从浏览器中删除
//4.克隆节点
//节点.cloneNode() - 拷贝指定节点，产生新的节点(浅拷贝不会拷贝节点中的子节点)
//节点.cloneNode(true) - 拷贝指定节点，产生新的节点(深拷贝会拷贝节点中的子节点)
var div2Node = document.getElementById('div2')
var newDiv2Node = div2Node.cloneNode(true)
div1Node.appendChild(newDiv2Node)
//5.替换节点
//父节点.replaceChild(新节点,子节点) - 使用新节点替换父节点中指定的子节点
var imgNode = document.createElement('img')
imgNode.src = 'img/thumb-3.jpg'
div2Node.replaceChild(imgNode,div2Node.firstElementChild)
</script>
五,删除广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#ad{
height: 100px;
background-color: blueviolet;
}
#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: url(img/9.png) no-repeat 20% center rgb(223,225,200);
}
</style>
</head>
<body>
<!--html-->
<div id="ad">
<img src="img/picture-1.jpg"/>
<div id="close" onclick="close1()">
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)
function close1(){
var adNode = document.getElementById('ad')
// adNode.parentNode.removeChild(adNode)
//直接移除指定标签
// adNode.remove()
//让标签隐藏
adNode.style.display = 'none'
}
</script>
</body>
</html>
六.动态添加和删除
<!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: 20px;
}
#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">
//==========删除水果=============
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)
}
var fruitArray = ['香蕉','苹果','草莓','火龙果']
for(index in fruitArray){
fruitName = fruitArray[index]
creatFruitNode(fruitName,'darkgreen')
}
</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);
//创建随机颜色
fruitNode.style.backgroundColor = randomColor()
//添加标签
var topNode = document.getElementById('top')
topNode.insertBefore(fruitNode,topNode.firstChild)
}
</script>
</body>
</html>
