一、数据类型
number ----- 数值 boolean ----- 布尔值 string ----- 字符串 undefined ----- undefined null ----- null
数字类型：
不区分整型数值和浮点型数值;
所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式
能表示的最大值是±1.7976931348623157 x 10308
能表示的最小值是±5 x 10 -324
整数：
在JavaScript中10进制的整数由数字的序列组成
精确表达的范围是-9007199254740992 (-253) 到 9007199254740992 (253)
超出范围的整数，精确度将受影响
字符串类型:
是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；JavaScript中没有字符类型；常用特殊字符在字符串中的表达；
字符串中部分特殊字符必须加上右划线\；常用的转义字符 \n:换行 \':单引号 \":双引号 \\:右划线
布尔类型：
Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
布尔值也可以看作on/off、yes/no、1/0对应true/false
Undefined类型
Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
当函数无明确返回值时，返回的也是值 "undefined";
Null类型
另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。
二、流程控制
顺序结构、分支结构，循环结构
<script> console.log(“星期一”); console.log(“星期二”); console.log(“星期三”); </script>
if (表达式){
语句１;
......
} else{
语句２;
.....
var x= (new Date()).getDay(); //获取今天的星期值，0为星期天
var y; if ( (x==6) || (x==0) ) {
y="周末";
}else{
y="工作日";
}
console.log(y);
switch-case结构
switch(x){
case 1:y="星期一"; break;
case 2:y="星期二"; break;
case 3:y="星期三"; break;
case 4:y="星期四"; break;
case 5:y="星期五"; break;
case 6:y="星期六"; break;
case 7:y="星期日"; break;
default: y="未定义";
}
for循环的两种方法
for(初始表达式;条件表达式;自增或自减)
{
执行语句
……
}
for( 变量 in 数组或对象)
{
执行语句
……
}
while循环
var i=1;
while (i<=7) {
document.write("<H"+i+">hello</H "+i+"> ");
document.write("<br>");
i++;
}
异常处理
try { //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行}
catch (e) { // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象}
finally { //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。}
三、javascript对象
在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是基于对象实现的。
<script language="javascript">
var aa=Number.MAX_VALUE;
//利用数字对象获取可表示最大数
var bb=new String("hello JavaScript");
//创建字符串对象
var cc=new Date();//创建日期对象
var dd=new Array("星期一","星期二","星期三","星期四");
//数组对象
</script>
字符串创建(两种方式)
var str1="hello world";
var str1= new String("hello word");
字符串属性和方法啊
str1="welcome to the world of JS!" str2=str1.match("world" str3=str1.search("world"0]);
alert(str3); str1="abcdefgh" str2=str1.slice(2,4 str3=str1.slice(4 str4=str1.slice(2,-1 str5=str1.slice(-3,-1 str1="一,二,三,四,五,六,日" strArray=str1.split(","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]="星期六";
数组的属性和方法
join方法
x.join(bystr) －－－－将数组元素拼接成字符串
var arr1=[1, 2, 3, 4, 5, 6, 7];
var str1=arr1.join("-");
alert(str1); //结果为"1-2-3-4-5-6-7"
concat方法
x.concat(value,...) －－－－ var a = [1,2,3]; var b=a.concat(4,5) ; alert(a.toString()); //返回结果为1,2,3 alert(b.toString()); //返回结果为1,2,3,4,5
reverse,sort
切片slice
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);
splice删除子元素
//x. splice(start, deleteCount, value, ...)
//x代表数组对象
//splice的主要用途是对数组指定位置进行删除和插入 //start表示开始位置索引 //deleteCount删除数组元素的个数 //value表示在删除位置插入的数组元素 //value参数可以省略
var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
alert(a.toString());
a.splice(1,1);
数组的push pop方法
//push pop这两个方法模拟的是一个栈操作
//x.push(value, ...) 压栈
//x.pop() 弹栈
//x代表数组对象
//value可以为字符串、数字、数组等任何值
//push是将value值添加到数组x的结尾
//pop是将数组x的最后一个元素删除
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"
数组的shift unshift方法
//x.unshift(value,...) //x.shift() //使用注解 //x代表数组对象 //value可以为字符串、数字、数组等任何值 //unshift是将value值插入到数组x的开始 //shift是将数组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"
Date对象
//方法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( ));//毫秒并不直接显示
获取日期和时间 getDate() 获取日 getDay () 获取星期 getMonth () 获取月（0-11） getFullYear () 获取完整年份 getYear () 获取年 getHours () 获取小时 getMinutes () 获取分钟 getSeconds () 获取秒 getMilliseconds () 获取毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜)
例子:
function getCurrentDate(){ //1. 创建Date对象
var date = new Date(); //没有填入任何参数那么就是当前时间
//2. 获得当前年份
var year = date.getFullYear(); //3. 获得当前月份 js中月份是从0到11.
var month = date.getMonth()+1; //4. 获得当前日
var day = date.getDate(); //5. 获得当前小时
var hour = date.getHours(); //6. 获得当前分钟
var min = date.getMinutes(); //7. 获得当前秒
var sec = date.getSeconds(); //8. 获得当前星期
var week = date.getDay(); //没有getWeek
// 2014年06月18日 15:40:30 星期三
return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);
}
alert(getCurrentDate());//解决 自动补齐成两位数字的方法
function changeNum(num){ if(num < 10){ return "0"+num;
}else{ return num;
}
}//将数字 0~6 转换成 星期日到星期六
function parseWeek(week){ var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; // 0 1 2 3 .............
return arr[week];
}
Date对象设置日期时间
//设置日期和时间 //setDate(day_of_month) 设置日//setMonth (month) 设置月//setFullYear (year) 设置年//setHours (hour) 设置小时//setMinutes (minute) 设置分钟//setSeconds (second) 设置秒//setMillliseconds (ms) 设置毫秒(0-999)//setTime (allms) 设置累计毫秒(从1970/1/1午夜) var x=new Date(); x.setFullYear (1997); //设置年1997 x.setMonth(7); //设置月7 x.setDate(1); //设置日1 x.setHours(5); //设置小时5 x.setMinutes(12); //设置分钟12 x.setSeconds(54); //设置秒54 x.setMilliseconds(230); //设置毫秒230 document.write(x.toLocaleString( )+"<br>");//返回1997年8月1日5点12分54秒 x.setTime(870409430000); //设置累计毫秒数 document.write(x.toLocaleString( )+"<br>");//返回1997年8月1日12点23分50秒
Math对象
0 ~ 1
四、函数对象
函数定义
function
函数名 (参数){<br> 函数体;
return
返回值;
}
BOM对象
window对象
所有浏览器都支持 window 对象。 概念上讲.一个html文档对应一个window对象. 功能上讲: 控制浏览器窗口的. 使用上讲: window对象不需要创建对象,直接使用即可.
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
例子：
var num = Math.round(Math.random()*100);
function acceptInput(){
//2.让用户输入(prompt) 并接受 用户输入结果
var userNum = prompt("请输入一个0~100之间的数字!","0");
//3.将用户输入的值与 随机数进行比较
if(isNaN(+userNum)){
//用户输入的无效(重复2,3步骤)
alert("请输入有效数字!");
acceptInput();
}
else if(userNum > num){
//大了==> 提示用户大了,让用户重新输入(重复2,3步骤)
alert("您输入的大了!");
acceptInput();
}else if(userNum < num){
//小了==> 提示用户小了,让用户重新输入(重复2,3步骤)
alert("您输入的小了!");
acceptInput();
}else{
//答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm).
var result = confirm("恭喜您!答对了,是否继续游戏?");
if(result){
//是 ==> 重复123步骤.
num = Math.round(Math.random()*100);
acceptInput();
}else{
//否==> 关闭窗口(close方法).
close();
}
}
}
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
例子：
<script>
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var ID;
function begin(){
if (ID==undefined){
showTime();
ID=setInterval(showTime,1000);
}
}
function end(){
clearInterval(ID);
ID=undefined;
}
</script>
DOM对象
HTML Document Object Model（文档对象模型）
HTML DOM 定义了访问和操作HTML文档的标准方法
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)
DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点
直接节点查找
document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)
i am div2i am div2i am div2hello pdiv1=.()
导航节点属性
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
创建节点
createElement(标签名) ：创建一个指定名称的元素。
例：var tag=document.createElement(“input")
tag.setAttribute('type','text');
添加节点
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)
把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);
删除节点：
removeChild()：获得要删除的元素，通过父元素调用删除
替换节点：
somenode.replaceChild(newnode, 某个节点);
节点属性操作：
1、获取文本节点的值：innerText innerHTML
2、attribute操作
elementNode.setAttribute(name,value)
elementNode.getAttribute(属性名)
elementNode.removeAttribute(“属性名”);
3、value获取当前选中的value值
1.input
2.select （selectedIndex）
3.textarea
4、innerHTML 给节点添加html代码：
该方法不是w3c的标准，但是主流浏览器支持
tag.innerHTML = “<p>要显示内容</p>”;
5、关于class的操作：
|
1
2
3
|
elementNode.className
elementNode.classList.add
elementNode.classList.remove
|
6、改变css样式：
|
1
2
3
|
<p
id
=
"p2"
>Hello world!<
/
p>
document.getElementById(
"p2"
).style.color
=
"blue"
;
.style.fontSize
=
48px
|
DOM event事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
鼠标按钮被按下。
鼠标被移动。
鼠标从某元素移开。
鼠标移到某元素之上。
鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
绑定事件方法
1.
<div id="div" οnclick="foo(this)">点我呀</div>
<script>
function foo(self){ // 形参不能是this;
console.log("点你大爷!");
console.log(self);
}
</script>
2.
<p id="abc">试一试!</p>
<script>
var ele=document.getElementById("abc");
ele.οnclick=function(){
console.log("ok");
console.log(this); // this直接用 };
</script>
onload：
onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
window.οnlοad=function(){
var ele=document.getElementById("ppp");
ele.οnclick=function(){
alert(123)
};
};
*/
function fun() { var ele=document.getElementById("ppp");
ele.οnclick=function(){
alert(123)
};
} </script></head><body οnlοad="fun()"><p id="ppp">hello p</p></body></html>
onsubmit：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.οnlοad=function(){ //阻止表单提交方式1().
//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.
var ele=document.getElementById("form");
ele.οnsubmit=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>
事件传播
<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").οnclick=function(){
alert('111');
};
document.getElementById("abc_2").οnclick=function(event){
alert('222');
event.stopPropagation(); //阻止事件向外层div传播. }</script>
onselect
<input type="text">
<script> var ele=document.getElementsByTagName("input")[0];
ele.οnselect=function(){
alert(123);
}</script>
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.οnchange=function(){
alert(123);
}</script>
五、功能例子
搜索框
Title(){
input=.()(input.==){
input.=}
}
(){
ele=.()val=ele.(!val.()){
ele.=}
}
()()
2.模态对话框
Title.{
: : }
.{
: : : :: : : }
.{
: }
.{
: : %: %: -: -: : : }
eles=.()handles=.()(i=i<eles.i++){
eles[i].=(){
(.==){
(j=j<handles.j++){
handles[j]..()}
}
{
(j=j<handles.j++){
handles[j]..()}
}
}
}
3.表格例子
Title全选反选取消111111111222222222333333333444444444input_arr=.()button_arr=.()(i=i<button_arr.i++){
button_arr[i].=(){
(j=j<input_arr.j++){
inp=input_arr[j]
(.==){
.()inp.=}
(.==){
inp.=}
{
(inp.){
inp.=}{
inp.=}
}
}
}
}
4.select移动
Title.{
: : : %: : : -}
{
: : : : : }
{
: : : : :}
{
: }
{
: : : : : : }
红楼梦西游记水浒传JinPingMei三国演义> >> 放风筝的人choose_move=.()all_move=.()right=.()left=.()options=left.choose_move.=(){
(i=i<options.i++){
option=options[i](option.==){
right.(option)i--}
}
}all_move.=(){
(i=i<options.i++){
option=options[i]right.(option)i--}}
二级联动
请选择省:请选择市:={:[]:[]}p=.()c=.()(i in ){
option_pro=.()option_pro.=ip.(option_pro)}
p.=(){
=(.[.]).=[]c..=(i in ){
option_city=.()option_city.=[i]c.(option_city)}
}
导航菜单
Title.{
: %: : : }
.{
:%: : : }
.{
: : : : }
.{
: }
.{
: }
菜单一111111111111111菜单二222222222222222菜单三333333333333333eles = .()(i=i<eles.i++){
eles[i].=(){
...()arr_item=...ele_curr_p=.(j=j<arr_item.j++){
(arr_item[j] != ele_curr_p){
arr_item[j].[]..()}
}
}
}
转载于:https://blog.51cto.com/haoyonghui/1952445
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
