2021-02-22

030_JavaScript

目录
  • 前端知识体系
  • 什么是JavaScript
  • 快速入门
    • 引入JavaScript
    • 基本语法入门
    • 数据类型
      • Number 数字
      • String 字符串
      • Boolean 布尔
      • Null 对空
      • Undefined 未定义
      • Symbol 独一无二的值
      • Array 数组
      • Object 对象
      • Function 函数
    • 严格检查模式strict
  • 数据类型
    • 字符串
    • 数组
    • 对象
    • 流程控制
    • Map和Set ES6新特性
  • 函数
    • 定义函数
    • arguments
    • rest
    • 变量的作用域
    • let 局部变量声明
    • const 常量声明 只读变量
    • 方法
  • 内部对象
    • Date
    • Json
  • 面向对象编程
    • 原型继承
    • class继承
  • 操作BOM对象
  • 操作DOM对象
  • 操作表单（MD5加密密码）
  • jQuery
    • 下载引用jQuery库
    • 公式 $(selector).action()
    • jQuery与JavaScript对比
    • 事件
    • 操作DOM元素
  • 小技巧
    • 巩固JS 看jQuery源码，看小游戏源码-源码之家
    • 巩固HTML/CSS 扒网站，down下来，对应修改看效果


前端知识体系

image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png

什么是JavaScript

JavaScript是一门世界上最流行的脚本语言。
ECMAScript可以理解为是JavaScript的一个标准。
最新版本es6。
但是大部分浏览器还只停留在支持es5代码上。
开发环境和生产环境版本不一致。

快速入门

引入JavaScript

  1. 内部标签
  2. 外部引入
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--内部标签--> <script>  // alert('hello,world'); </script> <!--外部引入--> <script src="js/main.js"></script></head><body></body></html>
alert('hello,world');

基本语法入门

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script>  // 1.定义变量 变量类型 变量名 = 变量值;  var num = 1;  // 2.条件控制  alert(num);  if (2>1) {   alert("true");  }  // 3.在浏览器控制台打印变量  console.log(num); </script></head><body></body></html>

数据类型

Number 数字

js不区分整数和小数

 123 // 整数123123.1 // 浮点数123.11.231e2 // 科学计数法123.1-123 // 负数-123NaN // not a numberNaNInfinity // 表示无限大Infinity

String 字符串

'abc'"abc""abc""abc"

Boolean 布尔

console.log(2>1)VM520:1 trueconsole.log(2<1)VM568:1 false

Null 对空

Undefined 未定义

Symbol 独一无二的值

Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

Array 数组

var arr = [1,2,3,4,'ab',null,true];new Array(1,2,3,4,'ab',null,true);console.log(arr[2]);

Object 对象

var person = { name:'zhangyq', age:18, tags:['java','js','web']}console.log(person.age);

Function 函数

严格检查模式strict

/*前提：IDEA需要设置支持ES6语法'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题必须写在JavaScript的第一行局部变量建议都使用let去定义，如：let i = 1;*///严格检查模式strict，严格加成模式下，i = 1报错'use strict';//全局变量//i = 1;

IDEA设置支持ES6语法
image.png

数据类型

字符串

'use strict';// 1.正常字符串使用单引号或双引号包裹console.log('a');console.log("a");// 2.注意转义字符console.log('a\'');console.log("a\'");console.log('a\nb');console.log('\u4e2d'); // Unicodeconsole.log('\x41'); // Ascll// 3.多行字符串编写，使用反引号`var msg = `helloworld你好`;console.log(msg);// 4.模板字符串，使用反引号`和$let name='zhangyq';console.log(`nihao,${name}`);

数组

// 数组可以包含任意的数据类型var arr=[0,1,2,3,4,5];// slice() 截取数组的一部分，返回一个新的数组var arr1=arr.slice(3);// push() 压入到尾部arr.push('a','b');// pop() 弹出最后一个arr.pop();// unshift() 压入到头部arr.unshift('a','b');// shift(); 弹出第一个arr.shift();// sort() 排序var arr=['B','C','A'];arr.sort();console.log(arr);// reverse() 反转arr.reverse();console.log(arr);// concat() 拼接，返回新的数组，不改变原来的数组var arr2=arr.concat([1,2,3]);console.log(arr2);console.log(arr);// join() 打印拼接数组，使用特定的字符串连接console.log(arr.join('-'));// 多维数组var arr=[[1,2],[3,4],['a','b']];

对象

var person={ name:"zhangyq", age:18, phone:"13299998888"}person.name="zhangsf";//删除对象属性delete person.name//添加对象属性person.email="zhangsf@163.com"//判断属性是否在这个对象中'age' in person//判断方法是否在这个对象中'toString' in person判断属性或方法是否是自身拥有的person.hasOwnProperty('age');person.hasOwnProperty('toString');

流程控制

  1. if判断
  2. while循环
  3. for循环
  4. forEach循环
  5. for...in
  6. for...of
