文章目录
JavaScript
1.导入脚本
- 外部引入
//外部引入
<script src="js/qj.js"></script>
- 内部标签
//内部标签
<script>
//....
alert('hello world');
</script>
2.基本语法
- 变量
var a=1;//不能数字开头
number //不区分小数和整数
123//整数
123.1//浮点数
1.123e3//科学计数法
-99//负数
NaN//not a number
Infinity //无限大
- 字符串
'abc'
- 布尔值
1<2
true
false
逻辑运算
|| && !
== //类型不一样,值一样,也会为true,坚持不用这个比较
=== //绝对等于,类型和值都一样才为true
-
NaN===NaN(false) ,与数值和自己都不相等
-
浮点数问题,由精度问题
null 空
undefined 未定义
- 数组 中括号
var arr=[1,2,3,4,'hello',null,true]
new Array(1,2,3,4,'hello');
使用
arr[0] arr[1]
超过数组下标显示undefined,不会报错
- 对象 大括号
var person={
name:"qinn",
age:3,
tags:['js','java']
}
使用
person.name
每个属性使用逗号隔开,最后一个不需要
3.详细语法
- 全局变量
'use strict'//严格检查模式ES6,必须写在第一行
i=1;//全局,检查模式下错误
let i=1;//局部
P6,字符串
字符串
1.正常字符串
'' ""包裹
2.转义字符串
\'
\n
\u4e2d \u#### Unicode字符
\x41 A Ascll字符
3.多行字符
`hello
world
//Tab上面的引号,长字符串
4.模板字符串
let mes=`你好,${name}`
5.字符串长度
str.length
str[0]
str.indexOf('t')//返回索引
str.substring(1,2)
str.substring(1)//第一个到最后一个
//不可变,不可单个赋值
6.大小写转换
str.toUpperCase()
str.toLowerCase()
数组
arr=[1,2,3,4,5,"1","2"]
arr.length
arr[0]=1 //可变长度可赋值
arr.length=10//数组大小发生变化,大于剩下的undefined,小于丢失
arr.indexOf(2) //返回索引
arr.slice(3)//从第三个开始截取,返回一个新数组
arr.push('a','b')//压入尾部
arr.pop()//弹出尾部
arr.unshift('a','b')//头部压入
arr.shift()//头部弹出
arr.sort()//排序
arr.reverse()//元素反转
arr.concat([1,2,3])//数组拼接,返回新数组,没修改原数组
arr.join('-')//打印拼接数组 ,特定字符串连接C-B-A
多维数组
arr=[[1,2],["1",'2'],[3,4]];
arr[1][1]//'2'
arr.fill(1)//填充
arr.find(1)
对象
var 对象名={
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//{....}表示一个对象,键值对描述属性,最后一个属性不加,
//使用
person.age
person['age']
//使用不存在undefined
动态删减属性
delete person.name//返回true
person.hha='haha'//动态添加,给不存在的属性赋值,自动添加
判断属性值是否在对象中
//所有的键都是字符串
'age' in person //返回true
判断属性是自身拥有的
person.hasOwnProperty('toString') //返回false
流程控制
if 判断
var gae=3;
if(age>3){
alert('haha');
}else if(age<3){
}else{
}
循环
while(age<100){//避免死循环,关闭浏览器
age=age+1;
}
do{
age=age+1;
}while(age<100)
for(let i=0;i<100;i++){
}
var age=[12,3,34,5,]
//函数
age.forEach(function(value){
console.log(value)
})
for(var num in age){
console.log{num);
age[num];//num是索引
}
for(var num of age){
console.log{num);//num值
}
Map和Set
new Map();
new Set();
//Map
var m=new Map([['tom',100],['jack',80]]);
var name=map.get('tom');//100通过key获得value
map.set('admin',456);
map.delete('key')
//Set 无序不重复集合
var set=new Set([3,1,2,1,1]);//去除重复的值
//只有3,1,2
set.add(2);//value,添加
set.delete(1)//value,删除
set.has('value')//是否存在
迭代器
var map=new Map(['tom',100],['javk',134])
for(let x of map){
console.log(x)
}
var set=new Set([4,5,6])
for(let x of set){
console.log(x)
}
4.方法和函数
方法:放在对象里面的函数叫方法
- 定义函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
//如果没有执行return 也会返回结果,返回undefined
- 定义方式二
var abs=function(){//匿名函数,可以把结果赋值给abs
if(x>=0){
return x;
}else{
return -x;
}
}
//使用
abs(1);
- 参数
//可以传任意数量参数,也可以不传参数
abs(10,102030,10203)
//参数判断,抛出异常
if(typeof x!='number'){
throw "not a number";
}
- arguments是一个免费的关键字
//多个参数
//代表传递的所有参数是一个数组
function(x){
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
- rest 获取除了已定义参数以外的参数
function(a,b,...rest){
console.log(a);
console.log(b);
console.log(rest);//这是个数组
}
5.变量作用域
- 闭包
函数体内中声明,函数体外不可用
内部函数可以访问外部函数,反之不行
- 内部函数和外部变量重名
从自身函数开始,由内向外查找
- 提升变量的作用域
function qj(){
//等价 var y;
var x='x'+y;
console.log(x);
var y='y';
}
//x为undefined
//js引擎自动提升y的声明,但不会提升变量y的赋值。
//所有变量放在函数头部方便维护。
- 全局函数
放在函数外的变量就是全局变量
var x;
window.x
//默认所有的全局变量都会绑定在window对象上
alert();//也是一个变量,可以被赋值和修改
window.alert();//也绑定在window对象上
var lert=window.alert;
window.alert=function(){
}
//实际上只有一个全局作用域,任何变量(函数),函数作用域内没有,就会向外寻找
//全局作用域也没有则会报RefrenceError
- 常量
//以前默认大写为常量,现在的const不能修改
const IP='3.14';
全局变量都绑定到window上会有冲突
//唯一全局变量
var kuangApp={};
kuangApp.name='kuangshn';
kuangApp.add=function(a,b){
return a+b;
}
//把自己的代码放在自己定义的唯一空间名字中。
- 作用域let
let作用域解决作用域冲突问题
var有些地方出了作用域还能使用
let不行
//建议使用let定义局部作用域的变量
6.方法
- 定义方法
var kuangshen={
name:'亲情',
birth:2000,
age:function(){
var now=new Date().getFullYear();
return now - this.birth;
}
}
//调用
kuangshen.name
kuangshen.age();
- 第二种
function getAge(){
var now=new Date().getFullYear();
return now - this.birth;
}
var kuangshen={
name:'亲情',
birth:2000,
age:getAge
}
//调用
kuangshen.age();
getAge.apply(kuangshen,[])//第一个指向对象,第二个传入参数
7.日期
- Date
var now=new Date();
now.getFullYear();//年
now.getMonth();//0-11月
now.getDate();//日
now.getDay();//星期
now.getHours();//小时
now.getMinutes();//份
now.getSeconds();//秒
now.geTime();//时间戳
new Date(151124341411)//时间戳转换为时间
now.toLocaleString //本地时间
8.JSON
- javascript 中一切都是JSON
var user={
name:'qinjiang',
age:3,
sex:'男'
};
console.log(user);
var jsonstr=JSON.stringify(user);//JSON转化
var xiaoli=JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');//JSON解析,需要一个单引号
console.log(xiaoli);
9.面向对象
- 原型对象
var Student={
name:'',
age:1,
run:function(){
}
}
var xiaoming={
name:'xiaoming'
}
xiaoming._proto_=Student;//设置原型,可以调用Student的东西,可以理解为父类
- Class继承
class Student{
construction(name){
this.name=name;
}
hello(){
alert("hello")
}
}
var xiaoming=new Student("xiaoming");
xiaoming.hello();
- class继承
class XiaoStudent extends Student{
constructor(name,grade){
super(name)//父类的
yhis.grade=grade;//独有的
}
}
var xiaohong=new XiaoStudent('xiaohong',89);
-
本质,查看对象原型,原型指向Student,最终指向Object
-
_proto_ 原型链
10.BOM对象
-
window 代表浏览器窗口
-
Navigator 封装了浏览器信息
//一般不会使用这个对象,会被修改,不建议使用这些属性
-
screen 代表屏幕尺寸
-
location 代表当前页面URL信息
host:
href:
protocal
reload:f reload()//刷新
//设置新的地址
location.assign('https....')
- document 代表当前页面,HTML DOM文档树
var dl=document.getElementById('app');
- 获取cookie
document.cookie
- 劫持Cookie原理
<script src="aa.js"></script>
<!--获取你的cookie上传到他的服务器-->
-
服务器设置cookie:httpOnly
-
history 历史记录
history.back();//前近
history.forward();//后退
11.操作DOM对象(重点)
- 浏览器就是一个DOM树形结构
- 更新:更新DOM节点
- 遍历:遍历DOM节点
- 删除:删除一个DOM节点
- 添加:添加一个DOM节点
要操作一个DOM节点,需要获得这个DOM节点
document.getElementById('p1');//ID选择
document.getElementByTageName('h1');//标签选择
document.getElementByClassName('p2');//类选择
var father= document.getElementById('father');
var children father.children;//获取父节点下的所有子节点
father.firstChild;
father.lastChild;
//后面使用JQUERY-
- 更新节点
var id1= document.getElementById('p1');
id1.innerText='245';//修改内部值
id1.innerHTML='<strong>245</strong>';//修改HTML文本,自动转义
id1.style.color='red';//设置CSS样式
id1.style.fontSize='20px';//- 转驼峰命名问题
- 删除节点
//先获取父节点,再删除自己
var self=document.getElementById('p1');
var father=self.parentElement;
var father= document.getElementById('father');
father.removeChild(p1);
father.removeChild(father.children[0]);//删除完节点是变化的
- 插入节点
//获得某个DOM
//追加
var js=document.getElementById('js');
var list=document.getElementById('list');
list.appendChild(js);
var newP= document.createElement('p');//创建一个P标签,实现插入
newP.id="newp";
newP.innerText="Hello";
//创建一个标签节点,通过这个属性可以设置任意值
var myScript=document.createElement('script');
myScript.setAttribute('type','text/javascript');
list.appendChild(myScript);
//设置完需要插入进去才生效。
var body=document.createElement('script');
//插入前面节点
list.insertBefore(newNode,targetNode);
12.表单
P24
var input=document.getElementById('');//输入框
input.value='123';//读取或赋值
//多选框
<input type='radio' name="sex" value='man' id='boy'>男
<input type='radio' name="sex" value='women' id='girl'>女
var boy_radio=document.getElementById('man');//输入框
boy_radio.checked=true;//选中
boy_radio.value;
- 绑定事件
<button type="button" onclick=aaa()>提交</button>
function aaa(){
alert(1);
}
- 密码加密
导入MD5包
pwd.value=md5(pwd.value);
13.jQuery
- 是一个函数库,有很多封装好的js代码
1.官方下载导入
2.CDN jQuery,在线引入
- 公式
$(selector).action();//选择器,事件
<a href='' id='test-jquery'> 点我</a>
doucument.getElementById('id');//原版
$('#test-jquery').click(function(){//jQuery版
alert('hello');
});
- jQuery选择器
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//类选择器
//鼠标 键盘 其他事件
- 操作DOM
- Css操作
14.Ajax
- TODO