zoukankan      html  css  js  c++  java
  • DOM

    javascript组成:ESCAscript、BOM、DOM
    BOM:浏览器对象模型
      window:窗口
    Iocation:地址栏
     history:历史记录
     document:文档
    DOM:文档操作模型  document


    定时器:
    /延迟执行

    setTimeout(function(){},时间);
    /间隔执行
    setInterval(function(){},时间);

    清除定时器

    clearInterval(对象);
    clearTimeout(setTimeout对象);

    DOM操作套路
    找到元素   操作元素

    1、找元素   返回元素对象
         document.getElementById();
         document.getElementsByName();
         document.getElementsByTagName();
         document.getElementsByClassName();
    2、操作元素内容
         var obj=document.getElementById();
        非表单元素: obj.innerHTML=123
     表单元素:obj.Value
    3、操作元素属性
        obj.setAttribute("class","btn"); 设置
        obj.getAttribute("id");=>btn   获取
    4、操作元素样式
        obj.style.color  只可以操作行内样式
    5、操作元素事件

       obj.onclick=function(){}
     obj.addEventListener()
     同一个点击事件可以添加多个事件

    1 var btn = document.getElementById('btn')
    2  btn.onclick=function(){
    3  this.style.color="red";
    4  }

    6、创建删除元素

    obj.remove();
    document.createElement('div');//<div></div>

    下面举一堆栗子:

    鼠标移上显示移走消失:

    复制代码
     1 <html>
     2 <head>
     3 <meta charset="utf-8">
     4 <title>无标题文档</title>
     5 <script type="text/javascript" src="dom常识.js"></script>
     6 </head>
     7 
     8 <body>
     9   <button onMouseOver="showdiv()" onMouseOut="hiddendiv()" onClick="alert('薛之谦最帅')">按钮</button>
    10   <div id="dd" style="display: none">薛之谦</div>
    11 <!--<div id="dd2"onMouseOver="showdiv()" onMouseOut="hiddendiv()" >鼠标放上去薛之谦变红</div>  -->
    12 </body>
    13 </html>
    复制代码
    复制代码
    1 function showdiv(){
    2     var div=document.getElementById("dd");
    3     div.style.display = "block";
    4 }
    5 function hiddendiv(){
    6     var div=document.getElementById("dd")
    7     div.style.display="none";
    8 }
    复制代码

    鼠标放上去变高变宽变红,移走恢复原样

    复制代码
     1 function showdiv(){
     2     var div=document.getElementById("dd2");
     3     div.style.background="red";
     4     div.style.height="200px";
     5     div.style.display="block";
     6 }
     7 function hiddendiv(){
     8     var div=document.getElementById("dd2");
     9     div.style.background="white";
    10     div.style.display="block";
    11 }
    复制代码

    介绍方法
    window.onload=function(){}
    介绍两个对象
    Math:数学类
    Date:时间日期类

  • 相关阅读:
    myBatis源码解析-二级缓存的实现方式
    手写mybatis框架-增加缓存&事务功能
    手写mybatis框架
    myBatis源码解析-配置文件解析(6)
    myBatis源码解析-类型转换篇(5)
    myBatis源码解析-反射篇(4)
    myBatis源码解析-数据源篇(3)
    myBatis源码解析-缓存篇(2)
    Linux Centos下SQL Server 2017安装和配置
    VS2019 查看源码,使用F12查看源码
  • 原文地址:https://www.cnblogs.com/qq1312583369/p/10258440.html
Copyright © 2011-2022 走看看