js獲取值操作、js類屬性操作、事件-有解無憂

js獲取值操作
- 1.獲取用戶資料標簽內部的資料
js類操作
- 1.獲取標簽所有的類屬性（classList）
- 2.增加某個屬性（add）
- 3.移除某個屬性（remove）
- 4.驗證是否包含某個類屬性（contains）
- 5.有則洗掉無則添加（toggle）
js樣式操作
- 1.js操作css屬性的規律
- 2.指定css操作
事件
- 1.事件可以簡單的理解為是給html標簽系結了一些額外的功能(能夠觸發js代碼的運行)
- 2.系結事件的兩種方式
  - 系結事件的方式1:提前寫好函式標簽內部指定
  - 系結事件的方式2:先查找標簽然后批量系結
  - 3.事件中的this
window.onload
JS事件案例校驗用戶輸入展示
JS事件案例省市聯動

js獲取值操作

1.獲取用戶資料標簽內部的資料

--->HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1" name="">
<input type="text" name="gender" value="https://www.cnblogs.com/zxr1002/p/male" id="d2">男
<input type="text" name="gender" value="https://www.cnblogs.com/zxr1002/p/female" id="d3">女

<select name="" id="d4">
  <option value="https://www.cnblogs.com/zxr1002/p/111">1</option>
  <option value="https://www.cnblogs.com/zxr1002/p/222">2</option>
  <option value="https://www.cnblogs.com/zxr1002/p/333">3</option>
</select>

<input type="file" name="file" id="d5">
</body>
</html>

--->js代碼
# 獲取到輸入框
let i1Ele = document.getElementById('d1')
# 查看它的值，可以動態的獲取到前端輸入的資訊
i1Ele.value
''
i1Ele.value
'jason'
# 獲取選擇框
let o4Ele = document.getElementById('d4')
# 獲取到的是Value里面的值，前端看到的1，是我們設定的前端所展示內容
o4Ele.value
'111'

注意：關于獲取用戶上傳的檔案資料

let i5Ele = document.getElementById('d5')
# 獲取到的只是我們自己電腦上的位置，沒什么用處
i5Ele.value
'C:\\fakepath\\02 資料存取演變史.mp4'
# 獲取檔案的資訊
fileEle.files  # 陣列  [檔案物件,檔案物件1...]
# 這里它顯示了里面有一個物件
FileList {0: File, length: 1}
0: File
lastModified: 1660266516578
lastModifiedDate: Fri Aug 12 2022 09:08:36 GMT+0800 (中國標準時間) {}
name: "02 資料存取演變史.mp4"
size: 53558043
type: "video/mp4"
webkitRelativePath: ""
[[Prototype]]: File
length: 1
[[Prototype]]: FileList

獲取檔案資料（需要通過索引取值）

i5Ele.files[0]
File {name: '02 資料存取演變史.mp4', lastModified: 1660266516578, lastModifiedDate: Fri Aug 12 2022 09:08:36 GMT+0800 (中國標準時間), webkitRelativePath: '', size: 53558043, …}
lastModified: 1660266516578
lastModifiedDate: Fri Aug 12 2022 09:08:36 GMT+0800 (中國標準時間) {}
name: "02 資料存取演變史.mp4"
size: 53558043
type: "video/mp4"
webkitRelativePath: ""
[[Prototype]]: File

js獲取值總結

普通資料(輸入、選擇)
	標簽物件.value
檔案資料(上傳)
	標簽物件.files
	標簽物件.files[0]

js類操作

1.獲取標簽所有的類屬性（classList）

1.生成變數名物件
let divEle = document.getElementsByClassName('c1')

2.獲取標簽所有的類屬性
divEle.classList
DOMTokenList(3) ['c1', 'c2', 'c3', value: 'c1 c2 c3']

2.增加某個屬性（add）

divEle.classList.add('c4')
divEle
<div ></div>

3.移除某個屬性（remove）

divEle.classList.remove('c4')
divEle
<div ></div>

4.驗證是否包含某個類屬性（contains）

divEle.classList.contains('c3')
true
'回傳的是true或者false'

5.有則洗掉無則添加（toggle）

divEle.classList.toggle('c3')
true
divEle.classList.toggle('c3')
false

js樣式操作

只要想操作標簽css先用style起手(DOM操作操作標簽樣式)

1.js操作css屬性的規律

對于沒有中橫線的css屬性一般直接使用style屬性名即可

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.對含有中橫線的CSS屬性，將中橫線后面的第一個字母換成大寫即可

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

2.指定css操作

let pEle = document.getElementsByTagName('p')[0]
pEle.style.backgroundColor = 'red'
'red'

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript，下面是一個屬性串列，這些屬性可插入 HTML 標簽來定義事件動作，

1.事件可以簡單的理解為是給html標簽系結了一些額外的功能(能夠觸發js代碼的運行)

常用事件

onclick        當用戶點擊某個物件時呼叫的事件句柄，
ondblclick     當用戶雙擊某個物件時呼叫的事件句柄，

onfocus        元素獲得焦點，               // 練習：輸入框
onblur         元素失去焦點，               應用場景：用于表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變，             應用場景：通常用于表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下，          應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下并松開，
onkeyup        某個鍵盤按鍵被松開，
onload         一張頁面或一幅影像完成加載，
onmousedown    滑鼠按鈕被按下，
onmousemove    滑鼠被移動，
onmouseout     滑鼠從某元素移開，
onmouseover    滑鼠移到某元素之上，

