js基本語(yǔ)法和方法的使用

一休里、js的四種引方式和三種打印方式

四種引入方式:
(1)<a href="javascript:alert('集合呀伙,準(zhǔn)備團(tuán)戰(zhàn)')">百度一下</a>
(2)<div style="width:200px; height:200px; background-color:red" onclick="alert('等等我按傅,馬上到')"></div>
(3)在html頁(yè)面的任何位置加入 <script>js代碼</script>
(4)在html頁(yè)面的任何位置加入 <script src='js.js'></script>
三種打印方式:
(1)alert彈窗打印
(2)console.log('打印的內(nèi)容') 結(jié)合瀏覽器控制臺(tái)查看
(3)document.write('打印的內(nèi)容') 往html文檔中寫內(nèi)容

二、js中的函數(shù)

全局變量和局部變量:

    全局變量:直接定義的變量曼追,全局有效
        加var和不加var都一樣

    局部變量:函數(shù)體內(nèi)定義的變量,只在函數(shù)體內(nèi)有效
        如果局部前面有var,該變量真是一個(gè)局部變量
        如果局部前面沒(méi)有var叶堆,該變量其實(shí)是一個(gè)全局變量,在函數(shù)調(diào)用之后斥杜,該變量即可隨便使用
        上面知道即可虱颗,一般情況定義變量都加var
        如果局部和全局同名,優(yōu)先使用局部變量

匿名函數(shù):
    沒(méi)有函數(shù)名的函數(shù)蔗喂,需要將其賦給一個(gè)變量上枕,然后變量按照函數(shù)的形式進(jìn)行調(diào)用即可:下面a就是一個(gè)匿名函數(shù)。

var a = function () {
alert('這是一個(gè)函數(shù)')
}
a()

封閉空間
    將匿名函數(shù)用小括號(hào)括起來(lái)弱恒,然后在后面再加一個(gè)小括號(hào)調(diào)用這個(gè)匿名函數(shù)辨萍,稱之為封閉空間。

(function (m, n) {
alert('炊煙裊裊升起,隔江千萬(wàn)里===' + m + n)
})('周杰倫', '雙節(jié)棍')

//在js中將函數(shù)作為參數(shù)傳到另一個(gè)函數(shù)中
    function cacl(m, n, fn) {
        return fn(m, n)
    }

    // alert(cacl(100, 200, sub))
    alert(cacl(100, 200, function (m, n) {
        return m * n
    }))

三返弹、數(shù)組和字符串

定義:array
遍歷:
數(shù)組定義通過(guò)索引進(jìn)行訪問(wèn)锈玉,索引從0開(kāi)始
但是數(shù)組也可以通過(guò)屬性值追加屬性和值,但是一般不這么使用
遍歷的時(shí)候义起,通過(guò) for 進(jìn)行遍歷只能遍歷索引數(shù)組拉背,通過(guò)for in 進(jìn)行遍歷,既可以遍歷索引默终,又可以遍歷屬性

字符串遍歷
    通過(guò)索引進(jìn)行遍歷椅棺,索引從0開(kāi)始
<script>
var arr1 = [1, '周杰倫', 2, '王力宏']
arr1['name'] = '狗蛋'
arr1['height'] = 180
// var arr = []
// var arr2 = new Array()

通過(guò)下標(biāo)進(jìn)行訪問(wèn)犁罩,下標(biāo)從0開(kāi)始
alert(arr1[1])
alert(arr1)
alert(arr1['name'])
console.log(arr1[4])

js中遍歷數(shù)組
for (var i = 0; i < arr1.length; i++) {
  console.log(arr1[i])
}

for (var i in arr1) {
   console.log(arr1[i])
}
js中字符串的遍歷
string1 = '12345,上山打老虎'
for (var i = 0; i < string1.length; i++) {
  console.log(string1[i])
}
</script>

四、js中的對(duì)象

