JS快速入门（二）

敲个大西瓜

已于 2022-04-30 21:25:50 修改

阅读量1.4k

点赞数

分类专栏：前端文章标签： javascript

于 2022-04-30 21:23:21 首次发布

本文链接：https://blog.csdn.net/wangjunlei666/article/details/124461487

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

DOM（Domcument Object Model）文档对象模型

文档：整个html网页文档，
对象：表示将网页中每个部分都转换为一个对象，
模型：使用模型来表示对象之间的关系，方便我们获取对象，

节点：node–构成html文档最基本的单元
常用节点：
文档节点：整个html，
元素节点：html文档中的html标签
属性节点：元素属性
文本节点：html标签中的文本内容

浏览器已经为我们提供了文档节点，对象这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页，

我们可以在事件对于的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行，
事件，就是用户和浏览器之间的交互行为，比如点击按钮，鼠标移动，关闭窗口，等等，

网页的加载是从上向下的，onload事件会在整个页面加载完成后才触发

     var btn= document.getElementById("btn");
     btn.onclick = function(){
         alert("good")
     }
       window.onload=function () {
            alert("good");
        };

获取元素节点，通过document对象调用，
getelementbyid()，通过id属性获取一个元素节点对象
getelementsbytagname()，通过标签名获取一组元素节点对象
getelementsbyname()，通过name属性获取一组元素节点对象

//innerHTML 属性设置或返回元素的 inner HTML。

