變量的作用域
函數(shù)聲明語(yǔ)法：
function 函數(shù)名(參數(shù)列表){
函數(shù)體
}
函數(shù)變量 = function (參數(shù)列表){
函數(shù)體
}
- 全局變量:
- a.聲明在函數(shù)外部的變量（從聲明開(kāi)始到文件結(jié)束都可以使用）
- b.直接聲明在函數(shù)內(nèi)的變量（不加var）
注意：后面的其他的script標(biāo)簽中也可以使用
a100 = 10
var a200 = 100
- 局部變量
- 通過(guò)var關(guān)鍵字聲明在函數(shù)里面的變量是局部變量(聲明開(kāi)始到函數(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++
}
字符串
- 字符串運(yùn)算
- a.加法運(yùn)算: 做字符串拼接操作
注意：js中支持字符串和其他數(shù)據(jù)相加
- a.加法運(yùn)算: 做字符串拼接操作
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.字符串長(zhǎng)度
//字符串.length
console.log(str2.length)
- 相關(guān)方法
//創(chuàng)建字符串對(duì)象
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)對(duì)應(yīng)的字符; 相當(dāng)于: 字符串[下標(biāo)]
console.log('hello'.charAt(0)) //h
console.log('hello'[1]) //e
3).字符串.charCodeAt(下標(biāo))
- 獲取指定下標(biāo)對(duì)應(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中正則寫(xiě)在兩個(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(開(kāi)始下標(biāo), 結(jié)束下標(biāo))
- 從開(kāi)始下標(biāo)獲取到結(jié)束下標(biāo)前為止突想，步長(zhǎng)是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'))
數(shù)組
- 數(shù)組.sort(函數(shù)) - 按指定規(guī)則對(duì)數(shù)組中的元素進(jìn)行排序
- 函數(shù)的要求：兩個(gè)參數(shù)(代表的是數(shù)組中的兩個(gè)元素)，一個(gè)返回值(兩個(gè)元素或者兩個(gè)元素的屬性的差)
字面量
- 對(duì)象字面量
- 用大括號(hào)括起來(lái)，里面是多個(gè)屬性，屬性名和屬性值之間用冒號(hào)連接, 多個(gè)屬性之間用逗號(hào)隔開(kāi)
注意: 1)對(duì)象字面量需要保存 2)屬性名可以加引號(hào)也可以不加(沒(méi)有區(qū)別)
obj1 = {
'name':'余婷',
'age': 18,
sex: '女'
}
p1 = {
'name':'小明',
'age': 20,
sex: '男'
}
console.log(obj1)
- 獲取對(duì)象屬性對(duì)應(yīng)的值
- 對(duì)象[屬性名]
console.log(obj1['name'], obj1['sex'])
proName = 'age'
console.log(obj1[proName])
- 對(duì)象.屬性
console.log(obj1.name, obj1.sex)
- 增/改: 添加/修改屬性
1)對(duì)象.屬性 = 值
2)對(duì)象[屬性名] = 值
- 屬性存在是修改
obj1.name = '小明'
obj1['name'] = '小花'
console.log(obj1)
- 屬性不存在是添加
obj1.height = 180
obj1['weight'] = 70
console.log(obj1)
- 構(gòu)造方法 - 創(chuàng)建對(duì)象的方法
- 語(yǔ)法:
function 類名(參數(shù)列表){
對(duì)象屬性
對(duì)象方法
}
- 說(shuō)明:
- a.對(duì)象屬性: this.屬性名 = 值
- b.對(duì)象方法: this.方法名 = 匿名函數(shù)
- c.類名： 首字母大寫(xiě)
function Person(name='張三', age=18, sex='男'){
//這兒的this相當(dāng)于python中的self
//對(duì)象屬性
this.name = name
this.age = age
this.sex = sex
//對(duì)象方法
this.eat = function(food){
console.log(this.name+'吃'+food)
}
console.log('=====:',this)
}
- 創(chuàng)建對(duì)象
- 對(duì)象 = new 構(gòu)造方法()
//創(chuàng)建對(duì)象
p1 = new Person()
console.log(p1)
//獲取對(duì)象屬性
console.log(p1.name, p1.age, p1.sex)
//調(diào)用對(duì)象方法
p1.eat('包子')
p2 = new Person('小明', 20, '女')
console.log(p2)
p2.eat('面條')
//注意： js中聲明全局變量實(shí)質(zhì)都是添加給window對(duì)象的屬性
p3 = Person()
p3 = window.Person()
console.log(p3)
// window.alert('彈框')
alert('彈框')
a = 10
console.log(window.a)
- 添加類的全局的屬性
- 類名.prototype.屬性名 = 屬性值 - 給指定的類的所有對(duì)象添加屬性
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ù)組添加方法深滚，來(lái)統(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)造方法，有屬性姓名涣觉、年齡痴荐、成績(jī)、學(xué)號(hào)官册，要求創(chuàng)建學(xué)生對(duì)象的時(shí)候姓名必須賦值生兆，年齡可以賦值也可以不賦值，成績(jī)和學(xué)號(hào)不能賦值
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())
- 系統(tǒng)的對(duì)象和類
- document對(duì)象
- window對(duì)象
- Element類型的對(duì)象
- Date類型的對(duì)象
....
//創(chuàng)建當(dāng)前時(shí)間對(duì)象
date1 = new Date()
console.log(date1)
//年
year = date1.getFullYear()
//月 - 從0開(kāi)始的
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)
DOM操作
- DOM(文檔對(duì)象模型: document object mode)
- 1)document對(duì)象: 指的是指向整個(gè)網(wǎng)頁(yè)內(nèi)容的一個(gè)對(duì)象
- 2)節(jié)點(diǎn): Element類型對(duì)象,指向的是網(wǎng)頁(yè)中的標(biāo)簽
- 獲取節(jié)點(diǎn)
- 1)通過(guò)id獲取節(jié)點(diǎn): getElementById(id值) - 返回節(jié)點(diǎn)對(duì)象(實(shí)質(zhì)就是指向指定標(biāo)簽的對(duì)象)
p1Node = document.getElementById('p1')
console.log(p1Node)
//innerText是標(biāo)簽文本內(nèi)容
p1Node.innerText = 'hello js'
- 2)通過(guò)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'
}
- 通過(guò)標(biāo)簽名獲取節(jié)點(diǎn): getElementsByTagName(標(biāo)簽名)
h1Nodes = document.getElementsByTagName('h1')
console.log(h1Nodes)
- 通過(guò)name屬性值獲取節(jié)點(diǎn):getElementsByName(name值) （了解）
nameNodes = document.getElementsByName('userName')
console.log(nameNodes)
- 5）獲取子節(jié)點(diǎn)
- 節(jié)點(diǎn)對(duì)象.children - 獲取指定節(jié)點(diǎn)中所有的子節(jié)點(diǎn)
div1Node = document.getElementById('div1')
div1Children = div1Node.children
console.log(div1Children)
//獲取第一個(gè)子節(jié)點(diǎn)
//節(jié)點(diǎn)對(duì)象.firstElementChild
firstNode = div1Node.firstElementChild
console.log(firstNode)
//獲取最后一個(gè)子節(jié)點(diǎn)
//節(jié)點(diǎn)對(duì)象.lastElementChild
lastNode = div1Node.lastElementChild
console.log(lastNode)
- 6)獲取父節(jié)點(diǎn)
bodyNode = div1Node.parentElement
console.log(bodyNode)
- 創(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)
- 節(jié)點(diǎn)1.appendChild(節(jié)點(diǎn)2) - 在節(jié)點(diǎn)1的最后添加子標(biāo)簽節(jié)點(diǎn)2
bodyNode.insertBefore(imgNode, bodyNode.firstElementChild)
bodyNode.insertBefore(imgNode, c1Nodes[0])
注意：一個(gè)節(jié)點(diǎn)不管添加幾次鸦难，只有最后一次添加有效(因?yàn)楣?jié)點(diǎn)只有一個(gè))
- 拷貝/復(fù)制節(jié)點(diǎn)
- 節(jié)點(diǎn).cloneNode()
newImgNode = imgNode.cloneNode()
newImgNode.src = 'img/aaa.ico'
div1Node.appendChild(newImgNode)
- 刪除節(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)
- 替換節(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])
