编程语言
首页 > 编程语言> > 2022-07-12 第八组 于凤琳 javasript（js）学习笔记

2022-07-12 第八组 于凤琳 javasript（js）学习笔记

作者：互联网

下午：

js是网络脚本是写在网页上的要和html配合起来

想要找到网页上的div元素由于id是元素的唯一标识，只有通过id才能找到唯一确定的元素，要是通过其他途径（根据标签 name cass）找,找到的就是一堆div元素。
这时要找到div元素就要用到一个对象document（DOM文档）javas当中有两个大类一个是DOM(是document的文档对象模型) BOM。这节课主要讲DOM。整个网页都可以叫做文档，网页上所有的标签都可以叫做文档。通过id就可以找到网页上的标签。
以下就用三种方式来获取网页上的元素（让js与html有联系）

点击查看代码 
<body>
    <!-- 通过id去获取HTML元素 id是唯一标识只能获取一个 -->
    <div id="div1">我是div</div>
    <script>//具有返回值，返回值是div
      let div = document.getElementById('div1');
      console.log(div);

    </script>
</body>
点击查看代码 
<body>
    <div id="div1" class="aaa">我是div</div>
    <script>
        // 通过class类来获取HTML元素，会有很多个成一个集合，我们把他们看成数组
      let divs= document.getElementsByClassName('aaa');
      console.log('divs');
      //如果想要拿到一个那就用
      //console.log(divs[0])；
    </script>
</body>
点击查看代码 
<body>
    <div id="div1" class="aaa">我是div</div>
    <script>
        // 通过tag标签来获取HTML元素，会有很多个成一个集合，我们把他们看成数组
      let divs= document.getElementsByTagName('div');
      console.log('divs');
      //如果想要拿到一个那就用
      //console.log(divs[0])；
    </script>
</body>
获取网页上的元素的属性
点击查看代码 
<body>
       <div id="div1" class="aaa">我是div</div>
    <script>
    //获取元素的属性
      let div= document.getElementById('div1');
      console.log(div.id);
    </script>
</body>
  1. 第一种
点击查看代码 
<body>
       <div id="div1" class="aaa">我是div</div>
    <script>
    //新写法 通过(标签，id#，类.)选择器来获取HTML元素,只能抓到**一个**元素
    let div=document.querySelector('div');
    console.log(div);
    </script>
</body>
**注意：若有两个标签同时都使用了标签选择器，则再用标签选择器来获取元素时只能获取到第一个。**
  1. 第二种
点击查看代码 
<body>
       <div id="div1" class="aaa">我是div1</div>
       <div id="div1" class="aaa">我是div2</div>
    <script>
    //新写法 通过(标签，id，类)选择器来获取HTML一堆元素
    let div3=document.querySelectorAll('div');
    console.log(div3[0]);
    </script>
</body>

提出问题：拿到这些元素要干什么？
答：获取元素内部的文本，改变这个元素的内容 可以使用innerText和innerHTML来改变元素的内容

点击查看代码 
<body>
       <div id="div1" class="aaa">我是div1</div>
       <div id="div2" class="aaa">我是div2</div>
    <script>
    //获取元素后我们可以获得内部文本并修改元素文本的内容
    let div=document.querySelector('#div1');
    // div.innerText="我是js生成的";
    console.log(div.innerText);
    </script>
</body>
点击查看代码 
<body>
       <div id="div1" class="aaa">我是div1</div>
       <div id="div2" class="aaa">我是div2</div>
    <script>
    //获取元素后我们可以获得内部文本并修改元素文本的内容,innerHTML认识标签，innerText不认识标签
    let div=document.querySelector('#div1');
    div.innerHTML="<b>我是加粗的</b>";
    </script>
</body>
innerText和innerHTML的区别是：innerText不认识标签只能获取到元素内部文本并修改文本，innerHTML认识标签，在获取到元素内部文本并修改文本，同时可以获取到HTML标签。都是往两个标签的中间放值，例如

往这里放值

