javaScript内容详解
定义
JavaScript是一种弱类型的脚本语言,其源代码不需要经过编译,而是有浏览器解释运行用于控制网页的行为
注:CSS的层叠样式是一门表现型语言,并不是编程语言。
快速入门
- 通过来引入JavaScript语句
数据类型
数字
number **注:在js中不区分小数和整数。**统一都是number来表示
布尔值
false true
逻辑运算
|| && !
字符串
‘abc’ “abc”
比较运算符
=//表示是赋值运算符
== //表示的是相等,(注当两个值的类型不相同时,但是值时相等的,其返回的结果仍然为true)
=== //表示绝对等于,在JavaScript中建议使用绝对等于(必须时类型一样值一样)
对象
注:对象时大括号,数组时中括号
var 对象名称={
属性名:属性值,
属性名:属性值,
属性名:属性值,
属性名:属性值
}
var person={
age: 3,
sex:"男",
name:"张三"
}//在JavaScript中定义对象采用键值对的形式来对对象进行一些赋值
JavaScript中对象,{…}(大括号)表示一个对象,键值对的形式描述属性和属性值,多个属性之间通过逗号隔开,最后一个属性不加逗号
JavaScript中所有的值都是一个字符串,值是任意对象
1、对象的赋值
person.age=3;
person.age;
2、当使用一个对象中不存在的属性的时候,在JavaScript中不会报错,之会显示undefined
3、 在JavaScript中对象的属性可以进行动态的删除
delete person.age //表示删除person对象中的age属性
true
person
4、在JavaScript中可进行动态的添加新的属性
person.haha="haha" //表示在person对象中添加新的haha属性
"haha"
person
5、判断属性值是否在对象之中 xxx in xxx
'age' in person
true
6、判断属性是否为这个对象自身所拥有的
person.hasOwnProperty('toString');
false
person.hasOwnProperty('age');
true
严格检查模式
'use strict'//表示严格检查模式,预防JavaScript的随意性出现的问题(必须写在JavaScript的第一行)
在javascript中设置局部变量的时候建议使用let进行变量的定义
'use strict' //有助于对变量的定义进行审查,当去掉let时,代码会报错。
let i=1;
console.log(i);
注:当在idea中写入‘use strict’报错时,可能的原因是没有设置支持ES6语法
数组
var arry=[1,2,3,4,5,6,7]
arry.length=10;
console.log(arry.length)=10;
arry.length=2;
console.log(arry.length)=2;
注:在JavaScript中数组的长度是动态可变的,当数组的长度变小的时候,会造成数据的丢失
数组中常用的方法
arry.indexof(2)//表示显示在数组中值为2的数值的索引
slice //表示截取数组的一部分并返回一个新的数组,类似于string中的substring
arry.push //表示在数组后面添加相应的数值
arry.pop //表示弹出数组中最后一个元素并相应的减少数组的长度
arry.unshift //表示在数组的头部添加元素,并相应的增加数组的长度
arry.shift //表示弹出数组头部的元素,并相应的减少数组的长度
arry.concat([1,2,3]) //对数组进行相应的拼接
Map和 Set
Map
//ES6 Map
//学生的成绩,学生的名字
//var names=["tom","jack","haha"]
// var scores=[100,80,90]
var map =new Map([["tom",100],["jack",90],["haha",80]]);
var name=map.get("tom");//通过key获得value
map.set("sdmin",123456);//新增或者是修改
map.delete("tom");//删除
Set:无序不重复的集合
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素
4、函数
4.1、定义函数
绝对值函数
定义方式一
function abbs(x){
if(x>=0){
return x;
}else{
return x;
}
}
定义方式二
var abs =function(x){
if(x>=0){
return x;
}else{
return x;
}
}
方式一与方式二等价
4.2、函数的调用
abs(10); //10
abs(-10); //10
参数问题:JavaScript可以传任意个函数,也可以不传递参数
参数进来是否存在问题
假设不存在参数,如何规避(通过手动来抛出异常)
例:
var abs =function(x){
//手动抛出异常
if(typeof x!=="number"){
throw "this is not a number";
}
if(x>=0){
return x;
}else{
return x;
}
}
4.3、变量的作用域
注:在JavaScript,var定义变量实际是有作用域的。
假设在函数体中声明,则在函数体外不能使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/demo0.js"></script>
<script>
function qj(){
var x=1;
x=x+1;
}
x=x+2;//Uncaught ReferenceError: x is not defined
at
</script>
</head>
<body>
</body>
</html>
如果两个函数使用了两个相同的函数名,只要在函数的内部,则不会产生冲突。
当内部函数与外部函数的变量重名的时候!
假设在JavaScript中,函数查找变量从自身的函数开始~,由内向外进行查找,当外部函数存在这个同名变量的时候,其会自动屏蔽外部的函数变量。
注:在js中默认所有的全局变量都绑定在window对象中。
var x="xxx"
window.alert(x);
var old_alert=window.alert;//表示将window.alert赋值给old_alert.
window.alert=function(){
//表示window.alert被函数function()函数给覆盖
}
window.alert=old_alert;
注:JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果子啊全局作用域都没有找到,报错RefrenceError
规范
由于我们所有的全局变量都会绑定到我们的window上,如果不同的js文件,使用了相同的全局变量,则会产生冲突
解决办法
var li={};
li.name="zhangsan";
li.sex="nan"; //表示通过自定义全局变量空间进行全局变量的绑定。
把自己的代码全部的放入自己定义的唯一空间名字中,降低全局命名冲突的问题。
局部作用域let
常量const
const pi=3.14//表示为常量不能进行修改
let pi =3.14//表示通过let来表示其为局部变量
5、函数
方法:方法存在与对象当中,对象存在属性,对象中存在方法
函数:
5.1、定义函数
public 返回值类型 方法名(){
return 返回值;
}
5.1.1、arguments
arguments是一个JS免费赠送的关键字,代表,传递进来的所有的参数,是一个数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function abd(x){
for (var i=0;i<=arguments.length;i++) {
console.log("x是" + x);
console.log("i是"+i); //表示对所有的输入的元素进行遍历显示。
}
}
abd(10,12,13,15,1234,78,89,23);
</script>
</head>
<body>
</body>
</html>
5.1.2、rest
ES6引入的新特性,获取除了已经定义的参数之外的所有参数…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function abc(a,b,...rest){
console.log("a是"+a);
console.log("b是"+b);
console.log("rest是"+rest);//获取除了ab之外其他的参数。
}
</script>
</head>
<body>
</body>
</html>
注:rest参数只能写在最后面,必须用…来标识。
5.1.3、apply
apply可以改变this的指向。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getAge(){
var now=new Date().getFullYear(); //获取当前的年份
return now-this.birth;
}
var gq={
name:"lisi",
birth:2000,
age:getAge
}
console.log(gq.age());//获取年龄
console.log(getAge.apply(gq,[]));//apply改变this的指向
</script>
</head>
<body>
</body>
</html>
5.1.4、Date:表示是展示时间
5.1.5、typeof:判断数据的类型
5.1.6、JSON
JSON定义:是一种轻量级的数据交换格式
在JavaScript中,万物皆对象,任何js支持的类型都可以通过JSON来表示
格式:
- 对象与map都用{}
- 数组与list都用[]
- 所有的键值对都是用key:value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var abc={
name:"lisi",
sex:"男",
phone:"18366636373",
}
console.log(abc);
var obj=JSON.stringify(abc);//将对象转换为JSON字符串
console.log(obj);
var obj1=JSON.parse(obj);//将JSON字符串转换为对象
console.log(obj1);
</script>
</head>
<body>
</body>
</html>
5.1.7、class
注:其是在ES6中的新特性
定义一个类、属性、方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
class Student(){
constructor(name){
this.name=name;
}
hello(){
alert("hello world");
}
}
var xiaoming=new Student("xiaoming");//继承上边的特性
</script>
</head>
<body>
</body>
</html>
6、操作BOM对象
浏览器介绍
JavaScript和浏览器的关系?
JavaScript诞生就是为了能够让他们在浏览器中运行
BOM:浏览器对象模型
window
window代表的是浏览器的窗口
Navigator
Navigator,封装了浏览器的信息
navigator.appName //表示浏览器的名字
'Netscape'
navigator.appVersion //表示浏览器的版本号
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36'
navigator.userAgent //表示获取当前用户的信息
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36'
screen
screen表示屏幕尺寸
screen.width//表示屏幕的宽度
1536
screen.height//表示屏幕的高度
864
location
location代表当前页面的URL的信息
location.assign("url")//表示修改URL进行相关地址的跳转
document
- document代表的是当前的页面 HTML DOM的文档数,可以改变一些标题
- 获取文档的具体的树节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl id="app">
<dt>javaee</dt>
<dd>java</dd>
<dd>javase</dd>
</dl>
<script>
var dl=document.getElementById("app");//获取id为app的节点
console.log(dl);
</script>
</body>
</html>
//注:注意在写js语句的时候,注意js语句的顺序
3、document.cookie可以获取网页当前的一些cookie,(网页的一些当前的信息)
history
history代表的浏览器的历史纪录
history.back();//历史记录后退
history.forward()//历史记录前进
7、操作DOM对象
DOM:文档对象模型
核心
浏览器网页就是一个DOM属性结构
- 更新:更新DOM节点
- .遍历DOM节点,得到DOM节点
- 删除:删除DOM节点
- 添加:添加一个DOM节点
注:要操作一个DOM节点,必须先获取这个DOM节点
获取DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p class="p1">p1</p>
<p id="p2">p2</p>
</div>
<script>
var p2=document.getElementById("p2");//获取id为p2的DOM节点
var p1=document.getElementsByClassName("p1");//获取Class为p1的DOM节点
var h1=document.getElementsByTagName("h1")//获取标签为h1的DOM节点
var father=document.getElementById("father");
var child=father.children;//获取父节点的所有孩子节点
var last=father.lastChild;//获取父亲节点的最后一个孩子节点
var first=father.firstChild;//获取父节点的第一个孩子节点
var next=p1.nextElementSibling;//获取P1节点的下一个节点
console.log(next);
</script>
</body>
</html>
更新DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
你好,世界!!
</div>
<script>
var d2=document.getElementById("d1")
d2.innerText="你好呀世界"; //可以修改获取相应节点的内容
</script>
</body>
</html>
d2.style.color="red"; //修改相应节点内容的颜色
d2.style.fontsize="200px"; //表示修改其文字的大小
d2.style.padding="20px";//修改内容的内边距
删除节点
删除节点的步骤:先获取父亲节点,只能通过父节点进行相关的删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p class="p1">p1</p>
<p id="p2">p2</p>
</div>
<script>
var self2=document.getElementsByClassName("p1");
var p2=document.getElementById("p2");//获取id为p2的DOM节点
var p1=document.getElementsByClassName("p1");//获取Class为p1的DOM节点
var h1=document.getElementsByTagName("h1")//获取标签为h1的DOM节点
var father=document.getElementById("father");
var child=father.children;//获取父节点的所有孩子节点
var last=father.lastChild;//获取父亲节点的最后一个孩子节点
var first=father.firstChild;//获取父节点的第一个孩子节点
var next=p1.nextElementSibling;//获取P1节点的下一个节点
var self=document.getElementById("p2");
var father2=self.parentElement;
</script>
</body>
</html>
插入节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p2" style="color: pink;">你好世界!!!</p>
<div id="dt">
<p id="p1">p1</p>
<h1 id="h1">h1</h1>
<h2 id="h2">h2</h2>
</div>
<script>
var dt=document.getElementById("dt"); //获取父元素的id
console.log(dt);
var p2=document.getElementById("p2"); //获取id为p2的id
dt.appendChild(p2); //将id为p2的标签移动到div中
var newp=document.createElement("p"); //创建一个p标签
newp.id=newp; //表示为p标签设置id属性
newp.innerText="hello world"; //表示给id为newp的标签添加hello world的内容
dt.appendChild(newp); //表示在父元素中添加一个p标签,
</script>
</body>
</html>
创建一个新的节点标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="" type="text/css">
<script type="text/javascript">
</script>
</head>
<body>
<div id="dt">
<p id="p1">p1|</p>
<h1 id="hel">hello world</h1>
<h2 id="hel2"> hello world</h2>
</div>
<script>
var dt=document.getElementById("dt");
var myScript=document.createElement("script"); //创建一个script标签
</script>
</body>
</html>
效果:
insert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3 id="hel3">hello world</h3>
<div id="dt">
<p id="p1">p1|</p>
<h1 id="hel">hello world</h1>
<h2 id="hel2"> hello world</h2>
</div>
<script>
var dt=document.getElementById("dt");
var hel3=document.getElementById("hel3");
var hel=document.getElementById("hel");
//dt表示要包含的标签
dt.insertBefore(hel3,hel); //hel3表示一个新的标签,hel表示旧的标签。表示在标签hel的前边插入标签hel3
</script>
</body>
</html>
8、操作表单(验证)
表单是什么 from、DOM树
- 文本框
- 下拉框
- 单选框
- 多选框
- …
获得要提交的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
<p>
<span>用户名:</span>
<input type="text" id="text1">
</p>
<p>
<span>性别</span>
<input type="radio" value="man" name="man" id="man" />男
<input type="radio" value="woman" name="man" id="woman" />女 //当type类型为radio时,进行单选必须保证name的属性值一致
</p>
</form>
<script>
var text1=document.getElementById("text1");
var man=document.getElementById("man");
var woman=document.getElementById("woman");
text1.value="你好世界"; //表示对其赋值
//注:在获取多选按钮value值的时候需要通过false与true来进行判断哪一个被选中
</script>
</body>
</html>
提交表单 MD5加密密码 form表单进行优化
9、初始jquery
注:在jQuery中存在着大量的JavaScript的函数
获取jquery
注:建议使用的jQuery的CDNjQuery查找网络地址
事件
-
鼠标事件
-
键盘事件
-
其他事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style> #divMove{ height: 500px; width: 500px; border: 2px solid rebeccapurple; } </style> </head> <body> mouse: <p id="mouseMove"></p> <div id="divMove"> </div> <script> $(document).ready(function (){ $("#divMove").mousemove(function (e){ $("#mouseMove").text("x="+e.pageX+"y="+e.pageY);//获取鼠标在页面中的移动的坐标 }) ; }); </script> </body> </html>
操作DOM
常用的框架
获取jquery
注:建议使用的jQuery的CDNjQuery查找网络地址
事件
-
鼠标事件
-
键盘事件
-
其他事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style> #divMove{ height: 500px; width: 500px; border: 2px solid rebeccapurple; } </style> </head> <body> mouse: <p id="mouseMove"></p> <div id="divMove"> </div> <script> $(document).ready(function (){ $("#divMove").mousemove(function (e){ $("#mouseMove").text("x="+e.pageX+"y="+e.pageY);//获取鼠标在页面中的移动的坐标 }) ; }); </script> </body> </html>
[外链图片转存中…(img-SR2YWzh5-1630940740346)]
操作DOM
常用的框架