欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

js事件/dom操作/定时

程序员文章站 2022-05-21 23:22:27
...

事件属性(event在事件方法中总是可用的)

  • onclick 单击
    

  1. <button onclick="setBg(this)">按钮2</button>
    2. 

  2. <script>
    3. 

  3. function setBg(ele){
    4. 

  4.   document.body.style.backgroundColor='wheat';
    5. 

  5.   ele.style.backgroundColor="yellow";
    6. 

  6.   ele.textContent="保存成功";
    7. 

  7. }
    8. 

  8. </script>
    9.
  • onkeydown 按下键触发
  • submit 提交时触发
  • focus 获取焦点时触发
  • blur 失去焦点时触发
  • change 改变选择时触发
  • input 值发生改变触发

event

  • 事件类型
  1. event.type
  • 事件绑定者(事件主体)
  1. event.currentTarget
  • 事件触发者(目标)
  1. event.target
  • 阻止事件冒泡(冒泡:依次触发上级事件)
  1. event.stopPropagation();
  • 阻止默认行为
  1. event.preventDefault();

事件添加删除

  • .onclick = null 事件删除
  • .addEventListener(“click”,方法,是否冒泡); 添加事件侦听器
    

  1. //案例
    2. 

  2. function show(){
    3. 

  3.   console.log(1);
    4. 

  4. }
    5. 

  5. btn2.addEventListener("click",show,false);
    6.
  • .removeEventListener(“click”,方法) 删除事件侦听器
  • .dispatchEvent(事件对象) 事件派发(触发事件)
  • new Event(‘click’) 创建一个自定义事件
    

  1. 先添加一个事件
    2. 

  2. let i = 0;
    3. 

  3. btn3.addEventListener("click",()=>{
    4. 

  4.   console.log(i);
    5. 

  5.   i += 1;
    6. 

  6. },false);
    7. 

  7. const myclick = new Event('click');
    8. 

  8. //派发是事件(调用一次btn3的myclick)
    9. 

  9. btn3.dispatchEvent(myclick);
    10.

自定义属性(data-xxx)

  • .dataset.xxx 获取自定义属性(注意:使用驼峰式获取如:data-work-unit .dataset.workUnit)
    

  1. //案例
    2. 

  2. <button data-index="1" data-work-unit="php" onclick="getIndex(this)">btn1</button>
    3. 

  3. function getIndex(btn){
    4. 

  4.   //获取自定义属性值
    5. 

  5.   console.log(btn.dataset.index);
    6. 

  6.   console.log(btn.dataset.workUnit);
    7. 

  7. }
    8.

对象获取

  • querySelectorAll(css选择器) 一组
    

  1. //案例
    2. 

  2. const items = document.querySelectorAll("ul > li");
    3. 

  3. for(let i = 0;i<items.length;i++){
    4. 

  4.   items[i].style.color = "red";
    5. 

  5. }
    6.
  • querySelector(css选择器) 一个
  • document.body 获取body
  • document.head 获取head
  • document.title 获取title
  • document.documentElement 获取html
  • document.forms 获取所有表单
    (每个input,button都有一个form属性 ele.form)
    

  1. <form id="login" >
    2. 

  2. <input type="text" name="email" >
    3. 

  3. </form>
    4. 

  4. //login是form.id
    5. 

  5. //email是input name值
    6. 

  6. //获取email input 元素
    7. 

  7. document.forms.login.email
    8.

DOM树节点

  • .children 获取子集元素
  • .firstElementChild 获取第一个子元素
  • .nextElementSibling 获取下一个兄弟元素
  • .previousElementSibling 获取上一个兄弟元素
  • .lastElementChild 获取最后一个元素
  • .parentElement/.parentNode 获取父节点