.

假设有一个文本框，想要往文本框里放东西，应该怎么办？

1.我们得先拿到文本框（这里是通过标签选择器来获取）2.用标签引用value

点击查看代码 
<body>
    <input type="text" id="=username">     
    <script>
      let input=document.querySelector('input');
      input.value="我是js放进文本框的";
    </script>
</body>

事件

事件就是当我们和HTML标签元素发生交互时产生的行为。

  1. 单机事件：onclick
  2. 双击事件：ondbclick
  3. 失去焦点：onblur一般出用在文本框中
  4. 获得焦点：onfocus一般出用在文本框中
  5. 改变： onchange 当元素内容发生改变的时候，所触发的事件
  6. 加载： onl oad 在元素加载的时候所触发的事件 一般加在body上
    现页面上有一个按钮，有一个需求：点击按钮就会有一个弹窗添加事件单机事件
    今天只讲一种添加事件的方式——在标签中添加onclick....
    当设置了对应的事件之后会执行目标函数。
    例子1：一点击按钮就会执行函数跳出一个弹窗
点击查看代码 
<body>
    <input type="text" id="=username">     
    <button type="button" onclick="">按钮</button>
    <script>
     function jump(){
          alert('按钮被点击了');
     }
    </script>
</body>
例子2.失去焦点和获得焦点
点击查看代码 
<body>
    <input type="text" id="=username" onblur="valid()" onfocus="get()">     
    <!-- <button type="button" onclick="jump()">按钮</button> -->
    <script>
    //  function jump(){
    //       alert('按钮被点击了');
    //  }
     function valid(){
         console.log('失去了焦点');
     }
     function get(){
         console.log('获得了焦点');
     }
    </script>
</body>

例子3. onchange 当元素内容发生改变的时候，所触发的事件

例子4.onload 在元素加载的时候所触发的事件 一般加在body上

点击查看代码 
<body onl oad="load()">
    <!-- 不要出现双引套双引，要么双引套单引，要么单引号套双引号 -->
    <input type="button" ondblclick="jump(1)" value="按钮">
    <script>
    function  jump(a){
        alert('按钮被点击了.....'+a);
     }
    </script>
</body>

例子5.需求：当用户名admin，密码123456时，提示登录成功！ 否则，提示用户名或密码错误

点击查看代码 
<body>
    <p>
        账号：<input type="text" id="username">
    </p>
    <p>
        密码：<input type="password" id="password">
    </p>
    <p>
        <input type="button" value="登录" onclick="get()" >
    </p>

    <script>
        // 需求：当用户名==admin，密码==123456时，提示登录成功！
        // 否则，提示用户名或密码错误
        /* 思路：给按钮添加单击事件
            当点击按钮时，获取用户名和密码框输入的值，
            然后进行判断，if()登录成功else用户名或密码错误！
            15分钟！
        */
     function get(){
       let user= document.querySelector('#username').value;
       let pass= document.querySelector('#password').value
      if (user=="admin"&&pass==123456) {
        alert('登录成功');
      } else {
        alert('用户名或密码错误');
      }
     }

    </script>
</body>

例子6.需求：在用户名的文本框中输入用户名，
如果用户名为admin，则在span中显示用户名已被占用
否则，显示用户名可用！

点击查看代码 
 <body>
        用户名：<input type="text" id="username" onblur="valid()">
        <span></span>

        <script>
            /*
                分析：
                需要给文本框添加onchange，onblur，出发函数
                需要向span中写入内容！innerText innerHTML
            */
           function valid(){
                let username = document.querySelector("#username").value;
                let span = document.querySelector("span");
                if(username == "admin"){
                    // 用户名已被占用
                    span.innerText = "用户名已被占用！"
                }else {
                    // 用户名可用
                    span.innerText = "用户名可用！";
                }
           }

        </script>
    </body>

标签：12,javasript,标签,元素,js,点击,用户名,div,document
来源： https://www.cnblogs.com/yfl-0421/p/16471813.html