欢迎光临
我的个人博客网站

030_JavaScript

目录

前端知识体系

030_JavaScript
030_JavaScript
030_JavaScript
030_JavaScript
030_JavaScript
030_JavaScript
030_JavaScript
030_JavaScript

什么是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 // 整数 123 123.1 // 浮点数 123.1 1.231e2 // 科学计数法 123.1 -123 // 负数 -123 NaN // not a number NaN Infinity // 表示无限大 Infinity 

String 字符串

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

Boolean 布尔

console.log(2>1) VM520:1 true console.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语法
030_JavaScript

数据类型

字符串

'use strict'; // 1.正常字符串使用单引号或双引号包裹 console.log('a'); console.log("a"); // 2.注意转义字符 console.log('a''); console.log("a'"); console.log('anb'); console.log('u4e2d'); // Unicode console.log('x41'); // Ascll // 3.多行字符串编写,使用反引号` var msg = `hello world 你好`; 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新特性

//Map var 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的原型是user xiaoming.__proto__=user /*xiaoming {name: "xiaoming"} name: "xiaoming" __proto__: age: 18 name: "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.innerHeight window.outerHeight 
  1. navigator 封装了浏览器的信息
  2. screen 代表屏幕
screen.width screen.height 
  1. location 代表当前页面的URL信息
location //刷新页面 location.reload() //跳转页面 location.assign('www.baidu.com'); 
  1. document 代表当前的页面
document.title document.title='我的页面' //获取cookie document.cookie 
  1. history 代表浏览器历史记录
history.back() history.forward() 

操作DOM对象

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

<div id="div1">   <h1>标题一</h1>   <p id="p1">p1</p>   <p class="p2">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'; //修改html p1.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> 
//获取input var 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对比

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

事件

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

030_JavaScript

<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删除,不影响页面继续删除,影响页面回退,删除下一行,直到没有删除的为止。

030_JavaScript

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

030_JavaScript

赞(0) 打赏
未经允许不得转载:张拓的天空 » 030_JavaScript
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