創(chuàng)建對(duì)象的三種方式:
(1)構(gòu)造方法
(2)通過(guò)官方創(chuàng)建
(3)直接寫一個(gè)對(duì)象即可

    obj = {name: '王寶強(qiáng)', age: '36', wife: '馬蓉蓉'}
    屬性的引號(hào)可以添加也可以不添加两疚,一般就不加了
    使用時(shí)候
    obj['name']   或者  obj.name

    在js中json格式字符串和js對(duì)象相互轉(zhuǎn)化的函數(shù)
    將js對(duì)象轉(zhuǎn)化為json字符串
        string = JSON.stringify(obj)
    json字符串轉(zhuǎn)化為js對(duì)象
        obj = JSON.parse(string)
        obj = eval('(' + string + ')')
<script>
//構(gòu)造方法創(chuàng)建對(duì)象床估,(js中一般不用)
function Person(name, age, height, weight) {
 this.name = name
 this.age = age
 this.height = height
 this.weight = weight
 this.say = function () {
     console.log('我的名字叫做' + this.name + '==我的年齡為' + this.age + '==我的身高為' + this.height + '==我的體重為' + this.weight)
 }
}
obj = new Person('黃曉明', 40, 150, 200)
obj.say()


// 創(chuàng)建對(duì)象方式2
// obj = new Object()
// obj.name = '黃曉明'
// obj.age = 40
// obj.height = 150
// obj.say = function () {
//     alert('haha')
// }
// console.log(obj)

// 創(chuàng)建對(duì)象方式3
// json格式,前后端交互使用的格式诱渤,json格式在js里面原生支持
obj = {name: '王寶強(qiáng)', age: '36', wife: '馬蓉蓉'}

// 沒(méi)有這種寫一個(gè)class丐巫,然后里面寫屬性寫方法這種特點(diǎn)了
// console.log(obj.name)
// console.log(obj['name'])
// 將js里面的對(duì)象轉(zhuǎn)化為json格式字符串
string = JSON.stringify(obj)
// console.log(typeof(string))
// js如何將json格式字符串轉(zhuǎn)化為js對(duì)象
// ming = JSON.parse(string)
ming = eval('(' + string + ')')

console.log(ming)
</script>

五、函數(shù)中的方法

常用對(duì)象和函數(shù):

parseInt(字符串):
將字符串轉(zhuǎn)化為整型勺美,必須以數(shù)字開(kāi)頭递胧,只要碰到非數(shù)字,轉(zhuǎn)化結(jié)束赡茸。
如果以非數(shù)字開(kāi)頭缎脾,轉(zhuǎn)化為NaN。
兩個(gè)NaN不能判斷是否相等占卧,判斷是不是NaN可以使用 isNaN函數(shù) 判斷是不是NaN赊锚,是返回true,不是返回false屉栓。
parseFloat(字符串):
將字符串轉(zhuǎn)化為浮點(diǎn),必須以數(shù)字開(kāi)頭舷蒲,碰到非數(shù)字立馬結(jié)束,小數(shù)點(diǎn)不算
如果以非數(shù)字開(kāi)頭友多,轉(zhuǎn)為NaN
Math對(duì)象
abs : 絕對(duì)值函數(shù)
ceil : 向上取整
floor : 向下取整
max : 取最大的值,傳遞過(guò)個(gè)參數(shù)牲平,找到最大值
min : 傳遞多個(gè)參數(shù),找到最小值
pow : 求冪
random : 隨機(jī)值 只能隨機(jī)0-1之間的小數(shù)域滥,如果需要隨機(jī)5-10之間的數(shù)纵柿,自己實(shí)現(xiàn)
round : 四舍五入函數(shù)
字符串常用函數(shù)
indexOf : 字符串查找函數(shù),返回查找到的字符串的第一個(gè)字母的下標(biāo)启绰,如果找不到昂儒,返回-1 類似于python里面的find
lastIndexOf : 字符串查找函數(shù),找最后一次出現(xiàn)的位置委可,找不到返回-1渊跋,類似于python里面的rfind
substr : 字符串的提取 substr(start, length) 從start開(kāi)始提取length個(gè)字符
replace : 字符串替換,只能替換第一個(gè) string.replace(old, new)
toLowerCase : 全部轉(zhuǎn)化為小寫
toUpperCase : 全部轉(zhuǎn)化為大寫
fromCharCode : 所有的大寫 65-90 所有的小寫 97-122 數(shù)字 48-57
split : 按照特定的字符進(jìn)行切割
數(shù)組常用函數(shù)
push : 給數(shù)組追加一個(gè)元素
pop : 彈出最后一個(gè)元素,只能這么做
shift : 彈出數(shù)組中第一個(gè)元素
unshift : 數(shù)組最前面添加一個(gè)元素
join : 字符串拼接 arr.join('*') 將列表里面所有的字符串按照 * 拼接
reverse : 將數(shù)組逆序
slice : slice(start, end) [start, end) 左閉右開(kāi)
sort : 排序,如果都是數(shù)字,默認(rèn)按照數(shù)字的ascii進(jìn)行排序着倾,如果想按照數(shù)字大小排序
arr.sort(function (a, b) {return a > b}) 從小到大排序
日期對(duì)象常用函數(shù)
getDate : 獲得日期
getDay : 獲得星期幾 0-6 0表示周天
getMonth : 0-11 當(dāng)前月份減一
getFullYear : 得到年份
getHours : 得到小時(shí) 24小時(shí)進(jìn)制
getMinutes : 得到分鐘數(shù)
getSeconds : 得到秒數(shù)
getTime : 時(shí)間戳拾酝,毫秒數(shù)

    每一個(gè)都有對(duì)應(yīng)的設(shè)置方法,自己看看
    創(chuàng)建日期對(duì)象的方式
    // 創(chuàng)建當(dāng)前時(shí)間的時(shí)間對(duì)象
    d = new Date()
    // 根據(jù)指定的時(shí)間戳創(chuàng)建時(shí)間對(duì)象
    d = new Date(1534750144520)
    // 根據(jù)時(shí)間字符串創(chuàng)建時(shí)間對(duì)象
    d = new Date('2018/8/20 15:29:04')
    // 根據(jù)年月日時(shí)分秒值創(chuàng)建對(duì)象
    d = new Date(2018, 7, 20, 15, 29, 4)

