JavaScript

Posted dadabai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript相关的知识,希望对你有一定的参考价值。

 

1JS

JS)是一种脚本语言,主要用于 Web。它用于增强 html 页面,通常可以嵌入 HTML 代码中。javascript 是一种解释型语言。因此,它不需要编译。JavaScript 以交互式和动态的方式呈现网页。这允许页面对事件做出反应,展示特殊效果,接受可变文本,验证数据,创建 cookie,检测用户的浏览器等。

一个合格的java工程师必须学好JS

 

2快速入门

2.1如何导入js代码

<!--script标签中,写JavaScript代码-->
<!--<script>-->
  <!--alert("Hello World");-->
<!--</script>-->
?
<!--外部引入-->
<!--注意:script标签必须成双出现-->
<script src="js/dabai.js"></script>

2.2基础语法

<!--JavaScript严格区分大小写-->
<script>
  //1.定义变量       变量类型 变量名=变量值
  var score=90;
  //alert(num);
  //2.条件控制
  if(score>60&&score<70){
      alert("中等");
  }else if(score>70&&score<80){
      alert("良好");
  }else{
      alert("other");
  }
?
  //console.log(score) 在浏览器的控制台打印变量! System.out.print()
<script>
  //Person p=new Person{1,2,3,4,5}
  var person={
      name:"dabai",
      age:23,
      tags:[‘java‘,‘html‘,‘css‘]
  }
</script>
//console.log(person.name); 在console控制台可以输出人名
?

2.3严格检查模式

<!--
前提:IEDA需要设置支持ES6的语法
‘use strict‘; 严格检查模式,预防JS的随意性导致的一些问题
必须放在第一行
局部变量都建议使用let来定义
-->
<script>
  ‘use strict‘;
  //i=1;
  let i=1;
</script>

 

3数据类型

3.1字符串

<script>
  ‘use strict‘;
  let name=‘dabai‘;
  let age=23;
  let msg=`你好呀,${name}`       //`键在tab键上面,里面可以包含多个字符串
</script>

3.2数组

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

var arr=[1,2,3,4,5];   //通过下标取值和赋值
arr[0]
arr[0]=1

1.长度

arr.length

2.indexOf 通过元素获取下标索引

arr.indexOf(2)
1

字符串“1”和数字1是不一样的

3.slice() 截取Array的一部分,返回一个新数组,类似与String中的subString

4.push() pop() 尾部

push   压入的尾部
pop   弹出尾部的一个元素

5.unshift() shift() 头部

unshift:压入到头部
shift:弹出头部的第一个元素

6.排序 sort()

7.元素反转 reverse()

8.concat() 拼接数组,没有修改原数组,只是返回一个新数组

9.join 打印拼接数组,使用特定的连接符连接

var arr=[‘a‘,‘b‘,‘c‘]
arr.join(‘-‘)
arr=["a-b-c"]

 

3.3对象

若干键值对

var 对象名={
  属性名:属性值,
  属性名:属性值,
  属性名:属性值
}
?
var person={
          name:"kuangshen",
          age:23,
          emali:"2234455@qq.com"
      }

js中对象用{.....}表示 属性之间用逗号隔开,最后一个不加逗号

JS中所有的键都是字符串,值是任意类型

1.动态的删减属性,通过delete删除对象属性

delete person.name
true

2.多态的添加属性,直接给新的属性添加值即可

person.haha="haha"
"haha"

3.判断属性值是否在这个对象中 xxx in xxx

‘age‘ in person
true

 

3.4流程控制

for....in //尽量不用

var arr=[11,22,33,44,55,66];
//for(var index in Object)
for(var num in arr){
  if(arr.hasOwnProperty(num)){
      console.log("存在");
      console.log(arr[num]);
  }
}

 

3.5Map和Set

Map

/Es6  Map
//学生的成绩,学生的姓名
//var name=["tom","jack","haha"];
//var score=[100,90,80];
?
var map=new Map([[‘tom‘,100],[‘jack‘,90],[‘haha‘,80]]);
var score=map.get(‘tom‘);   //通过key获取value
map.set(‘admin‘,89);
console.log(score);

Set:无序不重复的集合

set.add(2);//添加
set.delete(1);//删除
set.has(3);//判断是否包含

 

3.6Iterator

遍历数组

//通过for of遍历数组     for  in 是遍历下标
var arr=[1,2,3];
for(var x of arr){
  console.log(x);
}

遍历map

var map=new Map([[‘tom‘,100],[‘jack‘,90],[‘haha‘,80]]);
for(let x of map){
  console.log(x);
}

 

 

