Javascript基础学习——周总结（二）

最新推荐文章于 2023-01-15 13:49:32 发布

Ocean！！

最新推荐文章于 2023-01-15 13:49:32 发布

阅读量130

点赞数

分类专栏：前端入门学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_51368103/article/details/116429556

版权

前端入门学习笔记专栏收录该内容

23 篇文章 1 订阅

订阅专栏

Javascript基础学习——周总结（二）:

1. 有关a索引问题：

var allA = document.getElementsByTagName("a");
for(var i=0;i<allA.length;i++){
	allA[i].onclick = function(){
		alert(allA[i]);
		return false;
	}
}

注意：for循环会在页面加载完成后立即执行，而这段代码中给a绑定的单击响应函数，在单机时才会执行。

2. 操作内联样式：

通过JS修改元素样式的方法：
元素名.style.样式名 = 值;
eg:box1.style.width = "300px";

注意：（1）background-color等属性名不合法，需用驼峰命名法修改，如：backgroundColor
（2）通过style属性设置/读取的都是内联样式，优先级较高，且无法读取样式表中的样式

3. 获取元素的样式：

（1）元素.currentStyle.样式名（读取元素当前的显示样式）【且只有IE支持】
（2）window.getComputedStyle();【其他浏览器支持】
为解决兼容性问题，可以结合这两种方法写一个getStyle()函数：

function getStyle(obj,name) {
            if(window.getComputedStyle){
              return getComputedStyle(obj,null)[name];
            }
            else{
              return obj.currentStyle[name];
            }
          }

4.其他样式相关的属性：

clientHeight
clientWidth
offsetWidth
offsetHeight
offsetParent 获取当前元素的定位父元素
scrollWidth 等等

5. 事件

5.1 事件的冒泡：当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件也不会有什么表现但事件确实传递了。）

如何取消事件的冒泡？
event.cancelBubble = true;

5.2 target属性：

target 事件属性可返回事件的目标节点(触发该事件的节点)

5.3 事件的绑定：

addEventListener();//此方法可以同时绑定多个事件
参数：1."参数名",（不要"on"）
2.回调函数
3.是否在捕获阶段触发事件，默认是false

5.4 了解到其他事件：

onmousedown, onmouseup ,onmouseWheel,onmouseover等等
以及 wheelDelta属性：
获取滚轮方向，↑为正值，↓为负值

5.5 一个取消默认行为的方法：【IE8并不支持】

preventDefault();

5.6键盘事件：

onkeydown
onkeyup
相关属性：
event.keyCode 可以获取按键的编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div移动练习</title>
  <style>
    #box1{
      background-color: #73c9e5;
      width: 100px;
      height: 100px;
      position: absolute;
    }
  </style>
  <script type="text/javascript">


    window.onload = function () {
      var box1 = document.getElementById("box1");
      var speed =10;
      var dir =0;
      //开启一个定时器控制div的 移动

      setInterval(function () {


        switch (dir) {
          case 37:
            box1.style.left = box1.offsetLeft-speed+"px";
            break;
          case 39:
            box1.style.left = box1.offsetLeft+speed+"px";
            break;
          case 38:
            box1.style.top = box1.offsetTop-speed+"px";
            break;
          case 40:
            box1.style.top = box1.offsetTop+speed+"px";
            break;
        }

      },30)


      document.onkeydown = function(event){
        event = event || window.event;


        if(event.ctrlKey){
          speed = 50;
        }
        else{
          speed = 10;
        }

        dir = event.keyCode;

      }

      document.onkeyup = function () {
        dir =0;

      }
    };


  </script>
</head>
<body>
<div id="box1"></div>
</body>
</html>

6. BOM（Browser Object Model）浏览器对象模型：

其中的几个对象：

Window
Navigator
Location
History
Screen

6.1 Window对象：

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象也是 window 对象属性

window.innerHeight - 浏览器窗口的内高度（以像素计）
window.innerWidth - 浏览器窗口的内宽度（以像素计）
浏览器窗口（浏览器视口）不包括工具栏和滚动条。


一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

6.2 Navigator对象：

window.navigator 对象可以不带 window 前缀来写。

一些例子：

navigator.appName
navigator.appCodeName
navigator.platform

6.3 其他属性

浏览器应用程序名称
appName 属性返回浏览器的应用程序名称：
userAgent 属性返回由浏览器发送到服务器的用户代理报头

注：现已不使用navigator中的信息来确定浏览器了

6.4 History对象：

属性：

