2019-06-05 webapi第一天

01 web：網(wǎng)頁(yè)

? ? ? ? api：接口替裆，其實(shí)就是別人封裝好的一套方法（函數(shù)）校辩，用來(lái)實(shí)現(xiàn)對(duì)應(yīng)的功能窘问，我們不用管它這個(gè)方法里面是怎么寫(xiě)的辆童，只要調(diào)用就能實(shí)現(xiàn)對(duì)應(yīng)的功能。

? ? ? ? webAPI：一套用來(lái)操作網(wǎng)頁(yè)的方法和函數(shù)

? ? -->

02根據(jù)id來(lái)找到網(wǎng)頁(yè)元素

? ? <div id="box">我是div</div>

? ? <script>

? ? ? ? // 它會(huì)去找網(wǎng)頁(yè)里id名叫title的元素惠赫，找到以后會(huì)當(dāng)返回值返回

? ? ? ? var title =? document.getElementById('title');

? ? ? ? console.log(title);

? ? ? ? var box = document.getElementById('box');

? ? ? ? console.log(box);

03為什么script標(biāo)簽寫(xiě)在body快結(jié)束的位置

<!--

? ? ? ? js如果寫(xiě)在head里就找不到元素

? ? ? ? 規(guī)范寫(xiě)法：寫(xiě)在/body前面把鉴，也就是body結(jié)束位置的前面

? ? -->

</head>

<body>

? ? <div id="box">我是div</div>

? ? <script>

? ? ? ? ? ? // 1.如果找不到，這個(gè)方法會(huì)返回null

? ? ? ? ? ? // 2.如果JS代碼寫(xiě)在head里儿咱，找不到元素

? ? ? ? ? ? var box = document.getElementById('box');

? ? ? ? ? ? console.log(box);

04添加點(diǎn)擊事件

? ? 點(diǎn)擊事件：代表要等點(diǎn)擊才會(huì)觸發(fā)代碼

? ? ? ? 寫(xiě)法：

? ? ? ? ? ? 元素.onclick = function(){

? ? ? ? ? ? ? ? 點(diǎn)擊要觸發(fā)的代碼

? ? ? ? ? ? }

? ? ? ? ? ? 這個(gè)函數(shù)可以是匿名也可以是已經(jīng)聲明過(guò)的函數(shù)庭砍，但是如果是聲明過(guò)的函數(shù)，記得賦值時(shí)混埠，不要加括號(hào)

? ? -->

</head>

<body>

? ? <input type="button" value="點(diǎn)我啊" id="btn">

? ? <input type="button" value="點(diǎn)我2" id="btn2">

? ? <script>

? ? ? ? // 找到按鈕

? ? ? ? var btn = document.getElementById('btn');

? ? ? ? // 添加點(diǎn)擊事件

? ? ? ? // 當(dāng)btn被點(diǎn)擊的時(shí)候會(huì)來(lái)調(diào)用這個(gè)函數(shù)的函數(shù)體

? ? ? ? // btn.onclick = function(){

? ? ? ? //? ? alert(123);

? ? ? ? // }

? ? ? ? function test(){

? ? ? ? ? ? alert(123);

? ? ? ? }

? ? ? ? // 點(diǎn)擊事件給的函數(shù)怠缸，也可以是已經(jīng)存在的函數(shù)

? ? ? ? // 但是千萬(wàn)不要加括號(hào)

? ? ? ? // btn.onclick = test(); //錯(cuò)誤的(點(diǎn)擊后才發(fā)生,不是沒(méi)有點(diǎn)擊就發(fā)生)

? ? ? ? btn.onclick = test; //正確的

05點(diǎn)擊按鈕改掉所有p標(biāo)簽文字

<!--

? ? ? ? 偽（類(lèi)）數(shù)組：有下標(biāo)有元素有長(zhǎng)度可以被遍歷，但是沒(méi)有數(shù)組的那些方法钳宪，這種叫偽數(shù)組

? ? ? ? document.getElementsByTagName

? ? ? ? ? ? 根據(jù)標(biāo)簽獲取元素揭北，獲得是一個(gè)偽數(shù)組

