一、作用域
函数声明语法：
function 函数名(参数列表){
函数体
}
匿名函数：
函数变量 = function (参数列表){
函数体
}
1.局部变量：
通过var关键字声明在函数里面的变量是局部变量（声明开始到函数结束可以使用）
2.全局变量
a.声明在函数外部的变量（从声明开始到文件结束都可以使用）
b.直接声明在函数内的变量（不加var）
注意：后面的其他script标签也可以使用
<script type="text/javascript">
a100 = 10
var a200 = 20
function func2(){
// b100还是全局变量，前面没有加var的都是全局变量
b100 = 20
var b200 = 200
}
func2()
console.log(b100)
// 下面代码报错，b200为局部变量
// console.log(b200)
function fuuc1(){
console.log(a100)
console.log(a200)
}
fuuc1()
</script>
<script type="text/javascript">
console.log(a100)
console.log(a200)
</script>
二、字符串
<script type="text/javascript">
/*
1.字符串运算
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
console.log(1+1+'a') //2a
/*
b.比较运算符：>,<,==,===,!=,!==
1)比较相等：
*/
console.log('abc'=='bac') //false
console.log('111'==111) //true
console.log('111'===111) //false
// 2)比较大小
console.log('a' > 'A') //true
console.log('abc' > 'bd') //false
// c.字符串长度
console.log(str2.length)
//2.相关方法
//创建字符串对象
str3 = new String('abc')
console.log(str3)
//字符串.charAt(下标) 获取指定下标对应的字符
console.log('hello'.charAt(0))
console.log('hello'[0])
console.log('hello'[10]) //下标可以越界但是不会报错
// 字符串.charCodeAt(下标) 获取指定下标对应的字符的编码（js中的字符采用的也是Unicode编码）
console.log('hello'.charCodeAt(0))
// 字符串.concat(数据1, 数据2,...)
console.log('abc'.concat(123, 'aaa'))
// 字符串1.endWith(字符串2)
// 判断字符串1是否以字符串2结尾
console.log('hello'.endsWith('o'))
// 字符串1.indexOf(字符串2)
// 获取字符串2在字符串1第一次出现的位置的下标
console.log('hello'.indexOf('l'))
console.log('hello'.lastIndexOf('l'))
// 字符串.match(正则表达式)
// 注意：js中正则写着两个//之间
re = /\d{3}/
result = '234aaa'.match(re)
console.log(result)
// 字符串.repeat(数字)s
console.log('abc'.repeat(2))
// 字符串1.replace(正则表达式, 字符串2)
// 将字符串1中第一个满足要求替换
console.log('aa12ds3'.replace(/\d/, 'A'))
// 正则后面加g，则是全部满足要求替换
console.log('aa12ds3'.replace(/\d/g, 'A'))
// 字符串.slic(开始下标, 结束下标)
// 开始下标可以取到，结束下标取不到
console.log('abcde'.slice(0, 3)) //abc
console.log('abcde'.slice(0, -1)) //abcd
console.log('abcde'.slice(0, )) //abcde
// 字符串1.split(字符串2)
// 将字符串1按照字符串2切割
console.log('hello'.split('e'))
</script>
三、数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<script type='text/javascript'>
// 加法运算：两个数组相加实质是将数组转换成字符串拼接
console.log([1, 2, 3] + [2, 3, 'a'])
console.log(String([1, 2, 3]))
// 比较运算,判断相等是判断两个对象的地址是否相等，相当于python中的is
arr1 = [1, 2]
arr2 = [1, 2]
console.log([1, 2] == [2, 1]) //false
console.log([1, 2] == [1, 2]) //false
console.log(arr1 == arr2) //false
console.log(arr1 === arr1) //false
// 3.数组长度:length属性
console.log(arr1.length)
/*2.元素的增删改查
1）查：获取元素
a.获取当元素
数组[下标] - 获取下标对应的元素
注意：负数下标没有意义
*/
fruits = ['苹果', '栗子', '西瓜', '梨子']
console.log(fruits[1])
// b.切片
// 数组.slice(开始下标, 结束下标) - 返回一个新的数组
// 注意：结束下标取不到；下标可以是负数；开始下标要在结束下标前面
console.log(fruits.slice(0, 3))
/*
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, 1)
console.log(fruits)
// 4）改：修改元素
// 数组[下标] = 新值 - 修改指定下标对应的值
fruits[0] = '山竹'
console.log(fruits)
// 3.相关方法
// 1)数组.reverse()
// 倒序
fruits.reverse()
console.log(fruits)
// 2)数组.sort()
// 元素从小到大排序
scores = [62, 33, 55, 26, 92]
scores.sort()
console.log(scores)
// 数组.sort(函数) - 按指定规则对数组中的元素进行排序
// 函数要求：两个参数(代表的是数组中的两个元素),一个返回值(两个元素的差);
students = [
{'name':'小明', 'score':90, 'age':23},
{'name':'大明', 'score':30, 'age':20},
{'name':'小画', 'score':95, 'age':21},
{'name':'小红', 'score':70, 'age':22}
]
// 年龄从小到大排列
students.sort(
function(a, b){
return a['age'] - b['age']
// return Math.random - 0.5
}
)
console.log(students)
// 成绩从小到大排列
students.sort(
function(a, b){
return a['score'] - b['score']
// return Math.random - 0.5
}
)
console.log(students)
// 3) 数组.join(字符串)
// 将指定的字符串插入到数组的每个元素之间产生一个新的字符串
nums = [13, 23, 42]
newData = nums.join('aa')
console.log(newData) //13aa23aa42
</script>
四、对象
1.对象字面量
用大括号括起来，里面是多个属性，属性名和属性值之间用冒号连接,多个属性之间用逗号隔开
注意：1）对象字面量需要保存 2）在对象字面量里面，属性名可以加引号也可以不加引号（没有区别）
2.构造方法 - 创建对象的方法
function 类名(参数列表){
对象属性
对象方法
}
说明：
a.对象属性： this.属性名 = 值
b.对象方法： this.方法名 = 匿名函数
c.类名： 首字母大写
<script type = 'text/javascript'>
obj1 = {
'name': 'quuq',
'age': 29
}
console.log(obj1)
// 2.获取对象属性
// 1)对象[属性名]
console.log(obj1['name'], obj1['age'])
// 2)对象.属性
console.log(obj1.age, obj1.name)
//3.增：添加属性
//1) 对象.属性 = 值
//2) 对象[属性名] = 值
// 属性存在是修改，不存在就是添加
obj1.name = '小明'
console.log(obj1)
obj1.height = 180
console.log(obj1)
function Person(name='张三', age=19, sex='男'){
// 这儿的this相当于python中的self
this.name = name
this.age = age
this.sex = sex
this.eat = function(food){
console.log(this.name + '吃'+ food)
}
}
// 5.创建对象
// 对象 = new 构造方法()
p1 = new Person()
console.log(p1)
// 获取对象属性
console.log(p1.name, p1.age, p1.sex)
// 调用对象方法
p1.eat('包子')
// 注意：js中声明全局变量实质都是添加给window对象的属性
p3 = Person()
p2=window.Person()
// 6.添加类的全局的属性
p4 = new Person('老罗', 30, '男')
p4.height = 180
console.log(p4)
// 类名.prototype.属性名 = 属性值 - 给指定的类的所有对象添加属性
Person.prototype.height = 180
p5 = new Person()
console.log(p5)
console.log(p5.height)
// 练习：给数组添加方法，来统计数组中指定元素的个数
Array.prototype.myCount = function(item){
num = 0
for (i in this){
item1 = this[i]
if (item1 == item){
num++
}
}
return num
}
console.log([1, 2, 3, 3, 5, 2, 2].myCount(1))
// 练习1:声明一个创建学生的构造方法，有属性姓名、年龄、成绩、学号，
// 必须赋值：姓名
// 不能赋值：成绩，学号
// 随意：年龄
function Student(name, age=19){
this.name = name
this.age = age
this.score = 90
this.stuId = '001'
}
stu1 = new Student('小红', age = 18)
console.log(stu1)
// 练习2：给String添加方法，统计字符串中字母字符的个数
String.prototype.letterCount = function(){
num = 0
i = 0
while(i<this.length){
ch = this[i]
if ((ch >= 'a'&& ch <='z') || (ch >= 'A'&& ch <='Z')){
num++
}
i++
}
return num
}
console.log('Aa1bc'.letterCount())
//7.系统对象
// document对象
// window对象
// Element类型的对象
// Date类型对象
date1 = new Date()
console.log(date1)
// 年
year = date1.getFullYear()
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)
</script>
五、DOM操作
1、访问节点/获取节点
| 方法 | 说明 |
|---|---|
| document.getElementById(id); | 返回对拥有指定id的第一个对象进行访问 |
| document.getElementsByName(name); | 返回带有指定名称的节点集合 |
| document.getElementsByTagName(tagname); | 返回带有指定标签名的对象集合 |
| document.getElementsByClassName(classname); | 返回带有指定class名称的对象集合 |
2.创建节点/属性
| 方法 | 说明 |
|---|---|
| document.createElement(eName); | 创建一个节点 |
| document.createAttribute(attrName); | 对某个节点创建属性 |
| document.createTextNode(text); | 创建文本节点 |
3.添加节点
| 方法 | 说明 |
|---|---|
| document.createElement(eName); | 创建一个节点 |
| document.createAttribute(attrName); | 对某个节点创建属性 |
| document.createTextNode(text); | 创建文本节点 |
4.复制节点
cloneNode(true | false); //复制某个节点 参数：是否复制原节点的所有属性
5.删除节点
parentNode.removeChild(node); //删除某个节点的子节点 node是要删除的节点
6.获取父节点
childNode.parentNode; //得到已知节点的父节点
7.替换节点
replace(newNode,oldNode);
8.查找节点
| 方法 | 说明 |
|---|---|
| parentObj.firstChild; | 获取子节点的一个节点 |
| parentObj.lastChild; | 获得一个节点的最后一个节点 |
| parentObj.childNodes; | 获得节点的所有子节点，然后通过循环和索引找到目标节点 |
<script type="text/javascript">
// 1.DOM(文档对象模型：document object mode)
// 1)document对象：指定是指向整个网页内容的一个对象
// 2)节点：Element类型对象，指向的是网页中的标签
// 2.获取节点
// 1)通过id获取节点：getElementById - 返回节点对象（实质就是指向指定标签的对象）
p1Node = document.getElementById('p1')
console.log(p1Node)
// innerText是标签文本内容
p1Node.innerText = 'hello js'
// 2）通过class获取节点:getElementsByClassName(class值) - 返回节点数组
c1Nodes = document.getElementsByClassName('c1')
console.log(c1Nodes)
// 注意：遍历的时候不用用for in
for(i=0; i<c1Nodes.length; i++){
c1Node = c1Nodes[i]
// 修改样式中的文字颜色
c1Node.style.color = 'red'
}
// 3)通过标签名获取节点：getElementsByName(标签名) - 返回数组
h1Nodes = document.getElementsByTagName('h1')
console.log(h1Nodes)
// 4)通过name属性值获取节点：
nameNodes= document.getElementsByName('userName')
console.log(nameNodes)
// 5)获取子标签
div1Node = document.getElementById('div1')
div1Children = div1Node.children
console.log(div1Children)
// 获取第一个字节点
// 节点对象.firstElementChild
firstNode = div1Node.firstElementChild
console.log(firstNode)
// 获取最后一个子节点
// 节点对象.lastElementChild
lastNode = div1Node.lastElementChild
console.log(lastNode)
// 6)获取父节点
bodyNode = div1Node.parentElement
console.log(bodyNode)
// 3.创建和添加节点
// 1)创建节点
// document.createElement(标签名)
// 创建一个img标签
imgNode = document.createElement('img')
imgNode.src = 'windows.png'
//2)添加节点
// 节点1.appendChild(节点2) - 在节点1后面添加子标签节点2
// bodyNode.appendChild(imgNode)
// 节点1.insertBefore(新的节点, 节点2) - 在节点1中的节点2的前面添加新节点
bodyNode.insertBefore(imgNode, bodyNode.firstElementChild)
bodyNode.insertBefore(imgNode, c1Node[0])
// 注意：一个节点不管添加几次，只有最后一次添加有效（因为节点只有一个）
// 4.拷贝/赋值节点
newImgNode = imgNode.cloneNode()
newImgNode.style.width = '100px'
div1Node.appendChild(newImgNode)
// 5.删除节点
// 节点.remove() - 删除自己的节点
p1Node.remove()
// 节点1.remove(节点2) - 删除节点1中的节点2
div1Node.removeChild(div1Node.lastElementChild)
// 6.替换节点
bodyNode.replaceChild(imgNode.cloneNode(), c1Nodes[1])
</script>