<head>
<script>
function changeLink()
{
document.getElementById('myAnchor').innerHTML="W3School";
document.getElementById('myAnchor').href="http://www.w3school.com.cn";
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com">微软</a>
<input type="button" onclick="changeLink()" value="更改链接">
</body>

小插曲：

//获取img标签
var img=document.getelementsbytagname("img")[0];
//获取info标签
var info=document.gteelementbyid("info");

//创建一个数组保存img路径
var imgarr=["img/1.jpg","img/2.jpg","img/3.jpg"];

创建一个变量保存当前照片的索引
var index=0;
next.onclick=function(){
//切换图片就是修改imgd的src属性
//要修改一个元素的属性元素 . 属性=属性值
index=(arr.length+index)%arr.length;
img.src=imgarr[index];
info.innnerhtml="一共"+img.length+"张，这是第"+index+"张"；
}

获取元素节点的子节点，通过具体元素点调用
getElementsByTagName()：返回当前节点的指定标签名后代节点
childNodes：属性，表示当前节点的所有子节点，
firstChild：属性，表示当前节点的第一个子节点
lastChild：属性，表示当前节点的最后一个子节点

//获取id为city的元素
var city=document.getelementsbyid("city");
//查找#city下所有li节点
var lis=city.getelementsbytagname（"li"）;
childNodes属性会获取包括文本节点的所有节点，根据DOM标签标签间的空白也会当成问文本节点， 
var cns=city.childNodes;
alert(cns.length)
//获取当前元素的第一个子节点
var fir=city.firstelementChild;

获取父节点和兄弟节点，通过具体的节点调用
parentNode:属性，表示当前节点的父亲节点，
priviousSibling：属性，表示当前节点的前一个兄弟节点
nextSiling：属性，表示当前节点的后一个兄弟节点

//获取id为city的元素
var city=document.getelementsbyid("city");
//获取当前节点的父亲节点
var paren=city.parentNode;
//获取当前节点的前一个兄弟节点
var  ps=city.priviousSibling;
//获取当前节点的后一个兄弟节点
var ns=city.nextSiling

插曲：innerhtml与innertext的区别：innertext没有标签

读取一个标签的属性值就是文本框中的value值

全选练习

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript">
    window.onload=function () {
      /**
       * 全选按钮
       * -点击以后，四个按钮全都被选中
       * 为每个按钮绑定一个单击响应函数
       */
      var checkedAllBtn=document.getElementById("checkedAllBtn");
      var checkedNoBtn=document.getElementById("checkedNoBtn");
      var checkedRevBtn=document.getElementById("checkedRevBtn");
      var sendBtn=document.getElementById("sendBtn");

      var checkedAllBox=document.getElementById("checkedAllBox");
      //获取四个多选框items
      var items=document.getElementsByName("items");
      checkedAllBtn.onclick=function () {
        //遍历items
        for (var i=0;i<items.length;i++){
          //设置四个多选框变成选中状态
          //通过多选框的checked属性可以来获取或设置多选框的选中状态
          items[i].checked=true;
        }
      };
      checkedNoBtn.onclick=function () {
        //遍历items
        for (var i=0;i<items.length;i++){
          //设置四个多选框变成选中状态
          //通过多选框的checked属性可以来获取或设置多选框的选中状态
          items[i].checked =false;
        }
      };
      checkedRevBtn.onclick=function () {
        //遍历items
        for (var i=0;i<items.length;i++){
          //设置四个多选框变成选中状态
          //通过多选框的checked属性可以来获取或设置多选框的选中状态
          if(items[i].checked==true){
            items[i].checked =false;
          }else {
            items[i].checked =true;
          }
        }
      };
      sendBtn.onclick=function () {
        for (var i=0;i<items.length;i++){
          if(items.checked){
            alert(items[i].nodeValue);
          }
        }
      };
      checkedAllBox.onclick=function () {
        for (var i=0;i<items.length;i++){
          items.checked=checkedAllBox.checked;
        }
      };
    }
    </script>
  </head>
  <body>
<form method="post" action="">
  你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反选"/>
  <input type="button" id="sendBtn" value="提交"/>
</form>
  </body>
</html>

dom增删改

            getElementById()    返回带有指定ID 的元素。
            getElementsByTagName()  返回包含带有指定标签名称的所有元素的节
            点列表(集合/节点数组)。
            getElementsByClassName()    返回包含带有指定类名的所有元素的节
            点列表。
            getElementsByName('a') 通过name属性获取一组元素节点对象
            document.querySelector('#a') 通过CSS选择器来获取一个元素节点对象
            document.querySelectorAll('span') 通过CSS选择器来获取一组元素节点对象
            appendChild()   把新的子节点添加到指定节点。
            removeChild()   删除子节点。
            replaceChild()  替换子节点。
            insertBefore()  在指定的子节点前面插入新的子节点。
            createAttribute()   创建属性节点。

js操作内联样式

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <style type="text/css">
      #box1 {
        width: 200px;
        height: 200px;
        background-color:red;
      }
    </style>
    <script type="text/javascript">
      window.onload=function () {
        var box1=document.getElementById("box1");
        var btn01=document.getElementById("btn01");
        var btn02=document.getElementById("btn02");
        btn01.onclick=function () {
          /**
           * 通过js修改元素的样式
           * 语法：元素.style.样式名=样式值。
           *
           * 如果样式中含有 " - " 这样的字符可以去掉，然后后一个字母大写继续使用
           */
          box1.style.width="300px";
          box1.style.height="400px";
          box1.style.backgroundColor="yellow";
        }
        btn02.onclick=function () {
        //获取元素的当前显示的样式,也可以将以下alert设置一个函数，传入标签和要获取的样式，
          alert(getComputedStyle(box1).width);
          //只获取css样式表中定义的样式
          /**
           * var sheet = document.styleSheets[0];   // 获取页面中第一个样式表
           var rules = sheet.cssRules;   // 获取页面中第一个样式表中定义的所有规则，rules[0]即代表第一条规则
           console.log(rules[0].style.cssText);    // "width: 200px; height: 200px;"
           console.log(rules[0].style.width);    // "200px"
           console.log(rules[0].style.height);    // "200px"
           */
          /**
           *  style，只获取标签上定义的行内样式
           *   alert(box1.style.width);
           */
        };
          /**
         * 设计一个在各种浏览器上都能使用的函数
         * 参数
         * @param obj  要获取样式的元素
         * @param name  要获取的样式名
         * @returns {*}
         */
        function getStyle(obj,name) {
          if (window.getComputedStyle){
            //正常浏览器的方式，具有getComputedStyle（）方法
          }else {
            //IE8的方式，没有getComputedStyle（）方法
            return obj.currentStyle[name];
          }
        }
      }
    </script>
  </head>
  <body>
      <button id="btn01">点击</button>
      <button id="btn02">读取</button>
      <div id="box1"></div>
  </body>
