一、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就不执行了,导致看不到二处的效果。