JavaScript

qq_73695533

于 2024-08-08 02:24:55 发布

阅读量885

点赞数 10

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_73695533/article/details/141004844

版权

1.数据类型

1.1字符串

1.正常字符串我们使用单引号，或者双引号包裹

2.注意转义字符 \

\'
\n
\t
\u4e2d字符 \u#### Unicode字符
\x41 Ascll字符

3.多行字符串编写

 //tab 上面的键
 var msg=`hello
        world
        你好啊
        `;

4.模板字符串

let name="world";
let sum="你好"

5.字符串长度

str.length

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

console.log(student[0])
VM664:1 s
undefined
student[0]
's'
student[0]=1
1
console.log(student)
VM821:1 student
undefined

7.大小写转换

student.toUpperCase()
student.toLowerCase()

8.student.indexOf(‘t’)

9.substring

student.substring(1);//从第一个字符串截取到最后一个字符串
student.substring(1,3);//[1,3)

1.2数组

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

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

1.长度

arr.length

注意假如给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失

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

arr.indexOf(2)

字符串“1”和数字1是不同的

3.slice() 截取Array的一部分,返回一个新数组

var arr=[0,2,3,4,5,6]
ar n1=arr.slice(0,3)
undefined
n1
(3) [0, 2, 3]

4.push()，pop() 尾部

push：把元素压入到尾部
pop: 弹出尾部的元素

5.unshift(),shift() 头部

arr
(7) [0, 2, 3, 4, 5, 6, 'a']
arr.unshift("123");
8
arr
(8) ['123', 0, 2, 3, 4, 5, 6, 'a']
arr.shift();
'123'
arr
(7) [0, 2, 3, 4, 5, 6, 'a']

6.排序sort()

var arr=["B","C","A"]
undefined
arr
(3) ['B', 'C', 'A']
arr.sort()
(3) ['A', 'B', 'C']

7.元素反转reverse()

arr.reverse()
(3) ['C', 'B', 'A']

8.concat()

['C', 'B', 'A']
arr.concat(1,2,3)
(6) ['C', 'B', 'A', 1, 2, 3]
arr
(3) ['C', 'B', 'A']

注意：concat()并没有修改数组，只是会返回一个新的数组

9.连接符join

打印拼接数组，使用特定的字符串连接

arr.join("-")
'C-B-A'

10.多维数组

arr=[[1,2],[3,4],[5,6]];
arr[0][1];

1.3对象

若干个键值对

var 对象名={
    属性名：属性
    属性名：属性
}var person={
            name : "lqs",
            age: 22,
            email: "222@qq.com",
            score: 0
        }
        console.log(person)

js中对象，{…}表示一个对象，键值对描述属性,最后一个属性不加逗号。

javaScript 中所有的键都是字符串，值是任意对象！

1.对象赋值

person.name="lllll"
lllll

2.使用一个不存在的对象属性，不会报错！ undefined

person.aaa
undefined

3.动态的删减属性

delete person.name
true
person
{age: 22, email: '222@qq.com', score: 0}

4.动态的添加属性

person.lalal="lalalla";
'lalalla'
person
{age: 22, email: '222@qq.com', score: 0, lalal: 'lalalla'}

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

'age' in person
true
//继承
'toString' in person
true

6.判断一个属性是否是这个对象自身拥有的hasOwnProperty()

person.hasOwnProperty("age")
true

1.4流程控制

1.if 判断

var age =3;
        if(age>3){
            alert("hahaha");
        }else {
            alert("kuwa");
        }

2.while循环

 var age =3;
        while (age<100){
            age++
            console.log(age)
        }

3.for循环

 var age =3;
        for (let i = 0; i < 100; i++) {
            console.log(i)
        }

4.forEach循环

var age =[1,2,3,4,5,6,7,8,9,10];
        age.forEach(function (value){
            console.log(value);
        })

5.for…in

var age =[1,2,3,4,5,6,7,8,9,10];
        for (var num in age){
            console.log(age[num]);
        }

1.5Map和Set

Map:

 //学生的成绩，学生的名字
        var map=new Map([['tom',100],['jack',90],['hahaha',80]]);
        var tom= map.get('tom');//通过key获得value
        console.log(tom);

        map.set('admin',12345);

Set: 无序不重复的集合

 var set=new Set([3,1,1,1,1,1]);
        set.add(23);
        set.delete(1);
        console.log(set.has(3));

1.6 iterator

遍历数组

 var arr=[3,4,5];
    for (var x of arr){
        console.log(x);
    }