DOM元素增删改查

  • document.createElement(“ul”) 创建元素
  • document.body.append(ul); 添加元素到body中
  • .cloneNode(true) 克隆节点[true 为同时复制子元素]
  • .remove() 移除元素
  • .before(‘添加的元素’) 节点之前插入元素
  • .after(‘添加的元素’) 节点之后插入元素
  • .replaceChild 替换元素
  • .insertAdjacentElement(‘插入位置’,元素)
    

  1. 四个插入位置
    2. 

  2. afterBegin  :结束标签之前
    3. 

  3. beforeBegin :开始标签之前
    4. 

  4. afterEnd    :结束标签之后
    5. 

  5. beforeEnd   :接收标签之前
    6.

DOM元素内容操作

  • .textContent 获取元素内容(包括style/display:none内容)
  • .innerText 获取元素内容(不包括style/display:none内容)[不解析html字符串]
  • .innerHTML 获取元素内容(包括HTML标签)[可以解析html字符串]
  • .outerHTML 获取当前节点的自身html字符串
    

  1. //留言板案例
    2. 

  2. <!DOCTYPE html>
    3. 

  3. <html lang="en">
    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8">
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 

  8.     <title>Document</title>
    9. 

  9. </head>
    10. 

  10. <body>
    11. 

  11.     <input type="text" placeholder="留言内容" autofocus onkeydown="addMsg(this)" >
    12. 

  12.     <ul class="list" ></ul>
    13. 

    14. 

  14.     <script>
    15. 

  15.         function addMsg(ele){
    16. 

  16.             if (event.keuy === 'Enter') {
    17. 

  17.                 //1.获取留言列表的容器
    18. 

  18.                 const ul = document.querySelector('.list');
    19. 

  19.                 //2.判断留言是否为空
    20. 

  20.                 if(ele.value.length === 0){
    21. 

  21.                     alert('留言内容不能为空');
    22. 

  22.                     ele.focus();
    23. 

  23.                     return false;
    24. 

  24.                 }
    25. 

  25.                 //3.添加一条新留言
    26. 

  26.                 const li = document.createElement('li')
    27. 

  27.                 li.textContent = ele.value;
    28. 

    29. 

  29.                 //添加删除留言功能
    30. 

  30.                 li.textHTML = ele.value + "<button onclick='del()' >删除</button>"
    31. 

    32. 

  32.                 //插入
    33. 

  33.                 // ul.append(li);
    34. 

  34.                 ul.insertAdjacentElement('afterBegin',li);
    35. 

  35.                 //4.清空留言的输入框,为下一次做准备
    36. 

  36.                 ele.value = null;
    37. 

    38. 

  38.                 //5.重置焦点到留言框中,方便用户更次输入
    39. 

  39.                 ele.focus();
    40. 

  40.             }
    41. 

  41.         }
    42. 

    43. 

  43.         function del(ele){
    44. 

  44.             //删除前确认
    45. 

  45.             if(confirm("是否删除?")){
    46. 

  46.                 //方案1
    47. 

  47.                 ele.remove();
    48. 

    49. 

  49.                 //方案2
    50. 

  50.                 // ele.outerHTML = null;
    51. 

  51.             }
    52. 

  52.         }
    53. 

  53.     </script>
    54. 

  54. </body>
    55. 

  55. </html>
    56.

css操作

  • window.getComputedStyle(元素) 获取元素所有样式属性
  • .style.css属性 行内样式 [注意:使用驼峰式]

class操作

  • .classList.add(“calss”) 添加class
  • .classList.contains(“class”) 判断有没有class
  • .classList.remove(“class”) 移除class
  • .classList.replace(‘替换原’,’替换值’) 替换class
  • .classList.toggle(“class”) 切换class

定时

  • setTimeout 定时触发
    

  1. setTimeout(()=>{
    2. 

    3. 

  3. },2000);
    4.
  • setInterval 循环触发
    

  1. setInterval(()=>{
    2. 

    3. 

  3. },2000);
    4.

上一篇： Asp.net中JQuery、ajax调用后台方法总结

下一篇： 为什么这个className转换没有用？_html/css_WEB-ITnose

推荐阅读