【Mark学Java】JavaScript(二)

最新推荐文章于 2020-08-11 21:30:18 发布

Coder Mark

最新推荐文章于 2020-08-11 21:30:18 发布

阅读量188

点赞数 1

分类专栏： Java 文章标签： javascript java css html

本文链接：https://blog.csdn.net/MARK19960120/article/details/105615643

版权

Java 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

JavaScript

BOM
DOM
事件

BOM

概念:Browser Object Model将游览器的各个组成部分封装成对象.
在这里插入图片描述

游览器对象分为游览器对象Navigator(包含DOM对象,Doucument对象),历史记录对象History,地址栏对象Location,窗口对象Window,显示器屏幕Screen

Window对象

创建:
方法:
- 与弹出框有关的方法
  alert()显示一段消息和一个确认按钮的警告框
  confirm()显示带有一段消息以及确认按钮和取消按钮的对话框如果用户点击确认按钮返回true,否则返回false
  prompt()显示可提示用户输入的对话框返回值:获取用户输入
- 与打开关闭有关的方法
  open()打开一个新的游览器窗口,并返回新的window对象
  close()关闭游览器窗口,谁调用我,我关谁
- 与定时器有关的方法
  setTimeout()在指定的毫秒数后调用函数或计算表达式
  参数:1.js代码或者方法对象 2.毫秒值
  返回值:唯一标识
  注意:setTimeout()只会执行一次
  clearTimeout()取消有setTimeout()方法设置的timeout
  setInterval()按照指定的周期(毫秒)来调用函数或计算表达式
  clearInterval()取消由setInterval()设置的timeout
属性:
- 获取其他BOM对象:history location navigator screen
  方式:window.history 或 history
- 获取DOM对象document
特点:
- window对象不需要创建可以直接使用 window.方法名();
- window引用可以省略 方法名();

confirm()

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window对象</title>
    <script>
        var flag = confirm("您确定要退出吗?");
        if (flag){
            alert("bye");
        }else{
            alert("exit")
        }
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述
prompt()

prompt("请输入用户名");

open()
close()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>open</title>
</head>
<body>
     <input id="openBtn" type="button" value="打开窗口">
     <input id="closeBtn" type="button" value="关闭窗口">
     <script>
          var openBtn=document.getElementById('openBtn');
          var newindow;
          openBtn.onclick=function ( ) {
              newwindow=open("https://www.huawei.com");
          }
          var closeBtn=document.getElementById('closeBtn');
          closeBtn.onclick=function ( ) {
              newwindow.close();
          }
     </script>
</body>
</html>

setTimeout()

var id=setTimeout("alert('boom')",3000);

setTimeout("fun();",3000);
function fun(){
   alter('boom');
   
setTimeout(fun,3000);
}

clearTimeout(id);

setInterval()

setTimeout(fun,3000);

案例:轮播图
需求:1.在页面上使用img标签展示图片
2.定义一个方法,修改图片对象的src属性
3.定义一个定时器,每隔3s调用方法一次

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>轮播图</title>
   <script>
       var number=1;
       function fun() {
           number++;
           if (number > 3) {
               number=1;
           }
          var img = document.getElementById("img");
          img.src="img/"+number+".jpg";
       }
       setInterval(fun,1000);
   </script>
</head>
<body>
   <img id="img" src="img/1.jpg" width="100%">
</body>
</html>

Location对象
地址栏对象

创建(获取)window.location location
方法reload()重新加载当前文档,刷新.
属性href设置或返回完整的URL

案例:自动跳转页面
需求:1.显示页面效果
2.倒计时读秒

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>自动跳转</title>
   <style>
       p{
           text-align: center;
       }
       span{
           color: red;
       }
   </style>
</head>
<body>
    <p>
        <span id="time">5</span>秒之后,自动跳转页面
    </p>
    <script>
        var second=5;
        function showTime() {
            second--;
            if (second<=0) {
                location.href="https://www.baidu.com";
            }
            var time = document.getElementById("time");
            time.innerHTML=second+"";
        }
        setInterval(showTime,1000);
    </script>
</body>
</html>

History对象

创建windows.hstory,history
方法
- back()加载history列表中的前一个url
- forward() 加载history列表中的下一个url
- go(参数) 参数 >0 前进几个历史记录 <0 后退几个历史记录
属性
- length 返回当前历史列表中URL数量

DOM

概念:Doucument Object Model文档对象模型
将标记语言文档的各个部分封装为对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作

W3C DOM标准被分为3个不同的部分:
核心 DOM-针对任何结构化文档的标准模型

Document文档对象;Element:元素对象;Arribute属性对象;Text文本对象;Comment注释对象;Node节点对象,其他5个的父对象

XML DOM-针对XML文档的标准化模型

HTML DOM-针对HTML文档的标准模型
在这里插入图片描述

功能:控制html文档的内容

代码:获取页面标签(元素)对象 Element

document.getElementById("id值"):通过元素的id获取元素对象
操作Element对象

修改属性值:明确获取的对象是哪一个?查看API文档,找其中有哪些属性可以设置
修改标签体内容:获取h1标签对象,修改内容innerHTML

<!--通过元素的id获取元素对象-->
<body>
     <img id="light" src="img/off.gif">
     <h1 id="title">Mark学Java</h1>
