文章目录

一、基础知识
二、事件
- 示例一、鼠标点击按钮触发add2()函数的执行
- 示例二、文本框
- 示例三、页面加载事件（onload）
三、DOM对象，控制HTML元素
- 示例一、将HTML分解成DOM结点层次图
- 结点属性
- 遍历结点树
- DOM操作
- - 示例一、创建链接
  - 删除结点
  - 替换结点
  - 查找元素结点
  - 获取和设置元素结点的属性的值
四、内置对象
- Date日期对象
- String字符串对象
- Math对象
- Array数组对象
五、浏览器对象（BOM）
- history对象

一、基础知识

数组不会越界，只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。JavaScript数组的length属性是可变的arr.length;
break语句和continue语句在C和JAVA中也有，但是我就很是容易搞混，这次在JS中也碰到了，希望这次记下就再也不要忘记了呢。
break语句
在while、for、do…while、while循环中使用break语句退出当前循环（是最近的循环，不是if语句)，直接执行后面的代码。
当遇到特殊情况的时候，不会执行循环代码，循环就会立即结束。

for(初始条件;判断条件;循环后条件值更新)
{if(特殊情况){break;}循环代码
}

continue语句
仅仅跳过本次循环，而整个循环体继续执行。下面的循环中，当特殊情况发生的时候，本次循环将被跳过，而后续的循环则不会受到影响

for(初始条件;判断条件;循环后条件值更新)
{if(特殊情况){ continue; }循环代码
}

函数：是为了封装还有复用呀
函数这部分和python的就很像，不详细写了

//函数带有x，y 两个参数
function add2(x,y)
{sum = x + y;return sum; //返回函数值,return后面的值叫做返回值。
}

二、事件

事件是可以被JavaScript侦测到的行为，网页中的每个元素都可以产生某些可以触发JS函数。

onclick	onmouseover	onmouseout	onfocus	onblur	onselect	onchange	onload	onunload
鼠标点击事件	鼠标经过事件	鼠标移开事件	光标聚焦事件	光标失焦事件	内容选中事件	文本框内容改变事件	加载事件	卸载事件

示例一、鼠标点击按钮触发add2()函数的执行

 <input name="button" type="button" value="点击提交" onclick="add2()" />

将onclick改成onmouseover、onmouseout、

示例二、文本框

当光标从密码文本框离开时，触发onblur 事件，调用message()函数。
onfocus,onblur,onselect,onchange

<input name="password" type="text" value="请输入密码！" onblur="message()" />

示例三、页面加载事件（onload）

事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：
加载页面时，触发onload事件，事件写在<body>标签内。

<body onload="message()">

卸载事件（onunload）
当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。

     window.onunload = onunload_message;   function onunload_message(){   alert("您确定离开该网页吗？");   }

JavaScript 面试题：innerHTML 与 value 的区别
innerHTML 是标签内的文本，输入输出到该DOM内部纯HTML代码，也就是说使用 innerHTML, 可以在标签里面添加 html 代码也就是设置一个元素里面的 HTML 代码；

value 是 表单元素特有的属性 , 输入输出的是转义文本(字符串),因此在表单元素中获得的文本需要经过parseInt（）转换成数字类型才能进行算术运算; 非表单元素没有 value 属性，如 div，span 等；value 在不同表单元素里有不同的意义，如 button 中为按钮中的文本，input（text）为默认文本，textarea 为默认文本。
所以操作表单元素的文本内容用 value；而 innerHTML用于操作非表单元素的内容或文本内容。

三、DOM对象，控制HTML元素

