如有侵权,私信立删
修改时间:2021年1月24日
作者:pp_x
邮箱:pp_x12138@163.com
文章目录
JavaScript
js的特点
- 可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序
- 解释执行:事先不编译,逐行执行
- 基于对象:内置大量的线程现成对象
- 适合:
- 客户端数据计算
- 客户端表单合法验证
- 浏览器事件的触发
- 网页特殊显示效果制作
js的组成
- ECMAScript:定义核心语法,关键字,运算符,数据类型等系列标准
- DOM:文档对象模型,将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
- BOM:浏览器对象模型,是对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口大小
- 提供** Web 浏览器详细信息的定位对象**
- 提供用户屏幕分辨率详细信息的屏幕对象
- 对
cookie
的支持 - IE 扩展了 BOM,加入了
ActiveXObject
类,可以通过 JavaScript 实例ActiveX
对象,进而实现ajax局部刷新技术
js和html的结合
行内脚本
- 点击触发
- 弹框
<button onclick="alert('弹框测试')">点我一下</button>
内部脚本
<body><script> alert("弹框"); </script> </body>
外部脚本
- 在项目根目录下创建一个目录js
- 在js目录中创建一个文件,后缀名是.js
<script src="js/xx.js"></script>
优先级
- 优先级,谁在上,谁先执行。因为是解释性语言。
变量
- 为js是弱类型语言,所以,在定义变量的时候,所有的数据类型都是var
- 数值类型:
number
- 不区分整型和浮点型
- 所有数字采用64位浮点格式,类似于
double
- 字符串:
string
- 由单引号或者双引号括起
- 布尔类型
自动类型转换
数字 + 字符串:数字转换为字符串 10+’a’ -> 10a
数字 + 布尔值:true转换为1,false转换为0 true+5->6
字符串 + 布尔值:布尔值转换为字符串true或false true+’a’->truea
布尔值 + 布尔值:布尔值转换为数值1或0 true+true->2
数据类型转换函数
parseInt
:强制转换成整数- 如果不能转换,则返回NaN
parseFloat
:强制转换成浮点数- 如果不能转换,则返回NaN
typeof
:查询当前数值类型- 返回
string / number / boolean / object
- 返回
null和undefined
null
- 在程序中代表“无值”或者“无对象”
- 可以通过给一个变量赋值 null 来清除变量的内容
undefined
- 声明了变量但从未赋值或者对象属性不存在
var a = 10 + "a";
var b = true + 5;
var c = true + "a";
var d = true + true;
console.log(a +"|" + typeof(a) ); // 10a, string
console.log(b +"|" + typeof(b)); //6, number
console.log(c +"|" + typeof(c)); //truea , string
console.log(d +"|" + typeof(d)); //2 , number
var x = "6.32";
console.log( parseInt(x) +"|" + typeof(parseInt(x))); // number:6
console.log( parseFloat(x) +"|" + typeof(parseFloat(x))); // number:6.32
var y1 = "10";
var y2 = 10;
var b1 = y1 == y2; // 判断值
var b2 = y1 === y2; //严格判断
console.log( b1 ) ; // true
console.log( b2 ) ; // 虽然值相等,但类型不相等,所以false
数组
初始化数组的三种方式
var arr1 = new Array();
arr1[0] = 110;
arr1[1] = 119;
arr1[2] = 120;
var arr1 = new Array(10, "hello", true);
var arr1 = [10,"sun",false];
数组的常用方法
tostring()
:将数组转换成字符串join(连接符号)
:将数组中的每个元素用连接符号连接成一个新的字符串
var arr = [1,2,3,4];
var str = arr.join("-"); // 将数组中每个元素用-进行连接,并形成一个全新的字符串
console.log( str +",类型为:" + typeof( str ) );
concat(新元素)
:将原来的数组连接新元素,原数组不变。
var arr = [1,2,3,4];
var arrnew = arr.concat(5,6); // 在arr数组的后面添加新的元素,形成一个新数组,但是原数组是不变的
console.log( arrnew +",类型为:" + typeof( arrnew ) );
console.log("原数组:" + arr);
slice(开始,结束)
:在数组中提取一部分,形成新的数组。
var arr = ['a','b','c','d','e','f','g','h'];
var arrnew = arr.slice( 2,4 ); // 在arr数组中截取,从2开始(包含),4结束(不包含)
console.log( arrnew ); // cd
- `reverse():数组的反转(倒序)
var arr = [31,12,111,444];
console.log( arr.toString() );
arr.reverse(); // 将数组中的元素倒置
console.log( arr.toString() );
sort()
:数组排序
var arr = [31,12,111,444];
arr.sort(); // 字符排序(不会按照字面量的大小)
console.log( arr );
Math数学对象
- Math对象用于执行数学任务
- 没有构造函数Math()
- 对象的方法:
Number对象
Number.fixed(2)
; 自带四舍五入技能
var n = 12.345;
var n1 = n.toFixed(2); // 12.35,固定两位小数,第三位小数四舍五入
console.log( n1 );
var x = new Number(12.3);
var n2 = x.toFixed(2); // 12.30,固定两位小数,位数不够,0来补齐
console.log( n2 );
日期对象
var time = new Date();
console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间)
var year = time.getFullYear(); // 年份
var month = time.getMonth() + 1; //月份从0开,11结束,所以国内习惯要+1
var day = time.getDate(); // 几号
var hour = time.getHours(); // 几点
var mm = time.getMinutes(); // 分钟
var s = time.getSeconds(); //秒
var ms = time.getMilliseconds(); // 毫秒, 1000毫秒 = 1秒
var timestr = year+"年"+month+"月"+day+"号 "+hour+"点"+mm+"分"+s+"秒"+ms+"毫秒";
console.log( timestr );
函数
- 使用
function
定义函数
function 函数名( 形参列表 )
{
// 函数体
return 返回值;
}
- 函数声明后需要调用才能执行
- 注意:
- 形参不要带数据类型
- 分号是用来分隔可执行JavaScript语句。 由于函数声明不是一个可执行语句,所以不以分号
结束。
无返回值
function qiuhe(a, b) {
var he = a + b;
console.log(he);
}
有返回值
function qiuhe(a, b) {
return a + b;
}
var he = qiuhe(1, 3);
console.log( he );
参数对象
function test(a, b, c) {
console.log("传入" + arguments.length + "个参数");
console.log("第2个参数是:" + arguments[1]);
}
test(1, 2, 3);
构造函数
var fn = new Function("a","b","return a * b");
var ji = fn(3,4);
console.log(ji);
注意:以分号结尾
匿名函数
var fn = function(a, b) {
// 没有名字的函数,应该用一个变量来接收
return a * 10 + b;
};
console.log(fn(3, 4));
全局函数
isNaN
:检查其参数是否是非数字值eval
:用来转换字符串中的运算encodeURI
与 decodeURI
console.log( isNaN( 123 ) ); // 数字,false
console.log( isNaN( "hello" ) ); // 非数字,true
console.log( isNaN( 4-1 ) ); // 数字,false
console.log( isNaN( 123 ) ); // 数字,false
console.log( isNaN( -10 ) ); // 数字,false
console.log( isNaN( "123" ) ); // 数字,false
console.log( isNaN( "1a23" ) ); // 非数字,true
var str = "1+3";
console.log( str ); // 1+3 , +会认定为一种字符符号而已,没有加法的作用
console.log( eval( str ) ); // 让字符串中的运算符号生效
var name = "拉勾网";
console.log( "转码前:" + name );
name = encodeURI(name);
console.log( "转码后:" + name );
name = decodeURI(name);
console.log( "解码后:" + name );
闭包
- 闭包的概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数
- 闭包的作用::访问函数内部变量、保持函数在环境中一直存在,不会被垃圾回收机制处理
function test1(){
var count = 0; //局部变量
function jia(){
return count+=1;
}
return jia;
}
var fn = test1(); // 0
fn();
fn();
console.log( fn() ); // 相当于调用三次
弹框输出
alert()
:普通弹框console.log()
:控制台日志输出document.write()
:网页中输出confirm()
:弹出确定框prompt()
:弹出输入框
<script>
// for(var i = 1;i<=5;i++){
// document.write( "<h1>hello,拉勾</h1>" );
// }
var b = confirm("确定删除吗?");
if(b){
document.write( "<h1>删除成功!</h1>" );
}else{
document.write( "<h1>你取消了操作</h1>" );
}
var name = prompt("请输入你的名字:");
document.write( "<h1>大名:"+name+"!</h1>" );
</script>
DOM操作
- 在一个html页面中,会使用很多标签来规划制作页面。
- 每个标签都有它存在的意义,如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找
到这个标签元素 - 如何查找到这个元素是个难题,W3C组织的工程师们,突然看到了一棵大树。我要是想找到某一
片叶子,应该怎么做? - “顺藤摸瓜”,主树干有分支,每个分支还有许多小分支,只要把这个分支的结构整理清楚,任何一
片叶子都不是难事了 - 叶子和大树的一些启发,工程师们开会讨论就定了这个理论“文档对象模型”,
- 文档对象模型,就是将页面中所有的标签元素都看成是一个对象(一片叶子),主树干定义为根节点(根元素),所有的标签都是从根元素延伸出去的,摸清结构,找到某个标签就不再困难了
- 在节点树中,顶端节点就是根节点(root)
- 每个节点都有父节点(除了根节点)
- 任何一个节点都可以拥有任意数量的子节点
- 同胞是拥有相同父节点的节点
DOM访问
getElementById
:通过id属性获取元素节点对象- 实现登录
<form action="xxx" onsubmit="return login()">
<p>帐号:<input id="username"/></p>
<p>电话:<input id="phone"/></p>
<p><button>登录</button></p>
</form>
<script>
function login() {
var name = document.getElementById("username").value ;
if(name == ""){
alert("帐号不能为空!");
return false; // 阻止表单的提交
}
return true; // 放行,让表单提交
}
</script>
getElementByName
:通过name属性来获取元素节点对象- 实现购物车全选
<h2>我的购物车</h2>
<table border="1" cellspacing="0">
<tr>
<td><input type="checkbox" onchange="quan(this)" /> 全选</td>
<td>名称</td>
<td>单价</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />1</td>
<td>功能性饮料-尖叫</td>
<td>4.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />2</td>
<td>火腿肠</td>
<td>2.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />3</td>
<td>包子</td>
<td>1.5</td>
</tr>
</table>
<p>
<button>提交订单</button>
</p>
<script>
function quan(all) {
var arr = document.getElementsByName("one");
for (var i = 0; i < arr.length; i++) {
arr[i].checked = all.checked; // 将全选框的状态,赋值给每一个复选框
}
}
</script>
getElementsByTagName
:通过标签名来获取元素节点对象- 实现表格隔行变色
<body>
<table border="1" cellspacing="0">
<tr>
<td><input type="checkbox" onchange="quan(this)" /> 全选</td>
<td>名称</td>
<td>单价</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />1</td>
<td>功能性饮料-尖叫</td>
<td>4.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />2</td>
<td>火腿肠</td>
<td>2.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />3</td>
<td>包子</td>
<td>1.5</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />4</td>
<td>包子</td>
<td>1.5</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />5</td>
<td>包子</td>
<td>1.5</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />6</td>
<td>包子</td>
<td>1.5</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />7</td>
<td>包子</td>
<td>1.5</td>
</tr>
</table>
<script>
var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象集合
for (var i = 0; i < rows.length; i++) {
if(i % 2 == 1){ // 奇数
rows[i].style.backgroundColor = "pink";
}
}
</script>
DOM修改
- 修改
HTML DOM
意味着许多不同的方面:- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件(处理程序)
- 改变元素内容
document.getElementById("hello").innerHTML = "走哇,喝点去~!";
- 改变元素样式
document.getElementById("hello").style.color = "red";
document.getElementById("hello").style.fontFamily = "华文彩云";
添加节点
function add(){
var img = document.createElement("img"); // <img>
img.setAttribute("src","../lagou-html/img/cat.gif"); // <img src="../lagou-html/img/cat.gif">
img.setAttribute("title","小猫咪"); // <img src="../lagou-html/img/cat.gif" title="小猫咪">
img.setAttribute("id","cat"); // <img src="../lagou-html/img/cat.gif" title="小猫咪" id="cat">
var divs = document.getElementsByTagName("div");
divs[0].appendChild(img);
}
删除节点
function del(){
var img = document.getElementById("cat");
img.parentNode.removeChild(img); // 必须通过父节点,才能删除子节点
}
替换节点
function rep(){
var imgold = document.getElementById("cat");
// 通过修改元素的属性,做的替换
// img.setAttribute("src","../lagou-html/img/2.jpg");
var imgnew = document.createElement("img");
imgnew.setAttribute("src","../lagou-html/img/1.jpg");
imgold.parentNode.replaceChild( imgnew, imgold );
}
事件
窗口事件
onload
:当文档被载入时执行脚本
<body onload="test()">
<script>
function test() {
//document.write("哈哈哈哈");
}
表单元素事件
- 仅在表单元素中有效
onblur
:当元素失去焦点执行脚本onfocus
:当元素获得焦点执行脚本
function a() {
console.log("获得焦点==被激活");
}
function b() {
console.log("bbb");
}
</script>
<form action="">
<p>帐号:<input onfocus="a()" onblur="b()" /></p>
<p>密码:<input /></p>
</form>
鼠标事件
onclick
当鼠标被单击时执行脚本ondblclick
当鼠标被双击时执行脚本onmouseout
当鼠标指针移出某元素时执行脚本onmouseover
当鼠标指针悬停于某元素之上时执行脚本
<style>
img{
width: 30%;
border: 5px solid white;
}
</style>
<body>
<img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" onclick="dan()">
<img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" ondblclick="shuang()">
<img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" >
<script>
function dan(){
alert("点了一下");
}
function shuang(){
alert("连续快读点两下");
}
function shang(img){
img.style.border = "5px solid red";
}
function xia(img){
img.style.border = "5px solid white";
}
</script>
键盘事件
onkeydown
按下去onkeyup
弹上来
<script>
window.onkeydown = function(){
// event:事件源(按键)
// console.log( "按键编码:"+event.keyCode );
if(event.keyCode == "13"){
alert("登录成功!");
}
}
window.onkeyup = function(){
console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时,按键回弹则触发
}
</script>
事件冒泡
- 即点击子元素后,子元素执行完事件,父元素随之执行
e.stopPropagation()
:子元素取消冒泡机制,e位子元素执行函数的参数
<style>
#father {
width: 200px;
height: 200px;
background: black;
padding: 10px;
}
#child {
width: 100px;
height: 100px;
background: greenyellow;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
<script>
document.getElementById("father").addEventListener("click", function() {
alert("父级元素的事件被触发:" + this.id);
});
document.getElementById("child").addEventListener("click", function(e) {
e.stopPropagation() //取消事件的冒泡机制
alert("子级元素的事件被触发:" + this.id);
});
</script>
</body>
事件捕获
- 即点击父元素后,父元素执行完事件,子元素随之执行
- 激活事件捕获:父元素监听事件后添加一个ture
<style>
#father {
width: 200px;
height: 200px;
background: black;
padding: 10px;
}
#child {
width: 100px;
height: 100px;
background: greenyellow;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
<script>
document.getElementById("father").addEventListener("click",function(){
alert("父级:" + this.id);
},true);
document.getElementById("child").addEventListener("click",function(){
alert("子级:" + this.id);
});
</script>
</body>
面向对象OOP
- 使用Object创建通用对象
var user = new Object();
user.name = "吕布";
user.age = 21;
user.say = function(){
console.log("大家好,我叫:"+this.name+",我今年"+this.age+"岁了!");
}
user.say();
var dog = new Object();
dog.nickname = "屎尿多";
dog.wang = function(){
}
dog.wang();
- 使用构造函数
function userinfo(name , age){
this.name = name;
this.age = age;
this.say = function(){
console.log("大家好,我叫:"+this.name+",我今年"+this.age+"岁了!");
}
}
var user = new userinfo("詹姆斯",35);
user.say();
- 使用直接量
var user = {
username : "孙悟空",
age : 527,
say : function(){
console.log("大家好,我叫:"+this.username+",我今年"+this.age+"岁了!");
}
};
user.say();
JSON
JSON(JavaScript Object Notation)
是一种轻量级的数据交换格式。
<script>
var json1 = { username: "吕布", age: 31 };
console.log("姓名:" + json1.username + ",年龄:" + json1.age + "岁");
// json数组
var josnarr = [{ name: "貂蝉", age: 18 }, { name: "小乔", age: 17 }];
console.log("貂蝉" + josnarr[0].age + "岁了");
console.log("小乔" + josnarr[1].age + "岁了");
// 复杂的json对象
var long = {
name: "赵云",
sex: "男",
hobby: ["玉兰白龙驹", "龙胆亮银枪", "青釭剑"]
};
console.log(long.name + "的主攻武器:" + long.hobby[1]);
</script>
BOM操作
Windows对象
- windows.open(“网址”,“网站名”,“窗口特征”)
screen屏幕对象
<button onclick="test()">获取</button>
<script>
function test(){
console.log("宽:"+ screen.width +"px,高:"+screen.height+"px");
}
</script>
location定位
<button onclick="test()">测试</button>
<script>
function test(){
console.log( "当前页面的URL路径地址:"+ location.href );
location.reload(); // 重新加载当前页面(刷新)
location.href = "http://lagou.com"; // 跳转页面
}
</script>
history浏览器历史
history.go(-1)
:返回上一个页面history.back
:返回上一个页面
<button onclick="hui()">返回</button>
<script>
function hui(){
history.go(-1); //上一级页面
// history.back();
}
</script>
navigator导航对象
<script>
var str = "";
str += "<p>浏览器的代号:"+ navigator.appCodeName +"</p>";
str += "<p>浏览器的名称:"+ navigator.appName+"</p>";
str += "<p>浏览器的版本:"+ navigator.appVersion+"</p>";
str += "<p>硬件平台:"+ navigator.platform+"</p>";
str += "<p>用户代理:"+ navigator.userAgent +"</p>";
str += "<p>启用Cookies:"+navigator.cookieEnabled+"</p>";
document.write(str);
</script>
存储对象
- 和map很相似,都是以键值对的方式存储数据
本地存储
- 关闭窗口或标签页之后将会删除这些数据
- 三种方式保存数据
// 三种方式保存数据
localStorage["a"] = 1;
localStorage.b = 2;
localStorage.setItem("c",3);
- 三种方式读取数据
// 第一种方式读取
var a = localStorage.a;
console.log(a);
// 第二种方式读取
var b = localStorage["b"];
console.log(b);
// 第三种方式读取
var c = localStorage.getItem("c");
console.log(c);
- 删除数据
localStorage.removeItem("name");
会话存储
- 开启浏览器则开启一次会话,关闭浏览器则关闭会话
- 保存数据
sessionStorage.setItem("name", "klay");
- 提取数据
var lastname = sessionStorage.getItem("name");
- 删除指定键的数据
sessionStorage.removeItem("name");
- 删除会话全部数据
sessionStorage.clear();
计时操作
周期性定时器
setInterval(1,2)
:周期性触发代码 (常用)- 1:执行语句
- 2:时间周期,单位为毫秒
- 停止计时器:将计时器对象赋给一个变量
timer
,使用clearInterval(timer)
一次性定时器
setTimeout(1,2);
- 1:执行语句
- 2:延时时间