一：变量的作用域
<!--
1.全局变量：
声明在函数外部的变量（从声明开始到文件结束）
注意：当前文件的其他script标签也可以使用。
直接声明在函数内的变量（不加var ,也是全局变量）
-->
<script type="text/javascript">
a10 = 10
var a20 = 20
function func1(){
console.log(a10)
console.log(a20)
}
func1()
//2.局部变量
// 通过var关键字声明在函数里面的变量是局部变量（声明开始到函数结束可以使用）
function func2(){
//b10是全局变量
b10 = 20
var b20 = 200
}
func2()
console.log(b10)
//console.log(b20) 这个是局部变量，只能在函数里用
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
二：字符串
<script type="text/javascript">
//1.字符串运算
//a。加法运算（不支持乘法）:做字符串拼接操作
//注意：js支持字符串和其他数据相加
str1 = "asd"
str2 = 'qwe'
console.log(str1+str2) // asdqwe
console.log(str1 + 100) //asd100
console.log(str1 + [1,2,3]) //asd1,2,3
//b.比较运算：> , < , >= ,<= , == , === ,!== , !===
//比较相等：
100 == '100' //true
100 === '100' //false 要比较数据类型是否一样
//比较大小：和python字符串比较大小的方式一样
//从第一个字符开始比,比的是编码值.
//字符串长度
//字符串.length
console.log(str1.length)
console.log()
//2.相关方法
//创建字符串对象
str3 = new String('asd') //构造方法
console.log(str3)
newstr = str3.big() //产生一个big标签，标签内容是字符串的值
console.log(str3, newstr)
// 字符串.charAt（下标）
//获取指定下标对应的字符，相当于：字符串[下标]
//下标越界返回undefined
console.log(str3.charAt(1)) //s
// 字符串.charCodeAt(下标)
//获取指定下标对应的字符的编码（js中的字符采用的也是unicode编码）
//字符串.concat(数据1，数据2，……)
//将字符串和多个数据依次连接，产生一个新的字符串。（相当于+的功能）
str4 = 'asd'
console.log(str4.concat(123,'asd')) //asd123asd
//字符串1.endsWith(字符串2)
//判断字符串1是否以字符串2结尾
//字符串1.indexOf(字符串2) 字符串2可以有多个字符
//获取字符串2在字符串1中第一次出现的下标
// lastIndexOf()
//获取字符串2在字符串1中最后一次出现的下标
//字符串1.match (正则表达式)
//相当于python中re模块中的match，匹配成功返回的
//注意：js中正则写在两个//之间
re = /\d{3}$/ //
console.log('123'.match(re))
//字符串.repeat(数字)：相当于python中的乘法
//指定的字符串重复出现指定的次数，产生一个新的字符串
//字符串1.replace(正则表达式，字符串2)
//在字符串1中查找第一个满足正则表达式的子串，替换成字符串2
console.log('asdfasdf12asfqwe23asdfw'.replace(/\d+/, 'A'))
//字符串.slice（开始下标，结束下标）
//从开始下标获取到结束下标前为止，步长是1
//注意：这儿的下标可以是负数，代表倒数第几个
str5 = 'hello'
console.log('hello'. slice(0,2)) //he
console.log(str5. slice(1,-2)) //el
//字符串1.split(字符串2)
//将字符串1按照字符2进行切割，返回一个数组
console.log('hello'.split('e'))
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
三：数组
<script type="text/javascript">
//1.加法运算：两个数组相加，实质是将数组转换成字符串然后拼接
console.log([12,3,'123']+[23,54]) //12,3,12323,54
console.log(String[1,2,3])
//2.比较运算:
//== ， === 判断相等是判断地址是否相等。相当于python中的is
console.log([1,2]==[1,2]) //false
//3.数组长度:length
console.log('qwe'.length)
//二：元素的增删改查
//1.查：获取元素
//获取单个元素 数组[下标]
//注意：负数下标没有意义。下标可以越界，返回undefined
arr1 = [12,34,54,65]
console.log(arr1[1])
// 切片
//数组.slice(开始下标，结束下标)
//注意：结束下标取不到，下标可以是负数，开始下标要在结束下标的前面
console.log(arr1.slice(1,3))
console.log(arr1.slice(3,0)) //[]
console.log(arr1.slice(1,-2))
//遍历
for(index in arr1){
console.log(arr1[index])
}
//增：添加元素
//数组.push(元素) - 在指定的数组的最后，添加一个元素。
arr1.push('hehe')
console.log(arr1)
//删：删除元素
//数组.pop() - 删除最后一个元素（只能删除最后一个元素）
arr1.pop()
console.log(arr1)
//数组.splice(下标，个数) - 从指定下标开始，删除指定个数的元素
arr1.splice(2,1) //第一个数字是下标，第二个数字是删除的个数。
//改：修改元素
//数组[下标] = 新值 - 修改指定下标对应的值
arr1[0]='花好月圆'
console.log(arr1)
//三.相关方法：
//数组..reverse() 倒序
arr1 = [12,34,54,65]
arr1.reverse()
console.log(arr1)
//sort() 从小到大排序
arr1.sort()
console.log(arr1)
//数组.sort(函数) - 按指定规则对数组中的元素进行排序
//函数的要求： 两个参数（代表的是数组中的两个元素），一个返回值（两个元素属性的差）；
students = [
{'name':'小明','score':90,'age':24},
{'name':'小fg ','score':55,'age':15},
{'name':'小trt','score':66,'age':22},
]
//按年龄从小到大排序
function ageCom(item1,item2){
return item1['age'] - item2['age']
}
students.sort(ageCom)
console.log(students)
//年龄从大到小排序
students.sort(function(a,b){
return b['score'] - a['score']
})
console.log(students)
//return后面 写 点key ,和 ['key'] 是一样的
//数组.join(字符串)
//将指定的字符串插入到数组的第个元素之间，产生一个新的字符串
nums = [12,14,5,77]
newData = nums.join('asd')
console.log(newData)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
四：对象
<script type="text/javascript">
//1.对象字面量
//用大括号括起来，里面是多个属性，属性名和属性值用冒号连接，多个属性之间用逗号隔开
//注意：1.对象字面量需要保存， 2.属性名可以加引号或不加引号（没有区别）
obj1 = {
'name':'楚留香',
'age':23,
sex:'男'
}
console.log(obj1)
//2.获取对象属性对应的值
//对象[属性名] 属性名要有引号
obj1['sex']
//对象.属性 属性不能有引号
obj1.name
//3.增/改：添加/修改属性（属性存在修改，不存在添加）
//对象.属性 = 值
//对象[属性名] = 值
//属性存在就是修改，不存在即为添加
obj1.height = 111
console.log(obj1)
//4.构造方法 - 创建对象的方法
/* 语法：
* function 类名（参数列表）｛
* this.属性名 = 属性值
* 对象属性和对象方法
* ｝
* 说明：
* 对象属性 ： this.属性名 = 属性值
* 对象方法 ： this.方法名 = 匿名函数
* 类名首字母大写
*
*/
function Person(name='张三',age=14,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.eat('包子')
p2 = new Person('香香',18,'女')
console.log(p2)
//注意：所有js中声明全局变量实质都是添加给window对象的属性
a = 10
console.log(window.a)
//6.添加类的全局的属性
//类名.prototype.属性名 = 属性值 - 给指定的类的所有对象添加属性
Person.prototype.height = 175 //添加全局的属性
Person.prototype.run = function(){
console.log(this.name + '跑步')
}
p3 = new Person('花红',16,'女')
p3.height = 155
console.log(p3.height)
p3.run()
//练习：给数组添加方法，统计数组中指定元素的个数
Array.prototype.ytCount =function(item){
num = 0
for(i in this){
if (this[i] = item){
num++
}
}
return num
}
console.log([1,2,3,4,5,2,2,4,5].ytCount(1))
//练习1.声明一个创建学生的构造方法，有属性姓名、年龄、成绩、学号，
//要求创建学生对象的姓名必须赋值，年龄可以赋值也可以不赋值，成绩学号不能赋值。
function Students(name,age=16){
this.name = name
this.age = age
this.cji = 66
this.stunum =0012
}
p1 = new Students('花无缺')
console.log(p1)
//练习2：给String添加方法，统计字符串中字母字符的个数
String.prototype.letternNum = function(){
num1 = 0
while(num1<this.length){
if('a'<=this[num1] && this[num1]<='z' || 'A'<=this[num1] && this[num1]<='Z'){
num1++
}
}
return num1
}
console.log('asd'.letternNum())
//7.系统的对象和类
//document对象
//window对象
//Elenent类型的对象
//Date类型的对象 (时间)
date1 = new Date()
console.log(date1)
//年 月 日 时 分 秒 星期
year = date1.getFullYear()
month = date1.getMonth() //月份成0开始，要加1
day = date1.getDate()
hours = date1.getHours()
min = date1.getMinutes()
seconds = date1.getSeconds()
week = date1.getDay()
</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">我是段落</p>
<a href="" class="c1">我是a标签</a>
<h1 class="c1">我是标题1</h1>
<input type="" name="userName" id="userName" value="" />
<div id="div1">
<p>我是段落2</p>
<a href="">新浪</a>
<h2>我是标题2</h2>
</div>
<script type="text/javascript">
//按钮点击后会做的事情
function action(){
console.log('点击!')
}
</script>
<button onclick="action()"></button>
</body>
</html>
<script type="text/javascript">
//1.DOM(文档对象模型: document object mode)
//1)document对象: 指的是指向整个网页内容的一个对象
//2)节点: Element类型对象,指向的是网页中的标签
//2.获取节点
//1)通过id获取节点: getElementById(id值) - 返回节点对象(实质就是指向指定标签的对象)
p1Node = document.getElementById('p1')
console.log(p1Node)
//innerText是标签文本内容
p1Node.innerText = 'hello js'
//2)通过class获取节点: getElementsByClassName(class值) - 返回节点数组
c1Nodes = document.getElementsByClassName('c1')
c1Nodes[0].innerText = '百度一下'
console.log(c1Nodes)
//注意: 遍历的时候不要用for in
for(i=0;i<c1Nodes.length;i++){
c1Node = c1Nodes[i]
//修改样式中的文字颜色
c1Node.style.color = 'red'
}
//3) 通过标签名获取节点: getElementsByTagName(标签名)
h1Nodes = document.getElementsByTagName('h1')
console.log(h1Nodes)
//4) 通过name属性值获取节点:getElementsByName(name值) （了解）
nameNodes = document.getElementsByName('userName')
console.log(nameNodes)
//5）获取子节点
//节点对象.children - 获取指定节点中所有的子节点
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 = 'img/luffy.jpg'
//2)添加节点
//节点1.appendChild(节点2) - 在节点1的最后添加子标签节点2
bodyNode.appendChild(imgNode)
//节点1.insertBefore(新的节点, 节点2) - 在节点1中的节点2的前面添加一个新的节点
bodyNode.insertBefore(imgNode, bodyNode.firstElementChild)
bodyNode.insertBefore(imgNode, c1Nodes[0])
//注意：一个节点不管添加几次，只有最后一次添加有效(因为节点只有一个)
//4.拷贝/复制节点
//节点.cloneNode()
newImgNode = imgNode.cloneNode()
newImgNode.src = 'img/aaa.ico'
div1Node.appendChild(newImgNode)
//5.删除节点
p1Node = document.getElementById('p1')
//节点.remove() - 删除指定的节点
p1Node.remove()
//节点1.removeChild(节点2) - 删除节点1中的节点2
// div1Node.removeChild(div1Node.lastElementChild)
// div1Node.removeChild(div1Node.firstElementChild)
//6.替换节点
//节点1.replaceChild(新节点, 旧节点) - 用新节点替换节点1中的旧节点
bodyNode.replaceChild(imgNode.cloneNode(), c1Nodes[1])
</script>
网友评论