4函数

4.1定义函数

定义方式一

绝对值函数

function abs(x){
  if(x>0){
  return x;
  }else{
  return -x;
  }
}

一旦执行到return 代码函数执行结束,返回结果

如果没有执行return 函数也会返回结果,结果就是undefined

 

定义方式二

var abs=function(x){
  if(x>0){
  return x;
  }else{
  return -x;
  }
}

可以通过abs调用 函数

 

参数传递问题

假设不存在参数,如何规避

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){
  console.log("x=>"+x);
  for(var i=0;i<arguments.length;i++){
      console.log(arguments[i]);
  }
  if(x>0){
      return x;
  }else{
      return -x;
  }
}

问题:arguments包含所有的参数,我们有时候想用多余的参数做附加的操作,需要排除已有的参数~

 

rest

eS6引入的新特性,获取处理已经定义的参数之外的所有参数

function aaa(a,b,...rest) {
          console.log("a=>"+a);
          console.log("b=>"+b);
          console.log(rest);
      }

rest参数只能写在最后面,必须用...标识

 

4.2变量的作用域

在JS中,var定义变量实际上是有作用域的

假设在函数体中声明,则在函数体外不可以使用 (非要使用的话,可以使用闭包)

function aaa() {
  var x=1;
  x=x+1;
}
x=x+2;   //Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名,只要在函数内部,就不冲突

function aaa() {
  var x=1;
  x=x+1;
}
function bbb() {
  var x=‘A‘;
  x=x+1;
}

内部函数可以访问外部函数的成员,反之不行

 

提升变量的作用域

function db() {
  var x="x"+y;
  console.log(x);
  var y="y";
}

结果 x is not defined

说明JS执行引擎,自动提升了y的声明,但不会提升y的赋值

注意规范:将函数的声明都写在头部

 

 

规范

由于我们所有的全局变量都会绑定到window上,如果不同的js文件,使用了相同的全局变量,就会冲突~

如何减少冲突

//唯一的全局变量
var kuangshen={};
?
//定义全局变量
kuangshen.name=‘kuangshen‘;
kuangshen.add=function (a,b) {
  return a+b;
}

把自己的代码全部放到自己定义的唯一空间名字中,降低全局命名冲突问题

 

 

局部作用域

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

ES6 let关键字

function aaa() {
  for(let i=0;i<100;i++){
      console.log(i);
  }
  console.log(i+1);   //不会执行
}

 

const常量

 

 

4.3方法

定义方法

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

var kuangshen={
  name:‘kuangshen‘,
  brith:1997,
  age:function () {
      //今年-出生
      var now=new Date().getFullYear();
      return now - this.brith;
  }
}
//属性
kuangshen.name
//方法 一定要带()
kuangshen.age()

apply

可以控制this的指向

 

5内部对象

5.1Date

<script>
  var now=new Date();
  now.getFullYear();//年
  now.getMonth();//月
  now.getDate();//天
  now.getDay(); //星期几
  now.getHours();//时
  now.getMinutes();//分
  now.getSeconds();//秒
  now.getTime();//时间戳 全世界统一
</script>

5.2JSON

在JS一切都为对象,任何JS支持的类型都可以用JSON来表示

对象都用{}

数组都用[]

所有的键值对都是用 key:value

 

JSON与JS的转换

<script>
  var user={
      name:"dabai",
      age:23,
      sex:"男"
  }
  //对象转换为json字符串
  var jsonuser=JSON.stringify(user);     //{"name":"dabai","age":23,"sex":"男"}
  //json字符串转化为字符串
  var obj=JSON.parse(‘{"name":"dabai","age":23,"sex":"男"}‘);
</script>

 

 

6面向对象编程

6.1

<script>
  var Student={
      name :"dabai",
      age :23,
      run:function () {
          console.log(this.name+"run...");
      }
  }
?
  var xiaoming={
      name :"xiaoming"
  }
?
  //xiaoming的原型是Student
  xiaoming._proto_=Student;     //就可以调用Student中的run方法
</script>

 

class继承

class关键字,是在es6引入的

1.定义一个类,属性,方法

//定义一个学生类
class Student{
  constructor(name){
      this.name=name;
  }
  hello(){
      alert("hello");
  }
}
var xiaoming=new Student(xiaoming);
var xiaohong=new Student(xiaohong);
xiaoming.hello();

2.继承

