javaScript

1.數(shù)據(jù)類型：數(shù)值，文本，圖像，音頻，視頻....

所有數(shù)據(jù)類型都可以用var定義

number：

js不區(qū)分小數(shù)和整數(shù)，number

123 123.1 1.123e3 -99 NaN（not a number） Infinity(無限大）

字符串：‘a(chǎn)bc’ "abc"

布爾值：true，false

邏輯運(yùn)算：

&& 兩個(gè)都為真，結(jié)果為真 || 一個(gè)為真，結(jié)果為真！取反

比較運(yùn)算：

= ==等于（類型不一樣，值一樣，會(huì)判斷為true；盡量不用） ===絕對(duì)等于（類型一樣，值一樣，結(jié)果true）

null和undefine：

null:空　　　　undefine:未定義

數(shù)組：

java的數(shù)組必須是相同類型的對(duì)象~ ,js中不需要！取值超過索引值，顯示為undefine

var arr = [1,2,3,4,5]

1.長度：arr.length

注意：加入給arr.length賦值，數(shù)組大小就會(huì)發(fā)生變化~，如果賦值過小，元素就會(huì)丟失

arr.length=7

arr = [1,2,3,4,5,empty*2]

arr.length=3

arr = [1,2,3]

對(duì)象：

對(duì)象是大括號(hào)，數(shù)組是中括號(hào)；每個(gè)屬性之間用逗號(hào)隔開，最后一個(gè)屬性不需要加分號(hào)

Person person = new person（1,2,3）;

var person ={

name:"whily"，

age：18，

tags:['js','java','web','....']

}

2.原生JSON

JSON是JS對(duì)象的字符串表示法，他使用文本表示一個(gè)JS對(duì)象的信息，本質(zhì)是一個(gè)字符串；
javascript object notation
簡潔和清晰發(fā)層次結(jié)構(gòu)使得JSON成為理想的數(shù)據(jù)交換語言。
易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成，提高網(wǎng)絡(luò)傳輸?shù)男?/span>

js對(duì)象    var obj = {a:'hello',b:'world'}

json對(duì)象    var json ='{"a":"hello","b":"world"}'

JS對(duì)象標(biāo)記法

    作用
                    1)數(shù)據(jù)交換；
                    2)數(shù)據(jù)存儲(chǔ)；
    格式      
                    {"empno":"1006","ename":"張國榮"}

實(shí)現(xiàn)接送字符串轉(zhuǎn)換為JS對(duì)象，使用JSON.parse方法：

var obj=JSON.parse('{"a":"hello","b":"world"}');

結(jié)果是{a:'hello',b:'world'}

實(shí)現(xiàn)JS對(duì)象轉(zhuǎn)換為JSON字符串，使用JSON.stringify()方法

var json = JSON.stringify({a:'hello','b':'world'})

結(jié)果是{'{"a":"hello","b":"world"}'}

分類

　　json對(duì)象 {} json對(duì)象數(shù)組 []

用法　　　　　　　　　　　　　　　　

 1 對(duì)象里包含數(shù)組 {
 3 "emps": [{
 5 　　 "empno": 1001,
 7 　　 "ename": "王杰"
 9 },
11 {
13 　　"empno": 1002,
15 　　 "ename": "李連杰"
17 }]
}

json數(shù)組里可以包含json對(duì)象 ?

 1 {
 2     "emps": [{
 3             "empno": 1001,
 4             "ename": "王杰"
 5         },
 6         {
 7             "empno": 1002,
 8             "ename": "李連杰"
 9         }
10     ]
11 }

json數(shù)組里可以包含json對(duì)象

1 ? [
2 {"empno":"1006",
3 "ename":"張國榮"}, 
4 {
5 "empno":"2001",
6 "ename":"梅艷芳"
7 }
8 ] ? ?

? json對(duì)象里可以包含json數(shù)組 ?

 1  {
 2  "emps": [
 3 {
 4 "empno":"1006",
 5 "ename":"張國榮"
 6 },
 7 {
 8 "empno":"2001",
 9 "ename":"梅艷芳"
10 }
11 ]
12 }

