JavaScript

最新推荐文章于 2024-11-02 19:34:57 发布

sdu_wzj

最新推荐文章于 2024-11-02 19:34:57 发布

阅读量196

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/wzzzj/article/details/113174862

版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

JavaScript

JavaScript概述
ECMAScript
DOM
BOM
- - 浏览器对象模型
  - 定时器

JavaScript概述

概述

JavaScript是一种运行于JavaScript解释器/引擎中的解释型脚本语言。解释型：运行之前不需要编译，运行之前不会检查错误，直到运行中碰到错误为止。运行环境有独立安装的JS解释器（node.js）和嵌入在浏览器内核中的JS解释器。

JS的组成

核心（ECMAScript）
文本对象模型（DOM，Document Object Model）让JS有能力与网页对话
浏览器对象模型（BOM，Browser Object Model）让JS有能力与浏览器对话

浏览器内核的作用

负责页面内容的渲染。内核主要有两部分组成：1内容排版引擎解析HTML和CSS。2脚本解释引擎解析JavaScript。

JS的添加方式

JS同样具有直接行内使用，内嵌使用和外联三种。
行内使用

    <button onclick="alert('hello world')">单击试试</button>

内嵌使用------通过script标签引用JS代码。注：它允许出现在html的任意位置

    <script >
        alert("hello world");
    </script>

外联JS文件------创建JS文件，在HTML页面引用JS文件。注：一旦引用了外部JS，script这对标签之内就不内有代码了

<script src='JS/my.js'>这里的代码不会被执行</script>

ECMAScript

1.注释：
使用分号表示结束，大小写敏感。var声明变量。基本数据类型：数字类型，字符串类型，布尔类型，空。
函数typeof()或typeof 返回变量的类型。注：所有的数据类型与string做+运算时，最后的结果都为string

类型转换

toString()--------将任意类型的数据转换为string类型，语法：变量.toString()
parseInt()-------获取指定数据的整数部分，语法：var result=parseInt(数据);注：它从左向右依次转换，碰到第一个非整数字符，则停止转换，如果第一个字符就是非整数字符的话，结果为NaN。
parseFloat()-----将指定数据转换成小数。
Number()--------将一个字符解析为数字。注：如果包含非法字符则返回NaN。

数组

分为索引数组和关联数组。
索引数组的下标是从0 到 length-1 来获取。
关联数组自定义下标，例：sum[‘price’]=35.6;注：关联数组只能使用 for…in 循环且length属性失效。优点：查找快速。

数组API函数

String(arr)-------------将数组arr中的每个元素转为字符串，用逗号分割。
arr.join(“连接符”)----将arr中的每个元素转为字符串，用自定义的连接符分隔。
arr.concat(arr1,arr2)---------------拼接两个或更多的数组，并返回结果。不修改原数组，而返回一个新数组。
arr.slice(start,end)-------选取数组中start位置开始，到end（不包括）结束的所有元素组成新数组。
arr.splice(start,n)--------删除数组arr中start位置开始的n个元素。
arr.splice(start,0,值1,值2,…)------在arr中start位置插入新值1，值2，原start位及其之后的值向后顺移。
arr.splice(start,n,值1,值2,…)------替换（其实就是删除旧的插入新的），先删除arr中start位置的n个值，再在start位置插入新值。
arr.reverse()-------------颠倒数组中元素的顺序。
arr.sort()-----------------默认将所有元素转为字符串再按从小到大排序。

DOM

DOM是W3c的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容，结构和样式。简单理解就是对网页进行增删改查的操作。

DOM查找

按id属性，精确查找一个元素对象。语法：var elem=document.getElementById(“id”);
按标签名查找，查找指定parent节点下的所有标签为tag的子代节点。语法：var list=parent.getElementsByTagName(“tag”); 注：可以用在任意父元素上；不仅查找直接子节点，而且查所有子代节点；返回一个集合，即使只找到一个元素也返回集合。
按name属性查找，可以返回DOM树中具有指定name属性值的所有子元素集合。语法：var list=document.getElementsByName(‘name属性值’);
通过class属性查找，查找父元素下指定class属性的元素。语法：var elem=parent.getElementsByClassName(‘class’);
通过CSS选择器查找。如果只找一个元素：var elem=parent.querySelector(“selector”);其中selector支持一切css选择器，如果选择器匹配多个，只返回第一个。如果找多个：var elem=parent.querySelectorAll(“selector”);

DOM修改

核心DOM：可操作一切结构化文档的API，包括HTML和XML，万能但繁琐
HTML DOM：专门操作HTML文档的简化版本DOM API

修改属性

读取属性值：var value=elem.getAttribute(“属性名”);
修改属性值：elem.setAttribute(“属性名”,value);
判断是否包含指定属性：var bool=elem.hasAttribute(“属性名”);
删除属性：elem.removeAttribute(“属性名”);
修改样式：内联样式：elem.style.属性名
强调：属性名去横线，变驼峰。例;list-style-type=>listStyleType

DOM添加

添加元素的步骤

创建空元素----------------语法：var elem=document.createElement(“元素名”);
设置关键属性

在这里插入图片描述

将元素添加到DOM树----------------语法：parentNode.appendChild(childNode);可用于为一父元素追加最后一个子节点。或者是 parentNode.insertBefore(newChild,existingChild); 用于在父元素中的指定子节点前添加一个新的子节点。

添加元素优化

因为每次修改DOM树都导致重新layout，所以应尽量减少操作DOM树。

如果同时创建父元素和子元素时，建议在内存中先将子元素添加到父元素，再将父元素一次性挂到页面。
如果只添加多个平级子元素时，就要将所有子元素临时添加到文档片段中，再将文档片段整体添加到页面。

BOM

专门操作浏览器窗口的API——没有标准，有兼容性问题。

浏览器对象模型

window：代表整个窗口。
history：封装当前窗口打开后，成功访问过的历史url记录。
navigator：封装浏览器配置信息。
document：封装当前正在加载的网页内容。
location：封装了当前窗口正在打开的url地址。
screen：封装了屏幕的信息。
event：定义了网页中的事件机制。

定时器

让程序按指定时间就建个自动执行任务。

周期性定时器
语法：setInterval(exp,time)-----------周期性触发代码exp

   <script>
       var timer=setInterval(function(){
           console.log('hello world')
       },1000)
       <!--周期性触发function,时间周期为1000毫秒-->
   </script>

停止定时器：clearInterval(timer)

一次性定时器（其实就是让程序延迟一段时间执行）
语法：setTimeout(exp,time)-----------一次性触发代码exp

   <script>
       setTimeout(function(){
           alert("恭喜过关");
       },3000)
   </script>