//定义一个学生类
class Student{
  constructor(name){
      this.name=name;
  }
  hello(){
      alert("hello");
  }
}
?
class xiaoStudent extends Student{
  constructor(name,grade){
      super(name);
      this.grade=grade;
  }
  myGrade(){
      alert("我是一名小学生");
  }
}
?
var xiaoming=new Student(xiaoming);
var xiaohong=new xiaoStudent(xiaohong,1);

 

 

7操作BOM对象(重点)

浏览器介绍

JS与浏览器的关系?

JS的诞生就是为了能够让它在浏览器中运行

BOM:浏览器对象模型

IE6-11

Chrome

Opera...

 

window

window代表浏览器窗口

window.alert(1)
window.innerHeight

 

Navigator

Navigator ,封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36"

大多时候,我们不会使用navigator对象,因为会被人修改

 

screen

代表屏幕的尺寸

screen.width
1366
screen.height
768

 

location(重要)

location 代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload:f reload() //刷新网页
//设置新的地址
location.assign("https://blog.kuangstudy.com/")

 

document

document代表当前页面,HTML DOM文档树

document.title
"百度一下,你就知道"
document.title=‘狂神说‘
"狂神说"

获取具体的文档树节点

<dl id="app">
  <dt>
      <dd>JavaSE</dd>
      <dd>JavEE</dd>
  </dt>
</dl>
?
<script>
  var d1=document.getElementById(‘app‘);
</script>

获取cookie

document.cookie

 

history

代表浏览器的历史纪录

history.back()  //后退
history.forward //前进

 

 

8操作DOM对象(重点)

核心

浏览器网页就是一个DOM树型结构

更新:更新DOM节点

遍历DOM节点:获得DOM节点

删除:删除DOM节点

添加:添加一个新节点

要操作一个DOM节点,首先要获得这个节点

 

获得DOM节点

<div id="father">
  <h1>标题一</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>
<script>
  //对应CSS选择器
  var h1=document.getElementsByTagName(‘h1‘);
  var p1=document.getElementById(‘p1‘);
  var p2=document.getElementsByClassName(‘p2‘);
  var father=document.getElementById(‘father‘);
?
  var childrens=father.children;   //获取父节点下的所有子节点
   
</script>

 

更新节点

<div id="id1">
?
</div>
?
<script>
    var id1=document.getElementById(‘id1‘);
</script>

操作文本

id1.innerText=‘123‘ 修改文本的值

id1.innerHTML=‘<strong> 123 </strong>‘ 可以解析HTML文本标签

操作JS

id1.style.color=‘yellow‘;
id1.style.fontSize=‘20px‘;
id1.style.padding=‘2em‘;

 

删除节点

删除节点的步骤:先获取父节点,在通过父节点删除自己

<div id="father">
  <h1>标题一</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>
<script>
  var self=document.getElementById(‘p1‘);
  var father=p1.parentElement;
  father.removeChild(self);
 
  //删除是一个动态的过程
  father.removeChild(father.childer[0]);
  father.removeChild(father.childer[1]);//此时1已经变为0
  father.removeChild(father.childer[2]);//此时2已经变为1
</script>

 

插入节点

我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个Dom节点已经存在元素了,我们就不能这么干了,会产生覆盖

追加

<p id="js">JavaScript</p>
<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="me">JavaME</p>
</div>
?
?
<script>
  var js=document.getElementById(‘js‘);
  var list=document.getElementById(‘list‘);
  list.appendChild(js);//追加到后面
</script>

 

创建一个新标签,实现插入

<script>
  var js=document.getElementById(‘js‘); //已经存在的节点
  var list=document.getElementById(‘list‘);
  //list.appendChild(js);
?
  //通过JS创建一个新的节点
  var newP=document.createElement(‘p‘); //创建一个p标签
  newP.id=‘newP‘;
  newP.innerText=‘hello,kuangshen‘;
  list.appendChild(newP);
</script>

 

创建一个新标签,实现插入

<script>
  var js=document.getElementById(‘js‘); //已经存在的节点
  var list=document.getElementById(‘list‘);
  //list.appendChild(js);
?
  //通过JS创建一个新的节点
  var newP=document.createElement(‘p‘); //创建一个p标签
  newP.id=‘newP‘;
  newP.innerText=‘hello,kuangshen‘;
  //list.appendChild(newP);
?
  //创建一个标签节点
  var myScript=document.createElement(‘script‘);
  myScript.setAttribute(‘type‘,‘text/javascript‘);
?
  //可以创建一个Style标签
  var myStyle=document.createElement(‘style‘); //创建了一个空style标签
  myStyle.setAttribute(‘type‘,‘text/css‘);
  myStyle.innerHTML=‘body{}‘; //设置标签内容
  document.getElementsByTagName(‘head‘)[0].appendChild(myStyle);
   
   
