前端之JavaScript
JavaScript的组成
完整的JavaScript是由ECMAScript(语法)、Browser Objects(DOM、BOM)（特性）组成的。
在HTML中使用JavaScript
可以在head或body中使用/<script/>嵌入javascript脚本
变量
ECMAScript的变量是松散类型
松散类型：可以用来保存任何类型的数据
变量的声明和赋值
变量的声明
变量的声明要使用var操作符
语法：var变量名
变量赋值
声明的同时赋值：var变量名=值
先声明后赋值：变量名=值
- 说明：省略var声明的变量是全局变量
数据类型
ECMAScript:简单数据类型，也称基本数据类型{Undefined,Null;Boolean;Number;String};ECMAScript6新增了symbol数据类型；复杂数据类型：Object
typeof
- 功能：检测变量类型
typeof变量或 typeof(变量)
- 返回值：string类型，有可能是string、number、boolean、object、undefined、function
undefined
- undefined类型只有一个值，即特殊undefin
null
1、null值表示一个空指针
2、如果定义的变量准备在将来用于保存对象，那么最好将改变量初始化为null而不是其他值
说明：undefined值是派生自null值的，所以undefined==null的返回结果是true
Number
-
Number:表示整数和浮点数
-
NaN:即非数值（Not a Number）是一个特殊的数值
-
说明：
任何涉及NaN的操作（例如NaN/10）都会返回NaN.NaN与任何值都不相等，包括NaN本身
所有涉及算术运算都返回Number类型
isNaN()
isNaN(n)
-
功能：检测n是否是“非数值”
-
返回值:boolean
-
参数：参数n可以是任何类型
-
说明：isNaN()对接收的数值，先尝试转换为数值，再检测是否为非数值。
Number
有三个函数可以把非数值转换为数值
Number(),parseInt(),parseFloat()
-
说明：
Number()可以用于任何数据类型。
parseInt()parseFloat()则专门用于把字符串转换成数值。
parseInt()
-
功能：会忽略字符串前面的空格，直至找到第一个非空格字符。
-
说明：
parseInt():转换空字符串返回NaN.
parseInt():这个函数提供第二个参数：转换时使用的基数（即多少进制）
parseFloat()
parseFloat:从第一个字符开始解析每个字符，直至遇见一个无效的浮点数字符为止
- 说明：除了第一个小数点有效外，parseFloat(0与parseInt()的第二个区别在于它始终都会忽略前导的零。
String
string类型用于表示由零或多个16位Unicode字符组成的字符序列，即字符串。字符串可以由双引号（“）或者单引号（'）表示
toString()与String()
-
语法：str.toString()
-
功能：将str转换成字符串
-
返回值：str的一个副本
-
参数：str是要转换的内容，可以是数值、布尔值、对象和字符串。
-
说明：在不知道要转换的值是不是null或者undefined的情况下，还可以使用String()函数，他能够将任何的值转换为字符串
charAt()与charCodeAt()
-
语法:stringObject.charAt(index)
-
功能:返回stringObject中index位置的字符
-
说明:ECMAScript5中可使用"方括号加字符索引"来访问字符串中特定的字符,但是IE7及更早的浏览器会返回undefined
indexOf()
-
语法:stringObjectOf("o")
-
功能:从一个字符串中搜索给定的子字符串,返回字符串的位置.
-
返回值:数值.
-
说明:如果没有好到该字符串,则返回-1.
lastIndexOf()
-
语法:stringObject.lastIndexOf("o")
-
功能:从右边搜索,从一个字符串中搜索给定的字符串,返回字符串的位置.
-
返回值;数值.
-
说明:如果没有找到该字符串,则返回-1.
slice()
-
语法:stringObject.slice(start,end)
-
功能:截取子字符串.
-
参数:
start:必须,指定子字符串的开始位置.
end:可选,表示子字符串到那里结束,end本身不在截取范围之内,省略时截取至字符串的末尾
参数为负数时,其值为字符串长度+该负数
substring()
- 说明:语法及功能同slice()完全一样
区别在于:
1、当参数为负数时,自动将参数转换为0.
2、substring()会将较小的数作为开始位置,将较大的数作为结束位置
substr()
-
语法:stringObject.substr(start,len)
-
功能:截取字符串.
-
参数:1、start:必须,指定子字符串的开始位置
2、len:可选,表示截取的字符总数,省略时截取至字符串的末尾
3、当start为负数时,会将传入的赋值与字符串的长度相加.
4、当len为负数时,返回空字符串
split()
-
语法:stringObject.split(separator)
-
功能:把一个字符串分割成字符串数组
-
返回值:Array
-
说明:separator:必须,分隔符
replace()
-
语法:stringObject.replace(regexp/substr,replacement)
-
功能:在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的字符串
-
返回值:String
-
参数:
regexp:必须.规定子字符串或要替换的模式的RegExp对象replacement:必须.一个字符串值
不会改变原来字符对象的值
toUpperCase()与toLowerCase()
-
语法:stringObject.toUpperCase()
-
功能:把字符串转换为大写
-
语法:stringObject.toLowerCase()
-
功能:把字符串转换为小写.
Boolean
用于表示真假的类型，即true表示真，false表示假
类型转换
1、除0之外的所有数字，转换为布尔型都为true
2、除”“之外的所有字符，转换为布尔型都为true
3、null和undefined转换为布尔型为false
数组
创建数组的基本方式有两种:
1、使用Array构造函数
语法:new Array()
小括号()说明:
(1)预先知道数组要保存的项目数量
(2)向Array构造函数中传递数组应包含的项
2、使用数组字面量表示法
由一对包含数组项的方括号[]表示,多个数组项之间以逗号隔开.
var a = new Array(2);
a\[0\] = 1;
a\[1\] = "ni"; var nums = new Array(1,3,6,9); var cols = \["red","yellow","green"\]; var infos = \[6,"marry",true\];
arr[index]
读取和设置值时,使用方括号[]并提供相应的索引
- 说明:索引是从0开始的正整数
array.lenght
-
功能：获取数组长度
-
说明:
通过设置lenght可以从数组的末尾移除项或向数组中添加新项.把一个值放在超出当前数组大小的位置上时,会重新计算数组长度值,长度值等于最后一项索引加1
push()
-
语法:arrayObject.push(newele1,newele2,...,neweX)
-
功能:把他的参数顺序添加到arrayObject的尾部
-
返回值:把指定的值添加到数组的新长度
unshift()
- 功能：在前面添加
shift()
-
语法:arrayObject.shift()
-
功能:删除 arrayObject中的第一个元素
-
返回值:被删除的那个元素
pop()
- 功能:删除arrayObject中最后一个元素
join()
-
语法:arrayObject.join(separator)
-
功能:用于把数组中的所有元素放入一个字符串
-
返回值:字符串
reverse()
-
语法:stringObject.reverse()
-
功能:用于颠倒数组中元素的顺序
-
返回值:数组
sort()
-
语法:arrayObject.sort(sortby)
-
功能:用于对数组的元素进行排序.
-
返回值:数组
说明:
1、即使数组中的每一项都是数值,sort()方法比较的也是字符串.
2、sort()方法可以接受一个比较函数作为参数
var arr = \[9,-1,-2,10,85,98,45,-25,56\]
document.write(arr.sort(function (a,b){return a-b}));
concat()
-
语法:arrayObject.concat(arrayX,arrayX,......,arrayX)
-
功能:用于连接两个或者多个数组
-
返回值:数组
slice()
-
语法:arrayObject.slice(start,end)
-
功能:从已有的数组中返回选定的元素
-
参数:
start(必需)规定从何处选取,如果是负数,从数组尾部开始算起
end(可选)规定从何处结束选取,是数组片段结束处的数组下标
说明:
1、如果没有end,切分的数组从start到数组结束的所有元素.
2、如slice()方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置
返回值:数组
splice
-
语法:arrayObject.splice(index,count)
-
功能:删除从index处开始的零个或多个元素
-
返回值:含有被删除的元素的数组
splice -
功能：插入和替换
-
语法:arrayObject.splice(index,count,item1,.....,itemX)
功能:在指定位置插入值
-
参数:
index:起始位置count:要删除的项数
item1...itemX:要插入的项
-
返回值:从原始数组中删除的项(如果没有删除任何项,则返回空数组)
indexOf()
-
语法:arrayObject.indexOf(searchvalue,startIndex)
-
功能:从数组的开头(位置0)开始后查找.
返回值:
-
参数:searchvalue:必需,要查找的项；startIndex:可选,起点位置的索引.
-
返回值:number,查找的项在数组中的位置,没有找到的情况下返回-1
说明:
1、在比较第一参数与数组中的每一项时,会使用全等操作符,即要求查找的项必须严格想等.
2、数组的位置的方法是ECMAScript5为数组实例新增的,所以支持的浏览器
操作符
逻辑操作符
逻辑操作符：
&& 与 || :或 !:非
逻辑与
&&与（只有一个条件不成立，返回false）
说明：在有一个操作数不是布尔值的情况，逻辑与操作就不一定返回值，此时他遵循下列规则：
1、如果第一个操作数隐式转换后为true,则返回第二个操作数
2、如果第一个操作数隐式转换后为false,则返回第一个操作数
逻辑或
||（只要一个条件成立，返回true）；
说明：在有一个操作数不是布尔值的情况，逻辑与操作就不一定返回值，此时他遵循下列规则：
1、如果第一个操作数隐式转换后为true,则返回第一个操作数
2、如果第一个操作数隐式转换后为false,则返回第二个操作数
3、如果两个操作数是null,则返回null
4、如果两个操作数是NaN,则返回NaN
5、如果两个操作数是undefined,则返回undefined
逻辑非
！非
说明：
1、无论操作数是什么数据类型，逻辑非都会返回一个布尔值
2、！！同时使用两个逻辑非操作符时：
-第一个逻辑非操作基于无论什么操作数返回一个布尔值
-第二个逻辑非则对该布尔值求反
比较操作符
==：想等，只比较是否想等
===:相等，比较值的同时比较数据类型是否想等
！=：不想等，比较值是否不想等
！==：不想等，比较值的同时比较数据类型是否不想等
三元操作符
语法：
条件？执行代码1：执行代码2
说明：可代替简单的if语句，如果条件成立，执行代码1，否则执行代码2
函数
函数的定义
函数使用function声明，后跟一组参数以及函数体，语法如下：
function functionName(\[arg0,arg1,...argn\]){
staatements
}
说明：
1、functionName是要定义的函数名，属于标识符
2、[]中的arg0,arg1,...argn为函数的参数
3、[]说明里面的内容不是必须的,他不是语法
函数的调用
语法:
函数名([arg1,arg2,...argn])
函数的返回值
任何函数通过return语句,后面跟着返回值来实现返回值
说明:
1、函数会在执行完return语句之后停止并立即退出
2、return语句也可以不带任何返回值,用于提前停止函数执行又不需要返回值的情况.
JavaScript中的参数
ECMAScript中的参数在内部用一个数组来表示
在函数体内通过arguments对象访问这个数组参数.
说明:
1、arguments对象只是与数组类似,并不是Array的实例.
2、[]语法访问它的每一个元素.
3、length属性确定传递参数的个数.
JavaScript DOM基础
getElementById
-
语法:document.getElementById("id")
-
功能:返回对拥有指定ID的第一个对象的引用
-
返回值:DOM对象
-
说明:id为DOM元素上id属性的值
getElementsByTagName -
语法:document.getElementsByTagName("tag")
-
功能:返回一个对所有tag标签引用的集合
-
返回值:数组
-
说明:tag为要获取标签的名称
ele.style.styleName
-
语法:ele.style.styleName = styleValue
-
功能:设置ele元素的CSS样式
说明:
1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称
3、styleValue为要设置的样式值(要用双引号,使用驼峰形势)
innerHTML
-
语法:ele.innerHTML
-
功能:返回ele元素开始和结束标签之间的HTML
-
语法:ele.innerHTML = "html"
-
功能:设置ele元素开始和结束标签之间的HTML内容为html
-
说明:innerHTML:获取和设置标签之间的文本和html内容
className
-
语法:ele.className
-
功能:返回ele元素的class属性
-
说明:如果有两个以上的class值,则全部返回
-
语法:ele.className = "cls"
-
功能:设置ele元素的class属性为cls(替换原先的class属性值)
getAttribute
-
语法:ele.getAttribute("attribute")
-
功能:获取ele元素的arrribute属性
-
说明
ele是要操作的dom对象attribute是要获取的html属性(如:id、tpye)
setAttribute
-
语法:ele.setAttribute("attribute,value")
-
功能:在ele元素上设置属性
-
说明:
ele是要操作的dom对象
attribute为要设置的属性名称
value为设置的attribute属性的值
removeAttribute
-
与暗访:ele.removeAttribute("attribute")
-
功能:删除ele上的attribute属性
-
说明:
ele是要操作的dom对象
attribute是要删除的属性名称
DOM节点操作
var b = a.childNodes; 获取a的全部子节点
var c = a.parentNode; 获取a的父节点
var d = a.nextSbiling; 获取a的下一个兄弟节点
var e = a.previousSbiling;获取a的上一个兄弟节点
var f = a.firstChild; 获取a的第一个子节点
var g = a.lastChild; 获取a的最后一个子节点
2.创建节点/属性
document.createElement(eName); //创建一个节点
document.createAttribute(attrName); //对某个节点创建属性
document.createTextNode(text); //创建文本节点
3.添加节点
document.insertBefore(newNode,referenceNode); //在某个节点前插入节点
parentNode.appendChild(newNode); //给某个节点添加子节点
4.复制节点
cloneNode(true | false); //复制某个节点 参数：是否复制原节点的所有属性
5.删除节点
parentNode.removeChild(node); //删除某个节点的子节点 node是要删除的节点
xxx.removeNode(true)xxx是所要删除的节点
注意：为了保证兼容性，要判断元素节点的节点类型(nodeType)，若nodeType==1，再执行删除操作。通过这个方法，就可以在 IE和 Mozilla 完成正确的操作。
HTML事件
-
语法：
<tag 事件 = “执行脚本”> </tag> -
功能：在HTML元素上绑定事件
-
说明：执行脚本可以是一个函数的调用
鼠标事件
-onload：页面加载时触发
-onclick:鼠标点击时触发
-onmouseover:鼠标滑过时触发
-onmouseout;鼠标离开时触发
-onfoucs:获得焦点时触发
-onblur:失去焦点时触发
-onchange:域的内容改变时发生
-onsubmit:表单中的确认按钮被点击时发生
-onmousedown:鼠标按钮在元素上按下时触发
-onmousemove:鼠标指针移动时发生
-onmouseup:在元素上松开鼠标按钮时触发
-onresize:在调整浏览器窗口的大小时触发
-onscroll:拖动滚动条滚动时触发
HTML事件
语法:<tag 事件="执行脚本"></tag>
功能:在HTML元素上绑定事件
说明:执行脚本可以是一个函数的调用
<!--事件绑定第一种方式-->
<input type="button" value="弹出" onclick="a()">
function a(){
alert("哈哈");
}
<!--第二种方式-->
<div class="btn" onmouseover="f1(this,'red')" onmouseout="f2(this,'black')">按钮</div>
function f1(btn,bc) {
btn.style.background \= bc;
} function f2(btn,bc) {
btn.style.background \= bc ;
}
DOM0级事件
-
语法:ele.事件 = 执行脚本
-
功能:在DOM对象上绑定事件
-
说明;执行脚本可以是一个匿名函数,也可以是一个函数的调用
页面加载时触发
window.onload\=function () { var box = document.getElementById("box"); var clicekd = function () {
alert("我被点击了");
}
box.onclick \= clicekd;
}
浙公网安备 33010602011771号