前言
混乱又痛苦 坚持又很酷……
1、JavaScript 使用方式
常见用法
<!-- 可以不写,默认显示JS类型-->
<script type="text/javascript"></script>
- 内部标签
<!-- script标签内,写JavaScript代码
alert为弹窗
-->
<script>
alert('hello world');
</script>
- 外部引入
<!--外部引入 不能用自闭合标签,script必须成对出现-->
<script src="js/qj.js"></script>
2、基本语法
2.1 变量类型和条件控制
定义变量 变量类型(都是var) 变量名=变量值
<!--JavaScript严格区分大小写-->
<script>
// 1.定义变量 变量类型(都是var) 变量名=变量值
var num =1;
var name = "Ben";
// 2.条件控制
if (num > 0){
alert('hello');
}else {
alert('error');
}
// console.log(); 打印变量,可以在控制台查错
</script>
2.2 数据类型
数值,文本,图形,音频,视频……
number
js不区分小数和整数,Number
123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //负数
NaN //Not a number
Infinity //表示无限大
注意:
- NAN===NAN false,NAN与所有的数值都不相等,包括自己
- 只能通过 isNaN(NaN) 来判断这个数是否是NaN
- 尽量避免使用浮点数运算,存在精度问题
字符串
“abc” ,‘abc’
比较运算符
=
== 等于(类型不一样,值一样也会判断为true)
=== 绝对等于(类型一样,值一样)
数组
JS中数组类型可以不相同
//保证代码可读性,尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,12,3,4,4,5,'hello');
下标越界----undefined
对象
每个属性之间使用,隔开,最后一个不需要符号
<script>
// Person person = new Person();
// 每个属性之间使用,隔开,最后一个不需要符号
var person = {
name:"Ben",
age:3,
arrs:['js','java','web','···']
}
</script>
2.3 ‘use strict’; 严格检查模式
‘use strict’; 严格检查模式,预防JavaScript的随意性导致产生的一些问题
<!--JavaScript严格区分大小写-->
<!-- 'use strict'; 严格检查模式,预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行
局部变量建议都使用let去定义
-->
<script>
'use strict';
</script>
2.4 字符串类型
1、正常字符串使用" " ,’ '包裹
2、注意转义字符 \
\' ---------'
\n
\t
\u4e2d \u#### unicode字符
\x42 Ascll 字符
3、多行字符串编写
<script>
'use strict';
var msg =
`hello
word
nihao
好`
console.log(msg);
</script>
4、模板字符串
${} 相当于+拼接
let msg = `你好呀。${msg}`
5、字符串的可变性,不可变
6、字符串大小写转换
toLocaleLowerCase() //变小写方法
toLocaleUpperCase() //变大写方法
console.log(msg.toLocaleLowerCase());//变小写
console.log(msg.toLocaleUpperCase()); //变大写
7、indexOf(); //获取元素位置方法
8、substring
[)
substring(1) //从第一个截取到最后一个
substring(a,b) //从第a个截取到第b个(不包含b)
2.5 数组
可以包含任意数据类型
arr = [1,2,3,4,5,6,"1","2"]
(8) [1, 2, 3, 4, 5, 6, '1', '2']
1、长度
arr.length
8
2、indexOf(),通过元素获得下表索引
arr.indexOf(1)
0
数字1和字符串”1“是不一样的
3、slice()
截取元素,包头不包尾
arr.slice(2,5)
(3) [3, 4, 5]
4、push和pop
push: 压入尾部
pop; 弹出尾部一个元素
arr.push("a")
9
arr
(9) [1, 2, 3, 4, 5, 6, '1', '2', 'a']
arr.pop()
'a'
arr
(8) [1, 2, 3, 4, 5, 6, '1', '2']
5、unshift 和 shift
unshift:压入元素到头部
shift:从头部弹出元素
arr.unshift("x")
9
arr
(9) ['x', 1, 2, 3, 4, 5, 6, '1', '2']
arr.shift()
'x'
6、排序sort()
arr.sort()
(8) [1, '1', 2, '2', 3, 4, 5, 6]
7、元素反转reverse()
arr.reverse()
(8) [6, 5, 4, 3, '2', 2, '1', 1]
8、concat()拼接数组
arr.concat([11,22,33])
(11) [6, 5, 4, 3, '2', 2, '1', 1, 11, 22, 33]
arr
(8) [6, 5, 4, 3, '2', 2, '1', 1]
没有修改数组,只是返回了一个新的数组
9、连接符
arr.join()
'6,5,4,3,2,2,1,1'
arr.join('-')
'6-5-4-3-2-2-1-1'
10、多维数组
arr = [[1,2],[3,4],[5,6]]
arr[1][1]
4
2.6 对象
JavaScript中所有的键都是字符串,值是任意对象
多个属性之间使用 , 隔开,最后一个属性不加逗号
键:值
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
1、动态的删减属性,通过delete删除对象属性
delete person.age
true
person
{name: 'Ben', score: 0}
2、动态的添加属性
person.hh = "haha"
'haha'
person
{name: 'Ben', score: 0, hh: 'haha'}
3、判断属性是否在对象中
"hh" in person
true
"toString" in person //"toString"在父类中
true
4、判断属性是否是对象自身拥有hasOwnProperty()
person.hasOwnProperty("hh")
true
person.hasOwnProperty("toString")
false
2.7 Map和Set
Map集合:
var map = new Map([['a',100],['b',80],['c',60]]);
console.log(map.get('a'));
console.log(map.set('d',20));
map.delete('a'); 删除
Map(3) {'b' => 80, 'c' => 60, 'd' => 20}
Set:无序不重复的集合
var set = new Set([3,1,1,1,1]);
set.add(); //增加
set.delete(); //删除
set.has(); //是否包含
2.8 iterator
遍历数组(var 或 let 都可以)
//通过for of / for in 遍历数组
var arr =[2,3,4,5];
for (var x of arr){
console.log(x)
}
for (var x in arr){
console.log(arr[x])
}
遍历Map
for (var x of map){
console.log(x)
}
遍历Set
for (var x of set){
console.log(x)
}
3、函数
3.1 定义函数
//abs----函数名
//第一种
function abs(x){
}
//第二种---匿名函数
var abs = function(x){
}
arguments 关键字
代表传递的参数是一个数组,可以遍历所有传递的参数
var abs = function (x){
console.log("x->"+x);
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
rest
获取除第一个和第二个外的参数
function abs1(a,b,c,...rest){
console.log("a->"+a);
console.log("b->"+b);
console.log(rest);
}
3.2 变量的作用域、let、const详解
3.2.1 变量的作用域
- 假如变量在函数种定义,则只能在函数内部使用
- 内部函数可以访问外部函数的成员,反之则不行
- 如果两个函数使用相同的变量名,只要分别在函数内部使用,就不冲突
- 默认所有的全局变量,都自动绑定在windows下,x=windows.x
qj();
function qj(){
var x = 11;
function gj2(){
var x = 22;
console.log(x);
}
console.log(x)
gj2();
}
JavaScript实际上只有一个全局作用域,任何变量(函数也可以作为变量),假设没有在函数作用范围内找到,就会向外查找,如果全局作用域下没找到,就会报错RefrenceError
var x ="xxx";
windows.alert(x);
var oa = windows.alert;
windowa.alert = function (){
}
//alert失效
windows.alert(123);
//恢复
windowa.alert = oa;
windows.alert(123);
规范
将自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
//唯一全局变量
var person={};
//定义全局变量
person.name = 'Ben';
person.add =function (a,b){
return a+b;
}
3.2.2 局部作用域 let
let 解决局部作用域冲突问题
//var
function ooo(){
for (var i = 0; i < 20; i++) {
console.log(i);
}
console.log(i+1);
}
//let
function ooo2(){
for (let i = 0; i < 20; i++) {
console.log(i);
}
console.log(i+1);//报错
}
3.2.3 常量const
由于常量可以改变,所以引入const,const修饰的常量不能被修改,一般常量用大写字母命名
const PI = '3.14'
3.3 方法
this 指向当前调用的对象
apply
function getAge(){
}
var person={
name:'Ben';
age: getAge //调用方法
}
getAge.apply(person,[]);
方法.apply(对象名,[]); //指向特定对象
3.4 Date
基本使用:
var now = new Date();
now.getFullYear(); //年
now.getMonth(); //月 0~11月
now.getDate(); //日
now.getHours(); //时
now.getDay(); //星期几
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime(); //时间戳 全世界统一 1970 1.1 00:00:00 到现在的毫秒数
console.log(now);
3.5 JSON
在JavaScript一切皆为对象,任何js支持的类型都可以用JSON来表示;
格式:
- 对象都用{}
- 数组都用[]
- 所有键值对 都是用key:value
JSON 和 JS 对象的转化
// 对象转为json字符串--------{"name":"Ben","age":3,"sex":"男"}
var jsonPerson = JSON.stringify(person);
console.log(jsonPerson);
// JSON 字符串转化为对象
var obj = JSON.parse('{"name":"Ben","age":3,"sex":"男"}') //里面双引号外面单引号
console.log(obj);
4、面对对象编程
4.1 class 继承
- 定义一个学生类
//定义一个学生类
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
- 继承
本质:查看对象原型
<script>
//定义一个学生类
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
class pupil extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一名小学生')
}
}
var xiaohong = new pupil("xiaohong",100);
</script>
5、操作BOM对象(重点)
B:浏览器
BOM:浏览器对象模型
window 代表浏览器窗口
window.innerHeight
850
window.innerWidth
150
window.outerHeight
938
window.outerWidth
737
window.navigator 封装浏览器信息
screen 代表屏幕尺寸
screen.width
1440
screen.height
960
location 代表当前页面的URL信息
ancestorOrigins: DOMStringList {length: 0}
assign: ƒ assign() //放跳转的地址
hash: ""
host: "www.baidu.com" //主机
hostname: "www.baidu.com"
href: "https://www.baidu.com/" //指向的位置
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload: ƒ reload() //重新加载方法-刷新网页
replace: ƒ replace()
search: ""
toString: ƒ toString()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
[[Prototype]]: Location
document 代表当前的页面,HTML DOM文档数
获取具体文档树节点
<dl id = "dom">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaSE</dd>
</dl>
<script>
var dl = document.getElementById("dom");
</script>
获取cookie
document.cookie
截取cookie原理:恶意人员获取cookie上传到其他服务器
服务器端可以设置cookie:httpOnly 防止暴露
history 获取浏览器历史记录
history.back(); //后退
history.forward(); //前进
6、操作DOM对象(重点)
DOM ,文档对象模型,这里的文档,主要是针对 HTML 和 XML 文档。对象模型,意味着使用对象的方式来描述文档。
我们编写的 HTML 代码在经过词法和语法分析之后,就会在内存中得到一个树形的对象模型,而我们则可以通过 JavaScript 等语言来查看、创建、删除和修改这个对象模型的结构。也可以这样说,DOM 的存在就是为了能够动态改变文档。
浏览器网页就是一个Dom树形结构
- 更新:更新Dom节点
- 遍历Dom节点:得到Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
要操作一个Dom节点,首先需要获得这个Dom节点
获得Dom节点
<script>
//对应CSS选择器
var f = document.getElementById('father'); //获取id
var d1 = document.getElementsByTagName('h1'); //获取标签名
var d2 = document.getElementById('p1'); //获取id
var d3 = document.getElementsByClassName('p2'); //获取class
var children = f.children; //获取父节点下的所有子节点
f.firstChild; //获取第一个子节点
f.lastChild; //获取最后一个子节点
</script>
更新节点
//d2为获取到的节点id
d2.innerText='XXX' //修改文本值
d2.innerHTML='<strong>XXX</strong>' //可以解析HTML的标签
//操作CSS 修改样式
d2.style.color='blue' //颜色
d2.style.fontSize='200px'
删除节点
删除步骤:先获取父节点,再通过父节点删除自己
d2.parentElement //获取父节点
f.removeChild(d2) //f为父节点,d2为子节点
注意:删除多个节点时,是一个动态的过程,children是时刻变化的,每次删除的都是children[0](老大死了老二继位 )
f.removeChild(f.children[0])
f.removeChild(f.children[1])
f.removeChild(f.children[2])
插入节点
如果我们获得了一个空的dom,我们通过innerHTML就可以增加一个元素,但如果这个dom节点已经存在元素了,用innerHTML会产生覆盖
- 追加 father.appendChild()
//把已存在的节点移下来
<body>
<p id = "js">js</p>
<div id = "father">
<h1>标题一</h1>
<p id = "p1">p1</p>
<p class = "p2">p2</p>
</div>
<script>
//对应CSS选择器
var father = document.getElementById('father'); //获取id
var p = document.getElementById('js'); //获取id
</script>
</body>
- 创建一个新的标签实现
var newp =document.createElement('p'); //创建一个P标签
father.appendChild(newp)
- 插入节点,把新节点插入目标节点的前面
//父节点.insertBefore(newNode,targetNode)
father.insertBefore(js,p1);
7、操作表单(验证)
- 输入框
<script>
var itext = document.getElementById('username');
</script>
itext.value //获取输入信息
>'19207107'
itext.value="1232434" //修改输入框的值
- 单选框、多选框
<p>
<input type="radio" name = "sex" id ="man">男
<input type="radio" name = "sex" id ="women">女
</p>
//对于单选框、多选框等固定的值,.value只能取到当前的值
manc.checked //查看返回的结果
true
womenc.checked = true //修改选择的结果
- 密码框
<form action="post">
<p>
<span>用户名:</span><input type="text" id = "username" >
</p>
<p>
<span>密码:</span><input type="password" id = "password" >
</p>
<button type="button" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
var user = document.getElementById('username');
var pwd = document.getElementById('password');
console.log(user.value);
//md5不知道为什么报错
pwd.value=md5(pwd.value);
console.log(pwd.value);
}
</script>
8、JQuery
公式: $(selector).action()
- 导入
<head>
<meta charset="UTF-8">
<title>导入</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<a href="" id="test" >点我</a>
<script>
$('#test').click(function (){
alert("hello");
})
</script>
</body>
8.1 选择器
//css中的选择器全能用
$('p').click(); //标签选择器
$('#id').click(); //id选择器
$('.class').click(); //类选择器
8.2 JQuery事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#divMove{
width: 500px;
height:500px;
border:1px solid royalblue;
}
</style>
</head>
<body>
mouse:<span id = "mouseMove"></span>
<div id ="divMove">移动鼠标试试</div>
<script>
$(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
</body>
</html>
8.3 JQuery操作Dom元素
操作Dom
<ul id ="test">
<li class = "js">JavaScript</li>
<li class = "python">python</li>
</ul>
$('#test').html(); //获得值
$('#test li[class=js]').text(); //获得值
>'JavaScript'
$('#test').html(''); //设置值
$('#test li[class=js]').text('12345'); //设置值
操作CSS
两种写法,有大括号用冒号,没有大括号用逗号
$('#test li[class=js]').css({"color":"red"})
$('#test li[class=js]').css("color","red")
元素的隐藏和显示
本质:display = none
$('#test li[class=js]').show() //显示
$('#test li[class=js]').hide() //隐藏