web之javascript基础指南

最新推荐文章于 2022-01-24 23:18:45 发布

一叶轻舟向大海

最新推荐文章于 2022-01-24 23:18:45 发布

阅读量238

点赞数

本文链接：https://blog.csdn.net/weixin_42628805/article/details/81026994

版权

JacaScript基础

JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。JavaScript 是脚本语言，可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
web三元素：

 - HTML 定义了网页的内容
 - CSS 描述了网页的布局
 - JavaScript 网页的行为

JS功能实例

直接写入html输出流

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

</body>
</html>

对网页上的事件作出反应

<p>
JavaScript 能够对事件作出反应。比如对按钮的点击事件：
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button>

alert() 函数在JavaScript中并不常用，但它对于代码测试非常方便。
- 动态改变html的内容

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()//改变文本内容
{
    x=document.getElementById("demo");  // 找到元素
    x.innerHTML="Hello JavaScript!";    // 改变文本内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

<script>
function changeImage()//改变图像内容
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))//检索src属性中是否有bulbon字符串
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

document.getElementById(“id”)。这个方法是 HTML DOM 中定义的。DOM (Document Object Model)（文档对象模型）是用于访问HTML元素的正式 W3C 标准。
- 动态改变html的样式

<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

checkbox全选和取消全选

看书：<input type="checkbox" name="checkbox" value=1><br>
写字：<input type="checkbox" name="checkbox"value=2><br>
<button onclick="allcheck()">全选/取消</button>

var checkAll = false;
function allcheck(){
    checkAll = !checkAll;
    let inputs = document.getElementsByName('checkbox');
    for(var i =0;i<inputs.length;i++){
    inputs[i].checked = checkAll
    }
}

JS基本用法

HTML 中的js脚本必须位于标签之间，可被放置在 HTML 页面的和部分中。通过将函数放在head中，然后再body中响应事件。

将函数保存在外部文件中，这样既便于修改还可以增加代码的复用,使用外部文件要在

<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script src="myScript.js"></script>//myFunction 保存在名为 "myScript.js" 的外部文件中。

js输出

JavaScript 没有任何打印或者输出的函数，但可以通过不同的方式来输出数据

使用 window.alert() 直接在网页上弹出警告框。

<script>
window.alert(5 + 6);
</script>

使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log()写入到浏览器的控制台。如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。浏览器中使用F12来启用调试模式，在调试窗口中点击 “Console” 菜单。

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

js语法

js字面量：一般固定值称为字面量。包括数字Number、字符串String、表达式、数组Array、对象OObject、函数字面量。

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}//对象字面量
function myFunction(a, b) { return a * b;}//函数字面量

js变量：使用关键字 var 来定义变量，未赋值的变量都是undefined，使用等号来为变量赋值。使用let来声明函数中的局部变量。
js操作符：分为运算符：+ - * / = % ++ –，比较运算符：== ！= < > >= <= ===绝对等于指值和类型都相等 !==绝对不等于，逻辑运算符：&& ！||,条件运算符：voteable=(age<18)?”年龄太小”:”年龄已达到”;

js数据类型：js数据类型有字符串（string）、数字(number)、布尔(boolean)、对象(object)、未定义（undefined），还有三种对象类型：数组（Array）、时间（Date）、对象（Object）。判断变量的数据类型可以通过instanceof判断。

不是数字（NaN）的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

创建数组：

var arr1 = new Array('a', 'b', 'c');    //这是一个预定义的数组，在创建时初始化
var arr2 = ['a', 'b', 'c' ];       //同样是在创建时初始化，但是这种创建更为简洁直观
var arr3 = new Array( );   var arr4 = [ ];     //这两种是创建空的数组

创建对象：

//第一种方法
function Demo(){
var obj=new Object();
obj.name="张思";
obj.age=12;
obj.firstF=function(){
}
return obj;
}
var one=Demo();// 调用输出
document.write(one.age);