</html>

<html>
  <head>
    <title>$Title$</title>
    <style type="text/css">
      #box1 {
        width: 200px;
        height: 200px;
        background-color:red;
        //内边距
        padding: 10px;
        //外边距
        border: 10px solid yellow;
      }
    </style>
<script type="text/javascript">
  window.onload=function (ev) {
    var box1=document.getElementById("box1");
    var btn01=document.getElementById("btn01");
    var btn02=document.getElementById("btn02");

  btn01.onclick= function x() {
    /**
     * clientwidth
     * clientheight
     * 这两个属性可以获取元素的可见宽度和高度
     * 这些属性都是不带px的，返回的都是一个数字，可以直接进行计算的
     * 会获取元素的宽度和高度，包括内容区和内边距
     */
    alert(box1.clientWidth);
    alert(box1.clientHeight);
    /**
     * offsetwidth
     * offsetHeight
     * 获取元素的整个的宽度和高度,包括内容区、内边距和边框
     */
    alert(box1.offsetWidth);
    alert(box1.offsetHeight);

    /**
     * offsetParent
     可以用来获取当前元素的定位父元素
     会获取到高当前元素最近的开启了定位的祖先元素
     如果所有的祖先元素都没有开启定位，则返回body
     */
    var op =box1.offsetParent;
      alert(op.id);
    /**
     * offsetLeft
     * 当前元素相对于其定位父元素的水平偏移量offsetTop
     * 当前元素相对于其定位父元素的垂直偏移量
     */
    alert(box1.offsetLeft);
    
    //实在是太多了，详情看js文档dom element 属性 方法
  }
  }
</script>
  </head>
  <body>
      <button id="btn01">点击</button>
      <button id="btn02">读取</button>
      <div id="box1"></div>
  </body>
</html>

事件对象

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <style type="text/css">
      #areadiv {
        width: 200px;
        height: 200px;
        border: 1px solid yellow;
      }
      #showmsg {
        width: 100px;
        height: 50px;
        border: 2px solid skyblue;
      }
    </style>
<script type="text/javascript">
  window.onload=function (ev) {
    /**
     * 当鼠标在areadiv中移动时，在showmsg中来显示鼠标的坐标
     */
    //获取两个div
    var areadiv=document.getElementById("areadiv");
    var showmsg=document.getElementById("showmsg");
    /**
     * onmousemove
     * 该事件将会在鼠标在元素中移动是被触发
     *
     * 事件对象
     * 当事件的响应函数被触发时，浏览器都会将一个事件对象作为实参传递进响应函数
     * 在事件对象中封装了当前事件的一切信息，比如鼠标的坐标，这里用event表示该事件对象
     */
    areadiv.onmousemove=function (event) {

      /**
       * clientX可以获取鼠标指针的水平坐标
       * cilentY可以获取鼠标指针的垂直坐标
       */

      /**
       * 在工E8中,响应函数被处罚时，浏览器不会传递事件对象,
       * 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
       */

      var x=event.clientX;
      var y=event.clientY;
      
      //在showmsg中显示鼠标的坐标
      showmsg.innerHTML="("+x+","+y+")";
    }
  }
</script>
  </head>
  <body>
      <div id="areadiv"></div>
      <div id="showmsg"></div>
  </body>
</html>

具体更多事件的定义请看 html dom event 对象文档

事件监听器

使用对象.事件=函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个,则后边会覆盖掉前边的。

所以我们需要另一种绑定机制。
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
第二个参数是当事件发生时我们需要调用的函数，不要（on）。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
并且该方法大部分浏览器都有，