DOM(Document Object Model）文档对象模型，定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构。

示例一、将HTML分解成DOM结点层次图

结点属性

结点类型：元素结点属性结点文本结点文档结点

每个结点都是对象
获取属性 Object.title
调用方法 ·Object.getAttribute()

-	nodeName	nodeType	nodeValue
-	节点的名称	节点的值	节点的类型
元素结点	标签名	undefined 或 null	1
属性结点	是属性的名称	是属性的值	2
文本结点	#text	文本自身	3

遍历结点树

childNodes	firstChild	lastChild	parentNode	nextSibling	previousSibling
返回的是一个数组,具有length属性	第一个子节点，效果等同 elementNode.childNodes[0]	最后一个子节点，elementNode.childNodes[elementNode.childNodes.length-1]	父亲结点	下一个兄弟节点	上一个兄弟结点

节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7。

如何检测结点类型，过滤子节点:
判断结点类型是否为1，如果不是元素结点则跳过，这样子就能过滤掉空白字符（就是文本结点）

DOM操作

createElement(“p” /tagName)	createTextNode()	appendChild()	insertBefore()	removeChild()	replaceChild()
创建一个元素结点（p、div、li等）	创建一个包含给定文本大的新文本节点（向用户展示的内容）如`<li>java</li>`中的java
是document方法，就是只能document调用，例子：document.createElement(“p”)	指定结点的最后一个字节点列表之后添加一个新的子节点	将一个给定结点插入到一个给定元素结点的给定子节点的前面	从一个给定元素中删除一个子节点	把一个给定父元素里的一个子节点替换为另外一个结点

示例一、创建链接

实例：按了某个按钮则跳转到某个链接
1.body
2.创建input
3.声明input的类型(button)，声明按钮上的字样（value）
两种声明方法：
3.1 点属性
3.2 setAttribute("onclick","javascript:alert('This is a text!');")

4.将按钮添加到body*/


var main = document.body;
//创建链接
function createa(url,text)
{var link=document.createElement("a");var newTextNode=document.createTextNode(text);link.appendChild(newTextNode); link.href=url;link.title=text;link.style.color="red";  main.appendChild(link);
}

删除结点

试一试，定义clearText()函数，完成节点内容的删除。

删除该节点的内容，先要获取子节点。

var content=document.getElementById("content");

然后使用循环遍历每个子节点。
使用removeChild()删除节点。

var len=content.childNodes.lengthfor(i=len-1;i>=0;i--){//从前往后会有错误,从后往前不会有错误//   document.write(content.childNodes.length);//   document.write(content.childNodes[i].innerHTML+"<br>");var x= content.removeChild(content.childNodes[i]);x=null;

为什么倒着删是正确的，但是正着删就没有办法一次性删除:

例子：
0 html
1 php
2 javascript
3 jquery
4 java

删除0 对应 html后

浏览器已经更新为

0 php
1 javascript
2 jquery
3 java

但代码还是去删除 1 对应 javascript 所以php就被留下没有删掉，只有到其他的都删完才会删到php
所以选择倒着删。

替换结点

实例：进行文本的替换
两种方法
1.创建一个新节点 newnode=createElement("")

2.创建文本结点 newnodeText=createTextNode("文本")

3.将文本结点添加为新节点的子节点
newnode.appendChild(newnodeText);

4替换结点，旧节点被替换时，所有与之相关的属性内容都将被移除
oldNode.parentNode.replaceChild(newnode,oldNode)

    /*将文本的进行替换*/function replaceMessage(){var newnode=document.createElement("i");var newTextNode=document.createTextNode("javaScript");newnode.appendChild(newTextNode);var oldNode=document.getElementById("oldnode");oldNode.parentNode.replaceChild(newnode,oldnode)}

查找元素结点

根据名称查找，返回的是集合，也有length属性

var myname=document.getElementsByName(name) ;

返回带有指定标签名的节点对象的集合。也有length属性，是一类

document.getElementsByTagName(Tagname)

document.getElementById("");

//因为id是唯一的，所以element不用加s

获取和设置元素结点的属性的值

elementNode.getAttribute(name)

elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
name：要想查询的元素节点的属性名字

elementNode.getAttribute("title");和elementNode.title;区别

elementNode.setAttribute(name,value) 和elementNode.name=value

.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

四、内置对象

Date日期对象

定义时间对象

//指定时间
var d = new Date(2012, 10, 1);  //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日

设置现在的时间

var mydate=new Date();//当前时间2014年3月6日

getDay() 返回星期，返回的是0-6的数字，0 表示星期天

get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。

String字符串对象

字符串的长度 string.length
string.toUpperCase()
string.toLowerCase()

返回指定位置的字符
stringObject.charAt(index)

可返回某个指定的字符串值在字符串中首次出现的位置。
stringObject.indexOf(substring, startpos)

split() 方法将字符串分割为字符串数组，并返回此数组。
stringObject.split(separator,limit)

如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

提取字符串
stringObject.substring(start,end)
stringObject.substr(start,length)
start 如果是负数，则是从字符串的尾部开始算起的位置

Math对象

Math.ceil(x)	Math.floor(x)	Math.round(x)	Math.random()
向上取整（天花板，ceiling）	向下取整（地板）	四舍五入	介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。

Array数组对象

arrayObject.concat(array1,array2,…,arrayN)	join(separator)方法用于把数组中的所有元素放入一个字符串	颠倒数组元素顺序reverse()	arrayObject.slice(start,end)	sort()
用于连接两个或多个数组，返回一个新数组	join()方法用于把数组中的所有元素放入一个字符串，通过separator将元素分割开，如果没有参数就直接用逗号隔开	会改变原来的数组，不会创建新的数组	类似字符串中substring，不会修改数组，而是返回一个子数组

2.如要实现这一点，就必须使用一个排序函数，代码如下：

<script type="text/javascript">function sortNum(a,b) {return a - b;//升序，如降序，把“a - b”该成“b - a”
}var myarr = new Array("80","16","50","6","100","1");document.write(myarr + "<br>");document.write(myarr.sort(sortNum));
</script>

某班的成绩出来了，现在老师要把班级的成绩打印出来。

效果图:

XXXX年XX月X日星期X–班级总分为:81

<script type="text/javascript">//通过javascript的日期对象来得到当前的日期，并输出。var mydate=new Date();// document.write(mydate);document.write(mydate.getYear()+1900+"年");document.write(mydate.getMonth()+1+"月");document.write(mydate.getDate()+"日  ");week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];document.write(week[mydate.getDay()]);document.write("   --班级总分为：")//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";var arr= scoreStr.split(";");//从数组中将成绩撮出来，然后求和取整，并输出。var i=0,sum=0;for(i=0;i<arr.length;i++){sum+=parseInt(arr[i].substring(3));}var aver=Math.ceil(sum/arr.length);document.write(aver);</script>

五、浏览器对象（BOM）

（Browser Object Model）

示例一：
我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:

//
var int=setInterval(clock, 100);function clock(){var time=new Date();document.getElementById("clock").value = time;}

实例二：

每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间。

var i=setInterval("clock()",100);function clock(){//显示时间
var time=new Date();
document.getElementById("").value=time;}<input type="button" value="Stop" onclick="clearInterval(i)" />

history对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

history.[属性|方法]

JavaScript入门知识整理二相关推荐

【机器学习知识整理二】处理分类数据、处理文本、处理日期和时间
系列文章目录上一篇:机器学习知识整理一:数据加载.数据整理.数值型数据处理文章目录系列文章目录前言一.处理分类数据 1. 对nominal型分类特征编码 2. 对ordinal分类特征编码 ...
【Web 三件套】JavaScript 入门知识（超多动图、超详解）
文章目录 1. 认识 JavaScript 1.1 JavaScript 基本介绍 1.2 JavaScript.HTML 和 CSS 之间的关系 1.3 JavaScript 的运行过程 1.4 J ...
前端入门知识整理（1）Vscode使用
前端入门(1) 最近社团需要,所以整理了一下从0开始学习前端的一些知识. 安装软件 (VScode)以及对应插件的安装,相关配置. 介绍vscode常用快捷键初始化第一个html程序 1.软件以及插 ...
speedtree中文对照ppt_SpeedTree树木建模入门知识整理
本文知识点整理仅为记录本人学习过程中的知识点,略显粗浅,内容较杂乱,敬请各位见谅! 一.软件介绍 Speedtree是三维软件做树木的一个很强的软件,支持很多树木的快速建立和渲染,而且它自己本身还带有 ...
Uni-APP入门知识整理
目录前言 - 课程介绍一.课程背景二.学前须知三.课程大纲 UniAPP 快速入门学习一.UniAPP 介绍 (1)什么是 UniAPP ? (2)为什么要选择 UniAPP ? (3)Un ...
深度学习入门知识整理-训练技巧以及模型调优
目录网络模型先简单后复杂确认模型损失检查中间输出和连接关于可视化神经网络的主要方法,Faizan Shaikh 举出了三个例子: 超参数的选择学习率范围侧视图Colab Notebook N ...
java快速入门知识整理：9、java数据类型：布尔型(boolean)
文章目录一.布尔型(逻辑型)简单说明二.代码演示说明一.布尔型(逻辑型)简单说明在 Java 语言中布尔类型的值只包括 true 和 false,没有其他值,不包括 1 和 0, 布尔类型的数 ...
入门知识（二）WPF所有的画刷工具
转自https://www.cnblogs.com/huangxincheng/archive/2012/07/14/2591941.html 这一篇我们聊聊wpf中的画刷,在wpf中如果想玩各种花哨 ...
pytorch基础知识整理(二）数据加载
pytorch数据加载组件位于torch.utils.data中. from torch.utils.data import DataLoader, Dataset, Sampler 1, torch ...

JavaScript入门知识整理二