? ? ? ? 元素.innerText

? ? ? ? ? ? 修改雙標(biāo)簽里面的文字

? ? -->

</head>

<body>

? ? <input type="button" value="修改文字" id="btn">

? ? <p>我是p標(biāo)簽1</p>

? ? <p>我是p標(biāo)簽2</p>

? ? <p>我是p標(biāo)簽3</p>

? ? <p>我是p標(biāo)簽4</p>

? ? <p>我是p標(biāo)簽5</p>

? ? <p>我是p標(biāo)簽6</p>

? ? <p>我是p標(biāo)簽7</p>

? ? <p>我是p標(biāo)簽8</p>

? ? <p>我是p標(biāo)簽9</p>

? ? <p>我是p標(biāo)簽10</p>

? ? <script>

? ? ? ? //找到按鈕

? ? ? ? var btn = document.getElementById('btn');

? ? ? ? // 找到所有p標(biāo)簽(根據(jù)標(biāo)簽名找元素)

? ? ? ? // 找到所有的p標(biāo)簽扳炬，返回值是一個(gè)偽數(shù)組

? ? ? ? var pList = document.getElementsByTagName('p');

? ? ? ? // console.log(pList);

? ? ? ? // pList.push(190);

? ? ? ? //給按鈕加點(diǎn)擊事件

? ? ? ? btn.onclick = function(){

? ? ? ? ? ? for(var i = 0; i < pList.length; i++){

? ? ? ? ? ? ? ? // console.log(pList[i]);

? ? ? ? ? ? ? ? // innerText修改雙標(biāo)簽里面的文字

? ? ? ? ? ? ? ? pList[i].innerText = '我修改了';

? ? ? ? ? ? }

? ? ? ? }

06換圖片

?

</head>

<body>

? ? <input type="button" value="換圖片" id="btn">

? ? <hr>

? ? <img id="icon" src="images/xk.png" alt="">

? ? <script>

? ? ? ? // 找到按鈕

? ? ? ? var btn = document.getElementById('btn');

? ? ? ? // 找到img

? ? ? ? var icon = document.getElementById('icon');

? ? ? ? // 給按鈕加點(diǎn)擊事件

? ? ? ? btn.onclick = function(){

? ? ? ? ? ? //修改img的src

? ? ? ? ? ? icon.src = 'images/wm.png';

? ? ? ? }

07用js操作類(lèi)ming

<!--

? ? ? ? className ：獲取類(lèi)名

? ? ? ? className 也可以重新賦值

? ? ? ? 如果用 += 代表添加一個(gè)類(lèi)，但是記得類(lèi)前面要加空格

? ? ? ? 如果要刪除一個(gè)類(lèi)搔体，就要給它重新賦值恨樟，賦值的時(shí)候，少掉那一個(gè)要?jiǎng)h的類(lèi)就行了

? ? -->

? ? <style>

? ? ? ? .box{

? ? ? ? ? ? width: 100px;

? ? ? ? ? ? height: 100px;

? ? ? ? }

? ? ? ? .border{

? ? ? ? ? ? border: 1px solid #000;

? ? ? ? }

