Web三剑客-JS笔记_飞道的博客

Web三剑客-JS笔记

2021-05-15 07:59 191人阅读评论(0)

JavaScript

弱脚本语言。

引入JavaScript

写JS的方式：

写在HTML里面

<head>
<!--在script标签内，写JS代码-->
<script>
    alert("Hello,world");
</script>
</head>

写在.js里面

<head>
<!--外部引入，script必须成对出现-->
<script src="js/xx.js"></script>
</head>

js/xx.js：

 alert("Hello,world");//弹窗

基本语法

JS严格区分大小写

注释

//+空格+内容

定义变量

没有类型的概念。

var 变量名 = 变量值;

打印变量

console.log(xx);//在浏览器的控制台打印变量

数据类型

数值，文本，图形，音频，视频…

number：js不区分小数和整数，NaN–不是一个数字，Infinity–无限大

字符串：‘abc’，“abc”

比较运算符：

==：等于(类型不一样，值一样，也会判断为true)

=== ：绝对等于(类型一样，值一样，判断为true)

注意：

NaN === NaN：返回false，只能使用isNaN(NaN)来判断

尽量避免使用浮点数损失，存在精度损失

数组

js数组中元素类型可以不相同

创建数组：

var arr = [1,2,3,“ll”,null,true]; //推荐使用
new Array(1,2,3,“ll”,null,true);

注意：数组越界返回是undefined未定义

对象

对象是大括号，数组是中括号。

var person = {
    
    name : "xxx",
    age : 3,
    tags : ['js','java']
}
person.name//取对象的值

严格检查模式

在ES6中使用let作为变量类型，设置为局部变量

'use strict';//严格检查模式，预防javaScript的随意性导致产生的一些问题，必须写在js的第一行

数据类型

字符串

正常字符串使用’‘和""进行包裹，注意转移字符\，并使用’'和""进行包裹。

\'
\n
\u4e2d  // \u#### Unicode字符
\x41  //Ascii字符

多行字符串

//tab 上面的符号`
var msg = `hell
oo
ni
`

模板字符串

let str = "xx";
let mas = `hello,${
     str}`;//使用el表达式

字符串长度

str.length

字符串元素打印

str[0]

字符串元素不可变

大小写和下标

//是方法
str.toUpperCase();
str.toLowerCase();
str.indexOf('t');

截取

substring(1,3); //包含前面不包含后面

substring(1); //从第一个字符串截取到最后一个字符串

数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5];
//长度
arr.length
//直接复制
arr[0]=0;
arr.length = 6;//数组大小可变
arr = [1,2,3,4,5,empty];
arr[5] //输出undefined

indexOf(元素)：通过元素获得下标索引，不存在则返回-1

注意：字符串"1"和数组1是不一样的

slice() ：截取Array的一部分，返回一个新的数组，类似于String中的substring

push：放入元素到尾部，pop：丢掉尾部的元素

unshift()：放入元素到头部，shift()：弹出一个头部元素

sort()：排序

reverse()：元素反转

concat(xx)：拼接xx到数组中 arr.concat(xx)，concat没有修改数组，只是返回了一个新数组。

join()：打印拼接数组，使用特定的字符串拼接

fill(1)：将数组中全部填充为1

多维数组

