当先锋百科网

首页 1 2 3 4 5 6 7

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。