- 前端知识体系
- 什么是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下来，对应修改看效果
前端知识体系
什么是JavaScript
JavaScript是一门世界上最流行的脚本语言。
ECMAScript可以理解为是JavaScript的一个标准。
最新版本es6。
但是大部分浏览器还只停留在支持es5代码上。
开发环境和生产环境版本不一致。
快速入门
引入JavaScript
- 内部标签
- 外部引入
<!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 // 表示无限大InfinityString 字符串
'abc'"abc""abc""abc"Boolean 布尔
console.log(2>1)VM520:1 trueconsole.log(2<1)VM568:1 falseNull 对空
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语法
数据类型
字符串
'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');流程控制
- if判断
- while循环
- for循环
- forEach循环
- for...in
- 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)); // 是否包含某个元素函数
定义函数
- 定义方式一
// 一旦执行到return代表函数结束，返回结果！// 如果没有执行return，函数执行完也会返回结果，结果就是undefined。function abs(x){ if(x>=0){ return x; }else{ return -x; }}abs(-10);- 定义方式二
// 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
- arguments代表所有的参数，是一个数组
var abs=function(x){ if(arguments.length=1){ return x; }else if(arguments.length>1){ return arguments.length; }}rest
- ES6引入的新特性，获取除了已经定义的参数之外的所有参数
- rest参数只能写在最后面，必须用...标识
function fun(a,b,...rest){ console.log("a->"+a); console.log("b->"+b); console.log(rest);}变量的作用域
- 函数体中声明的变量，函数体外不可以使用（非要实现的话，可以研究下闭包）
function fun(){ var x=1; x=x+1;}x=x+2; // Uncaught ReferenceError: x is not defined- 内部函数可以访问外部函数的变量，反之则不行
function funA(){ var x=1; function funB(){ var y=x+1; } var z=y+1; // Uncaught ReferenceError: y is not defined}- 全局变量：定义在函数外部
var x=1;function f(){ console.log(x);}console.log(x);- 全局对象window：默认所有的全局变量，都会自动绑定在window对象下
var x=1;console.log("x->"+x);console.log("window.x->"+window.x);- JavaScript实际只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，直到全局作用域window也没有找到，就会报错
- 由于所有的全局变量都会绑定在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方法
- 方法就是把函数放在对象的里面
var qing={ name:'zhangyq', birth:2000, age:function(){ var now=new Date().gerFullYear(); return now-this.birth; }}qing.name;qing.age();- 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对象
- 浏览器介绍
- IE6~11
- Chrome
- Safari
- FireFox
- window 代表浏览器窗口
window.alert(1)window.innerHeightwindow.outerHeight- navigator 封装了浏览器的信息
- screen 代表屏幕
screen.widthscreen.height- location 代表当前页面的URL信息
location//刷新页面location.reload()//跳转页面location.assign('www.baidu.com');- document 代表当前的页面
document.titledocument.title='我的页面'//获取cookiedocument.cookie- 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();事件
- 鼠标事件
- 键盘事件
- 其他事件
<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下来，对应修改看效果
扒网站步骤：
- 打开网站，选择Elements，选中代码，按Delete删除，不影响页面继续删除，影响页面回退，删除下一行，直到没有删除的为止。
- 右键选择Copy->Copy outerHTML，复制代码，然后将代码粘贴到自己的HTML文件中，修改相应的html和css。
原文转载：http://www.shaoqun.com/a/575573.html
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
No comments:
Post a Comment