1、變量的作用域
<script type="text/javascript">
//函數(shù)聲明語法：
/*
function 函數(shù)名(參數(shù)列表){
函數(shù)體
}
函數(shù)變量 = function (參數(shù)列表){
函數(shù)體
}
*/
//1.全局變量:
/*
* a.聲明在函數(shù)外部的變量（從聲明開始到文件結(jié)束都可以使用）
* b.直接聲明在函數(shù)內(nèi)的變量（不加var）
* 注意：后面的其他的script標(biāo)簽中也可以使用
*/
a100 = 10
var a200 = 100
//2.局部變量
/*
* 通過var關(guān)鍵字聲明在函數(shù)里面的變量是局部變量(聲明開始到函數(shù)結(jié)束可以使用)
*/
function func2(){
//b100是全局變量
b100 = 20
//b200是局部變量
var b200 = 200
console.log(b200)
}
func2()
console.log(b100)
function func1(){
console.log(a100)
console.log(a200)
console.log(b100)
}
func1()
b = 1
while(b < 5){
console.log(a100)
console.log(a200)
console.log(b100)
b++
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
console.log(a100)
console.log(a200)
console.log(b100)
</script>
2、字符串
<script type="text/javascript">
//1.字符串運(yùn)算
//a.加法運(yùn)算: 做字符串拼接操作
//注意：js中支持字符串和其他數(shù)據(jù)相加
str1 = 'abc'
str2 = 'hello'
console.log(str1+str2) //abchello
console.log(str1+100) //abc100
console.log(str1+[1,2,3]) //abc1,2,3
//b.比較運(yùn)算: >, <, >=, <=,==, ===, !=, !==
//1)比較相等
console.log('abc'=='abc') //true
console.log('abc'=='bac') //false
console.log(100=='100') //true
console.log(100==='100') //false
//2)比較大小: 和python字符串比較大小的方式一樣
console.log('abc' > 'bd') //false
console.log('z' > 'shjsjhsjasss') //true
//c.字符串長度
//字符串.length
console.log(str2.length)
//2.相關(guān)方法
//創(chuàng)建字符串對象
str3 = new String('abc')
console.log(str3)
//1).big方法
//產(chǎn)生一個(gè)big標(biāo)簽缠俺，并且標(biāo)簽中的內(nèi)容就是字符串的值
newStr = str3.big()
console.log(str3, newStr)
//2).字符串.charAt(下標(biāo))
//獲取指定下標(biāo)對應(yīng)的字符; 相當(dāng)于: 字符串[下標(biāo)]
console.log('hello'.charAt(0)) //h
console.log('hello'[1]) //e
//3).字符串.charCodeAt(下標(biāo))
//獲取指定下標(biāo)對應(yīng)的字符的編碼(js中的字符采用的也是unicode編碼)
console.log('hello'.charCodeAt(0)) //104
//4)字符串.concat(數(shù)據(jù)1,數(shù)據(jù)2,....)
//將字符串和多個(gè)數(shù)據(jù)依次連接在在一起產(chǎn)生一個(gè)新的字符串(相當(dāng)于+的功能)
console.log('abc'.concat(123, 'aaa')) //abc123aaa
//5)字符串1.endsWith(字符串2)
//判斷字符串1是否以字符串2結(jié)尾
console.log('hello'.endsWith('llo')) //true
//6)字符串1.indexOf(字符串2)
//獲取字符串2在字符串1中第一次出現(xiàn)的位置
console.log('abcbaab'.indexOf('b'))
//7)字符串1.lastIndexOf(字符串2)
//獲取字符串2在字符串1中最后一次出現(xiàn)的位置
console.log('abcbaab'.lastIndexOf('b'))
//8)字符串.match(正則表達(dá)式)
//相當(dāng)于python中re模塊的match; 匹配成功返回
//注意:js中正則寫在兩個(gè)//之間
re = /\d{3}/
result = '237abc'.match(re)
console.log(result, result[0], result.index)
//9)字符串.repeat(數(shù)字)
//指定的字符串重復(fù)出現(xiàn)指定次數(shù)產(chǎn)生一個(gè)新的字符串(相當(dāng)于python中的*)
console.log('abc'.repeat(2))
//10)字符串1.replace(正則表達(dá)式,字符串2)
//將字符串1中第一個(gè)面子正則表達(dá)式的子串替換成字符串2
console.log('aaa34bbb992nnn92nkkj8==22jkk'.replace(/\d+/, 'A'))
//11)字符串.slice(開始下標(biāo), 結(jié)束下標(biāo))
//從開始下標(biāo)獲取到結(jié)束下標(biāo)前為止权她，步長是1
//注意: 這兒的下標(biāo)可以是負(fù)數(shù)，代表倒數(shù)第幾個(gè)
console.log('hello'.slice(0, 2)) //he
console.log('hello'.slice(1, -2)) //el
//12)字符串1.split(字符串2)
//將字符串1按照字符串2進(jìn)行切割，返回一個(gè)數(shù)組
console.log('hello'.split('e'))
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
3、數(shù)組
<script type="text/javascript">
//1.基本操作
//1).加法運(yùn)算: 兩個(gè)數(shù)組相加實(shí)質(zhì)是將數(shù)組轉(zhuǎn)換成字符串然后拼接
console.log([12, 3, 'abc']+[1, 2, 3]) //12,3,abc1,2,3
console.log(String([1, 2, 3])) //1,2,3
//2).比較運(yùn)算:
//==、===判斷相等是判斷地址是否相等,相等于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
//3).數(shù)組長度: length屬性
console.log(arr1.length)
//2.元素的增刪改查
//1)查: 獲取元素
//a.獲取單個(gè)元素
//數(shù)組[下標(biāo)] - 獲取下標(biāo)對應(yīng)的元素
//注意：負(fù)數(shù)的下標(biāo)沒有意義
fruits = ['蘋果', '梨', '葡萄', '西瓜', '桃子', '李子']
console.log(fruits[1])
//b.切片:
//數(shù)組.slice(開始下標(biāo),結(jié)束下標(biāo)) - 返回一個(gè)新的數(shù)組
//注意：結(jié)束下標(biāo)取不到帘皿；下標(biāo)可以是負(fù)數(shù); 開始下標(biāo)要在結(jié)束下標(biāo)的前面
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)增：添加元素
//數(shù)組.push(元素) - 在指定的數(shù)組的最后添加一個(gè)元素
fruits.push('香蕉')
console.log(fruits)
//3)刪：刪除元素
//數(shù)組.pop() - 刪除最后一個(gè)元素
fruits.pop()
console.log(fruits) //["蘋果", "梨", "葡萄", "西瓜", "桃子", "李子"]
//數(shù)組.splice(下標(biāo),個(gè)數(shù)) - 從指定下標(biāo)開始刪除指定個(gè)數(shù)的元素
fruits.splice(1, 2)
console.log(fruits) // ["蘋果", "西瓜", "桃子", "李子"]
//4)改： 修改元素
//數(shù)組[下標(biāo)] = 新值 - 修改指定下標(biāo)對應(yīng)的值
fruits[0] = '山竹'
console.log(fruits)
//3.相關(guān)方法
fruits = ['蘋果', '梨', '葡萄', '西瓜', '桃子', '李子']
//1)數(shù)組.reverse()
//倒序
fruits.reverse()
console.log(fruits) //["李子", "桃子", "西瓜", "葡萄", "梨", "蘋果"]
//2)數(shù)組.sort()
//元素從小到大排序
scorts = [23, 90, 89, 87, 76, 90, 65] //[23, 65, 76, 87, 89, 90, 90]
scorts.sort()
console.log(scorts) //["李子", "桃子", "梨", "蘋果", "葡萄", "西瓜"]
//數(shù)組.sort(函數(shù)) - 按指定規(guī)則對數(shù)組中的元素進(jìn)行排序
//函數(shù)的要求: 兩個(gè)參數(shù)(代表的是數(shù)組中的兩個(gè)元素)，一個(gè)返回值(兩個(gè)元素或者兩個(gè)元素的屬性的差);
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) 數(shù)組.join(字符串)
//將指定的字符串插入到數(shù)組的每個(gè)元素之間產(chǎn)生一個(gè)新的字符串
nums = [10, 34, 89, 1]
newData = nums.join('aaa')
console.log(newData) // 10aaa34aaa89aaa1
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
4畸陡、對象
<script type="text/javascript">
//1.對象字面量
//用大括號括起來鹰溜，里面是多個(gè)屬性，屬性名和屬性值之間用冒號連接, 多個(gè)屬性之間用逗號隔開
//注意: 1)對象字面量需要保存 2)屬性名可以加引號也可以不加(沒有區(qū)別)
obj1 = {
'name':'余婷',
'age': 18,
sex: '女'
}
p1 = {
'name':'小明',
'age': 20,
sex: '男'
}
console.log(obj1)
//2.獲取對象屬性對應(yīng)的值
//1) 對象[屬性名]
console.log(obj1['name'], obj1['sex'])
proName = 'age'
console.log(obj1[proName])
//2) 對象.屬性
console.log(obj1.name, obj1.sex)
//3.增/改: 添加/修改屬性
//1)對象.屬性 = 值
//2)對象[屬性名] = 值
//屬性存在是修改
obj1.name = '小明'
obj1['name'] = '小花'
console.log(obj1)
//屬性不存在是添加
obj1.height = 180
obj1['weight'] = 70
console.log(obj1)
//4.構(gòu)造方法 - 創(chuàng)建對象的方法
/* 語法:
* function 類名(參數(shù)列表){
* 對象屬性
* 對象方法
* }
*
* 說明:
* a.對象屬性: this.屬性名 = 值
* b.對象方法: this.方法名 = 匿名函數(shù)
* c.類名： 首字母大寫
*/
function Person(name='張三', age=18, sex='男'){
//這兒的this相當(dāng)于python中的self
//對象屬性
this.name = name
this.age = age
this.sex = sex
//對象方法
this.eat = function(food){
console.log(this.name+'吃'+food)
}
console.log('=====:',this)
}
//5.創(chuàng)建對象
// 對象 = new 構(gòu)造方法()
//創(chuàng)建對象
p1 = new Person()
console.log(p1)
//獲取對象屬性
console.log(p1.name, p1.age, p1.sex)
//調(diào)用對象方法
p1.eat('包子')
p2 = new Person('小明', 20, '女')
console.log(p2)
p2.eat('面條')
//注意： js中聲明全局變量實(shí)質(zhì)都是添加給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()
//練習(xí): 給數(shù)組添加方法丁恭，來統(tǒng)計(jì)數(shù)組中指定元素的個(gè)數(shù)
Array.prototype.ytCount = function(item){
num = 0
for(i in this){
item1 = this[i]
if(item1 == item){
num++
}
}
return num
}
console.log([1, 2, 4, 3, 5, 2, 1, 2].ytCount(1))
//練習(xí)1: 聲明一個(gè)創(chuàng)建學(xué)生的構(gòu)造方法曹动，有屬性姓名、年齡牲览、成績墓陈、學(xué)號，
//要求創(chuàng)建學(xué)生對象的時(shí)候姓名必須賦值，年齡可以賦值也可以不賦值贡必，成績和學(xué)號不能賦值
function Student(name, age=0){
this.name = name
this.age = age
this.score = 0
this.studyId = '001'
}
stu1 = new Student('小明')
console.log(stu1)
//練習(xí)2：給String添加方法兔港， 統(tǒng)計(jì)字符串中字母字符的個(gè)數(shù)
str1 = new String('abc')
console.log(str1)
String.prototype.letterCount = function(){
num = 0
i = 0
while(i<this.length){
ch = this[i]
console.log('++:',ch)
if((ch>='a' && ch<='z')||(ch>='A' && ch<='Z')){
console.log('====',ch,'=====')
num++
}
i++
}
return num
}
console.log('A23adb33'.letterCount())
//7.系統(tǒng)的對象和類
//document對象
//window對象
//Element類型的對象
//Date類型的對象
//....
//創(chuàng)建當(dāng)前時(shí)間對象
date1 = new Date()
console.log(date1)
//年
year = date1.getFullYear()
//月 - 從0開始的
month = date1.getMonth()
//日
day = date1.getDate()
//時(shí)
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
5、DOM操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="p1">我是段落</p>
<a href="" class="c1">我是a標(biāo)簽</a>
<h1 class="c1">我是標(biāo)題1</h1>
<input type="" name="userName" id="userName" value="" />
<div id="div1">
<p>我是段落2</p>
<a href="">新浪</a>
<h2>我是標(biāo)題2</h2>
</div>
</body>
</html>
<script type="text/javascript">
//1.DOM(文檔對象模型: document object mode)
//1)document對象: 指的是指向整個(gè)網(wǎng)頁內(nèi)容的一個(gè)對象
//2)節(jié)點(diǎn): Element類型對象,指向的是網(wǎng)頁中的標(biāo)簽
//2.獲取節(jié)點(diǎn)
//1)通過id獲取節(jié)點(diǎn): getElementById(id值) - 返回節(jié)點(diǎn)對象(實(shí)質(zhì)就是指向指定標(biāo)簽的對象)
p1Node = document.getElementById('p1')
console.log(p1Node)
//innerText是標(biāo)簽文本內(nèi)容
p1Node.innerText = 'hello js'
//2)通過class獲取節(jié)點(diǎn): getElementsByClassName(class值) - 返回節(jié)點(diǎn)數(shù)組
c1Nodes = document.getElementsByClassName('c1')
c1Nodes[0].innerText = '百度一下'
console.log(c1Nodes)
//注意: 遍歷的時(shí)候不要用for in
for(i=0;i<c1Nodes.length;i++){
c1Node = c1Nodes[i]
//修改樣式中的文字顏色
c1Node.style.color = 'red'
}
//3) 通過標(biāo)簽名獲取節(jié)點(diǎn): getElementsByTagName(標(biāo)簽名)
h1Nodes = document.getElementsByTagName('h1')
console.log(h1Nodes)
//4) 通過name屬性值獲取節(jié)點(diǎn):getElementsByName(name值) （了解）
nameNodes = document.getElementsByName('userName')
console.log(nameNodes)
//5）獲取子節(jié)點(diǎn)
//節(jié)點(diǎn)對象.children - 獲取指定節(jié)點(diǎn)中所有的子節(jié)點(diǎn)
div1Node = document.getElementById('div1')
div1Children = div1Node.children
console.log(div1Children)
//獲取第一個(gè)子節(jié)點(diǎn)
//節(jié)點(diǎn)對象.firstElementChild
firstNode = div1Node.firstElementChild
console.log(firstNode)
//獲取最后一個(gè)子節(jié)點(diǎn)
//節(jié)點(diǎn)對象.lastElementChild
lastNode = div1Node.lastElementChild
console.log(lastNode)
//6)獲取父節(jié)點(diǎn)
bodyNode = div1Node.parentElement
console.log(bodyNode)
//3.創(chuàng)建和添加節(jié)點(diǎn)
//1)創(chuàng)建節(jié)點(diǎn)
//document.createElement(標(biāo)簽名)
//創(chuàng)建一個(gè)img標(biāo)簽
imgNode = document.createElement('img')
imgNode.src = 'img/luffy.jpg'
//2)添加節(jié)點(diǎn)
//節(jié)點(diǎn)1.appendChild(節(jié)點(diǎn)2) - 在節(jié)點(diǎn)1的最后添加子標(biāo)簽節(jié)點(diǎn)2
bodyNode.appendChild(imgNode)
//節(jié)點(diǎn)1.insertBefore(新的節(jié)點(diǎn), 節(jié)點(diǎn)2) - 在節(jié)點(diǎn)1中的節(jié)點(diǎn)2的前面添加一個(gè)新的節(jié)點(diǎn)
bodyNode.insertBefore(imgNode, bodyNode.firstElementChild)
bodyNode.insertBefore(imgNode, c1Nodes[0])
//注意：一個(gè)節(jié)點(diǎn)不管添加幾次仔拟，只有最后一次添加有效(因?yàn)楣?jié)點(diǎn)只有一個(gè))
//4.拷貝/復(fù)制節(jié)點(diǎn)
//節(jié)點(diǎn).cloneNode()
newImgNode = imgNode.cloneNode()
newImgNode.src = 'img/aaa.ico'
div1Node.appendChild(newImgNode)
//5.刪除節(jié)點(diǎn)
p1Node = document.getElementById('p1')
//節(jié)點(diǎn).remove() - 刪除指定的節(jié)點(diǎn)
p1Node.remove()
//節(jié)點(diǎn)1.removeChild(節(jié)點(diǎn)2) - 刪除節(jié)點(diǎn)1中的節(jié)點(diǎn)2
// div1Node.removeChild(div1Node.lastElementChild)
// div1Node.removeChild(div1Node.firstElementChild)
//6.替換節(jié)點(diǎn)
//節(jié)點(diǎn)1.replaceChild(新節(jié)點(diǎn), 舊節(jié)點(diǎn)) - 用新節(jié)點(diǎn)替換節(jié)點(diǎn)1中的舊節(jié)點(diǎn)
bodyNode.replaceChild(imgNode.cloneNode(), c1Nodes[1])
</script>