3.Ajax(學(xué)習(xí)中）

原生的js寫法 xhr 異步請(qǐng)求
jquery封裝好的方法 $("#name").ajax("")
axios 請(qǐng)求

4.面向?qū)ο缶幊?/span>

　　JavaScript、java、c#.....面向?qū)ο螅籮avas有些區(qū)別！

類：模板
對(duì)象：集體的實(shí)例

在javascript需要換一下思維！

原型：_proto_:object

①所有引用類型都有一個(gè)__proto__(隱式原型)屬性，屬性值是一個(gè)普通的對(duì)象
②所有函數(shù)都有一個(gè)prototype(原型)屬性，屬性值是一個(gè)普通的對(duì)象
③所有引用類型的__proto__屬性指向它構(gòu)造函數(shù)的prototype

 1 var student = {
 2             name:"whily",
 3             age:3,
 4             study:function () {
 5                 console.log(this.name+"study...")
 6             }
 7         };
 8 
 9         var xiaoming ={
10             name:"xiaoming"
11         };
12 
13         //原型對(duì)象
14         xiaoming._proto_=student;

class關(guān)鍵字，是在ES6引入的

1.定義一個(gè)類，屬性，方法

 1 class Student{ 
 3 　　construtor(name){
 5　　　　 this.name = name;
 7 　　}
 9 　　　　hello(){
11 　　　　alert('hello')
13 　　　　}
15 }
xiaoming.hello()

2.原型鏈

5.操作BOM對(duì)象

1.window對(duì)象

window代表瀏覽器窗口

 1 window.alert(1)
 2 undefined
 3 window.innerHeight
 4 258
 5 window.innerwidth
 6 919
 7 window.outerHeight
 8 994
 9 window.outWidth
10 919
11 //可以調(diào)整瀏覽器窗口

2.Navigator

Navigator，封裝了瀏覽器信息

大多數(shù)我們不適用Navigator對(duì)象，因?yàn)闀?huì)被人修改！不建議使用這些屬性來判斷和編寫代碼

3.screen

代表屏幕的尺寸

screen.width    
1920
screen.height
1080

4.location（重要）

location代表當(dāng)前頁面的URL信息

1 host:"www.baidu.com"
2 href:"https://www.baidu.com/"
3 protocol:"https:"
4 reload:f reload()   //刷新
5 //設(shè)置新的地址
6 location.asigh('https://www.whily.com')

5.document

document代表當(dāng)前的頁面，HTML DOM文檔樹

1 document.title 
2 "百度一下，你就知道" 
3 document.title=‘whily’ 
4 "whily"

獲取具體的文檔樹節(jié)點(diǎn)

<dl id="app">
    <dt>java</dt>
    <dt>JavaSE</dt>
    <dt>javaEE</dt>
</dl>

<script>
    var dl=document.getElementById("app");
</script>

獲取cookie

document.cookie

劫持cookie原理

1 www.taobao.com
2 
3 <script src = "aa.js"></srcipt>
4 
5 惡意人員獲取你的cookie上傳到他的服務(wù)器
6 
7 服務(wù)器端合一設(shè)置cookie：httpOnly

6.history

history.back()//后退
history.forward()//前進(jìn)

6.操作DOM對(duì)象（核心）

瀏覽器網(wǎng)頁就是一個(gè)Dom樹形結(jié)構(gòu)！

更新：更新Dom節(jié)點(diǎn)
遍歷節(jié)點(diǎn)：得到Dom節(jié)點(diǎn)
刪除節(jié)點(diǎn)：刪除一個(gè)DOM節(jié)點(diǎn)
添加：添加一個(gè)新的節(jié)點(diǎn)

要操作一個(gè)DOM節(jié)點(diǎn)，就必須先獲得這個(gè)Dom節(jié)點(diǎn)

parentNode和parentElement區(qū)別

parentNode跟parentElement除了前者是w3c標(biāo)準(zhǔn)，后者只ie支持

當(dāng)父節(jié)點(diǎn)的nodeType不是1，即不是element節(jié)點(diǎn)的話，它的parentElement就會(huì)是null

一般情況parentNode可以取代parentElement的所有功能

parentElement匹配的是parent為element的情況，而parentNode匹配的則是parent為node的情況。element是包含在node里的，它的nodeType是1

