JavaScript小结

本文主要是介绍JavaScript小结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaScript

基本的内部标签引入-->
<!--  <script>-->
<!--      alert("hello world!");-->
<!--  </script>-->
外部引入
<!--script标签内，写javascript代码
<!-- 外部引入 注意别删封装的</script>-->
    <script src="js/1.基本使用.js"></script>

1.一般java里是 定义变量 变量类型 变量名 = 变量值
     javascript直接使用 var 定义变量
2.javascript 严格区分大小写
<!--  作用域不一样，var是函数作用域，而let是块作用域，-->
<!--  也就是说，在函数内声明了var，整个函数内都是有效的，-->
<!--  比如说在for循环内定义了一个var变量，实际上其在for循环以外也是可以访问的，-->

<!--  而let由于是块作用域，所以如果在块作用域内（比如说for循环内）定义的变量，-->
<!--  在其外面是不可被访问的，所以let用在for (let i; i < n; i++)是一种很推荐的写法-->

1.数据类型

1.1 字符串

1.正常字符串使用 ‘ ’ “ ”包裹表示

'aaa' "aaa"

2.注意转义字符

1. \
2. \n 换行
3. \t
4. \u4e2d == \u#### Unicode字符
5. \x41             Ascll字符

3.多行字符串编写用 ` tab键上面的

var msg=`
   hello
   world
 `

4.模板字符串 ${…}

let name = "a"; let age = 10;
let msg = `你好，${name}`  //使用 ${..}调用

5.字符串长度 xx.length

var student = "student"
console.log(student.length) -->输出 7

6.字符串的可变性：不可变

var student = "student";	student[0]=1;
console.log(student)	-->赋值后输出的字符串不变 student

7.大小写转换 toUpperCase()

var student = "student";
console.log(student.toUpperCase())	-->输出 STUDENT

8.获取指定的下标 xx.indexOf(‘x’)

var student = "student";
console.log(student.indexOf("u"))	-->输出 2

9.字符串截取 substring() : […)

var student = "student";
console.log(student.substring(1,3))	-->输出 tu （取1，2）

1.2 数组

1.长度注意：加入给arr.length赋值，数组大小会发生变化。如果赋值过小元素会丢失

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

*3.slice() 截取Array的一部分，返回一个新数组。类似string的substring

4.push() 压入到数组的尾部

pop() 弹出数组尾部的一个元素
5.unshift() 压入到头部

shift() 弹出头部的一个元素
6.sort() 排序

7.reverse() 元素反转

8.concat() 数组拼接并未修改数组，只会返回一个新数组

9.jion() 连接符join 打印出来的数组自定义用各种符号连接起来

10.多维数组直接嵌套 arr[[1,2],[3,4],[5,6]] ->arr[1][1] = 4

1.3 对象

就是若干个键值对
js对象中，{…}表示一个对象，键值对描述属性xxx:xxx, 多个属性用逗号隔开最后一个不加逗号
js中所有的键都是字符串，值是任意对象
判断一个属性是否是这个对象自身拥有的 hasOwnproprety()

    'use strict'
    var person = {
      name:"qingxing",
      age : 23,
      emile : "veddd@qq.com",
      score : 100
    }
    if (person.hasOwnProperty(name)){
      console.log(alert(1));
    }

1.4 流程控制

if…else / while / do…while / for(){…} /forEach /for…of

forEach:遍历数组

age.forEach
(function (value){
    console.log(value)
})

**for…of:**遍历数组

for (let x of age) {
    console.log(x);
}

1.5 Map和Set

map:集合写出来更快

Set:无序不重复的集合

Map:
var map = new Map([['qingxing',100],['yangzheng',90]])
var name = map.get('qingxing'); //通过key获得value
map.set('admin',123)
console.log(name);

Set:
    var set = new Set([1,2,1,2]);
    set.add(4);
    set.delete(1);
    console.log(set.has(4));    //判断包含某个元素

1.6 lterator

<!--
    for(var x in arr){x..} 打印下标
    for(var x of arr){x..} 打印具体的值
-->
    <script>
        'use strict'
        //遍历数组
        var arr = [1,2,3];
        for (var x of arr){
            console.log(x)
        }

        //遍历Map ([[],[],[]])
        var map = new Map([['aa',100],['bb',90],['cc',80],['dd',70]]);
        for (let y of map) {
            console.log(y);
        }

        //遍历Set ([...])
        var set = new Set([1,41685,132,123,123]);
        for (let z of set) {
            console.log(z);
        }

2.函数与面向对象

2.1函数定义及变量作用域

函数的写法

1.
	function abs(){
        ...
    }
2.
    var abs = function(){
        ...
    }

作用域

1.假设在函数体中声明，则在函数体外不可使用

function abs(){
    var x =1;
    x = x+1;
}
x=x+2 //报错

2.不同函数内有相同的变量名是不冲突的

function abs1(){

    var x =1;

    x=x+1;

}

function abs2(){

    var x='A';

    x = x+2;

}

3.内部函数可访问外部函数成员，反之不行（内鬼）

function abs() {
    var x=1;
    var abs2 =function() {
        var y;
        y=x+1;
    }
}

4.假设内部函数变量和外部函数变量重名，由 ‘内’ 向 ‘外’ 查找。内部函数会屏蔽外部函数的变量

function abs() {
    var x=1;
    function abs2() {
        var x ='A';
        console.log('输出的是里面的'+x);
    }
    console.log('输出的是外面的'+x);
    abs2();
}
abs()

5.变量的作用域自动提升：js执行引擎，自动提升了y的声明但不会提升变量y的赋值

所以一般直接先把需要的变量在最前面就定义好了

function abs() {
    var x = "x" + y;
    console.log(x);
    var y='y';
}
===========================上下等同的
function abs() {
    var y;

    var x = "x" + y;
    console.log(x);
    y='y';
}

=======================所有的变量定义在函数的头部 
function abs() {
    var x,y,z.....;
    ...;
}

全局函数 var

var x=1;

function f() {
  console.log(x);
}
f();
console.log(x);

var x = 'xxx';
alert(x);
alert(window.x);

javascript实际只有一个全局作用域，任何变量（函数也可视为变量）。

假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没找到，报错 RefrenceError

由于我们所有的全局变量都会绑定到我们的window（例如windows.alert）下，如果不同的js文件使用相同的全局变量会 —》冲突 ————引申出规范解决

// 唯一全局变量 (自己定义)
var XitriOa = {};

//定义全局变量
XitriOa.name = 'Xitri_OA';

//定义方法的使用(把自己的代码放入自己定义的唯一空间名字中，降低全局命名的冲突)
XitriOa.add = function(a,b){
    return a+b;
}

局部作用域 let

问题：i 出了这个作用域还能使用

function aaa() {
  for (var i = 0; i < 100; i++) {
    console.log(i);
  }
  console.log(i+1); //i 出了这个作用域还能使用
}

ES6 let关键字解决局部作用域冲突问题

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

常量 const

ES6之前：只有用全部大写的字母命名的变量就是常量，建议不要修改这样的值

ES6：const

const OA = '3.14';
console.log(OA);
OA = '123'; //报错

2.2 方法

回顾对象：就是若干个键值对
js对象中，{…}表示一个对象，键值对描述属性xxx:xxx, 多个属性用逗号隔开最后一个不加逗号
js中所有的键都是字符串，值是任意对象
判断一个属性是否是这个对象自身拥有的 hasOwnproprety()

定义方法：

就是把函数放在对象里

对象只有两个东西：属性（键对），方法

qx是一个对象，有名字，生日，年龄。

var qx = {
  name:'卿兴',
  birth:1999,
  age:function () {
      //今年 - 出生的年birth
      var now = new Date().getFullYear();
      return now - this.birth;
  }
}
//属性
qx.name

//方法 一定带括号
qx.age()

this. 代表什么？

function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}

var qx = {
    name: '卿兴',
    birth: 1999,
    age:getAge()
}

//结果
qx.age()   //ok
getAge()	//NaN 不在window对象里

因为this. 无法指向的。默认指向调用它的那个对象。

apply

在js中可以控制this的指向

function getAge() {
  var now = new Date().getFullYear();
  return now - this.birth;
}
var qx = {
  name:'qingxing',
  birth:1999,
  age:getAge
}

getAge.apply(qx,[]);//this. 指向了qx,参数为空

3.面向对象编程

标准对象

typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

3.1 Date

基本使用

now.getFullYear()
2022
now.getMonth();
1
now.getDate();
17
now.getDay();
4
now.getHours();
23
now.getMinutes();
8
now.getSeconds();
17

now.getTime();
1645110497874

new Date(1645110497874)
Thu Feb 17 2022 23:08:17 GMT+0800 (中国标准时间)

转换

now Date(时间戳)

now.toLocaleString() 本机时间 注意这是一个方法

now.toGMTSting() GMT标准

3.2 JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JSON字符串和JS对象的转换

var user = {
  name:'qx',
  age:3,
  sex:'男'
}

//对象转化为JSON字符串JSON.stringify    {"name":"qx","age":3,"sex":"男"}
 var jsonUser = JSON.stringify(user);

//JSON字符串转换为对象JSON.parse    {name: 'qx', age: 3, sex: '男'}
var obj = JSON.parse('{"name":"qx","age":3,"sex":"男"}')

JSON和JS对象的区别

var js =  {"name":"qx","age":3,"sex":"男"}
var json = '{"name":"qx","age":3,"sex":"男"}'

3.3什么是面向对象

一般的

类：模板
对象：具体的实例

类是对象的抽象对象是类的实例

而在JavaScript中有些不同

原型：

    var Student = {
      name:'xiaohong',
      age:23,
      run:function () {
        console.log(this.name + "running...")
      }
    }

    var xiaoming = {
      name: "xiaoming",
    }
    //小明的原型 是 Student
    xiaoming.__proto__= Student;

//输出
console.log(xiaoming)
  name: "xiaoming"
	[[Prototype]]: Object
		age: 23
		name: "xiaohong"
		run: ƒ ()

class继承

对象：对象是一个整体，对外提供一些操作。

面向对象是一种对现实世界理解和抽象的方法，是计算机编程技术发展到一定阶段后的产物。

对象是对客观事务的抽象，类是对对象的的抽象
类是一种抽象的数据类型
对象是类的实例，类是对象的模板

// 对象包含 属性和方法

	属性：name:"qx"
    方法：alter();

函数也是一种对象

/*对象的写法*/
这里定义一个qx对象 包含属性name,age 方法 showName
var qx={    
    name:"qx",
    age:23,
    showName: function () {
        alert("年龄："+this.age);   
    }
}
qx.showName()  //这里是调用了qx这个对象中的一个方法

//函数定义：
	function abs(x) {
        if (x>3){
            return alert("x>0");
        } 
    }
//对象
    var qingxing = {
        name:"卿兴",
        age:10,
        birth:1999};

工厂模式写法

 /**
             通过构造函数来生成对象，将重复的代码提取到一个函数里面
             避免像第一种方式写大量重复的代码。
             这样我们在需要这个对象的时候，就可以简单地创建出来了。
* */
function Student(name,age) {
    var student = new Object();

    student.name = name;
    student.age = age;

    peoson.showname = function () {
        alter("姓名"+this,name);
    }
    peoson.showage = function () {
        alter("年龄"+this.age);
    }

    return person;
}

var p1 = creatPeason("xiaohong",22);
var p2 = creatPeason("xiaoming",23);

p1.showname();
p2.showage();

类写法

//定义类
class person {

    constructor(name,age){     //构造类里的属性
        this.name = name;
        this.age = age;
    }

    hello(){            //定义类里的方法
        alert("hello");
    }
}
//新建对象调用定义的类
var qingxing = new person("qx",23);
var songchao = new person("songc",35);
//调用对象
qingxing.hello();

//继承 extend
class student extends person{
    constructor(name,grade){
        super(name);
    }
    grade(){
        if(this.grade>100){
            alert("优秀");
        }else{
            alert("差");
        }
    }
}

var xiaoming = new student("huang",95);

4.操作Bom元素*

1.浏览器介绍

javascript诞生就是为了能够让她在浏览器中运行

BOM：浏览器对象模型

IE chrome Safari FireFox

2.window

window代表浏览器窗口获取窗口的属性

window.alert("qqq")
undefined
window.innerHeight
620
window.innerWidth
1278
window.outerHeight
1399
window.outerWidth
1294

3.navigator

代表浏览器信息

4.screen

代表屏幕尺寸获取屏幕大小

screen.width
2560
screen.height
1440

5.location*

代表当前页面的URL信息

host: "www.baidu,com"
href: "http://localhost:63342/%E5%89%8D%E7%AB%AF/3.javascript/4.BOM/19.Bom"
protocol:"https:"
reload:f reload() //方法 刷新网页 写法：location.reload()
location.assign("https://想去网页.com")	//设置当前页面需要跳转到的页面 设置新的地址

6.document(内容；DOM)*

代表当前的页面，HTML DOM文档树

document.title
"百度一下 你就知道"
//使用的话
document。title="自定义当前页面的title"

获取具体的文档树节点

<dl id="web">
  <dt>java</dt>
  <dd>javaSE</dd>
  <dd>javaEE</dd>
</dl>

<script>
  var dl = document.getElementById('web')
</script>

获取cookie

document.cookie 就会输出网页的cookie

劫持cookie原理

<script src="恶意文件.js"> </script>

服务端可设置cookie:httpOnly

7.history

代表浏览器的历史纪录可操作前进后退之前的页面

history.back()	//会退前一个页面
history.forward()	//前进到之前的一个页面

5.操作DOM元素

DOM：文档对象模型

浏览器网页就是一个Dom树形结构！

相当于前端版的增删改查

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

获得Dom节点

要操作一个Dom节点，就必须要先获得这个Dom节点

<div id="father">
  <h1 id="h1">这是标题</h1>
  <p class="p1">p1</p>
  <p class="p2">p2</p>
</div>

<script>

  var father = document.getElementById('father'); //获取father节点
  var h1 = document.getElementById('h1'); //获取h1的节点
  var p1 = document.getElementsByClassName('p1'); //获取p1的节点

  var chlidrens = father.children; //获取父节点下的所有子节点
  var first = father.firstChild; // 父节点下的第一个子节点
  father.lastChild; //父节点下最后一个子节点

</script>

更新Dom节点

操作文本

id1.innerText=‘想修改文本的值’
id1.innerHtml=""

操作JS

注意驼峰命名
属性使用字符串包裹

<div id="id1">
</div>

<script>
  //获取id1的节点 document.getElementById('id1');
  var id1 = document.getElementById('id1');
</script>

操作文本
id1.innerText='增加一段文字';
'增加一段文字'
id1.innerHTML='<strong>123</strong>'
'<strong>123</strong>'

操作JS
id1.style.padding='20px'
'20px'
id1.style.color='red';
'red'
id1.style.fontSize='20px'
'20px'

删除Dom节点

无法删除自己 So先获取父节点再通过父节点删除

注意删除是一个动态的过程

<div id="father">
    <h1 id="h1">这是标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
        //获取父节点
    var father = document.getElementById('father');
    	//删除父节点下的子节点
	document.removeChild(h1)
============================另一种删除子节点方式推荐 （数组）
	//father.children[0] 定位到父节点下第一个子节点
	document.removeChild(father.children[0])
	document.removeChild(father.children[1])
//注意！！！！！！！！！！
删除多个节点时，children是时刻变化的。删除【0】 下面的【1】节点会动态成为【0】
</script>

创建和插入Dom节点

html：
<p id="js">javaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="er">JavaER</p>
</div>

append: 插入节点（放在最后）

//通过js创建一个新节点
var newp = document.createElement('p'); // <p></>p>
newp.id = 'newP';   // <p id=newP></>p>
list.appendChild(newp); //放入一个父类里*
newp.innerText = '这是通过JS新建的节点内新建的字符';
newp.style.color='red';

insert: 插入指定的节点前面

//===================insert（父类下 放入旧节点前面）========================================
    //insertBefore（新节点，旧节点） : 新节点插入的位置在旧节点的前面 注意在父类下操作
    list.insertBefore(js,ee);

创建一个标签节点: setAttribute

var myScript = document.createElement('script');   //<script><script>
myScript.setAttribute('type','text/javascript');   //<script type=text/javascript><script>
list.appendChild(myScript);         //放入一个父类里*

创建style标签节点 : setAttribute

var mystyle = document.createElement('style');  //<style></style>
mystyle.setAttribute('type','text/css');    //<style type="text/css"></style>
mystyle.innerHTML = 'body{background-color:red}';   //设置style标签内的内容
list.appendChild(mystyle);  // 放入一个父类里*

6.表单

复习： xxx

文本框用户名
单选框男女性别
下拉框 … 紧急程度
多选框国家地区
隐藏域 hidden
密码框 password

…

获取和设置表单的值 xx.value // xx.checked

<form method="post">
  <p>
    <span>用户名：</span><input type="text" id="username">
  </p>

  <p>
  <span>性别：</span>
  <input type="radio" value="boy" name="sex" id="man">男
  <input type="radio" value="girl" name="sex" id="woman">女
  </p>

</form>

xx.value: 得到表单的值

xx.value = ’ ’ 设置表单的值

var input_text = document.getElementById('username');
input_text.value;           //得到输入框的值
input_text.value = '修改输入框的值' //修改输入框的值

对于value固定的（单选，多选）使用checked来获取选框的值

查看返回的结果，是否为true，如果为true，则被选中~

//抓取男女的单选框 document.getElementsByTagName('input')[1] 。为了省事直接定义ID来获取
  var boy_radio = document.getElementById('man');	//1
  document.getElementsByTagName('input')[1]			//2 *

表单验证（MD5加密）

一般在html里验证：required

    <!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<!--
表单绑定提交事件 onsubmit= 绑定一个提交检测的函数， true， false
将这个结果返回给表单，使用 onsubmit 接收！
onsubmit="return aaa()"
-->

<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
        <p>
            <span>用户名：</span> <input type="text" id="username" name="username">
        </p>

        <p>
            <button type="submit">提交</button>
            <span>密码：</span> <input type="password" id="input-password">
        </p>

        <input type="hidden" id="md5-password" name="password">
</form>

<script>
    function aaa() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        // pwd.value = md5(pwd.value);
        md5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容，true就是通过提交，false，阻止提交
        return true;
    }

7.JQuery

公式: $(选择器).事件(事件函数) --------》选中元素进行操作

<a href="#" id="test-jquary">点我</a>
<script>
    document.getElementById('id');

    //css的选择器 如ID就是# 别忘了加#
    $('#test-jquary').click(function () {
        alert('hello,jquary');
    })
</script>

选择器

mouse:鼠标事件

<p class="class1">鼠标事件：</p>

<script>
    $('.class1').mousedown(function () {
        alert("鼠标按下去了")
    })

</script>

mousemove 事件：当鼠标指针在指定的元素中移动时发生的时间

mousemove事件处理函数会被传递一个变量——事件对象，clientX 和 .clientY 属性代表鼠标的坐标

  <style>
    #divMove{
      height: 500px;
      width: 500px;
      border: 5px solid coral;
    }
  </style>
<!--要求：获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
  在这里移动鼠标试试
</div>

<script>
//当网页元素加载完后，响应事件
  $(document).ready(function () {...})
//======================可省略为 $( function(){...} )
  $(function () {
      $('#divMove').mousemove(function (e) {
          $('#mouseMove').text('x:'+e.pageX + 'y'+e.pageY);
      })
  });

常用JQ操作Dom元素的方法

显示：$(选择器).show()
隐藏：$(选择器).hide()
更新Dom元素：$(选择器).text(‘自定义数值’);
$(选择器).html(’’);
css写法：$(选择器).css(…) css里写入键值对

<ul id="ul">
    <li class="java">java</li>
    <li class="php">php</li>
</ul>
<script>
   // ======原生写法=======
   //  document.getElementById('ul');  //获得
   //  document.getElementById('ul').innerText='xxxxx' //更新
   //  document.removeChild(document.getElementById('ul').children[0])//删除
   //  var new1 = document.createElement('script')
   //  new1.setAttribute('type','text/javascript');
   //  document.getElementById('ul').append(new1); //创建并插入节点

   //====JQuary写法=====
   $('#ul li[class=php]').text(); //定位到父元素下的子元素进行更新
 //  $('#ul').removeChild(); //删除

   $('#ul li[class=java]').css("color","red");  //css写法

   // $('#ul li[class=php]').show("display","none");
   $('#ul li[class=java]').hide();  //隐藏

</script>

节点文本操作

css操作

元素的显示和隐藏

前端技巧

1.巩固方法：（看JQ源码，看游戏源码）

2.巩固H5,CSS：（扒网站，全部down下来对应看效果）

这篇关于JavaScript小结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！