javaScript:
1、嵌入HTML中在浏览器中的脚本语言，用于人机交互。网景公司推出，ECMA组织维护JavaScript标准。
2、特点：任何文本编辑工具编写由浏览器内置JavaScript引擎执行，不需要编译从上至下逐行执行，区分大小写
3、用途：客户端数据计算、客户端表单合法性验证、浏览器事件的触发、网页特殊效果显示、服务器异步数据提交等等
4、如何使用：
事件：就是js触发的时机
单击事件：onclick
双击事件：ondblclick
失去焦点事件 onblur
1》在事件定义时直接写js代码
<input type="button" value="确定" onclick="alert('hello world!');"/>
2》嵌入式，在<script></script>标签中写js代码，直接放到HTML页面中
<script type="text/javascript">
js代码
function f(){
方法体
}
</script>
</head>
<input type="button" value="确定" onclick="f();"/>
3》文件调用式：在head中声明调用，在HTML文件外部写.js文件。.js文件不需要script标签直接写js代码
<script src=".js文件路径" type="text/javascript"></script>
5、调试js代码：浏览器控制台错误信息、打桩、二分法+排除法
6、基础语法：
1》由Unicode字符集编写的，
注释：// /* */
区分大小写，
使用分号或换行结束，一行有多条语句不能省略分号
2》标示符和变量：
标示符：由数字、字母、下划线、$组成，开头不能是数字，不能是关键字保留字
变量：使用var声明，js变量无数据类型.赋给变量的数据有类型，没有什么类型就是underfined
3》数据类型（变量引用的数据的类型）：
特殊类型：null(空)、underfined(未定义)
内置对象：Number 数字、String 字符串、Boolean 布尔型、Function 函数、Array 数组；
外部对象：window浏览器的对象（一套）、document文档对象（一套）
自定义对象：Object 自定义对象
1》String：js不区分单双引号，特殊字符需要转义（\n、\\）
2》Number:js中不区分整数与小数，5/2=2.5，都采用64位浮点存储
3》Boolean：true/false,参与运算时true=1，false=0；
数据类型转换：
隐式转换：变量无类型数据有类型，数据计算会默认转换
字符串>数字 true+true=2 "hello"+true="hellotrue"
数据类型转换函数：
12.toString();转换成字符串
parseInt(6.85/"6.85");6,将参数转换成整数并取整,不能转换返回NaN表示不是数字类型
parseFloat("6.15"/6.15);6.15,将参数转换成小数，不能转换返回NaN
typeOf("12");String 参看参数数据类型，返回参数的数据类型
isNaN(a);a是数字返回false，不是数字返回true
4》运算符：
+ - * / % ++ -- 5/2=2.5
> >= < <= == !=
=== 全等 类型数值群相等 ==值相等类型无所谓 "5"==5;//true
!== 不全等 不是类型和值都相等 "5"!==5;//true
&& || !
表达式？表达式1:表达式2;
5》流程控制：
顺序：
分支：if() if(){}else if(){}...else{};if(){}else{}
swicth(){
case 值1:
语句1;
break;
case 值2:语句2;break;
....
}
循环；for(var ; ;){}
while(){}
do{}while();
***JavaScript的条件表达式：条件表达式返回的一定是Boolean类型
js中认为一切非空的都可认为是true，空的是false
if(12){
12非空为true进来执行
}
0 null "" underfined NaN false ------false
true 非空值 ----true
7、JavaScript对象：
JavaScript中可认为一切是对象，内置对象、外部对象、自定义对象，对象有属性和方法
对象的属性：对象.属性 对象的方法：对象.方法()
1》内置对象：
String对象：
1、创建对象： var str = "hello";
var str = new String("hello");
2、属性：str。length str的长度
3、方法：
x.toLowerCase();x.UpperCase();大小写转换
x.charAt(index);获取指定下标的字符
x.charCodeAt(index);获取指定下标的字符Unicode编码
x.indexOf(str,n);返回str在x中出现位置的下标，从第n个位置开始找,没有返回-1
x.lastIndexOf(str,n);
x.subString(start,end);从start开始到end结束截取x字符串,含头不含未
x.replace(str1,str2);将x中的str1替换为str2
x.split(str,n);将x用str分割返回分割后的数组，数组大小n,可以没有
Number对象：
1、创建对象：var num = 12;
5/2=2.5
2、常用方法:
i.toFixed(n);将i转换为字符串，并保留n位小数，没有补0
Array对象：
1、创建对象：var arr = new Array();-----arr[i].push("hello");
var arr = [1,"abc",true];
var arr = new Array(7);
var arr = new Array(1,"abc",true);
var arr = [[],[],[]];
2、arr.length;获取数组的长度
arr[i]
3、方法：
arr.reverse();将数组倒转
x.sort();将数组排序，默认按Unicode编码排
x.sort(function(){自定义排序规则})，自定义排序
Math对象：
1、创建对象：直接使用Math.PI Math.E
2、方法：参考java、floor、round、ceil、abs...
Date对象：
1、创建对象：var date =new Date();//系统时间
var date= new Date("yyyy/MM/DD hh:mm:ss");
2、方法：
读写时间毫秒数：getTime(),setTime(毫秒);
读写时间分量：getDate(),getDay(),getFullYear()
set
转换为字符串：toString(),toLocaleDateString(),toLocaleTimeString()
RegEmp对象：正则表达式
1、创建对象：var reg = /表达式/i or g;i忽略大小写，g全局匹配
var reg = new RegEmp(/表达式/i or g);
2、方法：
reg.test(str);str中含有reg返回true，否则false---****
reg.exec(str);非全局模式下，找出首次匹配的部分
全局模式下，第n次调用则找出第n次匹配的部分,动态的
String与RegEmp
//2.1、str.replace(替换前子字符串,替换后子字符串);替换子字符串,返回替换后的字符串
console.log(str.replace(reg,"bu"));
//2.2、str.match(reg);从str中找出和reg匹配的子串
console.log(str.match(reg));
//2.3、str.search(reg);从str中找出和reg首次匹配的索引
Function对象：函数对象
js函数：
1、都是公有的
2、可以有返回值但不用声明返回值类型
3、括号里可以写参数，但不用声明类型
1、默认返回值underfined，通过改变return返回值
2、js没有重载， arguments对象：函数的默认参数对象，是一个数组对象，任何函数都是从arguments中获取值
可以传参数儿不写形参，默认在arguments中,为方便可以声明参数接收该值
this关键字表示当前对象（正在点击的按钮对象input...），参数不能用关键字命名
参数1 = arguments[0]
参数2 = arguments[1]
.....
没有未定义就不
位于函数内的js，页面加载时不会直接调用，，浏览器仅仅定义了这个函数而已，待用户通过点击按钮等行为触发
事件时才调用函数。位于函数外的js，页面加载时直接调用他们，，即这些js的执行时机是早于body中的元素的
3、创建函数：直接创建：定义事件时创建
var functionname = new Function(a1,a2,...an,"函数体");
匿名函数：function(){}
全局函数：可用于所有的JavaScript对象
parseInt()/parsefloat(),isNaN(),
eval("1+21");计算表达式字符串
var result = eval("2+6");
//计算成功将结果写入文本框
input.value = result;
外部对象：BOM(DOM+其他)
window对象：
浏览器窗口，常用方法是可以省略window
对话框：
弹出框：alert("");
确认框 var a = confirm("你吃了吗？");//确定返回true 取消或点叉返回false
输入框 var b = prompt("你吃的什么？");返回输入的内容
onsubmit();表单提交事件，点击表单内的submit按钮触发，在改时间内返回true提交成功，返回false则不提交
*定时器：广告轮播，网页动态时钟，倒计时，
周期定时器：每隔一段时间执行一次，
var id = setInterval(function(){},time);启动定时器，返回的是唯一id
clearInterval(id);停止定时器
一次定时器：隔一段时间执行一次后不再执行
var id = setTimeout(function(){},time)
clearTimeout(id);
1》location对象：
location.href="http://www.tmooc.cn";修改当前地址,获取当前浏览页面地址
location.reload();刷新页面
2》history对象：
history.back();后退一步
history.forward();前进一步
history.go(数字);+前进多少步，-后退多少步
history.length;浏览历史条数
3》screen对象：获取屏幕信息（色彩和分辨率）
screen.width/height 屏幕宽高
screen.availWidth/availHeight 用户可用宽高
4》navigater对象：
navigator.userAgent;获取浏览器信息
5》document对象（DOM）：
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
nodeName nodeType
文档节点：document、 #document 9
元素节点：标签、属性节点：属性、 标签名/属性名 1、2
注释节点：注释、文本节点：内容、 /#text 8、3
DOM操作
1、读写节点
document.getElementById()、
nodeName/nodeType、名称、内容
innerHTML innerText 读写内容 含标签 不含标签
表单form取值用value，文本元素取值用innerHTML
赋值 .value= "" .innerHTML = "";
select下拉选取值 select.value 或得到option去取值
读写属性
getAttribute("src");获取属性
img.setAttribute("src", "../images/02.jpg");修改属性
img.removeAttribute("src");删除属性
以上任何浏览器通用,
低版本浏览器不支持，节点.属性名（class例外，要写成className ）、id、事件、class是标准的
var a = document.getElementById("a1");
console.log(a.href);//获取
a.href="#";//修改，没有删除操作
标签.style.color="red";
标签.style.fontSize="20";
标签.className="样式名称"
onmouseover:鼠标悬停事件
onmouseout:鼠标离开事件
2、查询节点
通过id查询：
通过层次查询
通过标签名查询
通过name属性查询
根据class查询（不标准）
<script type="text/javascript">
//1、根据id查询
var ul = document.getElementById("city");
console.log(ul.nodeName);
//2、根据标签名查询,得到的是数组
//2.1、在整个页面上上，根据标签名查询节点
var lis = document.getElementsByTagName("li");
console.log(lis);
//2.2、在某节点下根据标签名查询其子节点
lis = ul.getElementsByTagName("li");
console.log(lis);
//3、根据name查询
var input = document.getElementsByName("sea");
console.log(input);
//4、根据class查询（不标准）
lis = document.getElementsByClassName("south");
console.log(lis);
//5、根据层次关系查询，结果数组
//5.1、查询父亲（标准）
console.log(ul.parentNode);//得到ul的父节点
//5.2、查询孩子（标准）
console.log(ul.childNodes);//得到ul的所有子节点，包含空格
lis = ul.getElementsByTagName("li");//不包含空格
console.log(lis);
//5.3、查询孩子（非标准）
console.log(ul.children);
//5.4、查询兄弟（标准）、先查父节点，再找出父节点的子节点
var gz = document.getElementById("gz");
var sh = gz.parentNode.getElementsByTagName("li")[1];
console.log(sh);
//5.5、查询兄弟（非标准）
console.log(gz.previousElementSibling);//gz的上一个哥哥
console.log(gz.nextElementSibling);//gz的后一个弟弟
</script>
3、增删节点
//增加节点
//1、创建节点 <li>
var li1 = document.createElement("li");
li1.innerHTML = "佳木斯";
var li2 = document.createElement("li");
li2.innerHTML = "廊坊";
//2、添加节点
//2.1、追加（追加到所有子节点之后）
var ul = document.getElementById("city");
ul.appendChild(li1);
//2.2、插入（插入到某子节点之前）
var gz = document.getElementById("gz");
ul.insertBefore(li2, gz);//插入ul下的gz节点之前
//删除节点
//1、父亲删除孩子
var ul = document.getElementById("city");
var sz = document.getElementById("sz");
ul.removeChild(sz);
//2、自己删除自己
//sz.parentNode.removeChild(sz);
var tj = document.getElementById("tj");
tj.remove();
自定义对象:
是一种特殊的数据，由属性和方法封装而成。对象名.属性 对象名.方法()
无论采用那种方式创建出的对象都是一样的，都是object
1、创建对象：
1》直接量（JSON）:直观，简单
例：var obj = {属性名：属性值,属性名:属性值,...}
属性名：字符串，属性值：一切皆对象，可以是任何类型
自己的方法封装数据时，自己知道数据时。
创建的是object对象
//1、采用直接量的方式创建对象
function f1(){
var stu = {"name":"zs","age":25,"work":function(){alert("我学java");}};
alert(stu.name);
alert(stu.age);
stu.work();
}
2》构造器：
1》js内置构造器:简单灵活，创建的也是object对象
Date()/RegEmp()/String()/Object()
需要new的function才是构造器
自己的方法封装数据，数据未知，以后知道
//2.1、采用内置构造器
function f2(){
var tch = new Object();
tch.name = "苍老师";
tch.age = 20;
tch.work = function(){
alert("我教java");
}
alert(tch.name);
alert(tch.age);
tch.work();
}
2》自定义构造器; 麻烦，直观，适合 封装的对象返回给他人使用
自己声明一个函数，将函数作为构造器使用
//2.2、采用自定义构造器创建对象
function f3(){
var c = new Coder("lisi",26,function(){alert("我写java");});
alert(c.name);
alert(c.age);
c.work();
}
function Coder(name,age,work){//自定义构造器
//this = 创建出来的对象
//t
his.name 是给该对象声明一个属性
this.name = name ;
this.age = age ;
this.work = work;
}
3》create方法：最新版本提出的方法，很对浏览器没有支持
事件：
1、页面元素发生改变，用户操作鼠标或键盘触发的动作就是事件，通过事件属性可以在某个事件发生时进行相关操作
鼠标事件:
onclick（单击）、ondblclick（双击）、
onmousedown（鼠标按下）、onmouseup（鼠标弹起）、
onmouseover（鼠标悬停）、onmouseout（鼠标离开）
键盘事件：
onkeydown(键盘按下)，onkeyup (键盘弹起)
状态改变事件：
onload(页面加载事件) onchange(值改变事件)
onfocus(元素获得焦点) onblur(元素失去焦点)
onsubmit (按钮提交事件)
2、事件定义：
1》直接定义事件
<input type="button" value="AAA" onclick="alert('AAA')"/>
2》后绑定事件，在页面加载后绑定
<script type="text/javascript">
var b = document.getElementById("b");
b.onclick = function(){
alert("BBB");
}
</script>
3》后绑定事件（在onload中绑定）
onload是页面加载事件，在页面加载完成后自动触发,window.onload整个页面加载完成调用
<script type="text/javascript">
window.onload = function(){
//在这里写的代码，相当于在body后写的一样，都是页面加载完成后调用
var c = document.getElementById("c");
c.onclick = function(){
alert("CCC");
}
}
</script>
取消事件：
onclick = "return false;";
事件对象event;
任何事件触发后会产生一个事件对象event，用于记录事件触发时的鼠标、键盘和触发对象等信息
1、如何获取事件event对象：
1》 直接定义事件，获取事件对像必须传event
<input type="button" value="DDD" onclick="d(event);"/>
function d(e){
console.log(e);
console.log(arguments[0]);
alert(e.clientX+","+e.clientY);//通过event属性获取点击位置
}
2》//后绑定事件时，浏览器会将事件对象envet自动传进来存到arguments第0个位置可以直接使用，
一般声明参数接收
<input type="button" value="EEE" id="e"/>
var ee = document.getElementById("e");
ee.onclick = function(e){
console.log(arguments[0]);
console.log(e);
}
2、事件源：触发事件的元素，
var obj = e.srcElement||e.targer;IE浏览器和firefox浏览器
事件源也是元素对象
考虑浏览器兼容性实际使用
function p(e){
var obj = e.srcElement||e.targer;
console.log(obj);
}
js事件处理机制：
也叫冒泡机制：是指js的事件是由内向外传播的即触发的，传的body停止
可以简化事件的定义，不需要在子元素上定义n次，只需在父元素上定义一次事件
在采用冒泡机制简化事件时，必须知道事件源。事件源：事件发生的源头(具体位置)，事件源可以通过事件对象event获取
function p(e){
var obj = e.srcElement||e.targer;//获得事件源
console.log(obj);
}
//取消事件传播,两种浏览器两种方法，方法也可以认为是对象的属性，判断的话：对象名.方法名 调用：对象名.方法名（）
//e.stopPropagation();
//e.cancelBubbule = true;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubbule = true;
}
javascript速查
猜你喜欢
转载自blog.csdn.net/qq_28635317/article/details/106161510
今日推荐
周排行