-------------------------------------------滴水穿石,我心永恒.

day48

CSS
JS
1 ECMA script
2 BOM
browser object model
3 DOM
document object model

1 文档树结构
-----
--- ---
-- -- -- -- -- --
- - - - -
2 dom对象

两个DOM(节点)对象:
1 document对象
2 element对象
3 查找标签
1 直接查找
document.getElementById(); // 一个element对象
document.getElementsByClassName(); // 多个element对象构成的数组
document.getElementsByTagName(); // 多个element对象构成的数组
document.getElementsByName(); // 多个element对象构成的数组

var c1=document.getElementsByClassName("c1")[0];
console.log("c1",c1);
var c2=c1.getElementsByClassName("c2")[0];
console.log(c2)
2 导航查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素

4 标签控制
1 文本控制
获取文本节点的值
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
2 属性控制
attribute操作
ele.setAttribute("egon","123");
ele.getAttribute("egon");
ele.removeAttribute("alex") ;

3 class属性控制
ele.classList.add("c3")
ele.classList.remove("c2)
4 css控制
var ele=document.getElementsByClassName("c1")[0];
ele.style.color="red";
ele.style.fontSize="38px"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

/* bom 基础*/

        //window对象. alert
        //window.alter(123);
        //let ret=window.confirm(' are you ok?')
        //console.log(ret)   //--> True False
        let ret2 = window.prompt('请输入验证码');
        console.log(ret2)

    </script>
</head>
<body>

</body>
</html>

 [-------------------------------*******************-------------------------------] 

 定时器语法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        function fc() {
            console.log('444')
        }

        // 设置定时器
        let ids = setInterval(fc,1000);

        /*写函数的两种方式
            第一种 先定义函数 再调用↑

            第二种 直接写在调用函数内↓
            */

        let ids2 = setInterval(function () {
            console.log(888)
        },1000);

        console.log(ids);
        console.log(ids2);

        //取消定时器
        clearInterval(1)

    </script>
</head>
<body>

</body>
</html>

 [-------------------------------*******************-------------------------------] 

 计时器语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        //设置一个计时器
        function show_time(){

                //第一步; 创建时间字符串
            let now = new Date().toLocaleString();
            console.log(now);

                //第二步; 查找input标签
            let jishiqi = document.getElementById('jishiqi');
            jishiqi.value=now;
        }
        // 定义设置时间
        var id;
        function setTimer() {
            if (id == undefined){
                show_time();
                id = setInterval(show_time,1000);
            }
        }

        function stopTimer() {
            clearInterval(id);
            id = undefined
        }
    </script>

</head>
<body>
    <input type="text" id="jishiqi" class="c1">
    <button onclick="setTimer()">start</button>
    <button onclick="stopTimer()">end</button>
</body>
</html>

 [-------------------------------*******************-------------------------------] 

    location对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        console.log(location.href);   /*获取到域名*/
        // location.href = 'http://www.luffycity.com'     /*赋值操作*/

        console.log(location.search);  /*获取到域名链接后面的内容*/

        // function loadluffy() {
        //     location.href='http://www.luffycity.com';
        // }

    </script>
</head>
<body>

<button onclick="loadluffy()">加载luffy页面</button>

</body>
</html>

 [-------------------------------*******************-------------------------------] 
    Dom 基础
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div class="c1" id="i1">
    <p>123</p>
    <div class="c2">222</div>
</div>

<div class="c2">333</div>

<script>
     /*
      document.getElementById();    // 一个element对象
      document.getElementsByClassName(); // 多个element对象构成的数组
      document.getElementsByTagName(); // 多个element对象构成的数组
      document.getElementsByName(); // 多个element对象构成的数组
      document.getElementsByClassName("c2");
      */
      var c1=document.getElementsByClassName("c1")[0];
      console.log("c1",c1);
      var c2=c1.getElementsByClassName("c2")[0];
      console.log(c2)

</script>
</body>
</html>

 [-------------------------------*******************-------------------------------] 
    DOM事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<ul>
    <li>123</li>
    <li>234</li>
    <li>789</li>
</ul>

<script>
      // 事件绑定
      // element.on事件=function(){ }
      /*
      var li=document.getElementsByTagName("li")[0];
      li.onclick=function () {
          console.log(this.innerHTML)
      }
      */

      var lis=document.getElementsByTagName("li");
      for (var i=0;i<lis.length;i++){
          lis[i].onclick=function () {
              console.log(this.innerHTML);
              // console.log(lis[i].innerHTML)
          }
      }
      console.log(i);

</script>
</body>
</html>

 [-------------------------------*******************-------------------------------] 
    文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<ul>
    <li id="i1">123</li>
    <li id="i2"><a href="">123</a></li>
    <li>234</li>
    <li>789</li>
</ul>

<script>
    let ele=document.getElementById("i2");
    // 获取文本
    console.log(ele.innerHTML);
    console.log(ele.innerText);

    //赋值文本
    //ele.innerHTML="yuan"
    //ele.innerText="yuan"
    ele.innerHTML="<a href=''>yuan</a>"
    ele.innerText="<a href=''>alex</a>"

</script>
</body>
</html>

 [-------------------------------*******************-------------------------------] 
    属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<ul>
    <li id="i1">123</li>
    <li id="i2"><a href="">123</a></li>
    <li>234</li>
    <li>789</li>
</ul>

<script>
    let ele=document.getElementById("i2");
    // 获取文本
    console.log(ele.innerHTML);
    console.log(ele.innerText);

    //赋值文本
    //ele.innerHTML="yuan"
    //ele.innerText="yuan"
    ele.innerHTML="<a href=''>yuan</a>"
    ele.innerText="<a href=''>alex</a>"

</script>
</body>
</html>

 [-------------------------------*******************-------------------------------] 

    菜单栏示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
          .left{
              width: 15%;
              height: 600px;
              float: left;
              background-color: wheat;
          }

          .right{
              float: left;
              width: 85%;
              height: 600px;
              background-color: lightgray;

          }

           .title{
               text-align: center;
               line-height: 30px;
               background-color: #0e90d2;
               color: white;
           }
        .item{
            padding: 10px;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="outer">
      <div class="left">
           <div class="item">
               <div class="title">菜单一</div>
               <ul class="con hide">
                   <li>111</li>
                   <li>111</li>
                   <li>111</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">菜单二</div>
               <ul class="con hide">
                   <li>222</li>
                   <li>222</li>
                   <li>222</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">菜单三</div>
               <ul class="con hide">
                   <li>333</li>
                   <li>333</li>
                   <li>333</li>
               </ul>
           </div>
      </div>
      <div class="right"></div>
</div>

<script>

    let eles=document.getElementsByClassName("title");

    for(var i=0;i<eles.length;i++){
        eles[i].onclick=function () {

            // 1 展示点击菜单的内容
            this.nextElementSibling.classList.remove("hide");
            // 2 将其他兄弟item标签下的内容隐藏起来
            for (var j=0;j<eles.length;j++){
                if(eles[j]!==this){
                    eles[j].nextElementSibling.classList.add("hide");
                }
            }
        }
    }
</script>
</body>
</html>

BOM基础 计时器 定时器 DOM 基础的更多相关文章

  1. 【基础知识】Dom基础

    [学习日记]Dom基础 1.   内容:使用JavaScript操作Dom进行DHTML开发 2.   目标:能共使用JavaScript操作Dom实现常见的DHTML效果 3.   DHTML= C ...

  2. Python 15 html 基础 - CSS &javascript &DOM

    本节内容 CSS基础 javascript基础 DOM 前言,这边这块楼主已经很熟悉了,CSS天天用到,简单的一些javascript也是所以就挑点重点说了.然后就是dom不怎么用,但是其实也用不到, ...

  3. 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记

    来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...

  4. HTML DOM基础知识

    HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...

  5. Javascript DOM基础（一）概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  6. jQuery DOM基础

    jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html()  html(value)设置和获取html内容,有html标签会自动 ...

  7. js入门——Dom基础

    DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...

  8. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  9. DOM基础（四）

    每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...

随机推荐

  1. 使用Visual Studio Team Services敏捷规划和项目组合管理（三）——使用Kanban板

    使用Visual Studio Team Services敏捷规划和项目组合管理(三)--使用Kanban板 1.要查看Kanban板,请单击Work>Backlogs页面上的Board 链接. ...

  2. MySQL 5.7开启二进制日志注意事项

    最近才开始将部分MySQL 5.6升级到MySQL 5.7, 在开启MySQL的二进制日志时,发现MySQL 5.7 与MySQL 5.6已有细微区别.如果在my.cnf配置文件中,只设置了全局系统变 ...

  3. mssql 系统函数-字符串函数专题--字符串函数大全

    mssql 系统函数 字符串函数 substring 功能简介 mssql 系统函数 字符串函数 stuff 功能简介 mssql 系统函数 字符串函数 str 功能简介 mssql 系统函数 字符串 ...

  4. 洗礼灵魂，修炼python（64）--爬虫篇—re模块/正则表达式（2）

    前面学习了元家军以及其他的字符匹配方法,那得会用啊对吧?本篇博文就简单的解析怎么运用 正则表达式使用 前面说了正则表达式的知识点,本篇博文就是针对常用的正则表达式进行举例解析.相信你知道要用正则表达式 ...

  5. define和typedef的区别

    define和typedef的区别 define是单纯的字符替换,typedef是重新定义了新的类型 #include <stdio.h> #define CHAR1 char* type ...

  6. MySQL 系列（四） 主从复制、读写分离、模拟宕机、备份恢复方案生产环境实战

    本章内容: 主从复制 简介原理 备份主库及恢复从库,配置从库生效 读写分离 如果主宕机了,怎么办? 双主的情况 MySQL 备份及恢复方案 备份单个及多个数据库 mysqldump 的常用参数 如何增 ...

  7. 虚拟机备份，部署VDP

    VDP是一个基于磁盘的备份和恢复解决方案,可靠且易于部署.VDP这一经过更新的备份设备完全取代了VMware原有的备份架构.而且VDP与VMware vCenter Server 完全集成,可以对备份 ...

  8. Thread.currentThread()和this的区别——《Java多线程编程核心技术》

    前言:在阅读<Java多线程编程核心技术>过程中,对书中程序代码Thread.currentThread()与this的区别有点混淆,这里记录下来,加深印象与理解. 具体代码如下: pub ...

  9. 用于文本分类的多层注意力模型（Hierachical Attention Nerworks）

    论文来源:Hierarchical Attention Networks for Document Classification 1.概述 文本分类时NLP应用中最基本的任务,从之前的机器学习到现在基 ...

  10. Leetcode：0002（两数之和）

    LeetCode:0002(两数之和) 题目描述:给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表.你可以假设除了数字 0 之外,这两 ...