5卡者、js簡(jiǎn)單演示
背景切換
核心:頁(yè)碼中有一個(gè)標(biāo)簽蒿囤,如果想給標(biāo)簽添加點(diǎn)擊事件,只需要寫onclick崇决,如果想添加其它的材诽,添加對(duì)應(yīng)事件即可底挫。在事件的后面就要寫代碼,通過(guò)js的DOM操作找到指定節(jié)點(diǎn)脸侥,將節(jié)點(diǎn)的屬性修改即可
6建邓、獲取對(duì)象
DOM操作,document object mxxx, 文檔操作湿痢,document就是整個(gè)文檔對(duì)象
document.getElementById 得到指定對(duì)象
document.getElementsByClassName 得到對(duì)象集合涝缝,符合類名要求的都可以得到
document.getElementsByName
document.getElementsByTagName 得到對(duì)象集合
7扑庞、常用事件
onmouseover :鼠標(biāo)移動(dòng)上去觸發(fā)
onmouseout : 鼠標(biāo)離開(kāi)的時(shí)候觸發(fā)
onmouseup : 鼠標(biāo)按下松開(kāi)的時(shí)候觸發(fā)
onmousedown : 鼠標(biāo)按下的時(shí)候觸發(fā)
onmousemove : 鼠標(biāo)移動(dòng)的時(shí)候觸發(fā)
onclick : 點(diǎn)擊的時(shí)候觸發(fā)
ondblclick : 雙擊的時(shí)候觸發(fā)
如下兩個(gè)用在input框中
onblur : 失去焦點(diǎn)
onfocus : 獲取焦點(diǎn)
8譬重、獲取、設(shè)置屬性和內(nèi)容
獲取屬性
odiv.id
odiv.className
odiv.style.width
odiv.style.height
odiv.style.backgroundColor
【注】在css中帶杠的屬性罐氨,到j(luò)s中都修改為小駝峰即可
獲取內(nèi)容
odiv.innerHTML 獲取標(biāo)簽里面的所有文本內(nèi)容臀规,帶標(biāo)簽
odiv.innerText 獲取標(biāo)簽里面的純文本內(nèi)容
點(diǎn)和中括號(hào)區(qū)別
能使用點(diǎn)的地方肯定能使用中括號(hào),能使用中括號(hào)的地方不一定能使用點(diǎn)
點(diǎn)后面只能跟屬性名
中括號(hào)里面可以寫屬性名字符串栅隐,也可以寫變量
顯示隱藏圖片
this使用
切換背景色
表單內(nèi)容控制
9塔嬉、onload函數(shù)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市租悄,隨后出現(xiàn)的幾起案子谨究,更是在濱河造成了極大的恐慌,老刑警劉巖泣棋,帶你破解...
    沈念sama閱讀 221,273評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件胶哲,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡潭辈,警方通過(guò)查閱死者的電腦和手機(jī)鸯屿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)把敢,“玉大人寄摆,你說(shuō)我怎么就攤上這事⌒拊蓿” “怎么了婶恼?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,709評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)柏副。 經(jīng)常有香客問(wèn)我熙尉,道長(zhǎng),這世上最難降的妖魔是什么搓扯? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,520評(píng)論 1 296
  • 正文 為了忘掉前任检痰,我火速辦了婚禮,結(jié)果婚禮上锨推,老公的妹妹穿的比我還像新娘铅歼。我一直安慰自己公壤,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,515評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布椎椰。 她就那樣靜靜地躺著厦幅,像睡著了一般。 火紅的嫁衣襯著肌膚如雪慨飘。 梳的紋絲不亂的頭發(fā)上确憨,一...
    開(kāi)封第一講書(shū)人閱讀 52,158評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音瓤的,去河邊找鬼休弃。 笑死,一個(gè)胖子當(dāng)著我的面吹牛圈膏,可吹牛的內(nèi)容都是我干的塔猾。 我是一名探鬼主播,決...
    沈念sama閱讀 40,755評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼稽坤,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼丈甸!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起尿褪,我...
    開(kāi)封第一講書(shū)人閱讀 39,660評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤睦擂,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后杖玲,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體顿仇,經(jīng)...
    沈念sama閱讀 46,203評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,287評(píng)論 3 340
  • 正文 我和宋清朗相戀三年天揖,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了夺欲。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,427評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡今膊,死狀恐怖些阅,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情斑唬,我是刑警寧澤市埋,帶...
    沈念sama閱讀 36,122評(píng)論 5 349
  • 正文 年R本政府宣布,位于F島的核電站恕刘,受9級(jí)特大地震影響缤谎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜褐着,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,801評(píng)論 3 333
  • 文/蒙蒙 一坷澡、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧含蓉,春花似錦频敛、人聲如沸项郊。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,272評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)着降。三九已至,卻和暖如春拗军,著一層夾襖步出監(jiān)牢的瞬間任洞,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,393評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工发侵, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留交掏,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,808評(píng)論 3 376
  • 正文 我出身青樓器紧,卻偏偏與公主長(zhǎng)得像耀销,于是被迫代替她去往敵國(guó)和親楼眷。 傳聞我的和親對(duì)象是個(gè)殘疾皇子铲汪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,440評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,221評(píng)論 0 3
  • 第2章 基本語(yǔ)法 2.1 概述 基本句法和變量 語(yǔ)句 JavaScript程序的執(zhí)行單位為行(line),也就是一...
    悟名先生閱讀 4,151評(píng)論 0 13
  • 第3章 基本概念 3.1 語(yǔ)法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡(jiǎn)單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,130評(píng)論 0 21
  • 前天跟昨天周六周日罐柳,過(guò)得特別充實(shí)掌腰。先是跟老公一起去泉舜看過(guò)設(shè)計(jì)圖,因?yàn)榈诙斓陸c张吉,約定周日再去齿梁。上午帶寶貝們?nèi)ゴ蟾?..
    華麗的美麗麗閱讀 193評(píng)論 0 0
  • 風(fēng)中搖曳的裙擺 斑駁的倒影 微光粼粼 好似你的眼 模糊了的記憶 已忘卻了你來(lái)時(shí)的樣子 紅色的波浪花邊在空中飛舞盤旋...
    張娜29閱讀 311評(píng)論 0 0