遍历map

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

遍历set

 var set=new Set([['tom',110],['jack',90],['haha',20]]);
    for (let x of set){
        console.log(x)
    }

注意:for…in 和for…of 的区别

for…in 遍历出来的是下标

for…of 遍历出来的是元素

2.函数

2.1定义函数

puclic 返回值类型 方法名(){ return 返回值;}

定义方式一：

绝对值函数

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;
    }
}

function(x){…}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！

方式一和方式二等价！

调用函数

abs(10) //10
abs(10) //-10

参数问题：javaScript可以传任意个参数，也可以不传参数

参数进来是否存在的问题？假设不存在参数,

var abs=function(x){
            if (typeof x!=='number'){
                throw "Not a Number";
            }
            if(x>=0){
                return x;
            }else{
                return -x;
            }
        }

argument是一个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;
            }
        }

问题：argument包括所有的参数，我们有时想使用多余的参数来进行附加操作，需要排除已有参数~

rest

ES6引入的新特性，获取除了已经定义的参数之外的所有参数~

以前：

 if (arguments.length>2){
            for (var i=2;i<arguments.length;i++){
            }
        }

现在用rest:

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

aaa(1,2,3,4,5,5,67)
 a=>1
 b=>2
 [3, 4, 5, 5, 67]

2.2变量的作用域

在javaScript中,var 定义变量实际试试有作用域的.

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

function qj(){
            var x=1;
            x=x+1;
        }
        x=x+2;//x is not defined

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

  function qj(){
            var x=1;
            //内部函数可以访问外部函数的成员，反之不行
            function qj2(){
                var y=x+1;
            }
            var=y+1;//y is not defined
        }
        x=x+2;  function qj(){
            var x=1;
            //内部函数可以访问外部函数的成员，反之不行
            function qj2(){
                var y=x+1;
            }
            var=y+1;//y is not defined
        }

假设，内部函数变量和外部函数的变量，重名！

function qj(){
            var x=1;
            function qj2(){
                var x='A';
                console.log("inner"+x);
            }
            console.log("outer"+x);
            qj2();
        }

假设在JavaScript中函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量.

提升变量的作用域:

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

结果：xundefined

说明: js 执行引擎，自动提升了y的声明，但是不会提升变量y

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

这个是在JavaScript建立之初就存在的特性，养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护。

function qj2(){
            var y,z,c,v,b;
            y=z+c;
        }

全局函数

  var x=1;
        function f(){
            console.log(x);
        }
        f();
        console.log(x+1);

全局对象window

'use strict'var x="xxx";
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下

alert()这个函数本身也是一个window变量

var x="xxx";
        window.alert(x);
        var old=window.alert;
        old(x);
        window.alert=function (){

        };
        //发现alert()失效了
        window.alert(111);
        window.alert= old;
        window.alert(222);

javaScript实际上只有一个全局作用域，任何变量(函数也可以视为变量),假设没有在函数作用范围内找到，就会向外查找。如果在全局作用域都没有找到,报错：RerenceError

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突–> 如何能够减少冲突?

 //唯一全局变量
        var App={};
        //定义全局变量
        App.name='lqs';
        App.add=function (a,b){
            return a+b;
        }

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

JQuery

局部作用域let

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

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

function aaa(){
            for (let i = 0; i <100 ; i++) {
                console.log(i);
            }
            console.log(i+12);
        }

建议大家都使用let去定义局部作用域的变量;

常量const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量，建议不要修改。

var PI='3.14';

        console.log(PI);
        PI='233'//可以改变
        console.log(PI);

在ES6引入了常量关键字const

  const PI='3.14';//只读变量
        console.log(PI);
        PI='222';//TypeError: Assignment to constant variable.

2.3方法

定义方法

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

var lqs={
            name:'666',
            brith:2020,
            //方法
            age: function (){
                //今年-出生的年
               var now= new Date().getFullYear();
               return now -this.brith;
            }
//属性
lqs.age
//方法,一定要带括号
lqs.age()

        }

this代表什么？拆开上面的代码看看

function getAge(){
            var now= new Date().getFullYear();
            return now -this.brith;
        }
        var lqs={
            name:'666',
            brith:2020,
            //方法
            age: getAge
        }
//lqs.age() ok
//getAge()  NaN  window

this是无法指向的，是默认指向调用它的那个对象;

apply

在js中可以控制this的指向

