在 JavaScript 中有 5 种不同的数据类型:string、number、boolean、object、function
3 种对象类型:Object、Date、Array
2 个不包含任何值的数据类型:null、undefined
正则表达式
正则表达式是由一个字符序列形成的搜索模式。
语法
/正则表达式主体/修饰符(可选)
修饰符 可以在全局搜索中不区分大xiao 写:
修饰符 | 描述 |
---|---|
i | 执行对大 xiao 写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
阻止冒泡和默认事件
冒泡简单来说就是 HTML 子元素与父容器之间都存在一些相同的事件,当触发子元素事件后,其父容器的事件也相应的触发。举例来说比如 click 事件,当触发了子元素事件后, 包括这个控件的父控件也有 click 事件,则会继续执行 。
阻止冒泡需要在子控件事件加入相关代码:
btn.onclick = function(e) { var _event = e || event; // 高版本浏览器 _event.cancelBubble = true; // IE window.event.cancelBubble = true; // 非 IE _event.stopPropagation(); }
阻止默认事件
function preventDefa(e){ if(window.event){ //IE中阻止函数器默认动作的方式 window.event.returnValue = false; } else{ //阻止默认浏览器动作(W3C) e.preventDefault(); } }
常见 DOM 操作
查找 HTML 元素
var x = document.getElementById("main"); // 通过 id 查找var y = x.getElementsByTagName("p"); // 查找 id="main" 元素中的所有元素var x = document.getElementsByClassName("intro"); // 通过类名查找
改变 HTML
document.write(); // 可用于直接向 HTML 输出流写内容。 document.getElementById(id).innerHTML=新的 HTML // 改变 HTML 元素的内容document.getElementById(id).attribute=新属性值 // 改变 HTML 元素的属性document.getElementById(id).style.property=新样式 // 改变 HTML 元素的样式
创建新的 HTML 元素
var para=document.createElement("p");var node=document.createTextNode("这是一个新段落。");para.appendChild(node);
删除 HTML 元素
var parent=document.getElementById("div1");// 找到 id="p1" 的元素:var child=document.getElementById("p1");// 从父元素中删除子元素:parent.removeChild(child);
注意:DOM 需要知道要删除的元素及其父元素才可删除,可使用以下简便写法
var child=document.getElementById("p1");child.parentNode.removeChild(child);
面向对象
JavaScript 对象是拥有属性和方法的数据。js 函数就是对象!
对象定义:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
对象键值对的写法类似于:PHP 中的关联数组
两种方式访问对象属性
person.lastName; person["lastName"];
对象方法通过添加 () 调用 (作为一个函数)。
name = person.fullName();
最简单的面向对象程序
封装重复使用的方法
升级 ---> 构造函数加 new
进阶面向对象编程
函数定义作为对象的属性,称之为对象方法。 函数如果用于创建新的对象,称之为对象的构造函数。
call 方法
调用一个对象的一个方法,以另一个对象替换当前对象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj:可选项。将被用作当前对象的对象。
arg1, arg2, , argN:可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
实例1
var Add=function(a,b){ console.info(a+b); } var Sub=function(a,b){ console.info(a-b); } Add.call(Sub,3,3); //它输出6:用Add对象替换Sub对象来执行方法.
实例2
function Sister(){ this.age=18; this.sayAge= function(){ document.write("Age:"+this.age); } this.yaya=function(){ document.write("yaya....."); } } function Brother(){ this.age=25; this.sayAge=function(){ document.write("Age:"+this.age); } this.hoho=function(){ document.write("hoho.....") } } var sis=new Sister(); var bro=new Brother(); sis.sayAge.call(bro); // 输出的是 Age:25
自调用函数
函数表达式可以 "自调用"。自调用表达式会自动调用。如果表达式后面紧跟 () ,则会自动调用。不能自调用声明的函数。通过添加括号,来说明它是一个函数表达式:
(function () { var x = "Hello!!"; // 我将调用自己})();
JS 闭包
变量声明时如果不使用 var 关键字,那么它就是一个全局变量,即便它在函数内定义。
闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。 就是一个函数引用另一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私有变量。
var add = (function () { var counter = 0; return function () {return counter += 1;}})(); add();add();add(); // 计数器为 3
this
在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)
数组迭代
- reduce() 接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数 | 描述 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
function(total,currentValue, index,arr) | 必需。用于执行每个数组元素的函数。 函数参数:
| ||||||||||
initialValue | 可选。传递给函数的初始值 |
// 计算数组元素相加后的总和var numbers = [65, 44, 12, 4]; function getSum(total, num) { return total + num;}function myFunction(item) { document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);}
- map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
array.map(function(currentValue,index,arr), thisValue)
参数 | 描述 | ||||||||
---|---|---|---|---|---|---|---|---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数:
| ||||||||
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue ,"this" 的值为 "undefined" |
// 数组中的每个元素+3,并返回新数组:var oldArray = [1,2,3,4,5];var timesFour = oldArray.map(function(val){ return val + 3;});var newArray = timesFour;
- filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
array.filter(function(currentValue,index,arr), thisValue)
参数 | 描述 | ||||||||
---|---|---|---|---|---|---|---|---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数:
| ||||||||
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue ,"this" 的值为 "undefined" |
// 返回<6的值var oldArray = [1,2,3,4,5,6,7,8,9,10];array = oldArray.filter(function(val) { return val < 6;});var newArray = array ;
- sort() 方法用于对数组的元素进行排序。
注意:当数字是按字母顺序排列时"40"将排在"5"前面。
// 数字排序(数字和升序):var points = [40,100,1,5,25,10];points.sort(function(a,b){return a-b});