? ? ? ? .green{

? ? ? ? ? ? background-color: green;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <input type="button" value="獲取類(lèi)名" id="btn1">

? ? <input type="button" value="添加一個(gè)類(lèi)變綠" id="btn2">

? ? <input type="button" value="刪掉一個(gè)類(lèi)清掉綠色" id="btn3">

? ? <div id="box" class="box border"></div>

? ? <script>

? ? ? ? // 找到div

? ? ? ? var box = document.getElementById('box');

? ? ? ? //找到按鈕疚俱，給它加點(diǎn)擊事件

? ? ? ? document.getElementById('btn1').onclick = function(){

? ? ? ? ? ? //? 獲取div的類(lèi)

? ? ? ? ? ? console.log(box.className);

? ? ? ? }

? ? ? ? //找到第二個(gè)按鈕劝术，給它加點(diǎn)擊事件

? ? ? ? document.getElementById('btn2').onclick = function(){

? ? ? ? ? ? // 給div加一個(gè)類(lèi)

? ? ? ? ? ? // box.className = "box border green";

? ? ? ? ? ? // 添加一個(gè)類(lèi)，記得添加類(lèi)的時(shí)候前面要加空格

? ? ? ? ? ? box.className += " green";

? ? ? ? }

? ? ? ? // 找到第三個(gè)按鈕呆奕，加點(diǎn)擊事件

? ? ? ? document.getElementById('btn3').onclick = function(){

? ? ? ? ? ? // 所有的-都是當(dāng)數(shù)字來(lái)運(yùn)算

? ? ? ? ? ? // box.className -= " green";? //相當(dāng)于 box.className = box.className - " green";

? ? ? ? ? ? box.className = "box border";

? ? ? ? };

08顯示與隱藏的案例

? <!--

? ? ? ? 找到元素的方法：

? ? ? ? ? ? document.getElementById

? ? ? ? ? ? document.getElementsByTagName?

? ? ? ? ? ? document.getElementsByClassName

? ? -->

? ? <style>

? ? ? ? .box{

? ? ? ? ? ? width: 100px;

? ? ? ? ? ? height: 100px;

? ? ? ? ? ? background-color: #f00;

? ? ? ? }

? ? ? ? .hide{

? ? ? ? ? ? display: none;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <input type="button" value="顯示" id="show">

? ? <input type="button" value="隱藏" id="hide">

? ? <div class="box"></div>

? ? <script>

? ? ? ? // 根據(jù)類(lèi)名獲取元素,它返回的也是偽數(shù)組

? ? ? ? var res = document.getElementsByClassName('box')[0];

? ? ? ? console.log(res);

? ? ? ? // 隱藏按鈕的點(diǎn)擊事件

? ? ? ? document.getElementById('hide').onclick = function(){

? ? ? ? ? ? //給div加一個(gè)類(lèi)hide

? ? ? ? ? ? res.className += ' hide';

? ? ? ? };

? ? ? ? // 顯示按鈕的點(diǎn)擊事件

? ? ? ? document.getElementById('show').onclick = function(){

? ? ? ? ? ? res.className = "box";

? ? ? ? }

09一個(gè)按鈕做顯示與隱藏

? <style>

? ? ? ? .box {

? ? ? ? ? ? width: 100px;

? ? ? ? ? ? height: 100px;

? ? ? ? ? ? background-color: #f00;

? ? ? ? }

? ? ? ? .hide {

? ? ? ? ? ? display: none;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <input type="button" value="隱藏" id="btn">

? ? <div class="box"></div>

? ? <script>

? ? ? ? // 找按鈕

? ? ? ? var btn = document.getElementById('btn');

? ? ? ? // 找div

? ? ? ? var box = document.getElementsByClassName('box')[0];

? ? ? ? // 給按鈕加點(diǎn)擊事件

? ? ? ? btn.onclick = function () {

? ? ? ? ? ? if (btn.value == "隱藏") {

? ? ? ? ? ? ? ? // 隱藏div

? ? ? ? ? ? ? ? box.className += ' hide';

? ? ? ? ? ? ? ? // 修改按鈕文字變顯示

? ? ? ? ? ? ? ? btn.value = "顯示";

? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? // 顯示div

? ? ? ? ? ? ? ? box.className = "box";

? ? ? ? ? ? ? ? // 修改按鈕文字變隱藏

? ? ? ? ? ? ? ? btn.value = "隱藏";

? ? ? ? ? ? }

? ? ? ? }

10隔行變色

? <style>

? ? ? ? .green{

? ? ? ? ? ? background-color: yellowgreen;

? ? ? ? }

? ? ? ? .hotpink{

? ? ? ? ? ? background-color: hotpink;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <ul>

? ? ? ? <li>隔壁老王1</li>

? ? ? ? <li>隔壁老王2</li>

? ? ? ? <li>隔壁老王3</li>

? ? ? ? <li>隔壁老王4</li>

? ? ? ? <li>隔壁老王5</li>

? ? ? ? <li>隔壁老王6</li>

? ? ? ? <li>隔壁老王7</li>

? ? ? ? <li>隔壁老王8</li>

? ? ? ? <li>隔壁老王9</li>

? ? ? ? <li>隔壁老王10</li>

? ? </ul>

? ? <script>

? ? ? ? // 找到所有的li

? ? ? ? var liList = document.getElementsByTagName('li');

? ? ? ? // console.log(liList);

? ? ? ? for(var i = 0; i < liList.length; i++){

? ? ? ? ? ? if( i % 2 == 0)

? ? ? ? ? ? ? ? liList[i].className = "green";

? ? ? ? ? ? else

? ? ? ? ? ? ? ? liList[i].className = "hotpink";

? ? ? ? }

11省略大括號(hào)的問(wèn)題

<!--

? ? ? ? 如果if和else語(yǔ)句塊里的語(yǔ)句只有一句話(huà)养晋，那么大括號(hào)可以省略

? ? ? ? if(條件)

? ? ? ? ? ? 1句話(huà)

? ? ? ? else

? ? ? ? ? ? 1句話(huà)

? ? ? ? if和循環(huán)語(yǔ)句，如果語(yǔ)句塊里只有1句話(huà)登馒，那么大括號(hào)可以省略匙握，但是函數(shù)，無(wú)論如何不能省略大括號(hào)

? ? -->

? ? <script>

? ? ? ? //? var age = 19;

? ? ? ? //? if( age >= 18 )

? ? ? ? //? ? ? alert('成年了陈轿，可以進(jìn)網(wǎng)吧了');

? ? ? ? //? else

? ? ? ? //? ? ? alert('未成年圈纺，滾出');

? ? ? ? // alert('哈哈哈哈哈啊');

? ? ? ? // for(var i = 0; i < 5; i++)

? ? ? ? //? ? alert(i);

? ? ? ? // alert('結(jié)束了');

? ? ? ? function test(){

? ? ? ? ? ? alert(123);

? ? ? ? }

? ? ? ? test();

12用js直接修改樣式

? ? ? ? 在JS里要修改樣式，都是操作style屬性

? ? ? ? ? ? 元素.style.樣式屬性名 = 值;

? ? ? ? 例：

? ? ? ? ? ? 元素.style.width = "300px";

? ? ? ? 注意：css屬性怎么寫(xiě)麦射，JS還是怎么寫(xiě)蛾娶，但是如果css里的屬性名有-，那么要把-去掉潜秋，并且-后面首字母大寫(xiě)

? ? ? ? 例：

? ? ? ? ? ? 元素.style.backgroundColor = "red";

? ? -->

? ? <style>

? ? ? ? .box {

? ? ? ? ? ? width: 100px;

? ? ? ? ? ? height: 100px;

? ? ? ? ? ? border: 1px solid black;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <input type="button" value="添加背景顏色" id="btn1">

? ? <input type="button" value="寬高都到300" id="btn2">

? ? <input type="button" value="修改透明度" id="btn3">

? ? <input type="button" value="修改上間距" id="btn4">

? ? <div class="box"></div>

? ? <script>

? ? ? ? //找到按鈕

? ? ? ? var btn = document.getElementById('btn1');

? ? ? ? //找到div

? ? ? ? var box = document.getElementsByClassName('box')[0];

? ? ? ? //按鈕的點(diǎn)擊事件

? ? ? ? btn.onclick = function(){

? ? ? ? ? ? // console.log(box.style);

? ? ? ? ? ? // 在JS里蛔琅，會(huì)把-去掉，然后把-后面的首字母大寫(xiě)

? ? ? ? ? ? box.style.backgroundColor = "red";

? ? ? ? }

? ? ? ? // 變寬變高的點(diǎn)擊事件

? ? ? ? document.getElementById('btn2').onclick = function(){

? ? ? ? ? ? box.style.width = "300px";

? ? ? ? ? ? box.style.height = "300px";

? ? ? ? }

? ? ? ? // 修改透明度

? ? ? ? document.getElementById('btn3').onclick = function(){

? ? ? ? ? ? box.style.opacity = 0.3;

? ? ? ? }

? ? ? ? // 修改上間距

? ? ? ? document.getElementById('btn4').onclick = function(){

? ? ? ? ? ? box.style.marginTop = "150px";

? ? ? ? }

13顯示和隱藏二維碼

<!--

? ? ? ? 鼠標(biāo)移入事件：onmouseover

? ? ? ? ? ? 移入才觸發(fā)

? ? ? ? 鼠標(biāo)移出事件：onmouseout

? ? ? ? ? ? 移出才觸發(fā)

? ? -->

? ? <style>

? ? ? ? .small{

? ? ? ? ? ? width: 50px;

? ? ? ? ? ? height: 50px;

? ? ? ? ? ? background:url(images/bgs.png) no-repeat -159px -51px;

? ? ? ? ? ? position: fixed;

? ? ? ? ? ? right:0;

? ? ? ? ? ? top:50%;

? ? ? ? ? ? margin-top: -25px;

? ? ? ? }

? ? ? ? #big{

? ? ? ? ? ? width: 210px;

? ? ? ? ? ? position: absolute;

? ? ? ? ? ? left: -210px;

? ? ? ? ? ? display: none;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <div class="small">

? ? ? ? <img id="big" src="images/hmewm.jpg" alt="">

? ? </div>

? ? <script>

? ? ? ? // 找到小圖

? ? ? ? var small = document.getElementsByClassName('small')[0];

? ? ? ? // 找到大圖

? ? ? ? var big = document.getElementById('big');

? ? ? ? // 鼠標(biāo)移入事件

? ? ? ? small.onmouseover = function(){

? ? ? ? ? ? big.style.display = "block";

? ? ? ? }

? ? ? ? // 鼠標(biāo)移出事件

? ? ? ? small.onmouseout = function(){

? ? ? ? ? ? big.style.display = "none";

? ? ? ? }

14事件里的this

? <!--

? ? ? ? 之前學(xué)的JS里的this：誰(shuí)調(diào)用方法峻呛，方法里的this就是誰(shuí)

? ? ? ? 如果是直接調(diào)用函數(shù)罗售，前面沒(méi)有加任何前綴，那么this是window

? ? -->

? ? <style>

? ? ? ? .box{

? ? ? ? ? ? width: 100px;

? ? ? ? ? ? height: 100px;

? ? ? ? ? ? background-color: #f00;;

? ? ? ? }

? ? </style>

? ? <script>

? ? ? ? // 復(fù)習(xí)JS部分

? ? ? ? // function f1(){

? ? ? ? //? ? console.log(this);

? ? ? ? // }

? ? ? ? // var obj1 = { name:"jack" };

? ? ? ? // var obj2 = { name:"rose" };

? ? ? ? // obj1.test = f1;

? ? ? ? // obj1.test();

? ? ? ? // obj2.test = f1;

? ? ? ? // obj2.test();

? ? ? ? // f1();//window

? ? </script>

</head>

<body>

? ? <input type="button" value="點(diǎn)我啊" id="btn">

? ? <div class="box"></div>

? ? <script>

? ? ? ? // webAPI的事件里this:誰(shuí)觸發(fā)事件,事件里的this就是誰(shuí)

? ? ? ? //找到btn

? ? ? ? var btn = document.getElementById('btn');

? ? ? ? btn.onclick = function(){

? ? ? ? ? ? console.log(this);

? ? ? ? }

? ? ? ? // 找到div

? ? ? ? var box = document.getElementsByClassName('box')[0];

? ? ? ? box.onclick = function(){

? ? ? ? ? ? console.log(this);

? ? ? ? }

15隔行變色與移入變色

<ul>

? ? ? ? <li>隔壁老王1</li>

? ? ? ? <li>隔壁老王2</li>

? ? ? ? <li>隔壁老王3</li>

? ? ? ? <li>隔壁老王4</li>

? ? ? ? <li>隔壁老王5</li>

? ? ? ? <li>隔壁老王6</li>

? ? ? ? <li>隔壁老王7</li>

? ? ? ? <li>隔壁老王8</li>

? ? ? ? <li>隔壁老王9</li>

? ? ? ? <li>隔壁老王10</li>

? ? </ul>

? ? <script>

? ? ? ? // 變量聲明到外面才能訪問(wèn)钩述，這個(gè)變量用來(lái)保存原來(lái)的顏色

? ? ? ? var oldColor;

? ? ? ? // 找到所有的li

? ? ? ? var liList = document.getElementsByTagName('li');

? ? ? ? // 遍歷所有的li

? ? ? ? for (var i = 0; i < liList.length; i++) {

? ? ? ? ? ? // console.log(liList[i]);

? ? ? ? ? ? // 偶數(shù)行一個(gè)顏色寨躁，奇數(shù)行一個(gè)顏色

? ? ? ? ? ? if (i % 2 == 0)

? ? ? ? ? ? ? ? liList[i].style.backgroundColor = "yellowgreen";

? ? ? ? ? ? else

? ? ? ? ? ? ? ? liList[i].style.backgroundColor = "hotpink";

? ? ? ? ? ? // 給每個(gè)li加鼠標(biāo)移入事件

? ? ? ? ? ? liList[i].onmouseover = function () {

? ? ? ? ? ? ? ? // 把它原本的顏色存起來(lái)

? ? ? ? ? ? ? ? oldColor = this.style.backgroundColor;

? ? ? ? ? ? ? ? // 誰(shuí)移入this就是誰(shuí)

? ? ? ? ? ? ? ? // 誰(shuí)移入就把誰(shuí)背景顏色變紅

? ? ? ? ? ? ? ? this.style.backgroundColor = "red";

? ? ? ? ? ? }

? ? ? ? ? ? // 給每個(gè)li加鼠標(biāo)移出事件

? ? ? ? ? ? liList[i].onmouseout = function () {

? ? ? ? ? ? ? ? // 誰(shuí)移出，誰(shuí)的背景顏色就恢復(fù)

? ? ? ? ? ? ? ? this.style.backgroundColor = oldColor;

? ? ? ? ? ? }

? ? ? ? }

16禁用和啟用表單元素

<!--

? ? ? ? 如果加了disabled那么就代表禁用牙勘，它不用給屬性值职恳，只要加上就有效果，不加就沒(méi)有效果

? ? ? ? 像這樣不用給屬性值方面，只要寫(xiě)上就有效果的屬性還有：

? ? ? ? ? ? checked

? ? ? ? ? ? selected

? ? -->

? ? <input type="text">

? ? <input type="password">

? ? <input type="checkbox">

? ? <input type="button" value="按鈕">

? ? <input type="radio">

? ? <hr>

? ? <button id="btn1">禁用</button>

? ? <button id="btn2">啟用</button>

? ? <script>

? ? ? ? // 找到所有的表單元素

? ? ? ? var list = document.getElementsByTagName('input');

? ? ? ? // console.log(list);

? ? ? ? // 禁用的點(diǎn)擊事件

? ? ? ? document.getElementById('btn1').onclick = function () {

? ? ? ? ? ? // 要把所有表單元素都禁用放钦，所以要遍歷

? ? ? ? ? ? for (var i = 0; i < list.length; i++) {

? ? ? ? ? ? ? ? // true是代表讓它有一個(gè)disabled屬性

? ? ? ? ? ? ? ? list[i].disabled = true;

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? // 啟用的點(diǎn)擊事件

? ? ? ? document.getElementById('btn2').onclick = function () {

? ? ? ? ? ? // 要把所有表單元素都禁用，所以要遍歷

? ? ? ? ? ? for (var i = 0; i < list.length; i++) {

? ? ? ? ? ? ? ? // false是代表讓它沒(méi)有disabled屬性

? ? ? ? ? ? ? ? list[i].disabled = false;

? ? ? ? ? ? }

? ? ? ? }

17一個(gè)元素禁用和啟用

<!--

? ? ? ? 如果加了disabled那么就代表禁用恭金，它不用給屬性值操禀，只要加上就有效果，不加就沒(méi)有效果

? ? ? ? 像這樣不用給屬性值横腿，只要寫(xiě)上就有效果的屬性還有：

? ? ? ? ? ? checked

? ? ? ? ? ? selected

? ? -->

? ? <input type="text">

? ? <input type="password">

? ? <input type="checkbox">

? ? <input type="button" value="按鈕">

? ? <input type="radio">

? ? <hr>

? ? <button id="btn1">禁用</button>

? ? <script>

? ? ? ? // 找到所有的表單元素

? ? ? ? var list = document.getElementsByTagName('input');

? ? ? ? // 點(diǎn)擊事件

? ? ? ? document.getElementById('btn1').onclick = function () {

? ? ? ? ? ? // 如果按鈕文字是禁用

? ? ? ? ? ? // if (this.innerText == "禁用") {

? ? ? ? ? ? //? ? //遍歷元素

? ? ? ? ? ? //? ? for (var i = 0; i < list.length; i++) {

? ? ? ? ? ? //? ? ? ? // 讓所有表單disabled為true

? ? ? ? ? ? //? ? ? ? list[i].disabled = true;

? ? ? ? ? ? //? ? }

? ? ? ? ? ? //? ? //改完后按鈕文字變啟用

? ? ? ? ? ? //? ? this.innerText = "啟用";

? ? ? ? ? ? // } else {

? ? ? ? ? ? //? ? //else里做相反的事就行了

? ? ? ? ? ? //? ? for (var i = 0; i < list.length; i++) {

? ? ? ? ? ? //? ? ? ? list[i].disabled = false;

? ? ? ? ? ? //? ? }

? ? ? ? ? ? //? ? this.innerText = "禁用";

? ? ? ? ? ? // }

? ? ? ? ? ? for (var i = 0; i < list.length; i++) {

? ? ? ? ? ? ? ? // 如果文字等于禁用才給true颓屑，否則給false

? ? ? ? ? ? ? ? // ==的結(jié)果本來(lái)就是true或false

? ? ? ? ? ? ? ? list[i].disabled = this.innerText == '禁用';

? ? ? ? ? ? }

? ? ? ? ? ? // 它們先算的是右邊得到一個(gè)結(jié)果辙培，要么是禁用要么是啟用，然后重新賦值給按鈕

? ? ? ? ? ? // 如果原來(lái)是禁用邢锯，就會(huì)重新賦值為啟用扬蕊，如果原來(lái)是啟用，就會(huì)重新賦值為禁用

? ? ? ? ? ? this.innerText = this.innerText == "禁用" ? "啟用" : "禁用";

18總結(jié)找元素的方法和總結(jié)

<!--

? ? ? ? document.getElementById

? ? ? ? ? ? ? ? 直接返回元素對(duì)象丹擎，找不到返回null

? ? ? ? 下面這些方法：無(wú)論如何返回的一定都是偽數(shù)組尾抑，找到幾個(gè)就返回長(zhǎng)度為幾的偽數(shù)組

? ? ? ? ? ? document.getElementsByTagName：根據(jù)標(biāo)簽名來(lái)找

? ? ? ? ? ? document.getElementsByClassName：根據(jù)類(lèi)名來(lái)找，有兼容問(wèn)題蒂培，IE8和之前的瀏覽器不支持

? ? ? ? ? ? document.getElementsByName：根據(jù)name屬性來(lái)找,在新瀏覽器里所有元素都能找到再愈，但是在IE8里只能找到表單元素

? ? -->

</head>

<body>

? ?

? ?

? ? <form action="#">(提交的地址,#默認(rèn)提交到本地)

? ? ? ?

? ? ? ? <!-- <input type="text" placeholder="請(qǐng)輸入姓名" name="chk">

? ? ? ? <input type="text" placeholder="請(qǐng)輸入年齡" name="chk"> -->

? ? ? ? 男<input type="radio" name="sex">

? ? ? ? 女<input type="radio" name="sex">

? ? ? ? 蔡徐坤<input type="radio" name="sex">

? ? ? ? <input type="submit">

? ? </form>

? ? <div name="sex"></div>

? ? <script>

? ? ? ? // var res = document.getElementById('test');

? ? ? ? // console.log(res); //返回的這個(gè)div對(duì)象

? ? ? ? //

? ? ? ? // var res = document.getElementsByTagName('div');

? ? ? ? // console.log(res);

? ? ? ? var res = document.getElementsByClassName('box');

? ? ? ? console.log(res);

? ? ? ? // var res = document.getElementsByName('sex');

? ? ? ? // console.log(res);

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市护戳，隨后出現(xiàn)的幾起案子翎冲，更是在濱河造成了極大的恐慌，老刑警劉巖媳荒，帶你破解...
沈念sama閱讀 216,591評(píng)論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件抗悍，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡钳枕，警方通過(guò)查閱死者的電腦和手機(jī)缴渊，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,448評(píng)論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)鱼炒，“玉大人衔沼，你說(shuō)我怎么就攤上這事∥羟疲” “怎么了指蚁？”我有些...
開(kāi)封第一講書(shū)人閱讀 162,823評(píng)論 0贊 353
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)自晰。經(jīng)常有香客問(wèn)我凝化，道長(zhǎng)，這世上最難降的妖魔是什么缀磕？我笑而不...
開(kāi)封第一講書(shū)人閱讀 58,204評(píng)論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任缘圈，我火速辦了婚禮劣光，結(jié)果婚禮上袜蚕，老公的妹妹穿的比我還像新娘。我一直安慰自己绢涡，他們只是感情好牲剃，可當(dāng)我...
茶點(diǎn)故事閱讀 67,228評(píng)論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著雄可，像睡著了一般凿傅。火紅的嫁衣襯著肌膚如雪缠犀。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書(shū)人閱讀 51,190評(píng)論 1贊 299
城市分裂傳說(shuō)
那天聪舒，我揣著相機(jī)與錄音辨液，去河邊找鬼。笑死箱残，一個(gè)胖子當(dāng)著我的面吹牛滔迈，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播被辑，決...
沈念sama閱讀 40,078評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼燎悍，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了盼理？” 一聲冷哼從身側(cè)響起谈山，我...
開(kāi)封第一講書(shū)人閱讀 38,923評(píng)論 0贊 274
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎宏怔，沒(méi)想到半個(gè)月后奏路，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,334評(píng)論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡臊诊，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,550評(píng)論 2贊 333
?白月光啟示錄
正文我和宋清朗相戀三年思劳，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片妨猩。...
茶點(diǎn)故事閱讀 39,727評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡潜叛，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出壶硅，到底是詐尸還是另有隱情威兜，我是刑警寧澤，帶...
沈念sama閱讀 35,428評(píng)論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布庐椒，位于F島的核電站椒舵，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏约谈。R本人自食惡果不足惜笔宿，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,022評(píng)論 3贊 326
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望棱诱。院中可真熱鬧泼橘，春花似錦、人聲如沸迈勋。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 31,672評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)靡菇。三九已至重归，卻和暖如春米愿，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背鼻吮。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 32,826評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工育苟，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人椎木。一個(gè)月前我還...
沈念sama閱讀 47,734評(píng)論 2贊 368
代替公主和親
正文我出身青樓宙搬，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親拓哺。傳聞我的和親對(duì)象是個(gè)殘疾皇子勇垛，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,619評(píng)論 2贊 354

2019-06-05 webapi第一天

01 web：網(wǎng)頁(yè)

02根據(jù)id來(lái)找到網(wǎng)頁(yè)元素

03為什么script標(biāo)簽寫(xiě)在body快結(jié)束的位置

04添加點(diǎn)擊事件

05點(diǎn)擊按鈕改掉所有p標(biāo)簽文字

06換圖片

07用js操作類(lèi)ming

08顯示與隱藏的案例

09一個(gè)按鈕做顯示與隱藏

10隔行變色

11省略大括號(hào)的問(wèn)題

12用js直接修改樣式

13顯示和隱藏二維碼

14事件里的this

15隔行變色與移入變色

16禁用和啟用表單元素

17一個(gè)元素禁用和啟用

18總結(jié)找元素的方法和總結(jié)

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