<script>
    var light=document.getElementById("light");
    alert(light);
    //修改属性值 1.明确获取的对象是哪一个? 2.查看API文档,找其中哪些属性可以设置
    light.src="img/on.gif";
    //获取h1标签体内容
    var title=document.getElementById("title");
    //使用innerHtml属性修改标签体内容
    title.innerHTML="Mark学Java之 JavaScript"
</script>
</body>

Document对象

创建document
方法
- 获取Element对象 getElementByxxx();
- 创建其他DOM对象 createArrtivute(name)
  createComment() createElement() createTextNode()
属性

Node对象

特点:Node可以是元素节点,属性节点,文本节点,所有DOM对象都可以被认为是一个节点
方法:
CRUD dom数:
appendChild()向节点的子节点列表的结尾添加新的子节点
removeChild()删除(并返回)当前节点的指定子节点
replaceChild()用新节点替换下一个子节点
属性: parentNode返回节点的父节点

删除子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            width:200px;
            height: 100px;
        }
        #div2{
            width: 200px;
            height: 10px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
    <!--a id="del">删除子节点</a>-->
    <input type="button" id="del" value="delet1">
<script>
    var elementById = document.getElementById("del");
    elementById.onclick=function () {
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);

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

这里需要注意的是,通过点击超链接不能删除子节点,这是因为点击超链接后,后重新刷新,跳转到指定url
超链接功能
1.可以被点击(样式)
2.点击后跳转到href指定的url
要求:保留1功能,去掉2功能
实现:href="javascript:void(0)"

案例动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>


<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Mark</td>
        <td>man</td>
        <td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Lucy</td>
        <td>woman</td>
        <td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Nancy</td>
        <td>woman</td>
        <td><a href="javascript:void(0)"οnclick="delTr(this);">删除</a></td>
    </tr>
</table>
<script>
  //添加:给添加按钮绑定单击事件;获取文本框内容;创建td,td设置td的文本框的内容;创建tr;将td添加tr中;获取table,将tr添加到table中
  document.getElementById("btn_add").onclick=function ( ) {
      var id = document.getElementById("id").value;
      var name = document.getElementById("name").value;
      var gender = document.getElementById("gender").value;

      var td_id = document.createElement("td");
      var text_id = document.createTextNode(id);
      td_id.appendChild(text_id);
      var td_name = document.createElement("td");
      var text_name = document.createTextNode(name);
      td_name.appendChild(text_name);
      var td_gender = document.createElement("td");
      var text_gender = document.createTextNode(gender);
      td_gender.appendChild(text_gender);
      var td_a = document.createElement("td");
      var ele_a = document.createElement("a");
      ele_a.setAttribute("href","javascript:void(0);");
      ele_a.setAttribute("onclick","delTr(this)");
      var test_a = document.createTextNode("删除");
      ele_a.appendChild(test_a);
      td_a.append(ele_a)

      var tr = document.createElement("tr");

      tr.appendChild(td_id);
      tr.appendChild(td_name);
      tr.appendChild(td_gender);
      tr.append(td_a);

      var table = document.getElementsByTagName("table")[0];
      table.appendChild(tr);
  }
  function delTr(obj) {
     var table = obj.parentNode.parentNode.parentNode;
     var tr = obj.parentNode.parentNode;
     table.removeChild(tr);
  }
</script>
</body>
</html>

在这里插入图片描述
HTML DOM

标签体的设置和获取:innerHTML
使用html元素对象的属性
控制元素样式
- 使用style属性div.style.border="1px soild red"
- 提前定义好类选择器样式,通过className设置,div.className="d1";

事件

功能:某些组件被执行某些操作后,触发某些代码的执行

事件(某些操作) 单击双击
事件源按钮文本输入框
监听器代码
注册监听将事件,事件源,监听器绑定在一起.当某个事件源上发生某个事件,则触发执行某个监听器的代码

如何绑定事件:

方式1:直接在html标签上,指定事件的属性(操作 ),属性值就是js代码(耦合度高,不利于维护)
方式2:通过js获取元素对象,指定事件属性,设置一个函数

<!--直接在html标签上,指定事件的属性(操作),属性值就是js代码 缺点:耦合度高-->
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script>
        function fun() {
            alert('我被点击了');
        }
    </script>
    <script>
        function fun2() {
            alert('我被点击了');
        }
        <!--通过js获取元素对象,指定事件属性,设置一个函数-->
        <!--获取light2对象-->
        var light2=document.getElementById("light2");
        <!--绑定对象-->
        light2.οnclick=fun2;
     </srcipt>
</head>
<body>
<img id="light" src="img/TW.jpg" onclick="fun()">
<img id="light2" src="img/TW.jpg" >

</body>

案例1:通过单击动作切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换图片</title>
</head>
<body>
<img src="img/TW.jpg" id="light" onclick="fun()">
<script>
//获取图片对象
var light = document.getElementById("light");
var flag=true;//代表灯是灭的
//绑定单击事件
    light.onclick=function () {
        if (flag){
            light.src="img/TW.jpg"
            flag=false;
        } else {
            light.src="img/TW1.jpg"
            flag=true;
        }
    }
</script>
</body>
</html>

Coder Mark

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Mark学Java】JavaScript(二)

JavaScriptBOMDOM事件BOMDOM功能:控制html文档的内容代码:获取页面标签(元素)对象 Elementdocument.getElementById("id值"):通过元素的id获取元素对象<body> <img id="light" src="img/off.gif"> ...
复制链接

扫一扫

专栏目录