一、javascript中dom的分类
DOM：document object model，翻译过来叫做文档对象模型，它是由W3C制定的一套访问和操作XML文档的标准，即API，做后台的一般都很熟悉api这个词，就是接口的意思，说的再直白一点就是函数、方法。因此，直接的，可以这样理解，dom就是接口，比如我们常见的getElementsByTagName()，getElementsByTagName()，setAttribute()等等。
DOM与特定的平台、浏览器、开发语言无关，不同的语言都可以实现DOM，比如因为JavaScript和PHP、java都实现了DOM，因此你可以看到 JavaScript中有getElementsByTagName()方法，PHP中也有 getElementsByTagName()，java中还有getElementsByTagName()方法，而getElementsByTagName()方法就是DOM规定的访问XML文档的接口之一。
dom本来是就是针对xml的。html与xml有相同点，也有不同点。XML和HTML都来自于SGML，它们都含有标记，有着相似的语法，但是html是有语义的标记语言，比如h1表示标题，p表示段落，xml没有固定的标记，只能通过自定义的标记来描述数据的形式和结构。HTML编写的网页形成的节点树在结构上与XML节点树一样，可以看做是一个符合DOM的XML文档，因此可以使用实现了DOM的程序语言（如JavaScript）来访问和操作HTML文档，这是xml与html本身具有很强的相似性的原因。
虽然相似，但毕竟不同，JavaScript不仅实现了标准的DOM方法和属性（即由W3C制定的api），同时也还实现了HTML特有的 DOM方法和属性，前者即为DOM Core，并不专属于JavaScript，后者称为HTML-DOM。
dom的分类：
1.DOM Core
javaScript中的getElementById(),getElementsByTagName(); getAttribute()和setAttribute();等方法,这些都是DOM Core的组成部分.
2.HTML-DOM
eg: 使用HTML-DOM来获取表单对象的方法
document.fomrs //HTML-DOM提供了一个fomrs对象
eg: 使用HTML-DOM来获取某元素的src属性的方法
element.src;
又或者element.childNodes、element.firstChild、element.lastChild等
3.CSS-DOM
element.style.color="red";
二、JavaScript Array filter() 方法与map()方法比较
直接通过JavaScript代码来看看区别吧
<script>
/*
需求：从arr中筛选出大于100的元素并放入数组中返回
*/
//方法一
var arr=[77,200,60,300];
var newarr=arr.map(function(currentValue,i,arr){
//return currentValue>100;//[false,true,false,true]
if (currentValue>100) return currentValue;
});
console.log("方法一第一步经过map方法处理后的结果：")
//map方法返回的数组长度还是原来的数组长度，偏重于对原来数组的每一个值进行处理后进行返回
console.log(newarr);//[undefined,200,undefined,300]
var newarr2=newarr.filter(function(currentValue,i,arr){
if (currentValue) return currentValue;
});
console.log("方法一第二步经过filter方法处理后的结果：")
//filter方法偏重于在原数组中过滤符合条件的元素，并把符合条件的元素作为数组返回
console.log(newarr2);//[200,300]
//方法二
//数组中的每个元素都会调用filter方法，如果filter返回true，则把当前元素放入新的数组中
var finalArr=arr.filter(function(currentValue,i,arr){
//return currentValue>100;//这种方法跟下面写法是一样的
if(currentValue>100) return currentValue;
});
console.log("方法二经过filter方法处理后的结果：")
console.log(finalArr);//[200,300]
</script>
总结：
map与filter区别：
1.JavaScript里面数组的map方法返回的长度总是和原数组相同的，而filter方法则不一定
2.map返回的数组里面的值就是map回调函数里面return的东西，而filter返回的数组里面的值是回调函数里面return true的当前值currentValue
三、JavaScript位或运算符 |=
|=位或运算符
功能：对变量值与表达式值执行按位“或运算”，并将结果赋给该变量。
格式：result |= expression
参数解释：
result：任何变量。
expression：任何表达式。
位或运算符|=等价于
result = result | expression
该运算符的运算流程如下所示：
<script>
var a=5;
a|=12;
console.log(a);//结果:13
</script>
5的二进制0101，12的二进制1100，即流程如下：
0101 (result)
1100 (expression)
----
1101 (output)
任何时候，只要两个表达式中的一个表达式的某位为 1，则结果中的该位为 1。否则，结果中的该位为 0。
四、javascript里面typeof与instanceof的区别
JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。但它们之间还是有区别的：
typeof :一元运算符号，放在一个运算数之前，运算数可以是任意类型。返回值是一个字符串，该字符串说明运算数的类型，返回的值有如下几种：
number,
boolean,
string,
function,
object,
undefined。
typeof常被用来获取一个变量是否存在，如
if(typeof a!="undefined"){....}
对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。
instanceof
a instanceof b?alert("true"):alert("false"); //a是b的实例？真:假
instanceof 用于判断一个变量是否某个对象的实例，如
var a=new Array();alert(a instanceof Array); // true
console.log(element instanceof jQuery) //判断element 是不是jquery对象
instanceof 在对象上用的比较多，能更精准的判断是不是某个对象（类）的实例
function Person(){}
function Cat(){//...}
var p=new Person();
var c=new Cat();
console.log(p instanceof Cat);//false五、javascript在html中使用的三种方式
JavaScript与Html的结合方式
1、代码在标签内编写
事件=方法（）
<a href="javascript:方法（）"></a>
2、在<script>标记中编写代码
<script type="text/javascript">
alert("hello");
</script>
3、使用外部JS文件方式
<script type="text/javascript" src="myJS.js"></script>
注意：引用外部文件的标签内，不能再写其它代码。
只引用外部文件的标签也要是成对出现。
注：JS代码可以放在文件的任意位置。
六、js的基本语法总结
JavaScript基本语法 ECMAScript规范
4.1 、注释
//
/**/
4.2、数据类型
java的数据类型：
int byte short long
float double
char
boolean
String List Map
JS中的数据类型：基本类型
Number
boolean
string
undifined
null
※※※ JS是一种弱类型的语言。var
4.3、控件语句
if
if-else
switch
while
do-while
for
Java：for(String s : 集合或数组)
JS: for(var v in 集合或数组)
4.4、变量命名规则
JS中的变量名、对象名、方法名都是区分大小写的。
变量名由字母、数字、_和$组成。
数字不能开头
不能是关键字
4.5、运算符
算术运算符： + - * / %
逻辑运算符： && || ！
赋值运算符：=
***关系运算符：> < >= <= == != (== 比较值。===比较值和类型)
三元运算符: ? :
位运算符: >> >>>
4.6、语法规范
JS中变量、对象、方法名都是区分大小写的
每条语句后最好加;
七、JavaScript 函数的定义的方式
在JS中函数就相当于java中的方法
(1)var ff = function(参数1,参数2,...){}
(2)function ff(参数1,参数2,...){} 常用
(3)var ff=new function("参数1","参数2",...,"方法体"); 基本不用
JS中定义函数不能写返回值类型，也不能写参数类型。如果需要返回值，在函数中直接写return 即可！
八、JavaScript中的全局函数
***parseInt() 解析一个字符串并返回一个整数。
parseFloat() 解析一个字符串并返回一个浮点数。
***isNaN() 检查某个值是否是NaN。
** eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
encodeURIComponent() 把字符串编码为 URI 组件。
decodeURIComponent() 解码一个编码的 URI 组件。
encodeURI() 把字符串编码为 URI。
decodeURI() 解码某个编码的 URI。
escape() 对字符串进行编码。
unescape() 对由 escape() 编码的字符串进行解码。
九、JavaScript的BOM总结大纲
BOM在javascript中是什么角色？
JavaScript = ECMAScript + BOM +DOM
BOM:Browser Object Model 浏览器对象模型,自然而然，与BOM相关的对象都是与浏览器有关的。
Window (重点) 代表一个窗口对象
属性：
opener:打开者对象
self：相当于window
方法：
与用户交互提示消息相关方法
alert() 提示框
*** confirm() 确认框
prompt() 输入框
与打开和关闭相关的方法
var newwin = open()
open方法的参数：
url：
name：
features：
replace:
newwin.close();
与计时器相关的方法：
** setInterval();
** clearInterval();
setTimeout();
clearTimeout();
Navigator 浏览器对象
Screen 屏幕信息
* History 历史记录
length
back()
forward()
*** go()
* Location 地址栏信息
*** href = url;
reload();
十、dom概述
一.Dom概述？
1.1.什么是DOM？
Document Object Model 文档对象模型
DOM 是 W3C（万维网联盟）的标准。
W3C: world wide web Consortium 万维网联盟
DOM是文档对象模型，Document Object Model。W3C组织推出的一套可以动态改变HTML/XML文本内容，结构和样式的规范
1.2.它的作用？
DOM作用：对结构文档（标记语言文档）的元素进行查找、修改、添加和删除操作。
DOM 定义了所有结构化文档元素的对象、属性和方法。
W3C把HTML/XML文档封装成了一个Document对象。该对象是一个树形结构，我们可以理解为一棵全是节点的树。
树形结构的特点：每个节点的关系都是非常清楚的。
1.3.分类？
> 核心 DOM - 针对任何结构化文档的标准模型
> XML DOM - 针对 XML 文档的标准模型
> HTML DOM - 针对 HTML 文档的标准模型
1.4.xml介绍？
XML 指可扩展标记语言（EXtensible Markup Language）
十一、javascript操作dom的常用方法总结以及常用事件含义总结
DOM树
2.1.结点？
HTML 文档中的所有内容都是节点.
2.2.结点的分类
文档节点：Document
文本节点：Text
元素节点：Element
属性节点：Attribute
注释节点：Comment
2.3.结点的关系
parentNode
firstChild
lastChild
childNodes
2.4.常用方法
*** 与查找元素（标签）相关的方法
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByName() 返回包含带有指定属性名的所有元素的节点列表（集合/节点数组）。
创建节点相关的方法：
createElement() 创建元素节点。
createTextNode() 创建文本节点。
与添加（追加）相关的方法
appendChild() 把新的子节点添加到指定节点。
insertBefore() 在指定的子节点前面插入新的子节点。
与删除和替换相关的方法：
removeChild() 删除子节点。
imgnode.parentNode.removeChild(imgnode);
replaceChild() 替换子节点。
与属性操作相关的方法：
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
imgElement.setAttribute("src","1.jpg");
2.6事件：
一件事，操作某个元素会执行一个方法。
事件源：event
事件的使用：
> 在标签内：事件="方法名（）"
> 对象.事件名=匿名方法
鼠标移动事件
onmousemove 鼠标被移动 1 6 3
onmouseout 鼠标从某元素移开 1 4 4
onmouseover 鼠标被移到某元素之上 1 2 3
鼠标点击事件
*** onclick 鼠标点击某个对象 1 2 3
ondblclick 鼠标双击某个对象 1 4 4
onmousedown 某个鼠标按键被按下 1 4 4
onmouseup 某个鼠标按键被松开 1 4 4
加载与卸载事件
***onload 某个页面或图像被完成加载 1 2 3
onunload 用户退出页面
聚焦与离焦事件
*** onblur 元素失去焦点 1 2 3
*** onfocus 元素获得焦点 1 2 3
键盘事件
onkeydown 某个键盘的键被按下 1 4 3
onkeypress 某个键盘的键被按下或按住 1 4 3
onkeyup 某个键盘的键被松开 1 4 3
提交与重置事件
***** onsubmit 提交按钮被点击 1 2 3 οnsubmit="return 方法名()"
onreset 重置按钮被点击 1 3 4
选择与改变事件
onselect 文本被选定 1 2 3
* onchange 用户改变域的内容 1 2 3
十二、js里面json和json字符串之间的互相转换
前端js与后端交互的时候，json对象与json字符串的互相转化是经常要干的事。我这里借助的是jquery和json2.js来实现json与json字符串之间的互相转化。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="resources/js/jquery-1.12.4.min.js"></script>
<script src="resources/js/JSON2.js"></script>
</head>
<body >
</body>
</html>
示例程序：
<script>
var obj={
"a":"av",
"b":"bv",
"c":"cv"
};
//把json转为json字符串
var obj2str=JSON.stringify(obj);
console.log(typeof obj2str);
console.log(obj2str);
//把json字符串转为json
var json=$.parseJSON(obj2str);
console.log(typeof json);
console.log(json);
</script>
运行结果：
总结：
1.把json转为json字符串可以使用JavaScript的一个插件JSON2.js。这个JSON2.js的JSON.stringify()方法接受一个json，并返回json字符串，可以实现jsonjson转为json字符串这个功能。
2.反过来，我们可以使用jquery提供的var json=$.parseJSON(obj2str);来把json字符串obj2str转为标准json格式。
十三、JavaScript生成随机uuid插件UUID.js的使用
当前端需要生成uuid的时候，可以使用UUID.js来完成，不用自己去想算法了。使用方法很简单。
<script>
for(var i=0;i<10;i++){
console.log(UUID.generate());
}
</script>
输出结果：
uuid.js这个插件不依赖任何JavaScript库，可以直接下载使用，使用方法见上面的示例程序咯。
十四、href="#"和href="javascript:void(0)"
一般来说href="#"和href="javascript:void(0)"之间没有区别，都能让超链接点击没有效果。但是仔细推究起来href="#"和href="javascript:void(0)"还是有点区别的，这点区别体现在当页面比较高，高到超出屏幕高度的时候，两者的区别就显示出来了。比如在页面的最底部有个超链接
<a id="btn_add" class="btn btn-default" href="#"></a>
点击这个超链接的时候，页面滚动条会回到顶部。
而
<a id="btn_add" class="btn btn-default" href="javascript:void(0)"></a>
点击这个超链接的时候，页面滚动条不会发生变化。
当我们想实现点击超链接弹出模态框的时候，并不想让页面上下滚动，这时候注意设置a标签的href属性为javascript:void(0)就可以了。
十五、document.querySelector和querySelectorAll方法
document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的新的查询接口，其主要特点如下：
1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。
2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。
3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。
这两个方法都可以接受三种类型的参数：id(#)，class(.)，标签，这很强大啊，是不是和jquery的选择器，难道新版接口有什么想法？
下面的写法都是正确的，理解的话按照jquery的选择器理解就行了，语法是一样的。
var liC = document.querySelectorAll(".navBox li h2");
var obj = document.querySelector("#id");
var obj = document.querySelector(".classname");
var obj = document.querySelector("div");
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
var elements = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");
var elements = document.querySelectorAll("#id1, #id2, .class1, class2, div a, #list li img");十六、HTML DOM 的nextSibling 属性
HTML DOM 的nextSibling 属性用于返回列表项的下一个同胞，nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。被返回的节点以 Node 对象返回。
注释：如果没有 nextSibling 节点，则返回值为 null。
兼容性：所有主流浏览器均支持 nextSibling 属性。
<!DOCTYPE html>
<html>
<body>
<ul id="myList"><li id="item1">Coffee</li><li id="item2">Tea</li></ul>
<p id="demo">点击按钮来获得首个项目的下一个同胞的 id。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var x=document.getElementById("demo");
x.innerHTML=document.getElementById("item1").nextSibling.id;
}
</script>
</body>
</html>
点击按钮后结果如下：
十七、js的confirm
js的confirm返回值是布尔值（即true/false），可以用作if的条件，如果点击确定了执行什么....
<script language=JavaScript>
function OKGoOn(){
<!-- [Step1]: 这里可以更改弹出窗口的信息 -->
if (!confirm("javascript的确认框--点击OK后才可继续！")) history.go(-1);
return " "
}
document.writeln(OKGoOn())
</script>
当你点击确定，confirm函数会返回true。上面的例子中，只有点击“取消”返回false了，!false（对false取反）才为真，才去执行history.go(-1)
十八、javascript节点的dataset属性
获取html5的data属性值的方法是什么？你可能回答jquery的data()方法就可以，如果你再说出来data()方法还可以用于缓存数据，那么再加一分，不过还有个事实我们也必须知道，那就是jquery是一个javascript库，它的所有代码都是由javascript实现的，换言之，凡是jquery能实现的功能，javascript一样可以实现，那么就事论事吧，如何通过原生的javascript来实现类似data()方法的功能呢？这里我们介绍javascript的一个属性dataset。
一个例子：
<!DOCTYPE html>
<html>
<head>
<title>js的dataset</title>
<meta charset="utf-8">
</head>
<body>
<div id='div' data-test='test_val'>
</div>
</body>
</html>
如何通过javascript获取data-test的值呢？
<script type="text/javascript">
var a = document.getElementById('div');
console.log(a.dataset.test);//打印 test_val
</script>
结果：
当然，不要误会，其实有n多种方法可以获取data-test的值，比如jquery的attr()方法，因为我这里主要是为了说dataset这个属性，才未涉及其他的。
好了，以上就是乐之者java提供的dataset用法的介绍，虽然只有一个很简单的例子，但是也希望能够带你入门，解开你的疑惑哦。
十九、JavaScript里面的动态变量类型
JavaScript 是一种松散类型的语言。换句话说，不必提前声明保存在变量中的数据是什么类型。Java（跟 JavaScript 完全不一样）等其他语言都要求提前声明变量类型，比如 int、float、boolean 或 String，这些语言（java）相对于JavaScript来说就是强类型的编程语言：
//在Java 中声明变量
int number = 5;
float value = 12.3467;
boolean active = true;
String text = "zhao";
而 JavaScript 则会根据赋给变量的数据，自动推断其类型。 （注意， ’ ’或 "" 表示字符串。我个人喜欢双引号，但有人喜欢单引号。 ）
//在JavaScript中声明变量
var number = 5;
var value = 12.3467;
var active = true;
var text = "http://www.roadjava.com";
好讨厌哪，那么多 var ！不过也有方便的地方：那就是，你不需要知道保存什么类型的数据，就可以声明和命名变量。甚至随意改变保存的数据类型，JavaScript 也不会怪你：
var value = 100;
value = 99.9999;
value = false;
value = "This can’t possibly work.";
value = "Argh, it does work! No errorzzzz!";
这里要提醒大家的是，如果你不小心在一个数值变量里保存了一个字符串，后来代码就出现了一些奇怪的问题，希望你自己能好好反省一下。如果你不确定某个变量中保存着什么类型的数据，可以使用 typeof 操作符：
typeof 67; //返回"number"
var myName = "Scott";
typeof myName; //返回"string"
myName = true;
typeof myName; //返回"boolean"二十、javascript的变量没有块级作用域
在我们印象里，浏览器会从上到下依次执行 JavaScript 代码。但有时候也不一定！
比如，下面这些代码，你觉得变量 i 什么时候有定义？
var numLoops = 100;
for (var i = 0; i < numLoops; i++) {
console.log(i);
}
在其他很多语言中，i 会到 for 循环开始时才被声明，这符合我们的预期。但由于存在一种叫做变量提升的机制，JavaScript 中的变量声明会被提升到函数上下文的顶部。对于前面的例子来说，i 实际上在 for 循环开始之前就有了定义。下面的代码跟上面的代码是等价的：
var numLoops = 100;
var i;
for (i = 0; i < numLoops; i++) {
console.log(i);
}
如果变量名字有冲突，变量提升可能就会带来问题。因为你本以为某个变量到后面才会有定义，不成想它早在代码一开始执行时就有定义了。
其实，如果犯了这种错误，说明我们对js没有块级作用域这个结论还不甚了了。一定要记住，“javascript的变量没有块级作用域”
在编程领域，变量作用域这个概念用于区分在哪个环境下可以访问哪些变量。一般来说，在任何地方都能访问任何值是不正确的。因为这样发生冲突的可能性太高，或者不知道在哪儿意外改了某个值，都会让你急得疯掉。很多语言都有块级作用域，也就是在当前“块”中，变量才有定义。这里的“块” ，通常就是花括号。在块级作用域下，前面例子中的变量 i 将只存在于 for 循环中。如果想在循环外部读取或修改 i 的值，都会失败。这样其实挺好，因为你知道循环中的变量不会跟循环外部的其他变量有冲突。
但是，JavaScript 中的变量只能限制在函数中，即在函数（而不是任何块）中声明的变量只能在函数内部访问。假如你使用过其他语言，那么对这一点必须格外注意。关键要记住：要想封闭某个值，就得把它们放到函数里。
二十一、JavaScript的全局命名空间
JavaScript的全局命名空间是引起变量冲突的一个原因，什么是JavaScript的全局命名空间呢？假如你现在使用着Chrome浏览器，那么你按下f12，调出开发者工具，选中其中的Console控制台，在下面输入“window”，如下所示：
此时，你看到的像迷宫一样的东西，正是所谓的“全局命名空间”。
window 在浏览器中是一个顶级对象，包含所有 JavaScript 中能直接访问到的对象。你看到的所有这些对象和值都包含在全局作用域中。换句话说，如果你每次都在全局作用域中声明新变量，那这个变量就会被加到 window 对象下面。正像一些JavaScript 界敢于仗义直言的人所说： “你这是在污染全局命名空间。 ” （奇怪的是，很多在论坛里义正词严说这种话的人，在现实当中都很平易近人。甚至有点木讷 ）。好了，现在我再次输入“var websit="乐之者java";window”，如下：
往下翻window对象的这个迷宫，你会看到：
现在明白了吧，你定义的一个变量，就相当于给window对象加了一个属性，那么给 window 增加几个值有什么大问题吗？刚开始的时候，啥事儿也没有。但随着你的项目越来越复杂，代码越来越多的时候，保不齐你的变量名字就有了冲突。
这种变量冲突该怎么有效的防止呢？
01.只在函数里面声明变量。虽然有时候也不是绝对可行，但函数级作用域可以防止其本地变量跟其他变量发生冲突。
02.只声明一个全局对象，然后把你本来想作为全局变量的值都作为这个对象的属性。
var Vis = {}; // 声明空的全局对象
Vis.zebras = "still pretty amazing";
Vis.monkeys = "too funny LOL";
Vis.fish = "you know, not bad";
这样的话，所有变量就都被“关在笼子里了” （在这里就是全局对象 Vis 里） ，因此不会再污染全局命名空间。当然，不一定非得叫 Vis，叫什么随你便——不过叫Menagerie（动物园）输入起来就太麻烦了。无论如何，如果再有冲突发生，那肯定是其他脚本里也恰好有一个全局对象，而且也起了个相同的名字（Vis） 。但这种事儿发生的概率就低得多了。
二十二、js处理字符串的常见操作
split() 方法
功能：使用一个指定的分隔符把一个字符串分割存储到数组
例子：
str=”jpg|bmp|gif|ico|png”;
arr=str.split(”|”);
//arr是一个包含字符值”jpg”、”bmp”、”gif”、”ico”和”png”的数组
join() 方法
功能：使用您选择的分隔符将一个数组合并为一个字符串
例子：
var myList=[”jpg”,”bmp”,”gif”,”ico”,”png”]
var portableList=myList.join(”|”);
//结果是jpg|bmp|gif|ico|png
substring(start,end) 方法
功能：字符串截取，(start,end)都是开区间
var str="我是a website owner of http://www.roadjava.com";
alert(str.substring(1,6));
返回结果：
indexOf()
功能：返回字符串中匹配子串的第一个字符的下标
var myString=”JavaScript”;
var w=myString.indexOf(”v”); //2
var x=myString.indexOf(”S”); //4
var y=myString.indexOf(”Script”); // 4
var z=myString.indexOf(”key”); // -1(不存在)二十三、JavaScript正则表达式exec方法以及正则表达式的分组
<script>
var testStr="<div><img src='/a.jpg' alt='' /><span>test</span><img src='/b.jpg' alt='' />"
+"<span>TTest</span><img src='/c.png' alt='' /></div>";
var reg=/<img\ssrc='(.*?)'\s+alt=''\s*\/>/g;
var match=reg.exec(testStr),results=[];
while(match != null){
results.push(match[1]);
match=reg.exec(testStr);
}
console.log(results);
/*
输出结果：["/a.jpg", "/b.jpg", "/c.png"]
*/
</script>
结果截图：
这个JavaScript代码示例主要通过一个例子来给大家演示了JavaScript正则表达式对象的exec方法的使用以及正则表达式分组的写法。
二十四、parseInt方法趣谈
遇到过的一个面试题，问你“alert(parseInt(1/0,19))”结果是多少？我懵了，没有答上来，不过搭不上来没关系，重要的是自己学到了东西，回去仔细想了想，又自己试了试，答案是：18，电脑面前的你做对了吗？至于为什么是18呢？
先看parseInt的语法是这样的：
parseInt(string, radix)
参数说明：
string必需。要被解析的字符串。
radix可选。表示要解析的数字的基数（这里的基数，就是进制的意思，不是"奇数"写错了）。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。
返回值：返回解析后的数字。
使用parseInt需要注意的地方：
01、只有字符串中的第一个数字会被返回；
02、如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN
03、开头为字母将使用指定的进制把字母转为数字并返回，如alert(parseInt("ar",16));返回10，r不去理会，因为16进制中没有r.
parseInt(1/0,19)的原理是这样的：
1/0的结果是Infinity，所以parseInt(1/0,19)等同于parseInt("Infinity",19)，而在19进制中：
19进制 10进制
--------------------
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
a 10
b 11
c 12
d 13
e 14
f 15
g 16
h 17
i 18
可以看到，i表示18，所以parseInt(1/0,19)的结果为18。
转换小例子：
拿JavaScript里面的16进制与10进制的相互转换为例子，我们写个测试程序，就一目了然了：
<script>
var hex=(255).toString(16);
var d=parseInt("ff",16);
console.log("十进制的255转为16进制后的结果："+hex);
console.log("16进制的ff转为10进制后的结果："+d);
</script>
执行结果：
有了这个基础，不管tmd是什么进制之间的转换，都可以快速搞定了。
二十五、正则表达式?:是什么意思？
"?:"这个东西表示的是不捕获分组，举个例子来说(X)和(?:X)，前者是捕获分组，后者不捕获分组，区别在于正则表达式匹配输入字符串之后所获得的匹配的（数）组当中并没有(?:X)匹配的部分；比较拗口，来看个例子就明白许多了：
var m = "abcabc".match(/(?:a)(b)(c)/);
//结果 ["abc", "b", "c"]
// m[0] 是/(?:a)(b)(c)/匹配到的整个字符串，这里包括了a
// m[1] 是捕获组分组（b）匹配到的结果，
// m[2] 是捕获组2，即(c)匹配到的
如果正则表达式写成这样：
var m = "abcabc".match(/(a)(b)(c)/)
那么结果就是：
通过上面这个小例子，大家应该明白"?:"在正则表达式里面是什么含义了吧，就是忽略其后分组的意思，让?:所在的分组匹配到的内容在结果数组中并不展示出来的意思。
二十六、用JavaScript添加和删除css类
使用jquery的时候，我们可以方便的使用addClass以及removeClass来添加或者删除css类，如何使用原生的JavaScript来完成同样类似的功能呢，今天我就给出一个小例子，先看看要操作的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用JavaScript添加和删除class</title>
</head>
<body>
<div id="box" class="a1">
</div>
<input type="button" onclick="add()" value="添加cls1类"/>
<input type="button" onclick="remove()" value="去除一个cls1类"/>
</body>
</html>
下面是使用JavaScript来完成类似jquery的addClass()以及removeClass()功能的代码：
<script>
//增加一个类cls1
function add(){
document.getElementById("box").className += " cls1";
}
//移出一个类cls1
function remove(){
document.getElementById("box").className = document.getElementById("box").className.replace(/(?:^|\s)cls1(?!\S)/,'');
}
</script>
效果如下：
二十七、JavaScript删除数组中的项 delete和splice的区别
splice()方法的说明：
定义和用法
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。注意该方法会改变原始数组。
语法：
arrayObject.splice(index,howmany,item1,.....,itemX)
参数描述
index必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX可选。向数组添加的新项目。
返回值：返回一个数组，这个数组包含被删除项目的新数组(如果有的话)。即如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
说明：
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
关于splice和delete方法的区别，我们来做个简单的测试：
<script>
var myArray=["a","b","c"];
delete myArray[0];
for(var i=0,j=myArray.length;i<j;i++){
console.log(myArray[i]);
}
console.log("-----------------分割线-------------");
var myArray2=["a","b","c"];
myArray2.splice(0,1);
for(var i=0,j=myArray2.length;i<j;i++){
console.log(myArray2[i]);
}
</script>
执行结果如下：
很明显的了，上面的代码已经说明区别了，一个是设置为undefined，一个是真正的删除了。
二十八、JavaScript判断字符串结尾是否为xxx
indexOf() 方法
定义和用法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法格式
stringObject.indexOf(searchvalue,fromindex)
参数解释：
searchvalue：必需的，需检索的字符串值。
fromindex:可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
说明：
该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。
开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。
如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。
stringObject 中的字符位置是从 0 开始的。
indexOf() 方法对大小写敏感;
返回值：
如果要检索的字符串值没有出现，则该方法返回 -1。
举一个例子，在javascript如何判断一个字符串是否以xxx结尾？怎么实现呢，其实非常简单的，这里就使用到了indexOf()这个方法，我的实现是这样的：
function endsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
console.log(endsWith("www.roadjava.com","cn"));
console.log(endsWith("www.roadjava.com","com"));
运行结果：
当然，你也可以写的更高端一点：
String.prototype.endsWith = function(suffix) {
return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
效果都是一样的。
二十九、js实现引用类型的拷贝
function clone(obj) {
//不拷贝基本类型
if (null == obj || "object" != typeof obj) return obj;
// 处理 Date日期类型
if (obj instanceof Date) {
var copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
// 处理 数组Array
if (obj instanceof Array) {
var copy = [];
for (var i = 0, var len = obj.length; i < len; ++i) {
copy[i] = clone(obj[i]);
}
return copy;
}
// 处理对象 Object
if (obj instanceof Object) {
var copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
}
return copy;
}
throw new Error("不支持的对象类型.");
}
示例代码如上所示，支持 Array,Object,Date类型的拷贝，代码也都很清晰易懂，需要注意的是，这里用了递归回调，确保了每一个属性或者元素都被拷贝。
三十、setTimeout(fn, 0)的意义
有时候看到别人写的这样的代码“setTimeout(fn, 0)”，啥意思呢？没看懂？
要知道，浏览器同时要做很多事，这些事情以队列的方式存在，执行JavaScript只是其中之一，setTimeout(fn, 0)表面上看是立即执行的意思，但实际上只是在浏览器事件队列中添加了一个新的事件，由于队列是先进先出，所以fn会等等到当前队列中的事件执行完后再执 行。由于JavaScript的定时器回调函数是异步执行的，所以产生的效果就是等页面上同步事件(包括页面渲染与同步JS代码)执行完之后再执行。
看一个例子：
<script type="text/javascript">
//一
try{
document.getElementById("box").style.borderBottom="50px solid #222";
}catch(err){
console.log(err);
}
//二
setTimeout(function(){
document.getElementById("box").style.borderBottom="50px solid #222";
}, 0);
</script>
<div id="box">乐之者java</div>
如果你这样写，在浏览器中运行的结果是什么呢？如下图：
这里要注意，一处要加上try...catch...不然，一处报错了，js就不执行了，导致看不到二处的效果。
扫一扫
873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
