1 JavaScipt的组成

JavaScript由ECMAScript（核心）、BOM（浏览器对象模型）、DOM（文档对象模型）三部分组成。

2 ECMAScript

ECMAScript是ECMA-262定义的一门语言，web浏览器是ECMAScript实现可能存在的一种宿主环境，主要定义了如下：

语法
类型
语句
关键字
保留字
操作符
全局对象

3 BOM

BOM用于支持访问和操作浏览器的窗口，主要包括：

1 弹出新浏览器窗口
2 移动、缩放和关闭浏览器窗口
3 navigator对象，提供浏览器的详尽信息
4 location对象，提供浏览器加载界面的详尽信息
5 screen对象，提供关于用户屏幕分辨率的详尽信息
6 performance对象，提供浏览器内存占用、导航行为和时间统计的详尽信息
7 对cookie的支持
8 其他自定义对象，如XMLHttpRequest和IE的ActiveXObject

3.1 Window对象

window.open(url)              // 打开新窗口
window.close()                // 关闭当前窗口

window.moveTo(500, 0);       //移动窗口 
window.resizeTo(800, 600);   //改变窗口大小

window.outerHeight           //返回窗口的外部高度
window.outerWidth            //返回窗口的外部宽度

window.innerHeight           //返回窗口的文档显示区的高度
window.innerWidth            //返回窗口的文档显示区的宽度

3.2 navigator对象（了解即可）

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.appName　　    // Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　 // 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

3.3 screen对象（了解即可）

屏幕对象，不常用，一些属性：

screen.availWidth     //可用的屏幕宽度
screen.availHeight    //可用的屏幕高度

3.4 history对象（了解即可）

window.history 对象包含了用户对当前页面的浏览历史

history.forward()     // 前进一页
history.back()        // 后退一页

3.5 location对象

location.href          //获取URL
location.href="URL"   // 跳转到指定页面
location.reload()     //重新加载页面

3.6 弹出框

alert("这是警示");   // 警告框

var answer = confirm('输入正确吗？');  // 确认框，返回true或false
console.log(answer);

var str = window.prompt("请输入密码","password") // 提示框，返回password或null
console.log(str);

3.7 计时器

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

4 DOM

文档对象模型（DOM）是一个应用编程接口（API），用于在HTML中使用扩展的XML。

4.1 查找标签

// -------------------直接查找------------------
document.getElementById           // 根据ID获取一个标签
document.getElementsByClassName   // 根据class属性获取
document.getElementsByTagName     // 根据标签名获取标签合集

// -------------------间接查找------------------
parentElement            // 父节点标签元素
children                 // 所有子标签
firstElementChild        // 第一个子标签元素
lastElementChild         // 最后一个子标签元素
nextElementSibling       // 下一个兄弟标签元素
previousElementSibling   // 上一个兄弟标签元素

4.2 节点操作

// -------------------创建节点------------------
var divEle = document.createElement("div");

// -------------------添加节点------------------
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/13178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

// -------------------删除节点------------------
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="description" />
    <title>添加删除子节点</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .fu{
            position:absolute;
            /* left: 100px; */
            display: block;
            margin: 0;
            height: 400px;
            width: 400px;
            color: brown;
            font-size: medium;
            text-align: center;
            line-height: 400px;
            background-color: rgb(90, 137, 179);
        }
        .zi{
          height: 30px;
          width: 80px;
          color: rgb(43, 226, 98);
        }
    </style>
  </head>
  <body>
    <div class="fu" onclick="addEle()">父元素</div>
  </body>
  <script>
    function addEle(){
      var fuEle = document.getElementsByClassName("fu");
      var ziEle = document.createElement("button");
      ziEle.innerText = "子元素"
      ziEle.classList.add("zi");
      ziEle.addEventListener("click",removeEle); 
      fuEle[0].appendChild(ziEle);     // 添加子节点
    }
    function removeEle(e){
      e.stopPropagation();            // 阻止事件冒泡
      var fuEle = document.getElementsByClassName("fu");
      var ziEle = document.getElementsByClassName("zi");
      fuEle[0].removeChild(ziEle[0]);    // 删除子节点
    }
  </script>
</html>

4.3 属性操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src = "..."

4.4 类操作

var Ele = document.getElementById("i1");
Ele.classList.remove(cls)  删除指定类
Ele.classList.add(cls)  添加类
Ele.classList.contains(cls)  存在返回true，否则返回false
Ele.classList.toggle(cls)  存在就删除，否则添加

4.5 事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

onclick        // 当用户点击某个对象时调用的事件句柄。
ondblclick     // 当用户双击某个对象时调用的事件句柄。

onfocus        // 元素获得焦点。  
onblur         // 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       // 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      // 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     // 某个键盘按键被按下并松开。
onkeyup        // 某个键盘按键被松开。
onload         // 一张页面或一幅图像完成加载。
onmousedown    // 鼠标按钮被按下。
onmousemove    // 鼠标被移动。
onmouseout     // 鼠标从某元素移开。
onmouseover    // 鼠标移到某元素之上。

onselect      // 在文本框中的文本被选中时发生。
onsubmit      // 确认按钮被点击，使用的对象是form。

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2022-03-15 22:23:40 更:2022-03-15 22:25:48

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 6:51:48-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码