//forEach循环var arr=[1,2,2,3,4,5];arr.forEach(function(value){ console.log(value);});//for...in的值是索引for(var index in arr){ console.log(arr[index]);}//for...of循环的是具体的值for(var v of arr){ console.log(v);}

Map和Set ES6新特性

//Mapvar map=new Map([['tom',100],['jack',90],['join',80]]);var name=map.get('tom');map.set('admin',123);map.delete('admin');//Set 无序不重复集合var set=new Set([1,2,2,3,3]); // set可以去重set.add(4);set.delete(1);console.log(set.has(2)); // 是否包含某个元素

函数

定义函数

  1. 定义方式一
// 一旦执行到return代表函数结束，返回结果！// 如果没有执行return，函数执行完也会返回结果，结果就是undefined。function abs(x){ if(x>=0){ return x; }else{ return -x; }}abs(-10);
  1. 定义方式二
// function(x){...}是匿名函数，通过abs就可以调用函数！var abs=function(x){ if(x>=0){ return x; }else{ return -x; }}abs(-10);

JavaScript可以传任意个参数，也可以不传递参数！

var abs=function(x){ //手动抛出异常 if(typeof x !== 'number'){ throw 'Not a Number'; } if(x>=0){ return x; }else{ return -x; }}

arguments

  1. arguments代表所有的参数，是一个数组
var abs=function(x){ if(arguments.length=1){ return x; }else if(arguments.length>1){ return arguments.length; }}

rest

  1. ES6引入的新特性，获取除了已经定义的参数之外的所有参数
  2. rest参数只能写在最后面，必须用...标识
function fun(a,b,...rest){ console.log("a->"+a); console.log("b->"+b); console.log(rest);}

变量的作用域

  1. 函数体中声明的变量，函数体外不可以使用（非要实现的话，可以研究下闭包）
function fun(){ var x=1; x=x+1;}x=x+2; // Uncaught ReferenceError: x is not defined
  1. 内部函数可以访问外部函数的变量，反之则不行
function funA(){ var x=1; function funB(){ var y=x+1; } var z=y+1; // Uncaught ReferenceError: y is not defined}
  1. 全局变量：定义在函数外部
var x=1;function f(){ console.log(x);}console.log(x);
  1. 全局对象window：默认所有的全局变量，都会自动绑定在window对象下
var x=1;console.log("x->"+x);console.log("window.x->"+window.x);
  1. JavaScript实际只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，直到全局作用域window也没有找到，就会报错
  2. 由于所有的全局变量都会绑定在window上，如果不同的js文件，使用了相同的全局变量，会冲突，如何减少冲突？把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题
// 唯一全局变量var main={};//定义全局变量main.name='zhangyq';main.add=function(a,b){ return a+b;}

let 局部变量声明

function f(){ for(var i=0;i<100;i++){ console.log(i); } console.log(i+1); // 101 问题？i出了作用域还可以使用}

ES6 let关键字，解决局部作用域问题！

function f(){ for(let i=0;i<100;i++){ console.log(i); } console.log(i+1); // Uncaught ReferenceError: i is not defined}

建议使用let去定义局部作用域的变量

const 常量声明 只读变量

const PI=3.14; // 只读变量console.log(PI);pi=3.15; // TypeError: Assignment to constant variable

方法

  1. 方法就是把函数放在对象的里面
var qing={ name:'zhangyq', birth:2000, age:function(){ var now=new Date().gerFullYear(); return now-this.birth; }}qing.name;qing.age();
  1. apply指定调用方法的对象

内部对象

Date

方法自查

Json

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

var user={name:"zhangyq",age:18,sex:'男'}//对象转化为json字符串var jsonStr=JSON.stringify(user);//对象{name: "zhangyq", age: 18, sex: "男"}//json字符串{"name":"zhangyq","age":18,"sex":"男"}//json字符串转化为对象var obj=JSON.parse(jsonStr);

面向对象编程

原型继承

var user={name:"zhangyq",age:18,sex:'男'}var xiaoming={name:"xiaoming"}//xiaoming的原型是userxiaoming.__proto__=user/*xiaoming{name: "xiaoming"}name: "xiaoming"__proto__:age: 18name: "zhangyq"sex: "男"__proto__: Object*/

class继承

class关键字是在ES6引入的

//定义一个类，属性，方法class Student{ constructor(name){ this.name=name; } hello(){ alert('hello'); }}var xiaoming=new Student('xiaoming');var xiaohong=new Student('xiaohong');
//继承class XiaoStudent{ constructor(name,grade){ super(name); this.grade=grade; } myGrade(){ alert('我是一名小学生'); }}

操作BOM对象

  1. 浏览器介绍
    1. IE6~11
    2. Chrome
    3. Safari
    4. FireFox
  2. window 代表浏览器窗口
window.alert(1)window.innerHeightwindow.outerHeight
  1. navigator 封装了浏览器的信息
  2. screen 代表屏幕
screen.widthscreen.height
  1. location 代表当前页面的URL信息
location//刷新页面location.reload()//跳转页面location.assign('www.baidu.com');
  1. document 代表当前的页面
document.titledocument.title='我的页面'//获取cookiedocument.cookie
  1. history 代表浏览器历史记录
history.back()history.forward()

操作DOM对象

DOM 文档对象模型
浏览器网页就是一个DOM树形结构

<div id="div1"> <h1>标题一</h1> <p id="p1">p1</p> <p >p2</p></div>
//根据标签名查询var h1Array=document.getElementsByTagName('h1');//根据ID查询var p1=document.getElementById('p1');//根据class名查询var p2Array=document.getElementsByClassName('p2');var div1=document.getElementById('div1');//获取子节点var childrens=div1.children;//修改文本值p1.innerText='123';//修改htmlp1.innerHTML='<strong>123</strong>';//修改css样式p1.style.color='red';//删除节点，只能通过父节点删除子节点div1.removeChild(p1);p1.parentElement.removeChild(p1);div1.removeChild(div1.children[2]);div1.removeChild(div1.children[1]);div1.removeChild(div1.children[0]);//追加已有标签div1.appendChild(p2);//创建标签并追加var p4=document.createElement('p');p4.id='p4';p4.innerText='p4';p4.setAttribute('class','p2');div1.appendChild(p4);//插入p2节点到p1前div1.insertBefore(p2,p1);

操作表单（MD5加密密码）

<!--MD5工具类--><script src="https//cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script><form method="post" action="#"> <p><span><label>用户名 </label></span><input type="text" id="username" name="username"></p> <p><span><label>密码 </label></span><input type="password" id="password"></p> <input type="hidden" id="md5_password" name="password"> <p><button type="submit" onclick="submit()">提交</button></p></form>
//获取inputvar input_username=document.getElementById('username');//获取input的值var username=input_username.value;//修改input的值input_username.value='zhangyq';function submit(){ var username=document.getElementById('username').value; var password=document.getElementById('password').value; console.log(username); console.log(password); //MD5加密密码 md5_password=md5(password); console.log(md5_password); document.getElementById('md5_password').value=md5_password;}

jQuery

jQuery库 封装了大量JavaScript函数

下载引用jQuery库

下载：https://jquery.com

<!--引用在线或本地的--><!--在线版--><script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script><!--开发版--><script src="js/jquery-3.5.1.js"></script><!--生产压缩版--><script src="js/jquery-3.5.1.min.js"></script>

公式 $(selector).action()

<a id="a1"></a>
$('#a1').click(function(){ alert('hello');});

jQuery与JavaScript对比

//JavaScriptdocument.getElementsByTagName();document.getElementById();document.getElementsByClassName();//jQuery css中的选择器全部可以使用，如：层级选择器，伪类选择器，属性选择器等$('p').click();$('#id').click();$('.class').click();

事件

  1. 鼠标事件
  2. 键盘事件
  3. 其他事件

image.png

<style> #divMove{ width: 500px; height: 500px; border: 1px solid red; }</style><!--获取鼠标当前的坐标-->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>

操作DOM元素

$('#test_ul li[name=python]').text();$('#test_ul li[name=python]').html();$('#test_ul li[name=python]').css({"color":"#ff0011","background":"blue"});$('#test_ul li[name=python]').css("color","#ff0011");$('#test_ul li[name=python]').css("color");$('#test_ul li[name=python]').hide();$('#test_ul li[name=python]').show();$('#test_ul li[name=python]').toggle();$(window).width();$(window).height();

jQuery中文文档：https://jquery.cuishifeng.cn/

小技巧

巩固JS 看jQuery源码，看小游戏源码-源码之家

源码之家：https://www.mycodes.net/

巩固HTML/CSS 扒网站，down下来，对应修改看效果

扒网站步骤：

  1. 打开网站，选择Elements，选中代码，按Delete删除，不影响页面继续删除，影响页面回退，删除下一行，直到没有删除的为止。

image.png

  1. 右键选择Copy->Copy outerHTML，复制代码，然后将代码粘贴到自己的HTML文件中，修改相应的html和css。

image.png









原文转载：http://www.shaoqun.com/a/575573.html

跨境电商：https://www.ikjzd.com/

telegram：https://www.ikjzd.com/w/1734

出口易：https://www.ikjzd.com/w/1317


目录前端知识体系什么是JavaScript快速入门引入JavaScript基本语法入门数据类型Number数字String字符串Boolean布尔Null对空Undefined未定义Symbol独一无二的值Array数组Object对象Function函数严格检查模式strict数据类型字符串数组对象流程控制Map和SetES6新特性函数定义函数argumentsrest变量的作用域let局部变量
acedota：https://www.ikjzd.com/w/2070
cb体系：https://www.ikjzd.com/w/2063
一淘比价网：https://www.ikjzd.com/w/1698
口述：前夫想复婚却不亲自告诉我：http://lady.shaoqun.com/m/a/73668.html
转型跨境电商？中小企业应踏实"小战略"发展！：https://www.ikjzd.com/home/110328
研究了数百个爆款后，我们来说说如何选品？：https://www.ikjzd.com/home/134149
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)