var arr = [[1,2],[3,4];

对象

若干个键值对，键是字符串，值是任意对象。

var 对象名 = {
   
    属性名:属性值,
    属性名:属性值
}

var person = {
   
    name:"Bob",
    age:12
}

//赋值
person.name = "ethan"

使用一个不存在的对象属性，不会保存，只会返回undefined

删除属性

delete person.name

动态的添加

直接给新的属性添加值即可

person.email = "xxx@qq.com"

判断存在

'age' in person //返回true
//继承
'toString' in Person //返回true
//判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty('toString') //返回false

流程控制

if，while，for和java一致

数组循环

var arr = [1,2,3,4,5];
//函数
arr.forEach( function (value) ){
   
          console.log(value); }
//forin
for( var num in arr ){
    
    console.log(num); //遍历出来的是索引，属性名
    console.log(arr[num]);//遍历出来的是值
}

Map和Set

ES6新特性

Map

var map = new Map([["tom",100],["java",10]]);
var age =  map.get("tom");//通过key获得value
map.set('admin',100);//admin=>100
map.delete("tom");

Set

无序不重复的集合

var set = new Set([3,2,1,1,1]); //结果为[3,2,1]
set.add(5);
set.delete(1);
console.log(Array.from(set))//输出set所有元素
console.log(set.has(3));//set是否包含3

iterator

var arr = [1,2,3,4,5];
for( let num of arr ){
    
    console.log(num); //遍历出来的是值
}

var map = new Map([["tom",100],["java",10]]);
for( let num of map ){
     //遍历map
    console.log(num);
}

var set = new Set(3,2,1,1,1); //结果为3,2,1
for( let num of set ){
     //遍历set
    console.log(num);
}

函数

JavaScript中,函数实际上是Function类型的实例,也就是说函数就是对象*。

定义

方式一：

绝对值函数

function abs(x){
   
    if(x >= 0){
   
        return x;
    }else{
   
        return -x;
    }
}//使用abs()返回NaN，没有执行return，会返回undefined

方式二：

var abs = function(x){
    } //匿名函数

参数问题：JS可以传递任意个参数亦可以不传参数

var abs = function(x){
    
    if (typeof x !== 'number'){
   
        throw 'Not a number'; //手动抛出异常，解决参数问题
    }
    if(x >= 0){
   
            return x;
        }else{
   
            return -x;
        }
} //匿名函数

arguments

arguments是一个JS赠送的关键字，代表传递进来的所有参数，是一个列表。即参数有几个，一般使用于隐藏参数。

var abs = function(x,){
    
    for (var i = 0; i<argument.length; i++){
   
           console.log(argument[i]); //打印所有传递的参数，包括第一个
    }
} //匿名函数

rest

rest获取除了已定义的参数值外地所有参数~。rest参数只能写在最后面，必须用…表示。

var abs = function(x,b,...rest){
    
    console.log(rest);
} //匿名函数

变量作用域

局部变量和Java一样，会覆盖全局变量，即就近原则使用。外部不能访问内部。

默认所有的全局变量，都会自动绑定在window对象下。

alert()：弹出窗函数也是window变量。

var alert1= window.alert();
alert1(12);//可以弹出12
window.alert = function(){
    } //alert()失效了
//恢复
window.alert()=alert1;
window.alert(12)//可以弹出12

JS实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用返回内找到，只能向外查找，如果在全局作用域没有找到，报错*ReferenceError。

唯一全局变量

由于全局变量都是在window变量上，但多个js文件要使用相同全局变量，需要减少冲突。

//唯一全局变量
var XX = {
   };
//定义全局变量
XX.name = 'xx';
XX.add = function(a,b) {
     };

把自己的代码全部放入在自己定义的唯一空间名字中。

局部作用域 let

常量 const

const PI = '3.14';

方法

定义方法

方法就是把函数放在对象里面，对象只有两个对象：属性和方法

//方法一
var xx{
   
    name:"xx",
    birth:2000,
    age:funtion(){
   
    	var now = new.Data().getFullYear();
        return new - this.birth;
    }
};
//方法二
function gerAge(){
   
   var now = new.Data().getFullYear();
   return new - this.birth; //this默认指向调用它的那个对象
};
var xx{
   
    name:"xx",
    birth:2000,
    age:getAge
};

//属性
xx.name;
//调用
xx.age()//方法一定要带括号

//调用
getAge(xx,[])//this指向了xx，参数为空，此时可以使用getAge，因为可以获取xx的birth

apply()

apply用来指定this指向的对象

内部调用

typeof [] //"object"
typeof NaN //"number"
typeof undefined //"undefined"

Date

var now = new Date();
now.getFullYear();//年
now.getMonth();//月 0~11月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳
now = new Date(now.getTime());
now.toLocalString();//注意调用是一个方法不是一个属性
now.toGMTString();

JSON

Json是一种轻量级的数据交换格式。JSON本身就是一个格式化的字符串

是一种比较理想的数据交换语言。有效提升网络传输效率。

在JS中一切皆为对象，任何js支持的类型都可以用JSON表示

格式：

对象：{ }

数组：[ ]

键值对：key:value

{
   name:'xx'}; //对象
var user = {
   name:'xx' , age:3};//对象

//对象转换为json字符串
var Jsonuser = JSON.stringify(user);//结果：'{"name":"xx","age":"3"}'

//json字符串转化为对象，参数为json字符串
var obj = JSON.parse("{'name':'xx','age':'3'}");

Ajax

原生的js写法 xhr异步请求

面向对象

类：模板

对象：具体的实例

JS的区别

原型

引用其他的对象的属性，进行使用，先复制再修改

//对象.__proto__ = 原型对象
var Student = {
   
    name:"xx",
    run:function(){
   
        xxx
    }
};

var YY = {
    name:"YY"};
YY.__proto__ = user;//YY的原型是Student
YY.run() //可以运行

class继承

ES6之前

function Student(name){
   
    this.name = name;
}
//添加一个hello方法，只能给其原型添加一个方法
Student.prototype.hello = function(){
   alert('xx')}

ES6之后

//定义一个学生的类，属性，方法
class Student{
   
    constructor(name){
   
        this.name = name;
    }
    hello(){
   
         alert('xx')
    }
}
//使用
var xx = new Student("xxx");
xx.hello();

//继承
//原型指向Student
class newStudent extends Student{
   
    constructor(name,grade){
     //constructor是一个构造方法，用来接收参数
        super(name);
        this.grade = grade;
    }
    myGrade(){
   
         alert('xx')
    }
    function newStudent(name,age){
      //构造函数和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）
    }
}
var xx = new newStudent("xxx",22);
Student.prototype === xx.__proto__ //显示原型==隐式原型

本质：查看对象原型。

原型链

每一个对象都有自己的原型对象

BOM*

浏览器对象模型

windows

浏览器窗口

window.innerHeight
window.outerHeight

Navigator

封装浏览器的信息

navigator.appName
navigator.appVersion
navigator.userAgent

screen

屏幕尺寸

screen.width
screen.height

location*

host：主机
herf：主页
protocol：协议
reload：重新加载，刷新网页
location.assign(‘https://xxxx.com’)：重写定位，设置新地址

document

当前页面，HTML DOM文档树

title：标题

document.getElementById(“xx”)//获取id===xx的页面，获取具体的文档树节点

<body>
    <dl id="xx">
    	<dt>xxx</dt>
        <dd>yyy</dd>
    </dl>
</body>
<script>
	var dl = document.getElementById("xx");
</script>

获取具体的文档树节点，可以动态的添加删除节点，可以动态修改页面

获取cookie

客户端的本地的信息，一般为用户账号密码信息

document.cookie

服务器端可以设置：cookie:httpOnly，保证安全性

history

浏览器历史记录，不建议使用

history.back()
history.forward()

DOM

文档对象模型，动态操作CSS，进行更改网页

浏览器网页就是Dom树形结构，要操作Dom节点，就先获取的这个Dom节点(标签等等)

获取

//对应css选择器
var h1 = document.getElementById("h1");
var id = document.getElementById("id");//id=id
var father = document.getElementById("father");//class=father
//class返回的是一个数组
//可以获取父节点下面的所有子节点
father.children
father.firstchildren
father.lastchildren

更新

h1.innerText='222';//修改文本的值
h1.innerHTML='222';//解析HTML文本标签
h1.style.color = 'red'//设置颜色
h1.style.fontSize = '200px'//字体大小，_ 转 驼峰命名
h1.style.padding = '2em'//内边距

删除

步骤：先获取父节点，再通过父节点删除自己

var self = document.getElementById('p1');//因为class返回的是一个数组，因此需要self[0].xxxx进行获取父节点。如果是Id选择器则可以直接获取
var father = p1.parentElement;
father.removeChild(self);

//删除是一个动态的过程，child是时刻变化的
father.children = [1,2,3,4]
father.removeChild(father.children[0]);//删除1
father.removeChild(father.children[0]);//删除2
father.removeChild(father.children[1]);//删除4

插入

获取某个Dom节点，如果这个节点为空，通过innerHTML可以添加一个元素，但是这个Dom节点已经有元素了，就会产生覆盖。

var js = document.getElementById('js')//已存在节点
var list = document.getElementById('list')
list.appendChild(js);

var new = document.createElement('p');//创建一个新的p标签
new.id = 'newp';
new.innerText = 'xxxx';

var myScript = document.createElement('script');//创建一个新标签
//添加类型===<script type='text'></script>
myScript.setAttribute('type','text');//通过这个属性可以设置任意值


//获得元素
//为body设置颜色方式1
var body = document.getElementByTagName('body');//得到的是数组
body[0].style.backgroud = 'red';


//为body设置颜色方式2
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
//直接再网页的里面进行设置
myStyle.innerHTML = 'body{background-color:chaetreuse; }';
document.getElementByTagName('head')[0].appendChile(myStyle);

insert

var ee = document.getElementById('ee')//
var js = document.getElementById('js')//
var list = document.getElementById('list')//ee的父节点
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

操作表单

目的：提交信息

//输入框
var input = document.getElementById('username');
input.value//获取值
input.value = 'xxx';//更改值

var b_radio = document.getElementById('boy');//性别单选框
var g_radio = document.getElementById('girl');

//对于单选框，多选框固定的值，value只能获取当前的值
b_radio.checked;//查看返回结果，true则选中

提交表单

<script src="https//cdn.bootcss.com/blueimp-md5/2.10.0/js/md5/min.js"> //MD5工具类 网站
</script>
<form actiom= "#.html" method = "post" >
    <input type="text" id="username" name="username">
    <input type="password" id="password" name="password">
	<!--绑定事件onchlik，点击-->
	<botton type="submit" onchlik="xxx()">upload</botton>    
</form>

<script>
	function xxx(){
    
        var input = document.getElementById('username');
        var pwd = document.getElementById('password');
        //MD5 算法
        pwd.value = md5(pwd);
    }    
</script>

高级提交，前端提交修改

<script src="https//cdn.bootcss.com/blueimp-md5/2.10.0/js/md5/min.js"> //MD5工具类 网站
</script>
<!--表单绑定提交事件
onsubmit，绑定一个提交检测的函数，将结果返回给表单，使用onsubmit 接收
-->
<form actiom= "#.html" method = "post" οnsubmit="return xxx()">
    <p>
		<input type="text" id="username" name="username">
    </p> 
    <p>
    	<input type="password" id="input-password" >
    </p>
    <input type="hidden" id="md5-password" name= "password">
	<!--绑定事件onchlik，点击-->
	<botton type="submit" >upload</botton>    
</form>

<script>
	function xxx(){
    
        var input = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        
        //MD5 算法
        md5pwd.value = md5(pwd.value);
        
        return true;//通过提交，false阻止提交
    }    
</script>

jQuery

工具类，库，存在大量的JS函数。

CDN jQuery：在线链接

公式： $(s e l e c t o r) . a c t i o n () ，$ (选择器).事件(事件函数)

var input = document.getElementById('username');
id.click(funcion(){
    alert('x'); });
//与上面操作一致
$('username').click(funcion(){
    alert('x'); }   )

选择器

$('p').click() //标签选择器
$('#id').click() //id选择器
$('.class').click() //class选择器

文档工具站：https://jquery.cuishifeng.cn/

事件

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标。

鼠标点击事件

<head>
    <style>
        #divMove{
    
            width:500px;
            height:500px;
            border:1px solid red;
        }
    </style>
</head>

<body>
mouse:<span id="mouseMove"></span>
<div id="divMove">xxx<x/div>
    
<script>
    //当网页元素加载完，响应事件
	//$(document).ready(function(){ });
    $(function(){
     });//===$(document).ready(function(){ });
    $(function(){
     
    	$('#divMove').mousemove(function(e){
     
        	$('#mouseMove').text('x'+e.pageX + 'y' +e.pageY)
        })
    });  
</script>
</body>

操作DOM

节点文本

//<ul id="ul1"> <li name="python"></li> </ul>
$('ul1 li[name="python"]').text() //获得值
$('ul1 li[name="python"]').text('设置值') //设置值
$('ul1').HTML('<strong>123</strong>') //设置值

CSS操作

$('ul1 li[name="python"]').css({
   "color","red"}) //获得值

元素的显示和隐藏

本质：display:none;

$('ul1 li[name="python"]').show()
$('ul1 li[name="python"]').hide()

ajax

$('#from').ajax({
    url: "xx.html", context:xxx,success:function(){
    }
                });

小技巧

巩固JS看jQuery源码，或者游戏源码
巩固HTMl，或者CSS，扒网站，改动

转载：https://blog.csdn.net/weixin_38022166/article/details/116566409

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章