-------------------------------------------------------------------------<<JavaScript>>---------------------------------------------------------------------------------------
核心(ECMAScript)
文档对象模型(DOM)Documnt object model(整合js，css，html)
浏览器对象模型(BOM)Broswer object model(整合js和浏览器)
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1:语法
2:类型
3:语句
4:关键字
5:保留字
6:运算符
7:对象(封装 继承 多态)基于对象的语言，使用对象。
------------------------------------------------------------------------js的引入方式-------------------------------------------------------------------------------------------
1:直接编写
<script>
alert('helo wukong')
</script>
2:导入文件
<script src='js文件路径'></script>
------------------------------------------------------------------------js的变量，常亮和标识符----------------------------------------------------------------------------------
1:js的变量。
(1):--------声明变量时不用声明变量类型，用var关键字。
var a;<br>a=3;
(2):--------一行可以声明多个变量，并且可以是不同类型。
var name='wukong',age=20,job="lecture";
(3):声明变量时可以不用var，如果不用var那么他是全局变量。
(4):变量命名，首字符只能字母，下划线$符，区分大小写。
2:常量：---------------------------直接在程序中出现的数值
(1):由不以数字开头的字母，数字，下划线_，$符组成
(2):常用于表示函数，变量名等名称。
(3):js语言中代表特定含义的词称为保留字，不允许程序再定义为标识符
------------------------------------------------------------------------js的数据类型-------------------------------------------------------------------------------------------
1:number--------数字类型-------NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
2:boolean-------布尔值
3:string--------字符串
4:undefined-----(不明确，未定义的)
Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
当函数无明确返回值时，返回的也是值 "undefined";
5:null-----------(只有一个值的类型)
6:typeof---------查看数据类型
------------------------------------------------------------------------运算符-------------------------------------------------------------------------------------------------
1：算数运算符：
+ - * / % ++ --
2：比较运算符：--------比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
--------比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.
> < >= <= != == ===(全等于) ！==
3：逻辑运算符：
&& || ！
4：赋值运算符
= + -= *= /=
5：字符串运算符
+ 连接(两边操作数有一个或两个是字符串做连接运算)
------------------------------------------------------------------------流程控制-----------------------------------------------------------------------------------------------
1：顺序结构
<script>
console.log("星期一")；
console.log("星期二")；
console.log("星期三");
</script>
2：分支结构；
(1):if-else结构
if (表达式){
语句1;
......
}
else{
语句2；
......
}
(2):if-elif-else结构：
if (表达式1){
语句1；
}
else if (表达式2){
语句2；
}
else if (表达式3){
语句3；
}
else{
语句4；
}
(3):switch-case结构
switch (表达式){
case 值1：语句1：break;
case 值2：语句1：break;
case 值3：语句1：break;
case 值4：语句1：break;
default:语句4;
}
3:循环结构
(1):for循环：
for(初始表达式;条件表达式;自增或自减)
{
执行语句
......
}
for(变量 in 数组或对象)
{
执行语句
......
}
(2):while循环
while (条件)
{
语句1;
...
}
------------------------------------------------------------------------异常处理-----------------------------------------------------------------------------------------------
try{
这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e){
如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally{
无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
------------------------------------------------------------------------JavaScript对象-----------------------------------------------------------------------------------------
一：string对象(字符串)
1：创建
(1)变量 = "字符串"
var str1="hello word";
(2)字符串对象名称=new String(字符串)
var str1=new String("hello word")
2:字符串对象的属性和函数
(1):x.length----------------------------------------------------获取字符串的长度
(2):x.toLowerCase()---------------------------------------------转小写
(3):x.trim()----------------------------------------------------转大写
-------------------------------字符串查询方法-----------------------------------------
(4):x.charAt(index)---------------------------------------------获取指定位置字符的索引。
str1.charAt(index)------------------------------------------获取指定字符。
index-------------------------------------------------------获取字符索引。
(5):x.indexof(findstr,index)------------------------------------查询字符串位置
x.lastIndexof(findstr)
(6):x.match(regexp)---------------------------------------------match返回匹配字符串的数组，没有匹配则返回null
x.search(regexp)--------------------------------------------search返回匹配字符串的首字符位置索引
------------------------------字符串处理方法-------------------------------------------
(7):x.substr(start,length)--------------------------------------start表示开始位置，length表示截取长度
x.substr(start,end)-----------------------------------------end是结束位置
(8):x.slice(start,end)------------------------------------------切片操作
(9):x.replace(findstr,tostr)------------------------------------字符串替换，findstr(搜索文本)
(10):x.split()--------------------------------------------------分割字符串
(11):x.concat(addstr)-------------------------------------------拼接字符串
二：Array对象(数组)
1:创建
(1):var arrname = [元素0，元素1，......];
var arr=[1,2,3];
(2):var arrname = new Array(元素0，元素1，......);
var test = new Array(100,"a",true);
(3):var arrname = new Array(长度);
var cnweek = new Array(7);
cnweek[0]="星期日";
cnweek{1}="星期一";
...
cnweek[6]="星期六";
2:数组对象的属性和方法
(1):join方法：
x.join(bystr)------------------------------------------将数组元素拼接成字符串
var arr1=[1,2,3,4,5,6,7];
var str1=arr.join("-")
(2):concat方法：
x.concat(value,......)
var a = [1,2,3];
var b = a.concat(4,5);
(3):reverse sort;数组排序;
var arr1=[32,12,111,444];
arrl.reverse();------------------------------------------到序
arr1.sort();---------------------------------------------排序数组元素
(4):数组切片操作；
var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);
alert(arr2.toString());
//结果为"c,d"
alert(arr3.toString());
//结果为"e,f,g,h"
alert(arr4.toString());
//结果为"c,d,e,f,g"
(5):删除数组
var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
alert(a.toString());//a变为 [1,4,5,6,7,8]
a.splice(1,1);
alert(a.toString());//a变为[1,5,6,7,8]
a.splice(1,0,2,3);
alert(a.toString());//a变为[1,2,3,5,6,7,8]
(6):数组push和pop；-------------------------------------------模拟栈操作
x.push()--------------压栈
x.pop()---------------弹栈
var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//结果为"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//结果为"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);
//结果为"1,2,3,4,5"
(7):数组shift和unshift
x.shift()------------------------------------------------将数组x的第一个元素删除
x.unshift()----------------------------------------------将value值插入到数字x的开始
var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1); //结果为"4,5,1,2,3"
arr1. unshift([6,7]);
alert(arr1); //结果为"6,7,4,5,1,2,3"
arr1.shift();
alert(arr1); //结果为"4,5,1,2,3
三：Data对象
(1):创建Datad对象
//方法1：不指定参数
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2：参数为日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3：参数为毫秒数
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));//毫秒并不直接显示
(2):获取日期和时间
获取日期和时间
getDate() 获取日
getDay () 获取星期
getMonth () 获取月（0-11）
getFullYear () 获取完整年份
getYear () 获取年
getHours () 获取小时
getMinutes () 获取分钟
getSeconds () 获取秒
getMilliseconds () 获取毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
四：Math对象
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方.
五：Function对象(函数)
1：函数的定义：
function 函数名 (参数)
{<br> 函数体；
return 返回值；
}
2：功能说明：
可以使用变量，常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致，大小写是敏感的
返回值必须使用return
function类可以表示开发者定义的任何函数
3：语法：
var 函数名=new function("参数1","参数2","function_body");
4:function对象的属性---------------------------------------------函数属于引用类型,所以他们也有属性和方法。
alert(fun1.length)--------------------------------------length声明了函数期望的参数个数。
5：function的调用
function func1(a,b){
alert(a+b);
}
func1(1,2); //3
func1(1,2,3);//3
func1(1); //NaN
func1(); //NaN
//只要函数名写对即可,参数怎么填都不报错.
-------------------面试题-----------
function a(a,b){
alert(a+b);
}
var a=1;
var b=2;
a(a,b)
6：函数的内置对象arguments：
function add(a,b){
console.log(a+b);//3
console.log(arguments.length);//2
console.log(arguments);//[1,2]
}
add(1,2)
------------------arguments的用处1 ------------------
function nxAdd(){
var result=0;
for (var num in arguments){
result+=arguments[num]
}
alert(result)
}
nxAdd(1,2,3,4,5)
------------------arguments的用处2 ------------------
function f(a,b,c){
if (arguments.length!=3){
throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
}
else {
alert("success!")
}
}
f(1,2,3,4,5)
7:匿名函数
// 匿名函数
var func = function(arg){
return "tony";
}
// 匿名函数的应用
(function(){
alert("tony");
} )()
(function(arg){
console.log(arg);
})('123')
------------------------------------------------------------------------BOM对象------------------------------------------------------------------------------------------------
浏览器对象模型(BOM)Broswer object model(整合js和浏览器)
1：window对象：
所有浏览器都支持window对象。
概念：一个html文档对应一个window对象。
功能：控制浏览器窗口的
使用：window对象不需要创建对象，直接使用。
2:window方法：
(1):alert()----------------显示一段消息和一个确认按钮的警告框。
var result = confirm("您确定要删除吗");
alert(result);
(2):confirm()--------------显示带有一段消息以及确认按钮和取消按钮的对话框。
var result = confirm("您确定要删除吗");
alert(result);
(3):prompt()---------------显示可提示用户输入的对话框。
var result = prompt("请输入一个数字！");
alert(result);
(4):open()-----------------打开一个新的浏览器窗口或查找一个已命名的窗口。
open('','','width=200,resizable=no,height=100');
(5):close()----------------关闭浏览器窗口。
(6):setInterval()----------按照指定的周期(以毫秒计)来调用函数或计算表达式。
ID=setInterval(showTime,1000);
(7):clearInterval()----------取消setInterval设置的timeout。
clearInterval(ID);
(8):setTimeout()-----------在指定的毫秒数后调用函数或计算表达式。
(9):clearTimeout()---------取消由 setTimeout() 方法设置的 timeout。
(10):scrollTo()------------把内容滚动到指定的坐标。
-------------------------------------------DOM----------------------------------------------
文档对象模型(DOM)Documnt object model(整合js，css，html)
HTML Documnt Object Model(文档对象模型)
HTML DOM定义了访问和操作HTML文档的标准方法
HTML DOM把HTML文档呈现为带有元素，属性和文本的树结构(节点树)
-------------------------------------------DOM节点-----------------------------------
1:节点关系
(1):root--------------------根(在节点树中，顶端节点称为根)
(2):parent------------------父(每个节点都有父节点，除了根节点)
(3):child-------------------子(一个节点可拥有任意数量的子)
(4):sibling-----------------同胞(拥有相同父节点的节点)
2:节点查找
--直接查找节点
(1):document.getElementById("idname")
(2):document.getElementsByTagName("tagname")
(3):document.getElementByName("name")
(4):document.getElementByClassName("name")
--局部查找
(1):parentElement------------父节点标签元素
(2):children-----------------所有子标签
(3):firstElementChild--------第一个子标签元素
(4):lastElementChild---------最后一个子标签元素
(5):nextElementtSibling------下一个兄弟标签元素
(6):previousElementSibling---上一个兄弟标签元素
3：节点操作
(1):创建节点：
createElement(标签名)：创建一个指定名称的元素。
var tag=document.createElement("input")
tag.setAttribute('type','text');
(2):添加节点；
追加一个子节点(作为最后的子节点)
somenode.appendChild(nawnode)
把增加的节点放到某个节点的前边
somenode.inserBefore(newnode,某个节点)；
(3):删除节点：
removeChild():获得要删除的元素，通过父元素调用删除
(4):替换节点：
somenode.replaceChild(newnode,某个节点)；
(5):节点的属性操作：
1:获取文本节点的值：innerText innerHTML
2:attribute操作：
elementNode.setAttribute(name,value)
elementNode.getAttribute(属性名)----elementNode.属性名(DHTML)
elementNode.removeAttribute("属性名");
3：value获取当前选中的value值
(1):input
(2):select(selectdindex)
(3):textarea
4：innerHTML给节点添加html代码：
该方法不是w3c的标准，但是主流浏览器支持
tag.innerHTML = “<p>要显示内容</p>”;
5：关于class的操作：
elementNode.className
elementNode.classList.add
elementNode.classList.remove
6:改变css样式：
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
.style.fontSize=48px
------------------------------------------------------------------------DOM Event(事件)----------------------------------------------------------------------------------------
1；事件类型
onclick---------------------------------------------------------当用户点击某个对象时调用的事件句柄。
ondblclick------------------------------------------------------当用户双击某个对象时调用的事件句柄。
onfocus---------------------------------------------------------元素获得焦点。 练习：输入框
onblur----------------------------------------------------------元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange--------------------------------------------------------域的内容被改变。应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown-------------------------------------------------------某个键盘按键被按下。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress------------------------------------------------------某个键盘按键被按下并松开。
onkeyup---------------------------------------------------------某个键盘按键被松开。
onload----------------------------------------------------------一张页面或一幅图像完成加载。
onmousedown------------------------------------------------------鼠标按钮被按下。
onmousemove------------------------------------------------------鼠标被移动。
onmouseout-------------------------------------------------------鼠标从某元素移开。
onmouseover------------------------------------------------------鼠标移到某元素之上。
onmouseleave-----------------------------------------------------鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
2：绑定方式
(1)：<div id="div" onclick="foo(this)">点击我</div>
<script>
function foo(self)
console.log("点你大爷！")；
console.log(self);
</script>
(2):<p id="abc">试一试！</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
console.log("ok");
console.log(this);
}
</script>
3:事件介绍：
(1):onload:-----------onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景:
当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
window.onload=function(){
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
};
*/
function fun() {
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
}
</script>
</head>
<body onload="fun()">
<p id="ppp">hello p</p>
</body>
</html>
(2):onsubmit:当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败
.在该方法中我们应该阻止表单的提交.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function(){
//阻止表单提交方式1().
//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.
var ele=document.getElementById("form");
ele.onsubmit=function(event) {
// alert("验证失败 表单不会提交!");
// return false;
// 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
alert("验证失败 表单不会提交!");
event.preventDefault();
}
};
</script>
</head>
<body>
<form id="form">
<input type="text"/>
<input type="submit" value="点我!" />
</form>
</body>
</html>
(3):事件传播：
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
<div id="abc_2" style="border:1px solid red;width:200px;height:200px;">
</div>
</div>
<script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert('111');
};
document.getElementById("abc_2").onclick=function(event){
alert('222');
event.stopPropagation(); //阻止事件向外层div传播.
}
</script>
(4):onselect
<input type="text">
<script>
var ele=document.getElementsByTagName("input")[0];
ele.onselect=function(){
alert(123);
}
</script>
(5):onchange
<select name="" id="">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select>
<script>
var ele=document.getElementsByTagName("select")[0];
ele.onchange=function(){
alert(123);
}
</script>
(6):onkeydown
<input type="text" id="t1"/>
<script type="text/javascript">
var ele=document.getElementById("t1");
ele.onkeydown=function(e){
e=e||window.event;
var keynum=e.keyCode;
var keychar=String.fromCharCode(keynum);
alert(keynum+'----->'+keychar);
};
</script>
(7):onmouseout与onmouseleave事件的区别：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
width: 300px;
}
#title{
cursor: pointer;
background: #ccc;
}
#list{
display: none;
background:#fff;
}
#list div{
line-height: 50px;
}
#list .item1{
background-color: green;
}
#list .item2{
background-color: rebeccapurple;
}
#list .item3{
background-color: lemonchiffon;
}
</style>
</head>
<body>
<p>先看下使用mouseout的效果:</p>
<div id="container">
<div id="title">使用了mouseout事件↓</div>
<div id="list">
<div class="item1">第一行</div>
<div class="item2">第二行</div>
<div class="item3">第三行</div>
</div>
</div>
<script>
// 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
// 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
var container=document.getElementById("container");
var title=document.getElementById("title");
var list=document.getElementById("list");
title.onmouseover=function(){
list.style.display="block";
};
container.onmouseleave=function(){ // 改为mouseout试一下
list.style.display="none";
};
/*
因为mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list
上，所以鼠标移出每个子元素时也都会触发我们的list.style.display="none";
*/
/*
思考:
if:
list.onmouseout=function(){
list.style.display="none";
};
为什么移出第一行时,整个list会被隐藏?
其实是同样的道理,onmouseout事件被同时绑定到list和它的三个子元素item上,所以离开任何一个
子元素同样会触发list.style.display="none";
*/
</script>
</body>
</html
浙公网安备 33010602011771号