一、变量作用域
a.全局变量
适用范围：声明开始到文件结束**
声明位置：
a.声明在函数外部的变量
b.直接声明在函数内的变量（不加var）
注意：后面的其他的script标签中也可以使用
a100 = 10
var a200 = 100
b.局部变量
适用范围：声明开始到函数结束
声明位置：通过var关键字声明在函数里面的变量
function func2(){
//b200是局部变量
var b200 = 200
console.log(b200)
}
func2()
二、字符串
a.加法运算： 做字符串拼接操作
注意：js中支持字符串和其他数据相加
str1 = 'abc'
str2 = 'hello'
console.log(str1+str2) //abchello
console.log(str1+100) //abc100
console.log(str1+[1,2,3]) //abc1,2,3
b.比较运算: >, <, >=, <=,==, ===, !=, !==
1.比较相等
console.log('abc'=='abc') //true
console.log('abc'=='bac') //false
console.log(100=='100') //true
console.log(100==='100') //false
2.比较大小
实质：比较每一对字符的编码值
console.log('abc' > 'bd') //false
console.log('z' > 'shjsjhsjasss') //true
c.字符串长度
用法：字符串.length
输出：数字
str2 = 'adfdfdf'
console.log(str2.length) // 7
d.相关方法
创建字符串对象
str3 = new String('abc')
console.log(str3)
1.字符串.big()
作用：产生一个big标签，并且标签中的内容就是字符串的值
newStr = str3.big()
console.log(str3, newStr)
2.字符串.charAt(下标)
作用：获取指定下标对应的字符; 相当于: 字符串[下标]
console.log('hello'.charAt(0)) //h
console.log('hello'[1]) //e
3.字符串.charCodeAt(下标)
作用：获取指定下标对应的字符的编码(js中的字符采用的也是unicode编码)
console.log('hello'.charCodeAt(0)) //104
4.字符串.concat(数据1,数据2,....)
作用：将字符串和多个数据依次连接在在一起产生一个新的字符串(相当于+的功能)
console.log('abc'.concat(123, 'aaa')) //abc123aaa
5.字符串1.endsWith(字符串2)
作用：判断字符串1是否以字符串2结尾
console.log('hello'.endsWith('llo')) //true
6.字符串1.indexOf(字符串2)
作用：获取字符串2在字符串1中第一次出现的位置
console.log('abcbaab'.indexOf('b')) //1
7.字符串1.lastIndexOf(字符串2)
作用：获取字符串2在字符串1中最后一次出现的位置
console.log('abcbaab'.lastIndexOf('b')) //0
8.字符串.match(正则表达式)
作用：正则匹配一个字符串，匹配成功后返回
注意:js中正则写在两个//之间
re = /\d{3}/
result = '237abc'.match(re)
console.log(result, result[0], result.index)
9.字符串.repeat(数字)
作用：指定的字符串重复出现指定次数产生一个新的字符串(相当于python中的*)
console.log('abc'.repeat(2)) //abcabc
10.字符串1.replace(正则表达式,字符串2)
作用：将字符串1中第一个满足正则表达式的子串替换成字符串2
console.log('aaa34bbb992nnn92nkkj8==22jkk'.replace(/\d+/, 'A'))
11.字符串.slice(开始下标, 结束下标)
特点：顾头不顾尾，步长具有唯一性：为1
注意: 这儿的下标可以是负数，代表倒数第几个
console.log('hello'.slice(0, 2)) //he
console.log('hello'.slice(1, -2)) //el
12.字符串1.split(字符串2)
作用：将字符串1按照字符串2进行切割
输出：数组
console.log('hello'.split('e'))
三、数组
1.基本操作
a.加法运算
实质：将数组转换成字符串然后拼接
console.log([12, 3, 'abc']+[1, 2, 3]) //12,3,abc1,2,3
console.log(String([1, 2, 3])) //1,2,3
b.比较运算:
实质：比较两个对象的地址是否相等，相等于python中的is
arr1 = [1, 2]
arr2 = [1, 2]
arr3 = arr1
console.log(arr1===arr1) //true
console.log(arr1==arr3) //true
console.log(arr1==arr2) //false
c.数组长度
用法：数组.length属性
console.log(arr1.length)
2.增删改查
1.查: 获取元素
a.获取单个元素
语法：数组[下标]
作用：获取下标对应的元素
注意：负数的下标没有意义
fruits = ['苹果', '梨', '葡萄', '西瓜', '桃子', '李子']
console.log(fruits[1])
b.切片
语法：数组.slice(开始下标,结束下标)
输出：数组
注意：
1.结束下标取不到
2.下标可以是负数
3.开始下标要在结束下标的前面
console.log(fruits.slice(0, 3)) //['苹果', '梨', '葡萄']
console.log(fruits.slice(3, 0)) //[]
console.log(fruits.slice(3, -2)) //['西瓜']
c.遍历
for(index in fruits){
console.log(fruits[index])
}
2.增：添加元素
语法：数组.push(元素)
作用：在指定的数组的最后添加一个元素
输出：原地操作
fruits.push('香蕉')
console.log(fruits)
3.删：删除元素
语法：数组.pop()
作用：删除最后一个元素
输出：原地操作
fruits.pop()
console.log(fruits) //["苹果", "梨", "葡萄", "西瓜", "桃子", "李子"]
语法：数组.splice(下标,个数)
作用：从指定下标开始删除指定个数的元素
fruits.splice(1, 2)
console.log(fruits) // ["苹果", "西瓜", "桃子", "李子"]
4.改： 修改元素
语法：数组[下标] = 新值
作用：修改指定下标对应的值
fruits[0] = '山竹'
console.log(fruits)
3.相关方法
fruits = ['苹果', '梨', '葡萄', '西瓜', '桃子', '李子']
1.数组.reverse()
作用：将数组倒序
fruits.reverse()
console.log(fruits) //["李子", "桃子", "西瓜", "葡萄", "梨", "苹果"]
2.数组.sort()
作用：数组元素从小到大排序
scorts = [23, 90, 89, 87, 76, 90, 65] //[23, 65, 76, 87, 89, 90, 90]
scorts.sort()
console.log(scorts) //["李子", "桃子", "梨", "苹果", "葡萄", "西瓜"]
数组.sort(函数)
作用：按指定规则对数组中的元素进行排序
函数要求:
a.两个参数(代表的是数组中的两个元素)
b.一个返回值(两个元素或者两个元素的属性的差);
students = [
{'name':'小明', 'score': 60, 'age': 29},
{'name':'张三', 'score': 89, 'age': 30},
{'name':'小花', 'score': 81, 'age': 19}
]
//按成绩从小到大排序
// function ageCom(item1, item2){
// return item1['score']-item2['score']
// }
// students.sort(ageCom)
// console.log(students)
//年龄从大到下排序
students.sort(function(a,b){
return b['age'] - a['age']
})
console.log(students)
3.数组.join(字符串)
作用：将指定的字符串插入到数组的每个元素之间产生一个新的字符串
nums = [10, 34, 89, 1]
newData = nums.join('aaa')
console.log(newData) // 10aaa34aaa89aaa1
四、对象
1.对象字面量
定义：用大括号括起来，里面是多个属性，属性名和属性值之间用冒号连接, 多个属性之间用逗号隔开
注意:
1)对象字面量需要保存（用变量保存）
2)属性名可以加引号也可以不加(没有区别)
obj1 = {
'name':'余婷',
'age': 18,
sex: '女'
}
p1 = {
'name':'小明',
'age': 20,
sex: '男'
}
console.log(obj1)
2.获取对象属性对应的值
a.对象[属性名]
console.log(obj1['name'], obj1['sex'])
proName = 'age'
console.log(obj1[proName])
b.对象.属性
console.log(obj1.name, obj1.sex)
3.增/改: 添加/修改属性
a.对象.属性 = 值
b.对象[属性名] = 值
//属性存在是修改
obj1.name = '小明'
obj1['name'] = '小花'
console.log(obj1)
//属性不存在是添加
obj1.height = 180
obj1['weight'] = 70
console.log(obj1)
4.构造方法 - 创建对象的方法
语法:
function 类名(参数列表){
对象属性
对象方法
}
说明:
a.对象属性: this.属性名 = 值
b.对象方法: this.方法名 = 匿名函数
c.类名： 首字母大写
function Person(name='张三', age=18, sex='男'){
//这儿的this相当于python中的self
//对象属性
this.name = name
this.age = age
this.sex = sex
//对象方法
this.eat = function(food){
console.log(this.name+'吃'+food)
}
console.log('=====:',this)
}
//5.创建对象
语法：对象 = new 构造方法()
//创建对象
p1 = new Person()
console.log(p1)
//获取对象属性
console.log(p1.name, p1.age, p1.sex)
//调用对象方法
p1.eat('包子')
p2 = new Person('小明', 20, '女')
console.log(p2)
p2.eat('面条')
注意： js中声明全局变量实质都是添加给window对象的属性
p3 = Person()
p3 = window.Person()
console.log(p3)
// window.alert('弹框')
alert('弹框')
a = 10
console.log(window.a)
6.添加类的全局的属性
语法：类名.prototype.属性名 = 属性值
作用：给指定的类的所有对象添加属性
Person.prototype.height = 180
Person.prototype.run = function(){
console.log(this.name+'在跑步!')
}
p4 = new Person('老骆', 30, '男')
console.log(p4.height, p1.height)
p4.run()
p1.run()
p2.run()
练习：给String添加方法， 统计字符串中字母字符的个数
str1 = new String('abc')
console.log(str1)
String.prototype.letterCount = function(){
num = 0
i = 0
while(i='a' && ch<='z')||(ch>='A' && ch<='Z')){
console.log('====',ch,'=====')
num++
}
i++
}
return num
}
console.log('A23adb33'.letterCount())
7.系统的对象和类
a.document对象
b.window对象
c.Element类型的对象
d.Date类型的对象
.....
//创建当前时间对象
date1 = new Date()
console.log(date1)
//年
year = date1.getFullYear()
//月 - 从0开始的
month = date1.getMonth()
//日
day = date1.getDate()
//时
hours = date1.getHours()
//分
min = date1.getMinutes()
//秒
seconds = date1.getSeconds()
//星期
week = date1.getDay()
console.log(''.concat(year,'年',month+1,'月',day,'日',' ',hours,':',min,':',seconds))
console.log('星期', week)
五、DOM
我是段落
我是a标签
我是标题1
1.DOM(文档对象模型: document object mode)
a.document对象: 指的是指向整个网页内容的一个对象
b.节点: Element类型对象,指向的是网页中的标签
2.获取节点
a.通过id获取节点: getElementById(id值)
返回值：节点对象(实质就是指向指定标签的对象)
p1Node = document.getElementById('p1')
console.log(p1Node)
//innerText是标签文本内容
p1Node.innerText = 'hello js'
b.通过class获取节点: getElementsByClassName(class值)
返回值：节点数组
c1Nodes = document.getElementsByClassName('c1')
c1Nodes[0].innerText = '百度一下'
console.log(c1Nodes)
//注意: 遍历的时候不要用for in
for(i=0;ic.通过标签名获取节点: getElementsByTagName(标签名)
h1Nodes = document.getElementsByTagName('h1')
console.log(h1Nodes)
d.通过name属性值获取节点:getElementsByName(name值) （了解）
nameNodes = document.getElementsByName('userName')
console.log(nameNodes)
e.获取子节点
1.
语法：节点对象.children
作用：获取指定节点中所有的子节点
div1Node = document.getElementById('div1')
div1Children = div1Node.children
console.log(div1Children)
2.
语法：节点对象.firstElementChild
作用：获取第一个子节点
firstNode = div1Node.firstElementChild
console.log(firstNode)
3.
语法：节点对象.lastElementChild
作用：获取最后一个子节点
lastNode = div1Node.lastElementChild
console.log(lastNode)
4.
语法：节点对象.parentElement
作用：获取父节点
bodyNode = div1Node.parentElement
console.log(bodyNode)
3.创建和添加节点
第一步：创建节点
语法：document.createElement(标签名)
示例：创建一个img标签
imgNode = document.createElement('img')
imgNode.src = 'img/luffy.jpg'
第二步：添加节点
a.节点1.appendChild(节点2)
作用：在节点1的最后添加子标签节点2
bodyNode.appendChild(imgNode)
b.节点1.insertBefore(新的节点, 节点2)
作用：在节点1中的节点2的前面添加一个新的节点
bodyNode.insertBefore(imgNode, bodyNode.firstElementChild)
bodyNode.insertBefore(imgNode, c1Nodes[0])
注意：一个节点不管添加几次，只有最后一次添加有效(因为节点只有一个)
3.拷贝/复制节点
语法：节点.cloneNode()
作用：创建一个与旧节点一样的新节点
newImgNode = imgNode.cloneNode()
newImgNode.src = 'img/aaa.ico'
div1Node.appendChild(newImgNode)
4.删除节点
语法：节点.remove()
作用：删除指定的节点
p1Node = document.getElementById('p1')
p1Node.remove()
5.替换节点
语法：节点1.replaceChild(新节点, 旧节点)
作用：用新节点替换节点1中的旧节点
bodyNode.replaceChild(imgNode.cloneNode(), c1Nodes[1])