addEventListener() 方法为指定元素指定事件处理程序。
addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
您能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。
您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。
addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。
当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。
您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。

形式

//形式1
element.addEventListener("click", function(){ alert("Hello World!"); });

//形式2
element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

removeEventListener() 方法
removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：
实例
element.removeEventListener("mousemove", myFunction);

事件的传播

事件冒泡还是事件捕获？
在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。
事件传播是一种定义当发生事件时元素次序的方法。假如

元素内有一个

，然后用户点击了这个

元素，应该首先处理哪个元素“click”事件？

在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理

元素的点击事件，然后是

元素的点击事件。
在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理

元素的点击事件，然后是

元素的点击事件。

在这里插入图片描述

在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：
addEventListener(event, function, useCapture);
默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

事件的委派

事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
换句话说，就是把一个本来让下属干的事情交给上司做了。
比如说，鼠标点击事件，本来页面上有很多的鼠标点击事件，需要一个个的去写实现函数，但是如果你把鼠标点击事件交个上司来完成，那么就是你鼠标点击那里的时候，就相当于上司找对应的下属来完成此事件，而不像前面的一个个的去找实现函数。

给ul中的li加事件
例子1

 
<ul id="resources">  
	<li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>  
	<li><a href="http://sitepoint.com">Sitepoint</a></li>  
	<li><a href="http://alistapart.com">A List Apart</a></li>  
	<li><a href="http://yuiblog.com">YUI Blog</a></li>  
	<li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>  
	<li><a href="http://oddlyspecific.com">Oddly specific</a></li>  
</ul> 
<script>
	//事件委派1
	(function(){  
		var resources = document.getElementById('resources');  
		var links = resources.getElementsByTagName('a');  
		var all = links.length;  
		
		for(var i=0;i<all;i++){  
			links[i].addEventListener('click',handler,false);  
		};  
		
		function handler(e){  
			var x = e.target; // Get the link that was clicked  
			alert(x);  
			e.preventDefault();  
		};  
	})(); 
	//利用事件委派可以写出更加优雅的
	(function(){  
		var resources = document.getElementById('resources');  
		resources.addEventListener('click',handler,false);  
		
		function handler(e){  
			var x = e.target; // get the link tha  
			if(x.nodeName.toLowerCase() === 'a'){  
				alert(x);  
				e.preventDefault();  
			}  
		};  
	})();  
</script>

例子2：

 
<ul id="resources">  
	<li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>  
	<li><a href="http://sitepoint.com">Sitepoint</a></li>  
	<li><a href="http://alistapart.com">A List Apart</a></li>  
	<li><a href="http://yuiblog.com">YUI Blog</a></li>  
	<li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>  
	<li><a href="http://oddlyspecific.com">Oddly specific</a></li>  
</ul> 
<script>
	//事件委派1
	(function(){  
		var resources = document.getElementById('resources');  
		var links = resources.getElementsByTagName('a');  
		var all = links.length;  
		
		for(var i=0;i<all;i++){  
			links[i].addEventListener('click',handler,false);  
		};  
		
		function handler(e){  
			var x = e.target; // Get the link that was clicked  
			alert(x);  
			e.preventDefault();  
		};  
	})(); 
	//利用事件委派可以写出更加优雅的
	(function(){  
		var resources = document.getElementById('resources');  
		resources.addEventListener('click',handler,false);  
		
		function handler(e){  
			var x = e.target; // get the link tha  
			if(x.nodeName.toLowerCase() === 'a'){  
				alert(x);  
				e.preventDefault();  
			}  
		};  
	})();  
</script>

