Расширение API массива формы для манипулирования DOM

Форма манипулирования DOM

элемент формы

Поле ввода, поле пароля, раскрывающееся окно, поле с несколькими вариантами выбора, поле радио

форма операции

поле ввода ввода

Получить значение параметра

var inp = document.querySelector('input')
console.log(inp.value);
inp.value = '123'

входное событие

• вход

  Запускает событие при изменении содержимого элемента ввода

  1. var inp = document.querySelector('input')
  2. inp.addEventListener('input',function(){
  3. console.log(inp.value);
  4. })
  • изменять

  Событие запускается, когда содержимое элемента ввода изменяется и теряет фокус

  1. var inp = document.querySelector('input')
  2. inp.addEventListener('change',function(){
  3. console.log(inp.value);
  4. })

• размытие

  Событие запускается, когда вкладка теряет фокус

• фокус

  Событие запускается, когда вкладка получает фокус

  1. var inp = document.querySelector('input')
  2. inp.addEventListener('blur',function(){
  3. console.log(111111111);
  4. })
  5. inp.addEventListener('focus',function(){
  6. console.log(22222222222);
  7. })

выберите раскрывающийся список

Получить значение параметра: значение

1. var osel = document.querySelector('#sel')
2. console.log(osel.value);
3. osel.value = 3

изменить событие

Запускает событие при изменении параметра

1. var osel = document.querySelector('#sel')
2. osel.addEventListener('change',function(){
3. console.log(osel.value);
4. })

флажок радио

Я не знаю переключатель или поле с несколькими вариантами выбора на странице, нам нужно пройти через каждый переключатель или поле с несколькими вариантами выбора, чтобы установить событие, половина события использует событие щелчка или изменения, чтобы получить выбранный результат

выбранное состояние

Выбранное состояние

При оценке радиоблока и блока множественного выбора вам нужно использовать js, чтобы определить, выбрана ли текущая метка, и вы можете использовать его checkedдля оценки

1. var check = document.querySelectorAll('[name=aaa]')
2. console.log(check);
3. var checkeds = []
4. for(var i = 0;i<check.length;i++){
5. check[i].addEventListener('click',function(){
6. console.log(this.checked);
7. if(this.checked){
8. checkeds.push(this.value)
9. console.log(checkeds);
10. }
11. })
12. }

API-интерфейс массива

Справочный URL: Объект массива JavaScript | Учебник для начинающих

фильтр()

Пройдите массив и верните новый массив данных, который соответствует условию

1. var arr = [1, 2, 3, 4, 5, 6, 7, 8]
2. //赛选 数字大于3的所有元素
3. // var filArr = arr.filter(function(item,index,array){
4. // console.log('item:',item);
5. // console.log('index:',index);
6. // console.log(array);
7. // return item > 3
8. // })
9. // console.log(filArr);
12. var filArr2 = arr.filter(item => item > 4)
13. console.log(filArr2);

Применимый случай

1. Отфильтруйте товары с ценой выше 30

2. Корзина удаляет все выбранные товары, мы можем вернуть невыбранные товары и присвоить их исходному массиву.

некоторый()

Проверяет, соответствует ли какой-либо элемент в элементе массива указанному условию.

1. var users = [
2. {name:'admin',pwd:'123456'},
3. {name:'admin2',pwd:'123456'},
4. {name:'admin3',pwd:'123456'}
5. ]
6. var inArr = users.some(item => item.name=='admin2'&&item.pwd == '123456')
7. console.log(inArr);

Сортировать()

Сортирует элементы массива.

1. var arr = [{id:1,price:30},{id:2,price:40},{id:3,price:70},{id:4,price:10}]
2. var sortArr = arr.sort((a,b)=>a.price-b.price)
3. console.log(sortArr);

карта()

Обрабатывает каждый элемент массива с помощью указанной функции и возвращает обработанный массив.

1. var arr = [{ id: 1, price: 30 }, { id: 2, price: 40 }, { id: 3, price: 70 }, { id: 4, price: 10 }]
3. var mapArr = arr.map(item => {
4. item.price *= 0.8
5. return item
6. })
7. console.log(mapArr);

для каждого()

Эксклюзивный обход массива вместо цикла for

1. 数组.forEach((item,index,array)=>{
2. // item：数组中每次循环取出来的数据
3. //index：遍历的下标
4. //array：原数组
5. })

случай

1. function render(){
2. let dom = ''
3. goodsList.forEach(item =>{
4. dom += `
5. <a onclick="del(this)" href="javascript:;">
6. <dl>
7. <dt>
8. <span class="abl"></span>
9. <img src="${item.img}"/>
10. <span class="abr"></span>
11. </dt>
12. <dd>${item.title}</dd>
13. <dd><span>￥${item.price}.00</span></dd>
14. </dl>
15. </a>
16. `
17. })
18. // for (var i = 0; i < goodsList.length; i++) {
20. // dom += `
21. // <a onclick="del(this)" href="javascript:;">
22. // <dl>
23. // <dt>
24. // <span class="abl"></span>
25. // <img src="${goodsList[i].img}"/>
26. // <span class="abr"></span>
27. // </dt>
28. // <dd>${goodsList[i].title}</dd>
29. // <dd><span>￥${goodsList[i].price}.00</span></dd>
30. // </dl>
31. // </a>
32. // `
33. // }
34. goodsBox.innerHTML = dom
35. }

Тернарный оператор (расширенный)

Также известный как тернарный оператор, он используется для принятия решения о выполнении различных кодов в зависимости от условий.

1. 条件 ？ 满足条件返回值 : 不满足条件返回值
3. var num = prompt('请输入一个数字')
4. console.log(num>10 ? '大于10' : '小于10');

Применимый случай

Оценить выбранное состояние

1. <label class="fl" >
2. <span class="${item.ischecked?'spanAct':'span'}" onclick="change(${index})"></span>
3. </label>