onselect       在文本框中的文本被選中時發生，
onsubmit       確認按鈕被點擊，使用的物件是form，

2.系結事件的兩種方式

系結事件的方式1:提前寫好函式標簽內部指定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="https://www.cnblogs.com/zxr1002/p/點我有驚喜" onclick="func1()">
<button>按一下給你蹦倆糖出來</button>
<script>
  function func1(){
    alert('喜提一個大胖小子！')
  }
</script>
</body>
</html>

系結事件的方式2:先查找標簽然后批量系結

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="https://www.cnblogs.com/zxr1002/p/點我有驚喜" onclick="func1()">
<button id="d1">按一下給你蹦倆糖出來</button>
<script>
  // function func1(){
  //   alert('喜提一個大胖小子！')
  // }
  let btnEle = document.getElementById('d1')
  btnEle.onclick = function func1(){
    alert('注意：吃糖容易長蛀牙，還是別吃了！')
  }
</script>
</body>
</html>

3.事件中的this

let btnEle = document.getElementById('d1')
  btnEle.onclick = function func2(){
    alert('注意：吃糖容易長蛀牙，還是別吃了！')
    console.log(this)
  }

this指代的是當前被操作的標簽物件,以后我們在一些復雜的代碼的時候，需要在代碼中反復的用到這個標簽，就可以用this倆快速的指代，類似于面向物件中的self就是當前物件是誰那么這個self就是誰

window.onload

當我們給頁面上的元素系結事件的時候，必須等到檔案加載完畢，因為我們無法給一個不存在的元素系結事件，

window.onload事件在檔案加載程序結束的時候觸發，此時，檔案中的所有物件都位于DOM中，并且所有影像，腳本，鏈接和子框架都已完成加載，

注意：.onload()函式存在覆寫現象，

JS事件案例校驗用戶輸入展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
  <input type="text" id="username">
  <span  style="color: red"></span>
</p>
<p>
  <input type="text" id="password">
  <span  style="color: red"></span>
</p>
  <button id="btn">提交</button>
<script>
  // 1.查找按鈕標簽
  let btnEle = document.getElementById('btn')
  // 2.系結單擊事件
  btnEle.onclick = function () {
    // 3.獲取用戶輸入的用戶名和密碼
    let username = document.getElementById('username').value;
    let password = document.getElementById('password').value;
    // 4.判斷用戶名和密碼是否合法
    if (username === 'jason'){
      // 4.1查找獲取用戶名的input框下面的span標簽
      let span1Ele = document.getElementsByClassName('errors')[0]
      // 4.2給span標簽添加內部文本
      span1Ele.innerText = '用戶名不能是Jason'
    }
    if (password.length === 0){
      // 4.1查找獲取用戶名的input框下面的span標簽
      let span2Ele = document.getElementsByClassName('errors')[1]
      // 4.2給span標簽添加內部文本
      span2Ele.innerText = '密碼不能為空'
    }
  }
</script>
</body>
</html>

JS事件案例省市聯動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
省份：<select name="" id="province"></select>
市區：<select name="" id="city"></select>
<script>
    let data = https://www.cnblogs.com/zxr1002/p/{"河北": ["廊坊", "邯鄲"],
        "北京": ["朝陽區", "海淀區"],
        "山東": ["威海市", "煙臺市"],
        "安徽": ["蕪湖", "合肥"],
        "上海": ["浦東新區", "青浦區"],
        "山西": ["忻州", "運城"]
    };
    let proEle = document.getElementById('province');
    let cityEle = document.getElementById('city');

    // 1.回圈獲取所有的省訊息
    for (let pro in data) {
        // 2.創建option標簽
        let opEle = document.createElement('option')
        // 3.添加內部文本
        opEle.innerText = pro // <option>省份資訊</option>
        // 4.添加value屬性，<option value=https://www.cnblogs.com/zxr1002/p/‘省份資訊’>省份資訊
        opEle.setAttribute('value', pro)
        // 5.將上述的option標簽添加到第一個select標簽中
        proEle.append(opEle)

        // 給省份的下拉框系結文本域變化事件
        proEle.onchange = function () {
            // 每次給市區下拉框添加市區資訊之前 應該先清空上一次加載的資料
            cityEle.innerHTML = '';
            // 1.獲取用戶選擇的省份資訊
            let currentPro = this.value;
            // 2.根據省份獲取對應的市區串列資料
            let targetCityList = data[currentPro];
            // 3.回圈獲取所有的市資訊
            for (let i = 0; i < targetCityList.length; i++) {
                // 4.創建option標簽
                let opEle = document.createElement('option');  // <option></option>
                // 5.添加內部文本
                opEle.innerText = targetCityList[i]
                // 6.添加value屬性
                opEle.setAttribute('value', targetCityList[i])
                // 7.添加到第二個select標簽內
                cityEle.append(opEle)
            }
        }
    }
</script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502870.html

標籤：JavaScript

上一篇：陣列中push和concat的區別

下一篇：陣列中push和concat的區別

js獲取值操作、js類屬性操作、事件