function getAge(){
            var now= new Date().getFullYear();
            return now -this.brith;
        }
        var lqs={
            name:'666',
            brith:2020,
            //方法
            age: getAge
        }
        getAge().apply(lqs,[]) //this指向了lqs对象，参数为空

3.内部对象

标准对象

typeof 666
'number'
typeof '66'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof 1.2
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undifined
'undefined'

3.1Date

基本使用

 var now= new Date();
       console.log(now);
       now.getFullYear();//年
       now.getMonth();//月
       now.getDate();//日
       now.getDay();//星期几
       now.getHours();//时
       now.getMinutes();//分
       now.getSeconds();//秒

       now.getTime();//时间戳 全世界统一，从1970.1.1 0:00:00 毫秒数
       console.log(new Date(1722489196378))

转换

now.toLocaleDateString()
'2024/8/1'
now.toLocaleString()  //获取当前时间，注意：调用是一个方法，不是一个属性
'2024/8/1 13:13:37'

3.2 JSON

json是什么

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

在javaScript一切皆为对象，任何js支持的类型都可以用JSON来表示；

格式：

对象都用{}
数组都用[]
所有的键值对都是用key:value

JSON字符串和JS对象的转化

  var user={
            name:"lqs",
            age:22,
            sex:"男"
        }
 //将对象转化为JSON字符串
       var josnUser= JSON.stringify(user)
        console.log(josnUser)
        //josn字符串转换为对象
       var obj= JSON.parse('{"name":"lqs","age":22,"sex":"男"}')

很多人搞不清楚，JSON和JS对象的区别

var obj ={a:'hello',b:'hello'};

var json='{"a":"hello","b":"hello"}'

3.3Ajax

