Javascript介绍
-
JavaScript一种脚本语言，是一种动态类型、弱类型 -
JavaScript通常用来操作HTML页面的 -
html骨架，css是样式，js是行为
js代码写在哪里
-
JavaScript代码可以写在页面的script标签里面，或者单独的js文件里面，或者标签属性里面（不推荐） -
写在外部
.js后缀文件里面，通过script标签引入，类似于img的src标签引入-
在引入
js文件的script标签里面，一定不能再写js代码
-
-
script标签可以放置于任何位置，不同位置要注意加载顺序，如果没有什么特殊要求，通常放在body结束之前。-
如果
script里面涉及到操作后面的元素，而script又非得放在前面的话，需要加上window.onload
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; } </style> <script> //如果script里面涉及到操作后面的元素，而又非得把script放在前面的话，需要加上： window.onload = function () { alert("1我是写在head里面的js");//这里再写代码（意思是：当整个页面加载完成之后，再执行这里的代码） };//一个页面中只能出现一次window.onload </script> </head> <body> <!--<div onclick="alert(1);"></div>--> <script src="firstJS.js"></script> <script> /* 1.JavaScript 是一种脚本语言，是一种动态类型、弱类型 2.JavaScript通常用来操作HTML页面的 html骨架，css是样式，js是行为 JS代码写在哪里： script标签里面 写在外部.js后缀文件里面，通过script标签引入 写在标签里面 注意：在引入js文件的script里面，一定不能再写js代码 标签里面写js代码一般情况下不推荐 script标签的方式位置： head或者body里面 要注意是否需要加上window.onload 如果说没有什么特别的要求，一般script标签放在body结束之前 */ alert(1);//弹窗 用来调试代码 console.log(2);//打印到控制台 用来调试代码 </script> </body> </html>
写js代码需要注意什么
-
注释里面是没有要求的
-
严格区分大小写
-
alert()才是js本身自带的，Alert()不是自带的
-
-
语句字符都是半角字符（字符串里面可以使用任意字符）
-
某些完整语句后面要写分号
-
代码要缩进，缩进要对齐
-
引号里面代表字符串，字符串是没有代码的功能的，所以不需要满足上述要求。
注释
-
多行注释
/* */ -
单行注释
//
js里的系统弹窗代码
-
alert("内容")
js里的打印
-
console.log(1);
js获取元素及修改内容
-
其实，要操作页面，就是操作标签，
JS要操作标签，就要先获取标签
-
独有标签的获取：
-
document.title document.title
document.body document.body.innerHTML
document.body.innerText
document.head document.head.innerHTML
-
-
其他标签的获取
-
通过
id获取元素-
document.getElementById("box");
-
-
通过
class获取：（不兼容IE8及以下）-
.getElementsByClassName();
-
-
通过标签名获取
-
.getElementsByTagName();
-
-
通过选择器的写法获取元素：（不兼容IE7及以下）
-
.querySelector(); -
.querySelectorAll();
-
-
通过
name获取-
.getElementsByName();
-
-
注意： 除了ID获取前面必须是document之外，其他的方式，前面可以是某个元素（不能是集合）
-
修改页面
title信息-
document.title = "我要把标题改成666";
-
-
修改别的标签的内容，得用
innerHTML或者innerText-
innerHTML可以识别标签 -
innerText不能识别标签
-
-
获取某个确切的元素,可以直接操作这个元素
-
document.getElementById("box").innerHTML = "吃惊！";
-
-
获取的是一堆元素的集合，设置操作时要通过下标（索引、序号）拿到对应的某一个再用
-
document.getElementsByClassName("box")[0].innerHTML = "美女";
-
-
document.write()-
在文档流关闭之前，给body部分新增内容,在文档流关闭之后，修改整个HTML的内容
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <div id="box"></div> <p class="wrap">wrap1</p> <p class="wrap">wrap2</p> <p>ppp1</p> <div id="box1"> <i class="box1">iii1</i> <p class="p">ppp2 <i class="box1">iii2</i> </p> <!--#box1 .p .box1 --> </div> <script> /* 那么JS如何操作页面： 其实，要操作页面，就是操作标签，JS要操作标签，就要先获取标签 js如何获取独有标签 document.title document.head document.body 其他标签的获取，id前面必须是document,其他的前面可以是某个元素(id,document)，但不能是集合 通过id获取元素， document.getElementById() 通过className获取元素(不支持IE8及以下) .getElementsByClassName() 通过标签名获取元素 .getElementsByTagName() 通过选择器的写法获取元素（不兼容IE7及以下） .querySelector() .querySelectorAll() 通过name值获取 document.getElementsByName（） */ // document.title = "我是来改变标题的"; //修改别的标签的内容，得用innerHTML(会解析标签)，innerText（不会解析标签） // document.body.innerHTML = "<b><em>我想给body增加点东西</em></b>"; // document.body.innerText = "<b><em>我想给body增加点东西</em></b>"; //获取的是确切的某个元素，可以直接操作这个元素 document.getElementById("box").innerHTML = "我是通过id获取的"; //获取的是一堆元素的集合，设置操作的时候要通过下标（索引、序号）拿到对应的某一个 /*document.getElementsByClassName("wrap")[0].innerHTML = "我是通过class获取的1"; document.getElementsByClassName("wrap")[1].innerHTML = "我是通过class获取的2"; alert(document.getElementsByClassName("wrap").length);//length 长度*/ // document.getElementsByTagName("p")[0].innerHTML = "我是通过标签名获取的1"; // document.getElementsByTagName("p")[1].innerHTML = "我是通过标签名获取的2"; // document.getElementsByTagName("p")[2].innerHTML = "我是通过标签名获取的3"; // document.querySelector("#box1 .p .box1").innerHTML = "我是iii2"; //获取第一个对应的元素 // document.querySelector("#box1 .box1").innerHTML = "我是iii2";
// var oBox = document.getElementsByClassName("box")[0]; 可以用变量来接收指定选取的元素
// var oSpan = oBox.getElementsByTagName("span");
// alert(oSpan.length);
document.querySelectorAll("#box1 .box1")[1].innerHTML = "你猜我是哪一个"; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <div>222</div> <script> /* document.write() 在文档流关闭之前，给body部分新增内容 在文档流关闭之后，修改整个html的内容 */ // document.write("我是新增加的内容"); window.onload = function () { document.write("<b><em>我是新增加的内容</em></b>"); } </script> </body> </html>
事件
-
用户的操作 元素.事件 = 函数；
-
鼠标事件
-
onclick左键单击 -
ondblclick左键双击 -
onmouseenter鼠标移入 -
onmouseleave鼠标移出
-
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #box{ width: 100px; height: 100px; background: yellow; } </style> </head> <body> <div id="box"></div> <script> /* 所谓事件，是指 JavaScript 捕获到用户的操作，并做出正确的响应。 在事件函数里面，有一个关键字this，代表当前触发事件的这个元素 事件：用户的操作 元素.事件 = 函数； 鼠标事件： 左键单击 onclick 左键双击 ondblclick 鼠标移入 onmouseover/onmouseenter *** 鼠标移出 onmouseout/onmouseleave *** */ document.getElementById("box").onclick = function () { console.log("我被点击了"); // document.getElementById("box").innerHTML = "哈哈"; this.innerHTML = "嘻嘻"; alert("哈哈"); }; document.getElementById("box").onmouseenter = function () { console.log("我被移入了"); }; document.getElementById("box").onmouseleave = function () { console.log("我被移出了"); } </script> </body> </html>
定义变量
-
不能使用关键字或者保留字（js里面已经赋予它有意义的词，或者留着备用的词）
-
只能包含 数字 字母 _ $ 并且不能以数字开头
-
严格区分大小写
-
尽量见名知意
-
var 变量时并不要求立马赋值
-
用,号可以让一个var定义多个变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #box{ width: 100px; height: 100px; background: purple; } </style> </head> <body> <div id="box"></div> <script> /* 定义变量规则： 1.不能使用关键字或者保留字,（js里面已经赋予他有意义的词，或者留着备用的词） 2.只能包含 数字 字母 $ _ 并且不能以数字开头 3.严格区分大小写 4.尽量见名知意 用 ，号可以让一个var定义多个变量 var变量时并不要求立马赋值 */ // var oBox = document.getElementById("box"); // oBox.onclick = function () { // console.log("我被点击了"); // this.innerHTML = "嘻嘻"; // }; // oBox.onmouseenter = function () { // console.log("我被移入了"); // }; // oBox.onmouseleave = function () { // console.log("我被移出了"); // }; // var a = 10; // var b = 20; // var a = 10 , b = 10; var a , b , c; a = 10; b = 10; c = 10; alert( a + b + c ); </script> </body> </html>
-
规范的标签属性：
-
. 符号直接操作(可读可写)
-
-
不规范（自定义）的标签属性：
-
获取
getAttribute -
设置
setAttribute -
移除
removeAttribute
-
注意：所有的 路径/颜色 获取的结果不一定就是你写的内容
通过ID获取的元素赋值给变量后，假设修改了ID，这个变量还是表示这个元素
自定义标签属性的操作方式，同样可以操作符合规范的标签属性
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <a href="http://www.baidu.com" id="box" class="box" xiaopo="meinv" target="_blank">链接</a> <script> /* js操作元素的标签属性： 规范的标签属性： . 符号直接操作（可读可写） 不规范（自定义）的标签属性： 获取：.getAttribute 设置：.setAttribute 移除：.removeAttribute 注意： 所有的 路径、颜色 获取的结果不一定是你写的内容 通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素 自定义标签属性的操作方式，同样可以操作符合规范的标签属性 */ var oA = document.getElementById("box"); // alert(oA.id);//可读 // alert(oA.target); // alert(oA.className);//class属性 要用className // oA.className = "on"; // oA.target = "_self"; // alert(oA.xiaopo); alert(oA.href); // oA.target = ""; // oA.id = "bbb"; // oA.target = "_self"; // alert(oA.getAttribute("xiaopo")); // alert(oA.getAttribute("id")); // alert(oA.getAttribute("class")); // oA.setAttribute("xiaopo","ccc"); // oA.removeAttribute("xiaopo"); </script> </body> </html>
控制元素的样式
-
行内样式标签属性：大部分情况下，
js都是通过操作行内样式达到修改样式的目的当我需要单个属性去修改的时候,我们一般都是直接 . 操作去修改元素的行内样式
-
操作复合属性时，要注意用驼峰写法（去掉-号，-号后面的第一个单词大写）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #box{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div id="box"></div> <script> /* 行内样式标签属性：大部分情况下，js都是通过行内样式来达到修改样式的目的 */ var oBox = document.getElementById("box"); //当我们需要修改单个属性的时候，我们一般都是直接.操作去修改元素的行内样式 /*oBox.style.height = "200px"; oBox.style.width = "200px"; oBox.style.background = "blue";*/ /*oBox.style.cssText = "width: 200px;height: 200px;background: blue;";*/ // 操作复合属性时，要注意用驼峰写法（去掉-号，-号后面的第一个单词大写） // oBox.style.marginLeft = "150px"; oBox.style["margin-left"] = "150px"; </script> </body> </html>
数据类型
-
number数字 -
string字符串 -
boolean布尔值truefalse -
function函数 -
underfined未定义 一个变量声明之后没有赋值就是undefined -
object在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单独一类数据类型null
算数运算符
-
+ - * /当不是数字之间的运算的时候
+ 字符串拼接
-/*% 尽量将字符串转换成数字（隐式类型转换）
NaN :Not a Number number类型
一般在非法运算的时候才会 出现NaN
isNaN(参数) 非常讨厌数字
首先尽量把参数转换成数字，然后
当参数是 数字，返回 false
当参数不是数字，返回 true
赋值运算符
-
+= -= *= /= %=
++ -- 两个都存在隐式类型转换，会全部转换为数字
++x x++
比较运算符
-
< > == <= >= != === !==
== 和 ===的区别
== 只判断值是否一样
=== 不仅仅判断值，还判断类型是否一样
逻辑运算符
针对布尔值
&& 与 两边都为真，结果才为真，其他为假
|| 或 两边都为假，结果才为假，其他都是真
! 非 取反，真变假，假变真
当逻辑运算符，两边不一定是布尔值的时候
&& 遇到假就停，但是不会进行类型转换
|| 遇到真就停，。。。
！ 隐式类型转换，将后面的数据先转换为布尔值再取反
循环
for循环实例一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /*for(var i = 0;i < 10 ; i ++){ console.log(i); }*/ /*for(var i = 0 ; i < 5 ; i ++){ for(var j = 0 ; j < 2; j ++){ console.log(i +";"+ j); } }*/ /*for(1;2;4){ 3; // 1 - 2 - 3 - 4 - 2 - 3 - 4 - 2 - 3 - 4 - 2 直到2为假 }*/ for(var i = 0 ; i < 10 ; i ++){ if(i === 5){ // break;//中断循环，终止循环，结束循环，未执行的代码不执行 continue;//跳出本次循环 } console.log(i); } </script> </body> </html>
for循环实例二
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } li{ list-style: none; width: 50px; height: 50px; background: red; border-bottom: 1px solid white; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <script> var oLi = document.getElementsByTagName("li"); var length = oLi.length; // alert(length); /*oLi[0].onclick = function () { alert(0); }; oLi[1].onclick = function () { alert(1); }; oLi[2].onclick = function () { alert(2); }; oLi[3].onclick = function () { alert(3); };*/ for(var i = 0; i < length; i ++){ oLi[i].index = i;//index aa bb dd 自定义变量 // oLi[0].index = 0; // alert(i);//0 1 2 3 oLi[i].onclick = function () { //循环完了的i alert(this.index); // alert(i); } } /*for(var i = 0; i < 10; i ++){ console.log(i); } alert(i);//10*/ </script> </body> </html>
while循环实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> // var i = 0; /*for(;i<5;i++){ console.log(i); }*/ /*while(i<6){ console.log(i); i ++; }*/ var i = 40; /*while(i<5){ console.log(i); i ++; }*/ do{ console.log(i); i++; }while(i<5); </script> </body> </html>
switch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /*var name = "55"; if(name === "小红"){ alert(name + "好漂亮"); }else if(name === "小明"){ alert(name + "超级帅"); }else if(name === "东方"){ alert(name + "很帅"); }else{ alert("你是谁"); }*/ //全等判断 var name = "小红"; switch(name){//你要判断的变量 case "小红": alert(name + "好漂亮"); break; case "小明": alert(name + "超级帅"); break; case "东方": alert(name + "很帅"); break; default: alert("你是谁"); break; } </script> </body> </html>
if条件
当if的条件 运算完后不是布尔值的时候，会被强制性的转换为布尔值
哪些值，在转换为布尔值的时候为false
false boolean
0 number
"" string
null object
undefined undefined
NaN number
在if里面，能用布尔值做条件判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间
在两个值比较的时候，能用三等判断的时候，就用三等判断
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* if ==> 布尔值 判断符 > < >= <= == != !== === == 只判断值是否一样 === 不仅仅判断值，还判断类型是否一样 当if的条件 运算完后不是布尔值的时候 会被强制性的转换为布尔值 哪些值，在转换为布尔值的时候为false 0 number false boolean "" string null object/null undefined undefined NaN number NaN :Not a Number number类型 一般在非法运算的时候才会 出现NaN isNaN(参数) 非常讨厌数字 首先尽量把参数转换成数字，然后 当参数是 数字，返回 false 当参数不是数字，返回 true 在if里面，能用布尔值做条件判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间 在两个值比较的时候，能用三等判断的时候，就用三等判断 */ /*if(3 === "3"){ //这里的代码只有当条件为true的时候才执行 alert("真"); }else{ //这里的代码只有当条件为false的时候才执行 alert("假"); }*/ // if(){}else{} //当真语句只有一行的时候，可以去掉大括号，还可以直接写在条件的后面 /*if(3<5){ alert("真"); }*/ /*if(3<5)alert("真");*/ /*if(5<4){ alert(1); }else{ alert(0); }*/ //真语句一行，假语句一行 // 5<4?alert(1):alert(0);//条件?真语句:假语句; // var x; /*if(5<6){ x = 10; }else{ x = 20; }*/ //当三目的真假语句都是给同一个变量赋值的时候，可以更近一步简写 // x = 5 < 4?10:20; // alert(x); /*var x = 50; if(x>60){ alert("x大于60"); }else if(x > 40){ alert("x大于40"); }else if(x > 20){ alert("x大于20"); }else if(x >= 0){ alert("x大于等于0"); }else if(x < 0){ alert("x小于0"); }*/ /*if(null){ alert(1); }else{ alert(0); }*/ /*var a; var x = a +1; alert(a); alert(x); alert(typeof x);*/ if(isNaN("5")){ alert(1); }else{ alert(0); } </script> </body> </html>
函数
有名函数
有名字的函数
可以加括号自执行，执行的位置可以在定义的前面
可以把名字放在事件后面，充当一个事件函数，事件触发的时候执行
fn();
function fn() {
alert(1);}
document.getElementById("box").onclick = fn;
function fn(){
alert(1); }
匿名函数
没有名字的函数
匿名函数不能单独出现 一般充当事件函数
window.onclick = function{
alert( 1 );
}
函数表达式：
特点：可以在后面加括号立即执行
（） + - ! ~ 可以将匿名函数变为函数表达式
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* 函数表达式： 特点：可以在后面加括号立即执行 （） + - ! ~ 可以将匿名函数变为函数表达式 */ /*fn(); function fn() { alert(2); }//函数定义 可以在定义前加括号执行，也可以在定义后加括号执行 // fn();*/ //函数表达式 // fn1(); /*var fn1 = function () {//通过var 的函数，只能在后面运行 alert(3); }; fn1();*/ /*var fn2 = function () { alert(4); }();*/ /*!function () { alert(6); }();*/ /*(function () { alert(7); }());*/ /*+function () { alert(6); }();*/ /*~function () { alert(6); }();*/ -function () { alert(6); }(); </script> </body> </html>
我们在使用函数时，加括号导致的函数执行时，可以传递参数
形参
实参
不定参
实例一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* 我们在使用函数时，加括号导致的函数执行时，可以传递参数 形参 实参 不定参 */ // fn(8);//执行函数时 可以传递 实参(用已知的变量 / 具体的数据) /*var s = 20; fn(s);*/ function fn(q) {//形参（相当于函数局部的变量，命名规则和var相同）(定义，无中生有) // var q; alert(q); } //形参 / 实参都可以有多个，用 , 隔开 /*sum(4,5); function sum(a,b) { alert(a+b); }*/ //实参和形参个数不一定非得一样，但是不一样的时候要注意一一对应的关系 /*sum(4,5,6,7); function sum(a,b) { alert(a+b); }*/ //形参多了的话，没有对应的那些形参，值就是undefined sum(1,2); function sum(a,b,c) { // var c; //给形参添加默认值 a = a || 0; b = b || 0; c = c || 0; alert(c); alert(a+b+c); } </script> </body> </html>
实例二：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> sum(1,2,3,4,5,6,7,8,9); function sum() { //不定参 arguments,存储着所有 实参 的集合 // 无论有没有形参，实参都会被存在 不定参 里面 /*alert(arguments.length); alert(arguments[3]);*/ var x = 0; for(var i = 0,len = arguments.length; i < len; i ++){ x += arguments[i]; } alert(x); } </script> </body> </html>
作用域：
javascript解析顺序
1.（定义）先解析var function 参数
a.该步骤的var只定义变量，后面的=赋值不解析
b.该步骤的函数只定义函数，函数的执行不解析
c.重名的只留一个，var 和函数重名 函数优先
2.（执行）再从上至下执行其他代码
作用域：
作用：读写
域：范围，区域
解析：
从上至下
1 找 var 定义函数 参数
2 执行
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* javascript解析顺序 1.（定义）先解析var function 参数 a.该步骤的var只定义变量，后面的=赋值不解析 b.该步骤的函数只定义函数，函数的执行不解析 c.重名的只留一个，var 和函数重名 函数优先 2.（执行）再从上至下执行其他代码 作用域： 作用：读写 域：范围，区域 解析： 从上至下 1 找 var 定义函数 参数 2 执行 */ /*alert(a); var a = 5; alert(a);*/ /* 1 找 a = undefined;==>a = 5; 2 执行 alert(a); == > a = undefined; a = 5; alert(a);== > 5 */ /*alert(a); function a() { alert(6); } alert(a);*/ /* 1 找 a = function a() { alert(6); } 2 执行 alert(a);== > 函数块 alert(a);== > 函数块 */ /*alert(a); function a() { alert(6); } a(); alert(a);*/ /* 1 找 a = function a() { alert(6); } 2 执行 alert(a); == >函数块 a();函数调用 是新的作用域 只要是作用域 解析时就要分两步 1 找 2 执行 alert(6); == > 6 alert(a);== > 函数块 */ /*alert(a); function a() { alert(6); } var a = 520; alert(a);*/ /* 1 找 a = function a() { alert(6); } == > a = 520; a = undefined //重名 被干掉 2 执行 alert(a); == >函数块 a = 520; alert(a); == > 520 */ /*var a = 1; function fn() { alert(2); var a = 3; } fn(); alert(a);*/ /* 1 找 a = und; == > a = 1 fn = function fn() { alert(2); var a = 3; } 2 执行 a = 1; fn();函数调用 1 找 a = und;==>a = 3; 2 执行 alert(2); == > 2 a = 3; alert(a);==> 1 */ /*var a = 1; function fn() { alert(2); a = 3; } fn(); alert(a);*/ /* 1 找 a = und;==>a = 1;==>a = 3; fn = function fn() { alert(2); a = 3; } 2 执行 a = 1; fn(); 1 找 2 执行 alert(2); ==>2 a = 3;(此函数没有 会从里往外找 去父级的作用域) alert(a);== > 3 */ /*var a = 1; function fn( a ) { alert(2); a = 3; } fn(); alert( a );*/ /* 1 找 a = und；==>a = 1; fn = function fn( a ) { alert(2); a = 3; } 2 执行 a = 1; fn(); 1 找 a = und; ==>a = 3; 2 执行 alert(2);==>2 a = 3; alert( a );== >1 */ /*var a = 1; function fn( a ) { alert(2); a = 3; } fn( a ); alert( a );*/ /* 1 找 a = und;==>a = 1; fn = function fn( a ) { alert(2); a = 3; } 2 执行 a = 1; fn( a );=>fn(1) 1 找 a = und ==>a = 1; ==>a = 3; 2 执行 a = 1; alert(2); ==>2 a = 3; alert( a );==>1 */ /*var a = function () { alert( 1 ) }; function a() { alert( 2 ) } a();*/ /* 1 找 a = und;//重名 被干掉 a = function a() { alert( 2 ) } == > a = function () { alert( 1 ) }; 2 执行 a = function () { alert( 1 ) }; a(); 1 找 2 执行 alert( 1 )；==> 1 */ </script> </body> </html>
number方法
-
number()——参数中必须能被转换成数字，否则返回NaN -
parseInt()——将参数转换为数字，整数部分遇到不是数字就停 -
parseFloat()——将参数转换为数字，直到小数部分遇到不是数字就停 -
num.toFixed()——四舍五入保留两位小数，返回字符串 -
NaN(Not a Number)NaN自己不等于自己
Math数学方法
-
Math.pow(16,2)——16^2 = 256 -
Math.round(0.52)——四舍五入（取整） -
Math.ceil(0.1)——向上取整 -
Math.floor(0.9)——向下取整 -
Math.max()——取参数中最大的值 -
Math.min()——取参数中最小的值 -
Math.random()——0-1的随机数 -
Math.PI()—— π
string字符串
-
索引、下标、偏移值——从0开始
-
str[index]——通过索引取字符串 -
str.length——获取长度 空格也算 -
toString——转换字符串 -
str.substring(2,6)——截取字符串 会比较参数值 小的参数在前面 负数变为0 -
str.slice()——切片 不会交换位置 负数倒着数 从右到左 -
str.split()——字符串切割 返回数组 -
str.indexOf()——查找字符串 成功返回索引 反之返回-1alert(str.indexOf("xiaopo",str.indexOf("xiaopo")+1)); -
str.toUpperCase()——全部转换到大写 -
str.toLowerCase()——全部转换到小写
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* string 字符串 索引、下标、偏移量——从0开始 str[index];——通过索引取字符串 str.length;——获取长度 空格也算 value.toString();——转换字符串 str.substring();——截取字符串 会比较参数值的大小， 小的参数在前面,负数变为0 str.slice()——切片,不会交换位置，负数从右到左数 str.split()——字符串切割，返回数组 str.indexOf——查找字符串，成功返回索引，反之返回-1 str.toUpperCase()——全部转换大写 str.toLowerCase()——全部到小写 */ /*var str = "ni shi shui"; // alert(str.length);//可读 // alert(str[1]);//通过下标访问子元素 str[1] = "Y";//只能读，不能写（修改） console.log(str);*/ /*var a = 456; alert(a.toString()); alert(typeof a.toString());*/ var str = "ni shi shui"; /*console.log(str.substring(1,5)); console.log(str.substring(8,5)); console.log(str.substring(-2,5));*/ /*console.log(str.slice(1,5)); console.log(str.slice(-6,-3));*/ // console.log(str.split("i")); // alert(str.indexOf("i")); // alert(str.indexOf("H")); // alert(str.indexOf("i",2)); console.log(str.toUpperCase()); console.log(str.toLowerCase()); </script> </body> </html>
数组
-
主要存放数据
-
.push往数组后面 追加 -
.unshift往数组前面 追加 -
.pop删除数组最后 一位 -
shift删除数组的 第0位
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* 数组 主要存放数据的 arr.length 查看数组的个数 arr[] 可以读可写 arr.push 在后面添加 能同时添加多个值 arr.unshift() 在前面添加 能同时添加多个值 arr.pop() 删除数组的最后一个 arr.shift() 删除数组的第一个 arr.splice() (0, 1) 从第0位开始删除第一个 返回删除的那个 (2, 3, 'a') 从第二位开始后面三位全部替换成 a (2, 0, 'a') 第二位开始前面插入 a arr.sort() 顺序来排序 arr.reverse() 倒序排序 arr.join() arr.join('a') 以`a`为界限拼接字符串 */ /*var arr = ["xiaopo",12,true]; // alert(arr.length); // alert(arr[1]);//可读 arr[1] = "haha";//可以写（修改） console.log(arr); console.log(arr.join("你好")); console.log(typeof arr.join());*/ //以创建对象的形式 创建数组 /*var arr = new Array(); arr[0] = "nihao0"; arr[1] = "nihao1"; arr[2] = "nihao2"; arr[3] = "nihao3"; console.log(arr);*/ /*var arr = [[1,2,3],4,6,[4,8,9]]; // alert(arr.length); alert(arr[0][1]);*/ /*var arr = ["花花","草草","树树","木木"]; console.log(arr); // arr.push("风","雨");//往数组后面 追加 // console.log(arr); // arr.unshift("雷","电");//往数组前面 追加 // arr.pop();//删除数组最后一位 // arr.shift();//删除数组的 第0位 // arr.splice(3);//数组的长度为3 **** // arr.splice(1,2);//从下标1开始 删除2位 **** arr.splice(0,2,"风");//从下标0开始 删除2位 添加元素 *** console.log(arr);*/ var arr = [1,6,8,2,-8]; // arr.sort();//从小到大 // arr.sort().reverse();//从大到小 // console.log(arr); arr.sort(function (a,b) { // return a-b;//从小到大 // return b-a;//从大到小 // return 1;//倒叙 return -1; }); console.log(arr); </script> </body> </html>
时间对象
-
.getFullYear() -
.getMonth() -
.getDate() -
.getHours() -
.getMinutes() -
.getSeconds() -
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> var data = new Date(); // var strap = data*1; // var strap = data.getTime(); // alert(strap); var year = data.getFullYear();//获取年份 var month = data.getMonth()+1;//获取月份 取值为0~11之间的整数 var date = data.getDate();//获取日数 取值为1~31之间的整数 var hour = data.getHours();//获取小时数 var min = data.getMinutes();//获取分钟数 取值为0~59之间的整数 var sec = data.getSeconds();// 获取秒数 取值为0~59之间的整数 var day = data.getDay();//获取周几 取值为0~6之间的整数 document.body.innerHTML = year + "年"+ month + "月" + date + "日" + hour +"时"+ min +"分"+ sec+"秒" + "星期"+day; </script> </body> </html>
JSON
JSON:一种交互的格式，所有的语言基本上都有字符串，可以传递
js对象:是一种js数据类型，是js特有的，无法传递交互数据
JSON语法规则：
1.json数据格式的属性（键和字符串）的值都为双引号
2.值:整数、浮点数（小数）、字符串、布尔、数组、对象（除了undefined/NaN）
JSON用js定义：
通过字符串来定义
通过js对象来定义，最后传输的时候将对象转换为字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* JSON:轻量级的数据交互格式，它实际在传输的时候都是字符串 ****JSON:一种交互的格式，所有的语言基本上都有字符串，可以传递 js对象:是一种js数据类型，是js特有的，无法传递交互数据 JSON语法规则： 1.json数据格式的属性（键和字符串）的值都为双引号 2.值:整数、浮点数（小数）、字符串、布尔、数组、对象（除了undefined/NaN） JSON用js定义： 通过字符串来定义 var obj = '{"name": "xiaopo"}'; 通过js对象来定义，最后传输的时候将对象转换为字符串 var obj = {"name": "xiaopo"}; JSON.stringify(obj) */ /* var obj1= {"name": "xiaopo","sex": "woman","age": "18"}; // var obj2 = '{"name": "xiaopo","sex": "woman","age": "18"}'; var obj2 = JSON.stringify(obj1); console.log(obj1); console.log(typeof obj1); console.log(obj2); console.log(typeof obj2);*/ /*JSON字符串解析js对象*/ var obj1 = '{"name": "xiaopo","sex": "woman","age": "18"}'; var obj2 = JSON.parse(obj1); console.log(obj1); console.log(typeof obj1); console.log(obj2); console.log(typeof obj2); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> var obj = {"name": "xiaopo","sex": "woman","age": "18"}; /*console.log(obj); console.log(obj.name); console.log(obj.length);//undefined*/ for(var key in obj){ console.log(key,obj[key]); }//key是{}里的属性名称，obj[key] {}里面属性的值 </script> </body> </html>
定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script> /* function fn() { console.log(1); } // fn(); // setTimeout(fn,2000);//延迟定时器 2000毫秒后执行一次且只执行一次 setInterval(fn,2000);//隔2000毫秒一直不停地 在执行*/ setInterval(function () { console.log(2); },13); // setInterval(函数，时间) var x = str.split("value") arr.join() </script> </body> </html>
清除定时器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div{ width: 300px; height: 200px; line-height: 200px; text-align: center; border: 1px solid red; margin: 50px auto; font-size: 13px; } span{ color: red; font-size: 20px; font-weight: bold; } </style> </head> <body> <div id="box"> <p> 404,此页面找不到，页面将在<span id="timer">4s</span>后跳转到百度首页 </p> </div> <script> var timer = document.getElementById("timer"); var num = 4; var time; time = setInterval(function () { num --; timer.innerHTML = num + "s"; if(num === 1){ clearInterval(time); window.location.href = "http://www.baidu.com"; } // console.log(num); },1000) </script> </body> </html>