</script>

 

insert

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

 

 

9操作表单(验证)

表单是什么 form DOM树

文本框 text

下拉框 <select>

单选框 radio

多选框 checkbox

隐藏域 hidden

密码框 password

.......

 

<form action="post">
  <p>
        <span>用户名:</span><input type="text" id="username">
  </p>
  <!--多选框的值,就是定义好的value-->
  <p>
      <span>性别:</span>
      <input type="radio" name="sex" value="man" id="boy">男
      <input type="radio" name="sex" value="woman" id="girl">女
  </p>
</form>
?
<script>
  var input_text=document.getElementById(‘username‘);
  var boy_radio=document.getElementById(‘boy‘);
  var girl_radio=document.getElementById(‘girl‘);
  //得到输入框的值
  input_text.value;
  //修改输入框的值
  input_text.value=‘123‘;
   
   
  //对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值
  boy_radio.checked; //查看返回的结果,是否为true,如果为true,则被选中
  girl_radio.checked=true; //赋值
</script>

 

提交表单

    <title>Title</title>
  <!--MD5工具类 加密用的-->
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
表单绑定提交事件
onsubmit=绑定一个提交检测的函数,true,false
将这个结果返回给表单,使用onsubmit接收
onsubmit="return aaa()"
-->
<form action="#" method="post" onsubmit="return aaa()">
  <p>
      <span>用户名:</span><input type="text" id="username" name="username">
  </p>
  <p>
      <span>密码:</span><input type="password" id="input_password">
  </p>
  <input type="hidden" id="md5-password" name="password">
  <!--绑定事件 onclick被点击-->
  <button type="submit">提交</button>
?
  <script>
      function aaa() {
          var uname=document.getElementById(‘username‘);
          var pwd=document.getElementById(‘input_password‘);
          var md5pwd=document.getElementById(‘md5-password‘);
          md5pwd.value=md5(pwd.value);
          //可以检验判断表单内容,true就是通过提交,false就是阻止提交
          return true;
      }
  </script>

 

 

10jQuery

JavaScript

jQuery库,里面存在大量的JS函数

获取jQuery

https://jquery.com/

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
//cdn导入
   <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
<body>
?
</body>
</html>

 

公式 : $(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->
?
  <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<!--
公式 : $(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
  //选择器就是css的选择器
  $(‘#test-jquery‘).click(function () {
    alert(‘hello,jQuery‘);  
  })
</script>
</body>
</html>

 

选择器

<script>
//原生JS,选择器少,麻烦不好记
//标签
  document.getElementsByTagName();
  //id
  document.getElementById();
  //类
  document.getElementsByClassName();
   
  //jQuery css中的选择器它全部都可以用
  $(‘p‘).click();//标签选择器
  $(‘#id1‘).click();//id选择器
  $(‘.class1‘).click();//类选择器
</script>

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

 

事件

鼠标事件,键盘事件,其他事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="lib/jquery-3.4.1.js"></script>
  <style>
      #divMove{
          width: 500px;
          height: 500px;
          border: 1px solid red;
      }
  </style>
</head>
<body>
<!--要求:获取鼠标当前的一个坐标-->
mouse : <span id="mouseMove"></span>
<div id="divMove">
  在这里移动鼠标试试
</div>
?
<script>
  //当网页元素加载完毕后,响应事件
  $(function () {
      $(‘#divMove‘).mousemove(function (e) {
          $(‘#mouseMove‘).text(‘x:‘+e.pageX+‘y:‘+e.pageY);
      })
  });
</script>
</body>
</html>

 

操作DOM

节点文本操作

$(‘#test_ul li[name=python]‘).text();//获得值
$(‘#test_ul li[name=python]‘).text(‘设置值‘);//设置值

css的操作

$(‘#test_ul li[name=python]‘).css("color","red")

元素的显示和隐藏:本质 display:none;

$(‘#test_ul li[name=python]‘).show();
$(‘#test_ul li[name=python]‘).hide();

 

小技巧

1.如何巩固JS(看jQuery源码,看游戏源码)

2.巩固HTML,CSS(扒网站,全部down下来,然后对应修改看效果)

 

 

Layer弹窗组件

Element-ui

以上是关于JavaScript的主要内容,如果未能解决你的问题,请参考以下文章

30秒就能看懂的JavaScript 代码片段

常用Javascript代码片段集锦

48个值得掌握的JavaScript代码片段(上)

如何将此 JavaScript 代码片段翻译成 Parenscript?

javascript 代码片段

javascript JS-常用代码片段