原生的js写法 xhr异步请求
jQuey封装好的方法 $(“#name”).ajax(“”)
axios请求

4.面向对象编程

4.1什么是面向对象

类：模板

对象: 具体的实例

在javaScript中这个需要大家换一下思维方式!

原型：

 var user={
            name:"lqs",
            age:22,
            sex:"男"
        }
        var xiaoming={
            name:"xiaoming"
        }
        //小明的原型是user
        xiaoming.__proto__=user;

class继承

class关键字，是在ES6引入的

 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 xiaoming1=new xiaoStudent("xiaoming1",3);

5.操作BOM对象(重点)

浏览器介绍

JavaScript和浏览器关系？

javaScript诞生就是为了能够让他在浏览器中运行！

BOM:浏览器对象模型

IE 6-11
Chrome
Safari
FireFox
Opera

三方

QQ浏览器
360浏览器

window

window代表浏览器窗口

window.al
undefined
window.alert()
undefined
window.innerHeight
1055
window.innerWidth
187
window.outerHeight
939
window.outerWidth
1098

Navigator

Navigator 封装了浏览器的信息

navigator.appName
'Netscape'

navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36'
navigator.platform
'Win32'

大多数时候，我们不会使用Navigator对象，因为会被人为修改！

不建议使用这些属性来判断和编写代码

screen

screen.width
1707 px
screen.height
960  px

location(重要)

location 代表当前页面的URL信息

host: "localhost:63342"
href:"http://localhost:63342/javaScript1/lesson03/7.class%E7%BB%A7%E6%89%BF.html?_ijt=fcup5qv2mcccssfjb01bv885rg&_ij_reload=RELOAD_ON_SAVE"
protocol: "http:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('https://blog.kuangstudy.com/')

document

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

document.title
"百度一下，你就知道"
document.title='lqs说'
"lqs说"

获取具体的文档树节点

dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>
<script>
   var dl = document.getElementById("app");
</script>

获取cookie

document.cookie
'3AB9D23F7A4B3CSS=jdd03ODT2IPB2SKQIOHA3DOEKPRN6F7ML7GGNPBXSPJING4TLQETINSHYLERUP3IQ6RRCHAZO2OHSQCLHDFORXY57CFOQTAAAAAMQ33OVV7IAAAAACOCZ2AMKFIB7QMX; 3AB9D23F7A4B3C9B=ODT2IPB2SKQIOHA3DOEKPRN6F7ML7GGNPBXSPJING4TLQETINSHYLERUP3IQ6RRCHAZO2OHSQCLHDFORXY57CFOQTA'

劫持cookie原理

www.taobao.com

<script src="aa.js"> </script>
<!--恶意人员，获取你的cookie上传到他的服务器-->

服务器端可以设置cookie：httpOnly

history

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

6.操作DOM对象（重点）

核心

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

更新：更新Dom节点
遍历Dom节点，得到Dom节点
删除：删除一个Dom节点

添加：添加一个新的节点要操作一个Dom节点，就必须要先获得这个Dom节点

   var h1= document.getElementsByTagName('h1');
   var h2= document.getElementById('p1');
   var h3= document.getElementsByClassName('p2');
   var h4= document.getElementById('father');

  var childrens= father.children;//获取父节点下的所有子节点
   //father.firstChild;
   // father.lastChild;

这是原生代码，之后我们尽量都是用JQuery（）；

更新节点

<script>

    var id1= document.getElementById('id1');


</script>

id1.innerText=‘456’ 修改文本的值
- id1.innerHTML=‘123’ 可以解析文本标签

操作JS

id1.style.color='red'; //属性使用字符串
'red'
id1.style.color='yellow';-转驼峰命名
'yellow'
id1.style.Padding='2em';
'2em'

删除节点

删除节点的步骤：先获取父节点，在通过父节点

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

father.removeChild(p1)

father.removeChild(father.children[0])
<h1>标题一</h1>
father.removeChild(father.children[1])
<p id="p1">p1</p>
father.removeChild(father.children[2])

注意：删除节点的时候会动态变化的需要注意。

插入节点

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

追加

<body>
<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');
   //通过js创造新的节点
  var newP= document.createElement('p');//创建一个p便签
   newP.id='newP';
   newP.innerText='Hello,lqs';
    list.appendChild(newP);

    //可以创建一个style标签
   var myStyle= document.createElement('style');
   myStyle.setAttribute('type','text/css');
   myStyle.innerHTML='body{ background-color:chartreuse;}';
   document.getElementsByTagName('head')[0].append(myStyle);

</script>

insertBefore

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

7.操作表单（验证）

表单是什么 form DOM树

文本框 input=“text”
下拉框
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
… 表单的目的：提交信息

获得要提交的信息

<form action="#" method="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="women" id="girl"> 女
</p>

</form>

<script>

   var input_text= document.getElementById('userName');
   var body_radio= document.getElementById('boy');
   var girl_radio= document.getElementById('girl');
   //得到输入框的值
   input_text.value;
   body_radio.value;
   girl_radio.value;
   //修改输入框的值
   input_text.value='123';

   //对于单选框，多选框等固定的值，body_radio.value只能取到当前的值
   body_radio.checked //查看返回的结果是否为ture，如果为true则被选中
  // true
   girl_radio.checked
  // false

提交表单，md5加密密码，表单优化

<!-- 表单绑定提交事件-->
<form action="#" method="post" onsubmit="aaa()">
    <p>
        <span>用户名:</span><input type="text" id="userName" name="userName">
    </p>
    <!--多选框的值，就是定义好的value-->
    <p>
        <span>密码:</span><input type="password"  id="input_passWord" >

    </p>
    <input type="hidden" id="md5_passWord" name="passWord">
    <p>
        <!--绑定事件 onclick-->
        <button type="submit" onclick="return aaa()">提交</button>
    </p>

</form>

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

10.JQuery

javaScript和jQuery库

jQuery库里面存在大量的javaScript函数

获取JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn 引入
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
-->
    <script src="lib/jQuery-3.7.1.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
    document.getElementById('test-jquery');
    //选择器就是css的选择器
    $('#test-jquery').click(function (){
        alert('hello,jquery')
    })
</script>
</body>
</html>

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<a href="#" id="a1" class="a1">点我</a>
<script>
    //id
   var a1= document.getElementById('a1');
   //类
    document.getElementsByClassName('');
    //标签
    document.getElementsByTagName('a');

    //jQuery
    //标签选择器
    $('p').click();
   //id选择器
    $('#a1').click();
    //class选择器
    $('.a1').click();


</script>
</body>
</html>

文档工具站: (http://jquery3.yanzhihui.com/index.html)

事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jQuery-3.7.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>
//当网页元素加载完毕之后，响应事件
$(document).ready(function (){

})
//简化后
$(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('1234');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong> ');//设置值

元素的显示和隐藏：本质display：none；

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

qq_73695533

关注

10
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

puclic 返回值类型方法名(){ return 返回值;定义方式一：绝对值函数if(x>=0){return x;一旦执行到return 代表函数结束，返回结果!如果没有执行return,函数执行完也会返回结果，结果就是undefinedif(x>=0){return x;function(x){…}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！方式一和方式二等价！调用函数。
复制链接

扫一扫