注意：不适合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("<h3>")
for(j=1;j<=i;j++){
// 初始化j=1
document.write('<span>'+ j+"x"+i+"="+(i*j)+'</span> ');
}
document.write("</h3>")
}
// 理解思路 一定要理解
</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,word
console.log(s.toUpperCase()); // HELLO,WORD
console.log(s.substring(1,3));// 从索引1开始 不包括3 返回 eL || substr（）包括最后eLL
console.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,23
console.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 ab
console.log(arr.slice(1)); // 从下标1开始到最后 输出bc
var 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);// abcde
arr.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);// 5abcd
arr.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 wx
join( ) 可以把当前数组的每个元素用指定字符串连接起来 然后返回 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+xv
if (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技术
<?php
foreach ($rows as $row) {
echo "<tr>";
echo "<td>{$row['id']}</td>";
echo "<td>{$row['username']}</td>";
echo "<td>{$row['password']}</td>";
echo "<td><a href='del.php?id={$row['id']}'>删除<a/></td>";
echo "</tr>";
}
?>
</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 "<script>location='index.php'</script>";
} else {
}
PHP后台删除[通过Ajax 进行异步传输 用js来隐藏删除]
<!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技术
<?php
foreach ($rows as $row) {
echo "<tr id='{$row['id']}'>";
echo "<td>{$row['id']}</td>";
echo "<td>{$row['username']}</td>";
echo "<td>{$row['password']}</td>";
echo "<td><a href='javascript:' class='del' num='{$row['id']}'>删除<a/></td>";
echo "</tr>";
}
?>
</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;
}
- 来自一个向IT行业发展的小白一枚，
- 码字不易 如果对你有帮助还请点个赞
- 资源均来自于网络如有侵权还请联系删除
4488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