length:返回当次访问页面的数量
方法：
back() ；回退上一个页面
forward(); 跳转下一个页面
go(); 跳转指定页面【例如1是向前跳转一个页，-1是向后跳转一个页】

6.5 Location对象：

可以通过直接设置location属性的值为相对/绝对路径
window.location 对象可不带 window 前缀书写。

一些例子：

window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档

其中的一些方法：
assign(); 参数是地址，可以跳转到其他页面
reload(); 重新加载当前页面，如果参数传true，会强制清空缓存
replace(); 使用新文档替换当前页面

7.定时器：

7.1 定时调用（开启一个定时器）：

setInterval(); 可以将一个函数每隔一段时间执行一次
参数：1.回调函数 2.每次调用间隔的时间，单位是毫秒
——返回值：会返回一个Number类型的数据，这个数字用来作为定时器的唯一标识
clearInterval(); 关闭一个定时器
参数：该方法需要一个定时器的标识作为参数

7.2 延时调用

setTimeout(); 一个函数不立即执行而是隔一段时间后执行
参数：1.回调函数 2. 间隔时间，单位是毫秒
注：函数只会被调用一次
PS：
其实定时调用可以看作n个延时调用的集合

7.3 定时器的简单应用：（改进ing）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器的应用</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    #box1{
      width: 100px;
      height: 100px;
      background-color: skyblue;
      position: absolute;
      left: 0;
    }
    #box2{
      width: 100px;
      height: 100px;
      background-color: lawngreen;
      position: absolute;
      left: 0;
      top: 250px;
    }
  </style>
  <script type="text/javascript">
    function getStyle(obj,name) {
      if(window.getComputedStyle){
        return getComputedStyle(obj,null)[name];
      }
      else{
        return obj.currentStyle[name];
      }
    }


    window.onload = function () {

      //获取box1
      var box1 = document.getElementById("box1");
      //获取btn01
      var btn01 =document.getElementById("btn01");
      //获取btn02
      var btn02 = document.getElementById("btn02");
      //获取btn03
      var btn03 = document.getElementById("btn03");
      //获取btn04
      var btn04 = document.getElementById("btn04");

      function move(obj,attr,target,speed,callback){

        //获取元素目前的位置
        var current = parseInt(getStyle(obj,attr));
        //关闭上一个定时器
        clearInterval(obj.timer);
        //开启一个定时器用来执行动画效果
        if(current > target){
          speed = -speed;
        }
        obj.timer= setInterval(function () {
          //获取box1原本的left值
          var oldValue = parseInt(getStyle(obj,attr));
          var newValue = oldValue + speed;
          if((speed<0 && newValue < target)||(speed>0 && newValue>target)){
              newValue=target;
          }

          obj.style[attr]=newValue+"px";
          //判断当left为800时关闭定时器
          if(newValue == target){
            clearInterval(obj.timer);
            callback && callback();//注意此函数只会执行一次！
          }

        },30)
      }

      btn01.onclick =function () {
          move(box1,"left",800,20,function () {
              move(box1,"width",600,10,function () {
                move(box1,"height",800,20,function () {
                  move(box1,"width",200,25,function () {
                    move(box1,"height",200,20,function () {
                      move(box1,"left",0,25,function () {

                      })
                    })
                  })
                })
              })
          });
      }
      btn02.onclick =function () {
          move(box1,"left",0,10);
      }
      btn03.onclick =function () {
        move(box2,"left",800,20);
      }
      btn04.onclick=function () {
        move(box2,"left",0,20);
      }



    }

  </script>
</head>
<body>
    <button id="btn01">点击按钮box1开始变换</button>
    <button id="btn02">点击按钮box1向左移动</button>

    <br><br>

    <div id="box1"></div>

    <br><br><br><br><br><br><br>
    <button id="btn03">点击按钮box2向右移动</button>
    <button id="btn04">点击按钮box2向左移动</button>
    <div id="box2"></div>
    <div style="width: 0; height: 1000px; border-left: 1px black solid; position: absolute; left: 800px; top: 0;"></div>
</body>
</html>

Ocean！！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript基础学习——周总结（二）

Javascript基础学习——周总结（二）:1. 有关a索引问题：var allA = document.getElementsByTagName("a");for(var i=0;i<allA.length;i++){ allA[i].onclick = function(){ alert(allA[i]); return false; }}注意：for循环会在页面加载完成后立即执行，而这段代码中给a绑定的单击响应函数，在单机时才会执行。2. 操作内联样式：通过JS修改
复制链接

扫一扫