例子3：

 <input type="button" id="btn" value="添加li">
 <ul id="ul">
   <li>111111</li>
   <li>22222</li>
   <li>33333</li>
 </ul>
  <script type="text/javascript">
    //获取元素
    var ul = document.getElementById('ul');
    var btn = document.getElementById('btn');
    //鼠标覆盖
    ul.onmouseover = function (event) {
      var event = event || window.event;
      var target = event.target || event.srcElement;
      if (target.nodeName.toLowerCase() == 'li') {
        target.style.background = 'red';
      }
    }
    //鼠标离开
    ul.onmouseout = function (event) {
      var event = event || window.event;
      var target = event.target || event.srcElement;
      if (target.nodeName.toLowerCase() == 'li') {
        target.style.background = '';
      }
    }
    //点击添加li按钮
    btn.onclick = function () {
      var lisLength = ul.getElementsByTagName('li').length;
      var newLi = document.createElement('li');
      newLi.innerHTML = 11111*(lisLength+1);
      ul.appendChild(newLi);
    }
  </script>

事件的拖拽

<html>
<head>
  <title>$Title$</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
    #box1 {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
    }
  </style>
  <script type="text/javascript">
    window.onload=function () {
      /**
       * 拖拽box1
       * 拖拽的流程
       * 1.当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
       * 2.当鼠标移动时被拖拽元素要跟随鼠标移动onmousemove
       * 3.当数鼠标松开时，被拖拽元素固定在当前位置 onmouseup
       *
       */
      var box1=document.getElementById("box1");
      //当鼠标在被拖拽元素上按下时，开始拖拽onmousedown;
      box1.onmousedown=function (event) {
         //设置box1捕获所有鼠标按下的事件
        box1.setPointerCapture();

        //使鼠标在div上的位置不变，
        var ol=event.clientX-box1.offsetLeft;
        var ot=event.clientY-box1.offsetTop;

        //为document绑定一个onmousedown事件

        document.onmousemove=function (event) {

          //当鼠标移动时被拖拽元素要跟随鼠标移动onmousemove
          //获取鼠标的坐标

          var left=event.clientX-ol;
          var top=event.clientY-ot;
          //修改box1的位置
          box1.style.left=left+"px";
          box1.style.top=top+"px";

        };
        //为鼠标绑定松开事件，
        box1.onmouseup=function () {
          //当数鼠标松开时，被拖拽元素固定在当前位置 onmouseup
          //取消动粗，documen.onmousemove事件
          document.onmousemove=null;
          //取消document的onmouseup事件
          document.onmouseup=null;
          //释放捕获鼠标全部内容
          box1.releasePointerCapture();
        };
        /**
         * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容
         * 此时导致拖拽功能发生异常，这个时浏览器的默认行为，
         * 如果不希望发生这个行为，可以通过return false来取消默认行为
         */
        return false;
      };
    };
  </script>
</head>
<body>
<div id="box1"></div>
</body>
</html>

JavaScript bind方法总结
在 JavaScript 中，bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

滚轮事件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <style type="text/css">
      #box1{
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
    <script type="text/javascript">
      window.onload=function (ev) {

        var box1=document.getElementById("box1");
        //给按钮绑定滚轮事件
        box1.onmousewheel=function (event) {
          /**
           * 当鼠标滚轮向下滚动时，box1变长
           * 当鼠标向上滚动时，box1变短
           */
          event=event||window.event;
          /**判断滚轮滚动的方向
           * event.wheelData可以获取鼠标滚轮滚动的方向
           * 上滚120，下滚-120
           * wheelDelta这个值我们不看大小只看正负，
           */

          /**
           * 在火狐中不支持.wheelDelta这个属性
           * 在火狐中使用event.detail来获取滚动方向
           * 向上滚-3，向下滚3
           */
          //判断滚轮方向
          if (event.wheelDelta > 0 ){
            //向上滚，box1变短
            box1.style.height=box1.clientHeight -20+"px";
          }
          if (event.wheelDelta < 0 ) {
            //向下滚，box1变长
            box1.style.height=box1.clientHeight +20+"px";
          }
          if (event.detail < 0){
            //向上滚，box1变短
            box1.style.height=box1.clientHeight -20+"px";
          }
          if (event.detail > 0){
            //向下滚，box1变长
            box1.style.height=box1.clientHeight +20+"px";
          }
          /**
           * 使用addEventListener()方法绑定响应函数，取消默认行为时泵使用return false
           * 需要使用event来取消默认行为event.preventDefault()
           * 但是IE8不支持event.preventDefault(),如果直接调用会报错
           */

          /**
           *
           * 当滚轮滚动时如果浏览器有滚动条，滚动条会随之滚动
           * 这是浏览器的默认行为，如果不希望发生则可以取消默认行为
           */
          return false;
        }
      }
    </script>
  </head>
  <body>
