1.JavaScript
1.1 概述
JavaScript是一门使用广泛的前端语言
2. 快速入门
2.1 引入Javascript
1.内部标签
<script>
//......
</script>
2.外部引入
2.2 数据类型
变量
所有变量都是用var定义即可
js不区分小数和整数 Number
123 ///123
123.1 ///123.1
1.123e3 ///1123
-99 //负数
NaN ///not a number
Infinity //表示无限大
字符串
‘abc’ “abc”
布尔值
逻辑运算
&& 与 || 或 ！ 非
比较运算符
= == 类型不一样值一样也会为真 === 绝对等于
NaN === NaN fase 这个与所有的数值都不相等 包括自己 isNaN(NaN) true
console.log((1/3) === (1-2/3))
console.log(Math.abs(1/3-(1-(2/3)))<0.00000001)
null 和 undifined
null 为空 undefined 为未定义
数组
一系列相同类型的数值
var arr = [1,2,3,4,"Hello", null, true]//尽量使用这种方式
new Array(1,2,3,'Hello')
数组下标越界 浏览器会提示undefined
对象是大括号，数组是中括号
对象
//Person person = new Person(1,2,3,4,5);
var person = {
name: "qianqing",
age: 3,
tags: ['js','java','web']
}
2.3 严格检查模式
局部变量用let定义 ES6
在前面加入“user strict" 严格检查模式，预防JavaScript的随意性导致产生的一些问题
局部变量建议都使用let来定义~ 必须写在JavaScript的第一行
2.4 字符串
正常的字符串我们使用单引号或双引号包裹 ‘’ “”
转义字符的使用\
console.log('a\'nb')
\n \t \u4e2d \u#### unicode字符
\x4l ASCII字符
多行字符串编写
var msg = `
'hello
world
你好'
`
let name = "qianjiang";
let age = 3;
let msg = `你好呀！${name},${age}岁`
字符串不可变
str.length 字符串长度
str.toUpperCase 转换成大写
str.toLowerCase 转换成小写
str.indexOf 获取指定的下标 指定字符出现的位置
str.subString 截取字符串有起始下标和终止下标 [)
2.5 数组
Array可以包含任何的数据类型
arr.length 加入给arr.length赋值 数组大小就会发生改变 如果赋值过小 元素就会丢失
不能给数组中间增加元素
arr.indexOf(2)
arr.slice() 截取数组的一部分 返回一个新数组 类似于String的subString
arr.push arr.pop 性质相当于栈 往队尾增加元素 在队尾删除元素
arr.unshift 往头部增加元素
arr.shift去掉头部的元素 往头部增加删除元素
arr.sort 排序数组中的元素
arr.reverse 反转数组
arr.concat 拼接数组
arr.join('-') 使用特定字符串连接数组
多维数组
存储数组如何存 如何取
2.6 对象
var person = {
属性名: 属性值,
属性名: 属性值,
}
delete person.name
person.haha = "hahaha"
person.hasOwnProperty('age')
js中对象，{…}表示一个对象，键值对描述属性：xxxx:xxxx , 多个属性之间使用逗号隔开，最后一个属性不加逗号！
使用一个不存在的对象属性不会报错。
动态删减属性 person.name = “qianjiang”
动态添加属性，直接给新的属性添加值
判断属性值是否在这个方法中 xxxxx in xxxxx
2.7 流程控制
if else 条件判断
while 循环 避免写死循环
for 循环
foreach 的使用
var age = [12,12,112, 12,121 ,12,121212,212]
age.forEach(function (value){
console.log(value);
})
for(var num in age){
console.log(age[num]);
}
fpr(var num of age){
console.log(num);
}
2.8 Map 和 Set
let map = new Map([['tom',100],['jerry', 90],['haha',80]]);
let name = map.get('tom');
console.log(name);
map.set('admin',123456);//新增或修改
map.delete("tom");//删除
set集合 满足不重复性
var set = new Set([3,1,1,1,1,1])
set.add(2)//添加
set.delete(1)//删除
console.log(set.has(3)) //true
set.iterator 使用iterator迭代遍历map 和set
let map = new Map([['tom',100],['jerry', 90],['haha',80],['nucy',84],['nancy',92]]);
let set = new Set([1,3,2,4,6,5,7,9,10]);
let it = map[Symbol.iterator]();
for (let x of map) {
console.log(x);
}
let it1 = set[Symbol.iterator]();
for (let i = 0; i < set.size ; i++) {
console.log(it1.next());
}
3. 函数及面向对象
3.1 定义函数
//定义绝对值函数,一旦执行return方法即结束
//如果没有执行return，函数执行完也会返回结果，结果为undefined
function abs(x){
if(x >= 0)
return x;
else{
return -x;
}
}
var abs = function(x){
//手动抛出异常
if(typeof x != 'number'){
throw "Not a number!";
}
//函数执行语句
//function(x){} 这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数
}
参数问题 JavaScript可以传递任意一个参数 也可以不传入参数
//arguments 是一个免费赠送的关键字,代表传递进来的所有参数，是一个数组
var abs = function(x){
console.log("x=>"+x);
for(let i=0; i<arguments.length;i++){
console.log(arguments[i]);
}
}
//arguments包含所有参数，我们有时后想使用多余的参数来进行附加操作，需排除已有的参数
//rest 获取除了已经定义所有参数之外的参数
function demo(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}//rest参数只能写在最后面，必须以...标识
3.2 变量作用域
在JavaScript中，var定义变量时实际是有作用域的
假设在函数体中声明，则在函数体外不可以使用（可用闭包实现）
function qj(){
var x = 1;
x = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名，只要在函数内部就不冲突
function qj(){
var x = 1;
x = x + 1;
}
function qj2(){
var x = 'A';
x = x + 1;
}
内部函数可以访问外部函数的成员，反之则不行
function qj(){
var x = 1;
//内部函数可以访问外部函数的成员，反之不行
function qj2(){
var y = x + 1; //2
}
var z = y + 1;//Uncaught ReferenceError: y is not defined
}
假设内部函数变量和外部函数的变量重名，不影响
function qj(){
var x = 1;
function qj2(){
var x = 'A';
console.log('inner'+x);
}
qj2();
console.log('outer'+x);
}
qj();//假设在javaScript中函数查找变量从自身函数开始 由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
提升变量作用域
function qj(){
var x = "x" + y;//y undefined
console.log(x);
var y = 'y';
} //js执行引擎自动提升了y的声明，但是不会提升变量y的赋值
这是在JavaScript建立之初就存在的特性。养成规范，所有变量定义在函数的头部，不要乱放以便代码的维护
function qj2(){
var x = 1,
y = x + 1,
z,i,a;//undefined
//之后随意用
}
全局变量
//全局变量
x = 1;
function f(){
console.log(x);
}
f();
console.log(x);
//全局对象window
var x = 'xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下
alert()这个函数本身也是一个window变量;
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
//old_alert(X);
window.alert = function(){
};
//发现alert()失效了
window.alert(123);
//恢复
window.alert = old_alert;
window.alert(456);
javascript实际上只有一个全局作用域，任何变量（函数也可视为变量），假设没有函数作用范围内找到就会向外查找，如果在全局作用域都没有找到，就会报错ReferenceError
规范
由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件使用了相同的全局变量，冲突->如何减少冲突？
定义唯一的全局变量
var KuangApp = {};
//定义全局变量
KuangApp.name = 'kuangshen';
KuangApp.add = function(a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题 jQuery = $
局部作用域let
function aaa(){
for(var i = 0;i < 100; i++){//for(let i = 0;i < 100; i++){
console.log(i);
}
console.log(i+1);//使用let UnCaught ReferenceError: i is not defined
}
建议大家都是用let定义局部作用域的变量
常量const
//ES6之前，只能使用大写字母来定义常量，建议不要修改
var PI = '3.14';
console.log(PI);
PI = '213';
console.log(PI);
const PI = '3.14';//只读变量，修改会出错
3.3 方法
var sunset = {
name: '秦将',
birth: 2020,
age: function(){
var now = new Date().getFullYear();
return now - this.birth;
}
}
//属性 sunset.name
//方法 sunset.age() 一定要带()
function getAge(){
var now = new Date().getFullYear();
return now - this.birth;//this是无法指向的，他是默认指向调用它的那个对象
}
var sunset = {
name: '秦将',
birth: 2020,
age: getAge
}
在js中可以控制this的指向 ==>apply的用法
getAge.apply(sunset,[]);//this指向sunset，参数为空
4. 常用对象
标准对象
typeof 123 "number"
typeof '123' "String"
typeof true "boolean"
typeof [] "object"
typeof {} "object"
typeof Math.abs "function"
typeof undefined "undefined"
4.1 Date
'use strict';
let now = new Date();
console.log(now); //Tue Mar 02 2021 18:18:44 GMT+0800 (中国标准时间)
console.log(now.getFullYear());
console.log(now.getMonth());
console.log(now.getDate());//日
console.log(now.getDay());//星期几
console.log(now.getHours());
console.log(now.getMinutes());
console.log(now.getSeconds());
console.log(now.getTime());//时间戳
console.log(new Date(1614680477835));
console.log(new Date(1614680477835))
VM124:1 Tue Mar 02 2021 18:21:17 GMT+0800 (中国标准时间)
now.toLocaleString()
"2021/3/2 下午6:21:17"
4.2 Json
json是什么 轻量级的数据交换格式，早期所有数据传输习惯使用XML格式！
在Javascript 一切皆为对象，任何js支持的类型都可以用json来代替
格式： 对象都用大括号，数组list都用中括号， 所有的键值对都使用 key:value
var user = {
name: "qianjiang",
age: 13,
sex: "男"
}
//对象转化为json对象
console.log(JSON.stringify(user));
console.log(JSON.parse('{"name":"qianjiang","age":13,"sex":"男"}'));//将json字符串转化为对象
JSON和js的区别
var obj = {a: 'hello', b:'hellob'};
var json = '{"a": "hello", "b": "hellob"}';
4.3 Ajax
原生的js写法 xhr异步请求
jQuery 封装好的 方法 $("#name").ajax("")
axios 请求
5.面向对象编程
5.1什么是面向对象
JavaScript、java、C# 面向对象：javascript有些区别！
类：模板
对象： 类的实例
var user = {
name: "qianjiang",
age: 13,
run : function () {
console.log(this.name + "running...");
}
}
var xiaoming = {
name: "xiaoming"
}
xiaoming.__proto__ = user;//把小明原型指向user
xiaoming.run();
- class继承
class 关键字是在ES6引入的
function Student(name){
this.name = name;
};
Student.prototype.hello = function(){
alert("hello");
};
//ES6之后
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
- 继承
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
class XiaoStudent extends Student{
constructor(name,grade){
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一名小学生!');
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong",1);
xiaoming.hello();
xiaohong.myGrade();
6. 操作BOM对象
JavaScript和浏览器的关系 JavaScript的诞生就是为了让他能在浏览器中运行
BOM：浏览器对象模型 IE 6~11 Chrome Safari FireFox
window 对象 代表浏览器窗口
window.alert()
window.innerHeight() window.outerWidth()
window.innerWidth() window.outerWidth() //可以调整浏览器窗口试试
window.navigator 封装了浏览器的信息
navigator.appName navigator.appVersion navigator.userAgent navigator.platform
大多数时候我们不会使用 navigator 对象，因为会被人为修改，不建议使用这些属性来判断和编写代码
screen 代表屏幕尺寸
screen.width
screen.height
location(*)
location 代表当前页面的URL信息
host:"www.baidu.com" 代表主机
href:"https://www.baidu.com/" 代表当前位置
protocol: "https:"
reload:f reload() //刷新网页
location.assign('https://cn.bing.com/search')
document
document 代表当前的页面 HTML DOM文档树
document.title
document.title = "帅气的研究生";
//获取具体文档树节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
document可以直接获取cookie
document.cookie 劫持cookie原理 服务器端可以设置 httpOnly
history
history.back() 前进
history.forwward() 后退
7. 操作DOM对象
DOM： 文档对象模型
核心：浏览器网页就是一个DOM树形结构
更新：更新DOM节点
遍历DOM节点： 得到DOM节点
删除： 删除一个DOM节点
添加： 添加一个新的节点 要操作一个DOM节点就要先获得这个DOM节点
//对应css选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('h1');
var father = document.getElementById('father');
var childrens = father.children;//获取父节点下的子节点
father.firstChild
father.lastChild
这是原生代码，之后们尽量使用jQuery
<div id="id1">
</div>
<script>
id1 = document.getElementById("id1");
console.log(id1);
id1.innerText = '123';//修改文本的值
id1.innerHTML = '<strong>123</strong>'; //解析html文本标签
id1.style.color = 'red'; //属性使用字符串
id1.style.fontSize = '200px'; //驼峰命名问题
id1.style.padding = '2em';
</script>
删除节点
先获取父节点然后通过父节点删除自己
删除操作是动态删除，删除多个节点的时候删除操作是动态变化的
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
father = self.parentElement
father.removeChild(self);
</script>
插入节点
我们获得了某个DOM节点，假设这个dom节点是空的，我们通过innnerHTML就可以增加一个元素，但是这个DOM节点已经存在元素了，我们就不能使用此方法进行增加元素
追加 append
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
let js = document.getElementById('js'), //已存在的节点
list = document.getElementById('list');
list.appendChild(js);
//通过js创建一个新的节点
let newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = "Hello world!";
list.appendChild(newP);
//创建一个标签节点,通过这个属性可以设置任意的值
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
list.appendChild(myScript);
//可以创建一个style标签
var myStyle = document.createElement('style');//创建一个空Style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color: chartreuse;}';//设置标签内容
let head = document.getElementsByTagName('head');
console.log(head);
head[0].appendChild(myStyle);
</script>
insert
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
let ee = document.getElementById('ee');
let js = document.getElementById('js');
let list = document.getElementById('list');
//要包含的节点，insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
</script>
8. 操作表单
表单是什么 form DOM树 表单的目的：提交信息
- 文本框 text
- 密码框
- 下拉框 radio
- 单选框多选框 checkbox
- 隐藏域 hidden
- 密码框 password
<form action="post">
<p>
<span>用户名:</span><input type="text" id="username">
</p>
<p>
<span>性别:</span>
<input id="boy" type="radio" name="sex" value="men">男
<input id="girl" type="radio" name="sex" value="women">女
</p>
</form>
<script>
let username = document.getElementById('username');
let boy_radio = document.getElementById('boy');
let girl_radio = document.getElementById('girl');
//得到输入框的信息
username.value = "123";
//对于单选框多选框等等固定的值，boy_radio.value只能取到当前的值 boy_radio.checked 可以查看选项是否被选中
boy_radio.checked = true;
</script>
提交表单
<!--表单绑定提交事件
onsubmit = 绑定一个提交检测的函数， true false
将这个结果返回给表单 使用onsubmit接收-->
<form action="#" method="post" onsubmit="test()">
<p>
<span>用户名:</span><input type="text" id="username">
</p>
<p>
<span>密码:</span><input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<button type="button" onclick="test()">提交</button>
</form>
<script>
function test(){
alert("123");
let uname = document.getElementById('username');
let pwd = document.getElementById('input-password');
let md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
//可以校验判断表单内容，true就是通过提交，false就是阻止提交
return true;
}
</script>
9. jQuery
javascript 和 jQuery 库 里面存在大量的javascript函数；
获取jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<!--
公式： $(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
document.getElementById('id');
$('#test-jquery').click(function(){
alert('hello,jQuery!');
})
</script>
</body>
</html>
选择器
//原生js，选择器少不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器他全都能用
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click(); //class选择器
文档工具站: http://jquery.cuishifeng.cn/
事件
鼠标事件 键盘事件 其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery-3.5.1.js"></script>
<style>
#divMove{
width: 500px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
mouse: <span id="mouseMove"></span>
<div id="divMove">
<!--获取鼠标当前的位置坐标-->
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后响应事件
$(document).ready(function(){
})
$(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text('x:'+e.pageX + 'y:'+ e.pageY)
})
})
</script>
</body>
</html>
操作DOM
节点文本操作
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
//document.getElementById('')
$('#test-ul li[name=python]').text();//属性选择器获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值
</script>
css操作
$('#test-ul li[name=python]').css("color","blue");
元素的显示与隐藏: display = none;
$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();
娱乐测试
$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();
未来ajax
$('#form').ajax()
$.ajax({url: "test.html", context:document.body, success:function(){
$this.addClass("done");
}})
扫一扫
1532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
