经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
030_JavaScript - 清风(学习-踏实)
来源:cnblogs  作者:清风(学习-踏实)  时间:2021/2/22 9:04:27  对本文有异议


前端知识体系

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 // 整数
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语法
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'); // 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. 其他事件

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.cnblogs.com/wl3pb/p/14427950.html

 友情链接: NPS