<div id="box1"></div>
  </body>
</html>

键盘事件

<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript">
      window.onload=function () {
        /**
         * 键盘事件
         * onkeydown：按键被按下
         * 如果按着一直不松手，会连续触发
         * onkeyup：按键被松开
         *
         * 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document对象
         */
        document.onkeydown=function (ev) {
          event=ev||window.event;
          /**
           * 通过keycode来获取按键的编码，通过它来判断哪个按键被按下
           */
          /**
           * 判断y是否被按下
           * 判断y和ctrl是否被同时按下
           * 下面的写法是错误的
           * if (event.keyCode===89 &&event.keycode===17){
            console("")}
           */
          /**
           * 除了keycode，事件对象中还提供了几个属性
           * altkey,ctrlkey,shiftkey
           * 这三个键用来判断altctrl和shift是否被按下
           * 如果按下则返回true否则返回false
           */
          if (event.key == 89&& event.ctrlKey){
            console.log("ctrl，y都被按下")
          }
        };
        document.onkeyup=function (ev) {
           //按键松开触发
        }
        //获取input
        var input=document.getElementsByTagName("input")[0];

        input.onkeydown=function (event) {
          console.log("按键被按下");

          /**
           * 使文本框不能输入数字
           * 数字48 - 57
           */
          if ( event.key >=48&&event.key<=57){
            
            //取消默认行为
            return false;
          }
          /**
           * 在文本框中输入内容，属于onkeydown的默认行为
           * 如果取消默认行为，则输入的内容不会出现在文本框中
           */
          //取消默认行为，
          return false;
        }
      };
    </script>
  </head>
  <body>
<input type="text">
  </body>
</html>

BOM

   BOM
   -浏览器对象模型
   -浏览器对象模型
   -BOM可以使我们通过JS来操作浏览器
   -BOM可以使我们通过JS来操作浏览器
   -在BOM中为我们提供斤-组对象，用来完成对浏览器的操作- BOM对象
   -在BOM中为我们提供斤-组对象，用来完成对浏览器的操作-BOM对象
   window:整个浏览器的窗口，同时window也是网页中的全局对象
   Navigator：代表当前浏览器的信息，通过该对象可以来识别不同的浏览器
   Location：代表当前浏览器的地址栏信息
   History：代表浏览器的历史纪录，可以通过该对象来操作浏览器的历史记录
   由于隐私的原因，该对象不能获取具体的历史记录，只能操作浏览器向前或者向后
   而且当次有效
   Screen：代表用户的屏幕信息，通过该对象可以获取到用户的显示器相关信息
 
   这些BOM对象在浏览器都是作为window对象的属性保存的
   可以通过window对象来使用，也可以直接使用

Navigator

Navigator 对象
Navigator 对象包含有关浏览器的信息。
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。
虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。
Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。

history

History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

location

Location 对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