獲取dom節(jié)點(diǎn)：原生代碼，后期使用jquery

<div id="father">
    <h1>標(biāo)題一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');
    var childrens = father.children;//獲取父節(jié)點(diǎn)下的所有子節(jié)點(diǎn)
</script>

更新節(jié)點(diǎn)：

<div id="father">
 
</div>

<script>
　　　　var father =document.getElementById('father');

 </script>

操作文本：

father.innerText=' '; //修改文本的值
father.innerText='<strong>123</strong>' 可以解析文本標(biāo)簽

操作css：

father.style.color='red';
father.style.padding = '2em'

刪除節(jié)點(diǎn)：

步驟：先獲取父節(jié)點(diǎn)，再通過父節(jié)點(diǎn)刪除自己
<div id="father">
    <h1>標(biāo)題一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var self = document.getElementsById('p1');
　　 var father = p1.parentElement;
    father.removeChild(self);

//刪除節(jié)點(diǎn)的時(shí)候是一個(gè)動(dòng)態(tài)過程；
father.removeChild(father.children[0])

father.removeChild(father.children[1])

father.removeChild(father.children[2])

</script>
注意：刪除多個(gè)節(jié)點(diǎn)時(shí)，children是在時(shí)刻變化的，刪除節(jié)點(diǎn)的時(shí)候一定要注意。

插入節(jié)點(diǎn)：

我們獲取了某個(gè)DOM節(jié)點(diǎn)，假設(shè)這個(gè)DOM節(jié)點(diǎn)是空的，我們通過innerHTML就可以增加一個(gè)元素了，但是這個(gè)DOM節(jié)點(diǎn)已經(jīng)存在了，我們就不能這么做！會(huì)覆蓋，應(yīng)該追加：

將已有的標(biāo)簽移動(dòng)：
<p id="js">js</p>
<div id="father">
    <h1>標(biāo)題一</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>

<script>
   var js = document.getElementById('js');
   var list = document.getElementById('father');
　　list,append(js);
</script>
創(chuàng)建一個(gè)新的節(jié)點(diǎn)

<script>
   var newNode = document.createElement('p3');   //標(biāo)簽名
   newNode.id = 'p3';　　　　　　　　　　　　　　　　　//id名
　　newNode.innweText = 'p3';　　　　　　　　　　　　　//內(nèi)容
　　list.append(newNode);　　　　　　　　　　　　　　　//添加
</script>

創(chuàng)建一個(gè)標(biāo)簽節(jié)點(diǎn)

var myscript = document.createElement('script');
myscript.setAttribute('type','text/javascript');
list.appendChild(myscript)；

7.操作表單（驗(yàn)證）

文本框 text
下拉框　　<select>
單選框　　radio
多選框 checkbox
隱藏域　　hidden
密碼框 password
.......

表單的目的，提交信息

document.getElementsByNam和document.getElementsById的區(qū)別：

Id得到單一值，Name得到數(shù)組

document.getElementsByName("name").value;
像這樣是獲取不到值的，彈出的消息是 underfined：
原因：
　　getElementById是element單數(shù)，
　　getElementsByName是elements復(fù)數(shù)。
正確方法：
var x=document.getElementsByName("name")[0].value;
或者：var x=document.getElementsById("id").value;

獲取值：

<form method="post" action="bootstrap.html">
    用戶名:<input type="text" name="username" value="22" id="aaa"><br>
　　 用戶名2:<input type="text" name="username" value="55" id="bbb"><br>
    密碼: <input type="password" name="password"><br>
    <button type="submit">提交</button>
</form>
<script>
var username = document.getElementsByName('username');
var aaa = document.getElementById('aaa').value;

console.log(username[0])    //<input type="text" name="username" value="22" id="aaa">

console.log(username)　　　　//

console.log(aaa)　　　　   　//22
</script>

對(duì)于單選框，多選框等等固定的值，.value只能得到當(dāng)前值

設(shè)置默認(rèn)值用checked

posted @ 2020-09-28 10:54 whily 閱讀(115) 評(píng)論(0) 收藏舉報(bào)

刷新頁面返回頂部

whily