//第二种方法
function Demo(){
this.name="张思";
this.age=12;
this.firstF=function(){
}
｝
var one=new Demo
// 调用输出
document.write(one.age);

js事件
js事件分为：鼠标事件、键盘事件、框架/对象事件、表单事件、剪切板事件、打事件、拖动事件、多媒体事件等等。常见的js事件如下：

事件	描述	事件	描述
onchange	html元素改变	onmouseover	用户在一个HTML元素上移动鼠标
onclick	元素被点击	onmouseout	用户在一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键	onload	浏览器加载完成页面
onkeyup	用户松开键盘按键	onunload	用户退出页面

事件传递有两种方式：冒泡与捕获。

        事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p&gt元素, 哪个元素的 “click” 事件先被触发呢？
        在冒泡中，内部元素的事件会先被触发，然后再触发外部元素。
        在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件。
addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：默认值为false,即冒泡传递，当值为 true 时, 事件使用捕获传递
- js正则表达式
基本语法：/正则表达式主体/修饰符(可选)

/runoob/i  是一个正则表达式。runoob  是一个正则表达式主体 (用于检索)。
i  是一个修饰符 (搜索不区分大小写)。

        正则表达式常用于下列两个方法中：
        search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
        replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
        正则表达式修饰符：

修饰符	描述
i	对大小写不敏感的匹配
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
n	执行多行匹配

正则表达式模式：

表达式	描述	量词	描述	元字符	描述
[abc]	查找方括号之间的任何字符	n+	匹配任何包含至少一个 n 的字符串	\d	查找数字
[0-9]	查找从0-9的数字	n*	匹配任何包含零个或多个 n 的字符串	\s	查找空白字符
(x \| y)	查找任何以\|分隔的选项	n？	匹配任何包含零个或一个 n 的字符串	\b	匹配单词边界

正则表达式方法：
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

/e/.test("The best things in life are free!")

exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

/e/.exec("The best things in life are free!");

js html DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM (文档对象模型)当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

创建新的html元素
要创建新的 HTML元素需要先创建一个元素，然后在已存在的元素中添加它

<script>
var para = document.createElement("p");//创建新元素
var node = document.createTextNode("这是一个新的段落。");//给新元素添加文本
para.appendChild(node);//将文本加入到新元素中
var element = document.getElementById("div1");//找到一个元素
element.appendChild(para);//将新元素加入到元素尾部
</script>

想要指定新元素插入的位置可以用insertBefore() 方法:

element.insertBefore(para, child);//只需把最后一步换就好了，这样新元素会插在变量child所代表的元素前

删除已有元素
要移除一个元素，你需要知道该元素的父元素。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

//1.查找 id="div1" 的父元素:
var parent = document.getElementById("div1");
//2.查找 id="p1" 的 <p>子 元素:
var child = document.getElementById("p1");
//3.从父元素中移除子节点：
parent.removeChild(child);

//也可以子元素直接删除自身
var child = document.getElementById("p1");
child.parentNode.removeChild(child);

替换元素
首先得创建新元素并给它添加内容，然后找到父元素和子元素，调用replaceChild()替换。

//para为创建的新元素变量，child为将要被替换的元素变量
parent.replaceChild(para, child);

DOM collection
getElementsByTagName() 方法返回 HTMLCollection 对象。HTMLCollection 对象类似 HTML 元素的一个数组，但HTMLCollection 不是一个数组！你可以像数组一样，使用索引来获取元素。
HTMLCollection对象的length属性定义了集合中元素的数量。
DOM 节点列表
NodeList 对象是一个从文档中获取的节点列表 (集合) 。NodeList 对象类似 HTMLCollection 对象。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
NodeList和collection比较
- HTMLCollection是HTML元素的集合。NodeList 是一个文档节点的集合。
- HTMLCollection元素可以通过 name，id 或索引来获取。NodeList只能通过索引来获取
- 只有NodeList对象有包含属性节点和文本节点。
- NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。
- NodeList 与 HTMLCollection 都有 length 属性

js 浏览器BOM

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。由于现代浏览器已经（几乎）实现了 JavaScript交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

Window 对象
所有浏览器都支持window对象。它表示浏览器窗口。所有 JavaScript全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：

//window可以直接点出document
window.document.getElementById("header");

Window 尺寸
        有三种方法能够确定浏览器窗口的尺寸。
        对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
        对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
        或者
document.body.clientHeight
document.body.clientWidth
        兼容性涵盖所有浏览器实例,该例显示浏览器窗口的高度和宽度（不包括工具栏/滚动条）：

<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>

window方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
window下常用的几个属性
- window.screen
  包含有关用户屏幕的信息。
  screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
  screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。
- window.location
  用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
  location.href 属性返回当前页面的 URL。
  location.pathname 属性返回 URL 的路径名。
  location.assign(文档的地址) 方法加载新的文档。
- window.history
  此对象包含浏览器的历史。
  history.back() 方法加载历史列表中的前一个 URL。
  history forward() 方法加载历史列表中的下一个 URL。
- window.navigator
  此对象包含有关访问者浏览器的信息。来自 navigator对象的信息很容易被更改，具有误导性，不应该被用于检测浏览器版本。
  想要做浏览器检测可以根据不同浏览器的一些特性来做，例如只有 Opera 支持属性 “window.opera”。
js弹窗
- 警告框
  警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确认才能继续操作。
  html window.alert("sometext");//window可省略
- 确认框
  确认框通常用于验证是否接受用户操作。
  当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。当你点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。
  html window.confirm("sometext");//window可省略
- 提示框
  提示框经常用于提示用户在进入页面前输入某个值，然后点击确认或取消按钮才能继续操作。点击确认，返回输入的值。反之返回值为 null。
  html var person=prompt("请输入你的名字","Harry Potter"); if (person!=null && person!="") { x="你好 " + person + "! 今天感觉如何?"; document.getElementById("demo").innerHTML=x; }
  弹窗使用反斜杠 + “n”(\n) 来设置换行。
##### js计时事件
- 在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
  在 JavaScritp 中使用计时事件两个关键方法是:
- setInterval() 时钟示例：
  html <p>页面上显示时钟：</p> <p id="demo"></p> <button onclick="myStopFunction()">停止</button> <script> var myVar=setInterval(function(){myTimer()},1000);//1000毫秒计时执行myTimer函数 function myTimer(){ var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; } function myStopFunction(){ clearInterval(myVar);//停止计时事件 } </script>
- setTimeout()弹窗示例：
  html <p>点击第一个按钮等待3秒后出现"Hello"弹框。</p> <p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p> <button onclick="myFunction()">点我</button> <button onclick="myStopFunction()">停止弹框</button> <script> var myVar; function myFunction(){ myVar=setTimeout(function(){alert("Hello")},3000);//设置3000毫秒后执行函数 } function myStopFunction(){ clearTimeout(myVar);//停止计时事件 } </script>

Cookie 用于存储 web 页面的用户信息。
当 web 服务器向浏览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是记录客户端的用户信息，存储于你电脑上的文本文件中。在用户下一次访问该页面时，在 cookie 中读取用户访问记录添加到该请求中。服务端通过这种方式来获取用户的信息，Cookie 以名/值对形式存储。

通过document.cookie 属性来创建、读取、及删除 cookie：

//创建cookie，设置cookie的过期时间参数expires，告诉浏览器cookie的路径path，默认cookie属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

//读取cookie，以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; ...
var x = document.cookie;

//修改coolie，就是覆盖值就好了
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

//删除cookie，只需要设置 expires 参数为过期时间之前即可，删除时不必指定 cookie 的值。
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

js库

对于浏览器差异的复杂处理等问题，通常很困难也很耗时。为了应对这些调整，许多的 JavaScript (helper) 库应运而生，也称为 JavaScript 框架。语法如下：

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>//引用jQuery库

在决定为网页使用框架之前，首先对框架进行测试。JavaScript框架很容易进行测试，通常您只需从网页中引用一个库文件即可看是否可用。
常用的JavaScript 框架：

jQuery
jQuery 是目前最受欢迎的 JavaScript 框架。它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。
jQuery 同时提供companionUI（用户界面）和插件
##### Prototype
Prototype是一种库，提供用于执行常见 web 任务的简单 API。
Mootools
MooTools 也是一个框架，提供了可使常见的 JavaScript 编程更为简单的 API。 MooTools 也含有一些轻量级的效果和动画函数。
其他一些框架
        YUI - Yahoo! User Interface Framework，涵盖大量函数的大型库，从简单的 JavaScript 功能到完整的 internet widget。
        Ext JS - 可定制的 widget，用于构建富因特网应用程序（rich Internet applications）。
        Dojo - 用于 DOM 操作、事件、widget 等的工具包。
script.aculo.us - 开源的 JavaScript 框架，针对可视效果和界面行为。
        UIZE - Widget、AJAX、DOM、模板等等。

CDN内容分发网络
        在开发中，许多不同的网站会使用相同的 JavaScript 框架，那么把框架库存放在一个通用的位置共享就很方便，CDN (Content Delivery Network) 就是这样一个地方。CDN是包含可分享代码库的服务器网络。
        Google 为一系列 JavaScript 库提供了免费的 CDN，包括：
jQuery、Prototype、MooTools、Dojo、Yahoo! YUI。但是由于需要翻墙，所以建议使用百度静态资源公共库。
    百度CDN：
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    新浪CDN：
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    Microsoft CDN:
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
    google CDN：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>