json

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/4/29
  Time: 22:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript">
      /**
       * JSON
       * js
       * js中只有js自己认识，其他语言都不认识
       * josn就是一个特殊格式的字符串，可以被任意语言识别
       * 并且可以任意转换为其他语言中的对象，json在开发中主要用来数据的交互，
       * json分类：对象，数组
       * 允许类型：字符串，数值，布尔值，null，对象，数组
       */
      //创建一个json对象
      var obj='{"name":"孙悟空","age":18,"gender":"nan"}';
      //创建一个json数组
      var arr ='[1,2,3,"hello",true]';
      /**
       * 在json字符串转换为js中的对象
       * 在JS中，我们提供了一个工具JSON
       *
       * json->js对象
       * JSON.parse()
       * 需要一个json字符串作为参数，会将该字符串转换为js对象
       */
      var ob=JSON.parse(obj);
      var ar=JSON.parse(arr);
      console.log(ob.name);
      console.log(ar[0]);

      /**
       * js对象->JSON
       *  JSON.stringify()
       *  需要一个js对象作为参数，会返回一个json字符串
       */
      var str=JSON.stringify(ob);
      console.log(str);
      /**
       * eval()
       * 这个函数用来执行一段字符串形式的js代码，并将执行结果返回
       * 如果使用该方法的字符串中含有{}，它会将{}当成是代码块
       */
      var str2="alert('hello');";
      eval(str2);
    </script>
  </head>
  <body>
  </body>
</html>

（定时调用/延时调用）定时器

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript">
      window.onload=function (ev) {
        //获取count
        var count=document.getElementById("count");
        /**
         * 使count中内容自动切换
         *
         * 如果希望一段程序，可以每隔一段时间执行一次，可以使用定时器
         */
        /**
         * setInterval()
         * 定时调用，每个一段事件执行一次
         * 参数：1.回调函数，该函数每隔一段时间被调用一次
         *      2.每次调用的间隔时间，单位是毫秒，
         * 返回值：返回一个Number类型的数据，这个数字用来作为定时器的唯一标识
         */
        var num=1;
       var timer= setInterval(function () {
          count.innerHTML=num++;
        },1000);
        /**
         * 关闭定时器，根据定时器的唯一标识
         */
       clearInterval(timer);
      };
    </script>
  </head>
  <body>
<h1 id="count">1</h1>
  </body>
</html>


//该内容也可以定时切换图片

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript">
      window.onload=function (ev) {
        var count = document.getElementById("count");

        var num=1;
        /**
         * 延时调用,延时调用一个函数不立即执行，而是一段时间以后再执行
         *
         * 延时调用与定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
         *
         * 延时调用和定时调用实际上是可以相互代替的，在开发中根据需求选择
         */
        var timer=setTimeout(function () {
          console.log("num++");
        },5000);
        /**
         * 关闭延时调用
         */
        clearTimeout(timer);
      };
    </script>
  </head>
  <body>
<h1 id="count">1</h1>
  </body>
</html>

JS类的操作

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/4/29
  Time: 22:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <style type="text/css">
      .b1{
         width: 100px;
         height: 100px;
         background-color: red;
       }
      .b2{
        width: 100px;
        height: 100px;
        background-color: yellow;
      }

    </style>
    <script type="text/javascript">
      window.onload=function (ev) {
        var box=document.getElementById("box");
        var btn01=document.getElementById("btn01");

        //为btn01绑定单击响应函数
       btn01.onclick=function (ev1) {
          box.style.width="200px";
          box.style.height="200px";
          box.style.backgroundColor="yellow";

         /**
          * 希望一行代码同时修改多个样式
          * 我们可以通过修改元素的class属性间接修改样式
          * 此时浏览器只需要重新渲染页面一次，
          */
         //此处有空格
         box.className=" b2";
       }
      }
    </script>
  </head>
  <body>
   <button id="btn01">按钮,修改样式</button>
  <br/>
  <div id="box" class="b1"></div>
  </body>
</html>

敲个大西瓜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS快速入门（二）

DOM（Domcument Object Model）文档对象模型文档：整个html网页文档，对象：表示将网页中每个部分都转换为一个对象，模型：使用模型来表示对象之间的关系，方便我们获取对象，节点：node–构成html文档最基本的单元常用节点：文档节点：整个html，元素节点：html文档中的html标签属性节点：元素属性文本节点：html标签中的文本内容浏览器已经为我们提供了文档节点，对象这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页，...
复制链接

扫一扫