JavaScript 基础语法速过 [适合速刷复习]

注意：不适合0基础小白 小白快速入门请移步另一篇文章
JavaScript快速入门

js变量类型和方法

js 定义变量

var

js 输出变量

alert();  窗口弹出
document.write(); 页面打印

js 变量类型

字符串 整型 浮点 布尔 数组 对象 json对象 NaN null undefined

js相关对象

1.js对象

   obj=new Object();

2.dom对象

  eleobj=document;

3.json对象

	jsobi={'username':'小林','age':20，'say':function(){alert(1);  // 对象的方法}};alert(jsobi.age);alert(jsobj.say()); // 别忘了加圆括号

变量类型相关

1.JavaScript 变量作用域

记住  函数里面带var的是局部变量 其余的(不带var)都是全局变量.

2.变量类型测试 typeof()

typeof()  变量类型判断函数  内置的函数
arr instanceof Array 判断当前的arr是否是Array生产出来的
arr = [1,2,3];
alert(arr instanceof Array); // true

顶级全局方法（系统内部函数）

parseInt();  // 强制转整形
parseFloat();  // 强制转浮点
eval();     //执行字符串中的表达式[进行运算]
Number(); // 转整型
String(); // 转字符串
Boolean();  // 转布尔类型eval()  实例
s='a=1*10*10';  // 一串字符串 
alert(s);
eval(s);  //执行字符串中的表达式[进行运算]
alert(a); // 会算出来a的运算值

JS变量类型转换相关

1.整型转化为字符串  String()
2.字符串转整型   parseInt()
3.所有类型转布尔类型布尔类型为假的情况   字符串（‘ ’） 整型（0）  浮点型（0,0） null  NaN  undefined
4.json字符串转json对象 [eval]
v="{'username':'user1','age':20}";  
obj = eval('('+v+')'); // 变成表达式执行单元 左右两边的括号
console.log(obj);

JS的基本语法

   判断if  else     switch     循环while   for   for in这里仅做复习 不过多解释 详细还请参考菜鸟教程

案例—乘法表

// 案例 3*3 乘法表 一定要理解过程
<script>for(i=1;i<=3;i++){document.write("
")for(j=1;j<=i;j++){// 初始化j=1document.write(''+ j+"x"+i+"="+(i*j)+' ');}document.write("
")}   // 理解思路 一定要理解 
</script>

消息框

警告框 [alert] 
确认框 [confirm] 
提示框  [prompt]

javascript的内置对象
数学 日期 定时器 超时器 字符串 数组

数学对象

Math.ceil()        向上取整  天花板函数
Math.round()    四舍五入
Math.floor()      向下取整   地板函数
Math.random（）随机返回 0 到 1 的值
Math.max()   Math.min()   最大最小值

刷新换图片案例
var img=['yu2.png','yu3.png','yu4.png','yu5.png'];
var tot = img.length;
var rt = Math.random();
var tt = Math.floor(tot*rt); // 取1到4的值
var imgobj = document.getElementById('aid');
imgobj.src="./img/"+img[tt];

日期
1.生成对象

bb=new Date();

2.获取日期的方法

bb.getFullYear();  年
bb.getMonth()+1  月
bb.getDate();  日
bb.getHours();  时
bb.getMinutes();  分
bb.getSeconds()  秒

定时器案例

注意两个函数
setInterval（function（）{ }，1000）定时器函数
clearInterval（）；清除定时器// 秒表案例function gettime() {var tt = new Date();hour = tt.getHours();minute = tt.getMinutes();second = tt.getSeconds();str = hour + ":" + minute + ":" + second;var gettim = document.getElementById('sid');sid.innerHTML = str;}gettime(); // 先把时间输上去setInterval(function () {gettime();}, 1000)
注意！！！！！   
s++ 先赋值后运算
++s 先运算后赋值

JS穿插面试知识点–到底谁在＋

前加  和  后加
s=3
s++ ; // s=s+1 先赋值后运算 ++s
t=s++;  先把3给t 然后s=s+1 
t=++s;  先运算后赋值 先运算 s=s+1 然后赋值给T

JS实现超时器案例

var tq = document.getElementById("sid");
var s=5;
setInterval(function () {tq.innerHTML = --s;if(s==0){location="https://www.baidu.com";}}, 1000);

JS字符串的相关操作

 toUpperCase()转换成大写toLowerCase();转换成小写indexOf(); 搜索指定字符串出现的位置substring();返回指定索引区间的子串split(); 以什么分割 返回为数组search(); 查找是否存在 返回首次出现的位置  返回-1为找不到 search(); 可用于正则=============match(); 多用于正则  把字符串中的所有home都找出来 返回数组var s='web.home.Index.php.Home';arr=s.match(/home/ig);console.log(arr);  // home Home   i:表示忽略大小写 g表示全部==============
replace(); 替换操作 不动原来的字符串var s='web.home.Index.php.Home';arr=s.replace(/home/ig,"hhh");console.log(arr); // 都会替换==============var s='heLLo, woRd';console.log(s.indexOf('w')); // 6`console.log(s.toLowerCase()); // hello,wordconsole.log(s.toUpperCase()); // HELLO,WORDconsole.log(s.substring(1,3));// 从索引1开始 不包括3 返回 eL || substr（）包括最后eLLconsole.log(s.substring(3));// 从索引3开始到结束 Lo, woRd// 截取文件var s='/web/home/index.php';pos= s.lastIndexOf('/');file= s.substr(pos+1);console.log(file);//截取目录var s='/web/home/index.php';pos= s.lastIndexOf('/');dir= s.substr(0,pos);console.log(dir);// 截取时间相关格式var s='2016-05|23';arr=s.split(/-|\|/);  // - |  \| 先加转义字符\ 2013,05,23console.log(arr); 

JS的数组相关
1.基本属性

1.1 访问Array数组的长度 直接访问length属性
注意：如果 修改length属性|赋值操作 都会对原来的数组直接进行修改

1.2 同时可以用 indexOf( )函数 来进行搜索指定元素

1.3 slice（）函数用法

slice() 对应字符串substring()版本 截取数组的部分元素 返回一个新的数组对象
slice（）如果不给任何参数 可以起到复制数组的作用
var arr=['a','b','c'];console.log(arr.slice(0,2));// 从下标0开始到2 不包括2  abconsole.log(arr.slice(1)); // 从下标1开始到最后 输出bcvar copyarr=arr.slice(); // 起到复制数组的作用console.log(copyarr); // abc 但是 copyarr === arr 结果是false

1.4 push和pup操作

push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉：var arr=['a','b','c','d'];arr.push('e'); console.log(arr);// abcdearr.pop();arr.pop();arr.pop();console.log(arr);// ab

1.5 unshift和shift方法

如果希望在数组头部添加元素 则使用unshift( )方法，而shift()方法则把数组对象的第一个元素删除
var arr=['a','b','c','d'];arr.unshift(5); console.log(arr);// 5abcdarr.shift();arr.shift();arr.shift();console.log(arr);// cd

1.6 其他常用操作

sort()数组的排序用法
sort( )可以对数组进行排序 按照默认进行排序 从个位数  一般需要自定义升降序 里面传参数
用法案例var arr = [100, 200, 300, 50, 60];// 定义升序函数function asc(a, b) {return a - b; // 必须有两个参数}// 定义降序函数function desc(a, b) {return b - a;}console.log(arr.sort(asc));console.log(arr.sort(desc));
=======================================reverse( ) 把整个数组元素进行反转：splice( ) 是修改数组的万能方法 从指定索引开始删除若干元素 然后再从该位置添加若干元素
var arr=['Java','css','JavaScript','b'];
arr.splice(1,2);// 从索引1开始删除2个元素 css JavaScript
arr.splice(2,0,'vue','mysql'); // 只添加 不删除
console.log(arr);  //注意 原数组会改变concat( ) 把当前的数组和另一个数组相连接，并返回一个新的数组
var arr=['Java','css','JavaScript','b'];
var arr2=['qq','wx'];
console.log(arr.concat(arr2)); // java css javascript b qq wxjoin( )  可以把当前数组的每个元素用指定字符串连接起来 然后返回 arr.join('-');match(); 多用于正则  把字符串中的所有home都找出来 返回数组var s='web.home.Index.php.Home';arr=s.match(/home/ig);console.log(arr);  // home Home   i:表示忽略大小写 g表示全部

函数的返回值 return
javascript运算符

1.数学运算符      + - * / %
2.比较运算符      >,<,==,!=, >= ,<=
3.逻辑运算符      && ,  || , ！

javascript的正则表达式

1.修饰词  i g m[常用]
2.方括号 [ ] 匹配 
>3.元字符
\w  表示任意一个字母数字下划线  [更多正则规则 自行看文档]

JavaScript 事件对象

鼠标事件

onclick [单击事件]
ondblclick [双击确定]
onmouseenter [鼠标移入]
onmouseleave [鼠标离开]
onmousemove  [鼠标移动]document.onmousemove=function(){document.title='小林子';}// 获取鼠标位置坐标document.onmousemove=function(event){x=event.clientX;y=event.clientY;document.title=x+"|"+y;}oimg=document.getElementById('img');document.onmousemove=function(event){x=event.clientX;y=event.clientY;oimg.style.left=x+"px";oimg.style.top=y+"px";}

键盘事件

  onkeydown 键盘按下onkeyup     键盘弹起 keyCode     获取键盘码控制角色移动案例oimg=document.getElementById('img');xv=0;xs=30;yv=0;ys=30;document.onkeydown=function(event){kc=event.keyCode;switch(kc){case 37:xv=xv-xs;oimg.style.left=xv+"px";break;case 38:yv=yv-ys;oimg.style.top=yv+"px";break;case 39:xv=xv+xs;oimg.style.left=xv+"px";break;case 40:yv=yv+ys;oimg.style.top=yv+"px";break;}}

JS表单 onkeyup键盘弹起事件 自动转大写

 yzm = document.getElementById("yzm");yzm.onkeyup = function () {val = (this.value).toUpperCase();this.value=val;}

JSBOM对象[浏览器对象]

// 可视区域的高
yxg=document.documentElement.clientHeight;// 屏幕的总高度
sumheight=document.documentElement.scrollHeight;// 滚动的高度 [里面内容的高度]
gdg=document.body.scrollTop;// 可视区域的宽度
document.documentElement.clientWidth;

JS弹力球案例

   objhj = document.getElementById("hj");ys = 0;yv = 10;xs=0;xv=10// 可视区域的高yxg = document.documentElement.clientHeight;imgheight = 100;diferHeight = yxg - imgheight;// 可视区域的宽yxk = document.documentElement.clientWidth;imgWidth = 100;diferWidth = yxk- imgWidth ;setInterval(function () {// y轴 上下ys = ys + yv;if (ys >= diferHeight) {ys = diferHeight;// console.log(diferHeight);console.log(yv);yv = -yv; // 进入到xs=xs-10}if (ys <= 0) {yv = -yv; // 负负得正}objhj.style.top = ys + "px";// x轴 左右xs=xs+xvif (xs >= diferWidth) {xs = diferWidth;// console.log(difer);console.log(xv);xv = -xv; // 进入到xs=xs-10}if (xs <= 0) {xv = -xv; // 负负得正  }objhj.style.left = xs + "px";}, 50);

JavaScript的表单事件

onfocus   获得表单的焦点事件onblur    失去焦点onchange  选择事件  用于下拉菜单城市选择[select]onselect  当被选中的时候onsubmit  当表单提交的时候onreset   当表单重置的时候

JavaScript的表单事件方法

select() 选中方法
blur()   失去焦点 配合onkeydown使用
focus()  获取焦点
click()  点击方法
submit() 提交方法
reset()  重置方法

JS如何阻止浏览器的默认行为

return false; 
javascript:

JavaScript 中的其他事件

onload       当所有窗口的元素加载完成之后 再执行onload的代码 图片缓加载 window.onload
onerror      当图片加载失败的时候
onresize     当浏览器的大小发生改变的时候
onscroll     获取滚动的高度 [scrollTop]

JavaScript 的BOM 对象

 navigator 浏览器特性userAgent属性 获取浏览器的内核信息 利用match()分辨是什么浏览器

screen 屏幕对象

  width 电脑的分辨率 宽height 高度   // 判断分辨率适合什么样的css

history 对象

 方法！back() 后退一个历史forward() 前进一个历史go(-1) 前进一个历史location 地址栏

属性

   hash  获取锚点host  域名的部分href  和location一样pathname  页面的名称protocal  协议search  // 参数  获取url中的参数部分方法 reload();  类似于刷新按钮

document 对象
方法

 alert();confirm();prompt();setInterval();clearInterval();setTimeout();clearTimeout();

javascript 的Dom对象

1.获取dom元素的基础对象

document.documentElement 
document.head
document.title
document.body

2.获取元素的对象方法

document.getElementByid();  通过id得到对象   唯一的
document.getElementByTagName(); 通过标签名得到对象   返回的类似数组的对象
document.getElementByClassName(); 通过类名得到对象  返回的是类似数组的对象
document.getElementByName();  通过name得到对象 nodelist 节点列表

3.元素对象的标准属性

obj.id;
obj.classname;
obj.style;
obj.title;

4.元素对象的非标准属性

obj.username   
obj.age
obj.sex
获取方式 [都可以获取]  一般封装成函数 常用这个获取属性  万能的
getAttribute('age') 获取属性值
setAttribute('age','50'); 设置属性值

hidobj = document.getElementById('hid');function getA(obj, attr) {return obj.getAttribute(attr);}getA(hidobj, 'info');function setA(obj, attr, value) {obj.setAttribute(attr, value);}setA(hidobj, 'info', '修复好了');

5.元素对象的JS属性

obj.tagName;     获取标签的名字
obj.innerHTML;   获取标签里面的全部内容[包括html标签]
obj.outerHtml;   获取标签的全部内容
obj.textContent; 获取标签里面的内容[过滤掉内容中的html标签]

6.直接获取dom元素集合

tableobj.rows;
tableRoWOBJ.cells;hid = document.getElementById('tid');function set(i, j) {hid.rows[i - 1].cells[j - 1].innerHTML = '222';}set(2, 2);  // 坐标修改值

selectOBJ.options 城市排名案例

selectedIndex 获取options索引的选项被选中 [从0开始]
options 获取里面对象的集合btn = document.getElementById("btn");sid = document.getElementById('sid');btn.onclick = function () {idx = sid.selectedIndex;opts = sid.options;alert("当前的城市排名:" + opts[idx].getAttribute('order'));}

7. dom完整实例

1.点击标题 切换内容
for (i = 0; i < hobj.length; i++) {hobj[i].setAttribute('num', 0);hobj[i].setAttribute('line', i);pobj[i].id = i;hobj[i].onclick = function () {num = parseInt(this.getAttribute('num'));line = this.getAttribute('line');nep = document.getElementById(line);if (num % 2 == 0) {nep.style.display = "none";} else {nep.style.display = "block";}this.setAttribute('num', num + 1);}}

JS的Ajax无刷新技术

可以更好的增加用户体验
使网页不会有回载 减少资源下载
采用异步技术
前端到后端的一个介质平台

属性

xhr.readyState
xhr.responseText

方法

 xhr.open();xhr.send();

Ajax手写链接方式

  			生成Ajax对象xhr = new XMLHttpRequest();// 用js  get请求del.php文件 同时给该文件传递一个ID值 方便	删除数据xhr.open('get', 'del.php?id=' + id, true);xhr.send(); // 开始异步链接并请求// js需要监听整个过程 监听事件xhr.onreadystatechange = function() {if (xhr.readyState == 4) {// 4为状态码 已经完成请求响应r = xhr.responseText;if (r == '1') {// 后台删除成功之后 返回值 进行判断tr = document.getElementById(id); // 唯一的 tr的那行tr.style.display = "none";}}}

正常PHP后台删除[不通过Ajax 每次会刷新页面]

index.php<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../jquery-1.10.1.min.js"></script>
</head><body><h1>用户管理</h1><?php$pdo = new PDO('mysql:host=localhost;dbname=yggl;charset=utf8;port=3306', 'root', 'root');$sql = "select * from test ";$smt = $pdo->query($sql);$rows = $smt->fetchAll(PDO::FETCH_ASSOC);?><table whidth="800px" border="1px solid black" cellspacing='0'><tr><th>id</th><th>用户名</th><th>密码</th><th>删除</th></tr>// 没用ajax技术<?phpforeach ($rows as $row) {echo "";echo "{$row['id']}";echo "{$row['username']}";echo "{$row['password']}";echo "删除";echo "";}?></table>
</body></html>========================分割线
del.php<?php
$id = $_GET['id'];// 删除数据库
$pdo = new PDO('mysql:host=localhost;dbname=yggl;charset=utf8;port=3306', 'root', 'root');
$sql = "delete from test  where id=$id";
if ($pdo->exec($sql)) {echo "";
} else {
}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../jquery-1.10.1.min.js"></script>
</head><body><h1>用户管理</h1><?php$pdo = new PDO('mysql:host=localhost;dbname=yggl;charset=utf8;port=3306', 'root', 'root');$sql = "select * from test ";$smt = $pdo->query($sql);$rows = $smt->fetchAll(PDO::FETCH_ASSOC);?><table whidth="800px" border="1px solid black" cellspacing='0'><tr><th>id</th><th>用户名</th><th>密码</th><th>删除</th></tr>// 没用ajax技术<?phpforeach ($rows as $row) {echo "";echo "{$row['id']}";echo "{$row['username']}";echo "{$row['password']}";echo "删除";echo "";}?></table>
</body>
<script>objs = document.getElementsByClassName('del');for (i = 0; i < objs.length; i++) {objs[i].onclick = function() {id = this.getAttribute('num');// 生成Ajax对象xhr = new XMLHttpRequest();// 用js  get请求del.php文件 同时给该文件传递一个ID值 方便删除数据xhr.open('get', 'del.php?id=' + id, true);xhr.send(); // 开始异步链接并请求// js需要监听整个过程 监听事件xhr.onreadystatechange = function() {if (xhr.readyState == 4) {// 4 为状态码 为完成请求的时候r = xhr.responseText;if (r == '1') {// 后台删除成功之后 约定好的返回值 进行判断tr = document.getElementById(id); // 唯一的 tr的那行tr.style.display = "none";// js控制那一行进行隐藏}}}}}
</script></html>=============分割线
del.php
<?php
$id = $_GET['id'];// 删除数据库
$pdo = new PDO('mysql:host=localhost;dbname=yggl;charset=utf8;port=3306', 'root', 'root');
$sql = "delete from test  where id=$id";
if ($pdo->exec($sql)) {echo 1;
} else {echo 0;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！