文章目录
JavaScrip
1 概述
1.概述
弱类型语言
JavaScript是客户端脚本语言，是一种基于对象(object)和事件驱动(Event Driven)的脚本语言。JavaScript认为文档和显示文档的浏览器都是由不同的对象组成的集合。这些对象具有一定的属性，你可以对这些属性进行修改或计算。
它由三部分组成:
ECMAScript (核心语言规范)
DOM(文档对象模型, Document Object Model )
BOM (浏览器对象模型, Browser Object Model )
组成：对象（任意标签）+ 事件
2.JavaScript与Java的区别：
JavaScript和Java是两个公司开发的不同产品；
Java是SUN公司推出的新一代面向对象的程序设计语言；
而JavaScript是Netscape公司的产品，其目的是为了扩展其浏览
器功能；
现在JavaScript已被标准化为ECMAScript,主流的浏览器都支持。
JavaScript的3种写法:
➢在标识<script>标签对之间就可加入JavaScript脚本代码。其中的language属性指明这段代码是用JavaScript来编写的。
➢JavaScript可以直接嵌入到htmI中通过浏览器直接运行的。
➢Html中嵌入JavaScript代码的方式:
放在<body>标签中 <script> js代码 </script>
放在<head>标签中（推荐使用） <script src="外部路径">
创建js文件，导入引用（推荐使用） <html标签 onclick="javascript:js代码>
2 JS基础
2.1 语法基础
类型
var 变量名[=值];
js中三种定义变量的方式const， var， let的区别：
const定义的变量不可以修改，而且必须初始化；var定义的变量可以修改，如果不初始化会输出undefined，不会报错；let是块级作用域，函数内部使用let定义后，对函数外部无影响。
* undefined 未赋值
array a
boolean b
..........
function fn()
regular reg
提示框
alert(消息内容); //警告框
string prompt(输入提示, 输入框的默认值); //带输入框的对话框
boolean confirm(提示内容); //带"确定"和"取消"两个按钮的对
console.log(内容);
可以在浏览器控制台中输出信息,类似的有:console.info(内容); ..
网页输出：document.write();
typeof(变量) 返回变量的类型
函数
function 函数名([参数列表]){
//函数体
[return 值;]
}
String 都是 true int:0是false 非零即true
==和===：
== 比较数值
=== 比较类型之后比较数值
类型转换
parseInt( string )
返回整数, 只要是以数字开头, 就正常转换, 否则返回NaN
parseFloat( string )
返回浮点数, 同上
Number( string )
返回数字, 只要string不是数字形式, 就返回NaN
isNaN( string )
如果返回true, 表示该string不是数字
如果返回false, 表示该string是数字
eval(string)：
将字符串参数转换成相应的数值
2.2 事件
主要内容：
➢1、事件(Event)：是指用户在某对象上所作的动作。(可以是浏览器行为，也可以是用户行为)
➢2、事件驱动(Event Driver): 由事件引发的一 连串程序的动作，称为事件驱动。
➢3、事件处理程序(Event Handler): 对事件进行处理的程序或函数。
➢4、事件处理程序语法:如: onClick
HTML事件的实例：页面完成加载；input字段改变时；按钮被点击。
2.2.1 常见的HTML事件
| 事件 | 描述 | 场景 |
| onchange | HTML元素改变 | 表单元素 |
| onclick | 用户鼠标单击HTML元素 | 所有元素 |
| ondbclick | 鼠标双击 | 所有元素 |
| onfocus | 窗口或元素获得焦点时 | < body >和表单元素 |
| onblur | 窗口或元素失去焦点时 | < body >和表单元素 |
| onload | 文档，图像，或对象加载完毕时（浏览器已完成页面的加载） | < body >,< frameset >,< img >,< iframe >,< object > |
| onsubmit | 表单提交时 | < form > |
| onunload | 文档卸载时 | < body >,< frameset > |
| onmouseover | 用户在一个HTML元素上移动鼠标 | |
| onmouseout | 用户从一个HTML元素上移开鼠标 | |
| onkeydown | 用户按下键盘按键 |
2.3 浏览器对象
➢ 窗口对象(Window)
Window对象处于对象层次的最顶端 ,它提供了处理浏览器窗口的方法和属性。
➢位置对象(Location)
Location对象提供了与当前打开的URL-起工作的方法和属性，它是-个静态的对象。
➢历史对象(History)
History对象提供了与历史清单有关的信息。
➢文档对象(Document)
document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。
2.3.1 操作元素
1.document元素
获得元素方式、
getElementsByTagName(标签名)
通过html标签来获得一些元素对象
返回的是相同标记的html元素对象数组
getElementById(标记id属性值)
通过html标签的id属性来获得一个html元素对象
返回具有该id属性的html元素对象
getElementsByName(标记name属性值)
通过html标签的name属性来获得一些元素对象
返回的是具有相同name属性的html元素对象数组
getElementsByClassName(class名字)
返回文档中所有指定类名的元素集合
回的是相同Class的html元素对象数组
操作元素
document.createElement("标签名") 用于创建元素
document.createTextNode("文本") 用于创建文本节点
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
属性
obj.style.backgroundColor = "red";
obj.style="display:block";
form
input
属性
value
checked
非form元素(不包含Select)
innerHTML
2.3.2 事件相关
绑定事件
obj.onclick=函数名;
删除事件：
btn.onclik=null
现代事件指派方法
obj.addEventListener("事件名",函数名,true);
obj.removeEventListener("事件名",函数名);
obj.attachEvent("onclick",函数名);
obj.detachEvent("onclick",函数名);
当窗口大小改变时，触发onresize事件处理程序
window.onresize=function(){
alert(this.outerWidth);
};
window.onload=function(){
alert("网页加载完成");
};
当滚动窗口或元素时，触发窗口的滚动事件
window.onscroll=function(){
console.log(document.body.scrollTop);
}
事件冒泡：
阻止事件冒泡：stopPropagation
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件冒泡</title>
<style type="text/css">
#div1{
width: 800px;
height: 400px;
background-color: yellowgreen;
}
#div2{
width: 400px;
height: 200px;
background-color:greenyellow;
}
#div3{
width: 200px;
height: 100px;
background-color:green;
}
#div4{
width: 100px;
height: 50px;
background-color: #7D9029;
}
</style>
<script type="text/javascript">
function showText(divText){
alert(divText.innerText);
// var e = window.event || arguments[0];
// if(e.stopPropagation)
// e.stopPropagation(); //dom 阻止冒泡
// else if(window.event)
// e.cancelBubble=true; //IE阻止冒泡
}
</script>
</head>
<body>
<div id="div1" onclick="showText(this)">
div1
<div id="div2" onclick="showText(this)">
div2
<div id="div3" onclick="showText(this)">
div3
<div id="div4" onclick="showText(this)">
div4
</div>
</div>
</div>
</div>
</body>
</html>
2.3.3 表格、表单
table
属性
集合
rows[] 获得所有的行数
cells[] 获得所有的列数
函数
insertRow()
deleteRow()
tr
属性
rowIndex 在表格中的行数坐标
innerHtml 给这行添加 html元素代码
rowSpan
集合
cells[] 返回这一行的列数
函数
insertCell()
deleteCell()
td
属性
cellIndex 在表格中的列数坐标
innerHtml 给这行添加 html元素代码
colSpan 跨列
form
属性
action：相当于<FORM>标记的ACTION属性。
method：输入窗体的数据传送到服务器上的方式，即(FORM)标记中的METHOD属性。
elements：表单中的所有控件，以数组索引值表示。
例：
document.forms[索引值].elements[索引值].属性
length：表单中的控件的个数。
常用方法
submit() 提交表单(与submit按钮的作用相同)。
reset() 重写表单(与使用reset按钮的作用相同)。
Text： 单行文本。
Password: 密码对象。
Checkbox: 复选框。
Radio：单选按钮。
Submit：提交按钮。
Reset：复位按钮。
Button：<INPUT TYPE=”BUTTON”>按钮。
Textarea: 多行文本。
Select: <SELECT>选择框。
Option：选项对象。
1.常用属性
name: input对象的名字
defaultValue: input对象的缺省值
type: input对象的类型(NAME属性)
value: input的当前值(VALUE属性值)
2.常用方法
Blur() 把焦点从文本框移开。
Focus() 把焦点移到文本框。
Select() 将该对象设置成选取状态。
click() 再该对象上单击鼠标左键。
2.4 JS创建类/对象
参考博客https://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html
2.5 正则
正则
规则符
()
[] 包含
{n} 必须连续出n次 {n,m} 至少n不超过m {n,} 至少n到无穷
^ 以什么开始 , 非
$ 以什么结束
\ 转义字符
\d [0-9]
\D 非数字
\s 空白
\S 非空白
\w 字母数字下划线
\W 非单词数字
| 或
. 任意字符 [!换行和回车]
? 出现[0-1]次
* 出现0-任意次
+ 至少出现一次
[\u4e00-\u9fa5] 汉字在正则表示为
g全文查找 i不考虑大小写 n多行
方法
test true false
exec 匹配就返回该字符串,不匹配null
String
match 匹配就返回该字符串,不匹配null
HTML5正则：
input
pattern:正则
required:不能为空
setCustomValidity() 设置错误信息
checkValidity() 验证pattern 属性的正则 是否与填写数值对应
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
3 JSON
3.1 概述
JSON：JavaScript对象表示法（JavaScript Object Notation）
轻量级的文本数据交换格式
好处：
JSON独立于语言；具有自我描述性，更易理解；易于机器解析和生成，并且易于书写和阅读；使用JavaScript语法来描述数据对象，但是JSON跟XML一样独立于语言和平台，JSON 比 XML 更小、更快，更易解析。
3.2 例子
js文件格式：
{
"sites": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
javascript中的格式：
var objs={
"employees": [
{"firstName":"Bill","lastName":"Gates"},
{"firstName":"Georgr","lastName":"Bush"},
],
"name":"李磊",
"info":{"tel":"14625368957","cellPhone":"222333"}
}
for(x in objs){
document.getElementById("demo").innerHTML += x + "<br>";//循环对象属性
// document.getElementById("demo").innerHTML += car[x] + "<br>";//访问属性的值
}
三级导航栏 案例：
https://blog.csdn.net/weixin_45044097/article/details/100538212
3.3 Cookie
Cookie 是什么?
存储访问者在计算机中的一个变量,每当访问者发出请求页面，就会发送Cookie，我们可以利用JavaScript来创建或者取Cookie的值，从JavaScript的角度去看Cookie他只是一串字符串。利用JavaScript创建Cookie 并在Cookie中保存一些值添加数据。
案例:document.cookie=“name=张三;expires=”+有效时间;
<script>
function getCookie(){
var cookie=document.cookie;
console.log(cookie);
//存入数据
document.cookie="name='王智是男生'";
//这样存入 有效期是会话结束之前
//会话:
//当前客户端第一次访问服务器,这叫会话开始
//当客户端关闭浏览器,或者不再请求服务器会话结束
console.log(document.cookie);
//获得本机时间
var date=new Date();
date.setDate(date.getDate()+1);
//转成东八区
console.log(date.toGMTString());
console.log(date) ;
// 这条数据 保存 多久
document.cookie="nick='陶谦是小姐姐';expires="+date;
console.log(document.cookie);
}
getCookie();
</script>
JSON与JavaScript：
JSON文本格式在语法上与创建JavaScript对象的代码相同。
new function形式：
var textJson = “{name:‘李磊’ , age:34}”;
var json = ar str = ‘{ name:“jack” }’;
var obj = JSON.parse(str);
alert( json.age );
json = { name : ‘李磊’ };
JSON与XML比较：
JSON是纯文本，具有“自我描述性”（人类可读），具有层级结构（值中存在值）；可通过JavaScript进行解析，数据可使用AJAX进行传输。
相比XML的不同之处：
没有结束标签；更短；读写的速度更快；能够使用内建的方法进行解析；使用数组；不使用保留字。
在其他语言中使用JSON：
总结：
JSON不仅是Javasdript内嵌的对象标识方法，而且是个轻量级文本数据交换格式
JSON因其轻量，与JAVAScript紧密集成， 使其取代XML在AJAX应用中的位置
JSON-RPC应用还没有相应的配套协议和服务设施，只能在小范围内使用。
扫一扫
1765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
