JavaScript学习笔记

kkkk️

已于 2024-08-22 10:44:03 修改

阅读量547

点赞数 11

文章标签： javascript 学习笔记

于 2024-08-22 10:43:59 首次发布

本文链接：https://blog.csdn.net/m0_58533479/article/details/141296066

版权

JavaScript 是一门世界上最流行的脚本语言

一个合格的后端人员，必须要精通JavaScript

ECMAScript它可以理解为是JavaScript的一个标准

快速入门

引入JavaScript

内部标签

 <!-- script标签内，写JavaScript代码 -->
    <script>
        alert('Hello world');
    </script>

外部引用

js1.js

js代码

test.html

<!-- 外部引入 -->
<!-- 注意 script标签必须成对出现 -->
<script src="../JS/js1.js"></script>

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- script标签内，写JavaScript代码 -->
    <script>
        alert('Hello world');
    </script>

    <!-- 外部引入 -->
    <!-- 注意 script标签必须成对出现 -->
    <script src="../JS/js1.js"></script>

    <!-- 不用显示定义type，默认就是 -->
    <script type="text/javascript"></script>
</head>
<body>
    <!-- 这里也可以存放js代码 -->
</body>
</html>

基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- JavaScript 严格区分大小写 -->
    <script>
        // 1. 定义变量  变量类型  变量名 = 变量值
        var num = 1;

        //console.log() 在浏览器的控制台打印变量！
    </script>
</head>
<body>
    
</body>
</html>

数据类型

数值，文本，图形，音频，视频……

js不区分小数和整数：Number

123 整数

123.1 浮点数

1.123e3 科学计数法

-99 负数

NaN not a number

Infinity 表示无限大

字符串

'abc' "abc"

布尔值

true false

逻辑运算

&& 与两个都为正，结果为真

|| 或一个为真，结果为真

！真就是假，假就是真

比较运算符

=

== 等于（类型不一样，值一样，也会判断为true）

=== 绝对等于（类型一样，值一样，结果为true）

这是一个Js的缺陷，坚持不要使用 == 比较

须知

NaN === NaN 这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题

console.log((1/3) === (1-2/3))

尽量避免使用浮点数进行运算，存在精度问题！

Math.abs(1/3-(1-2/3))<0.00000001

null 和 undefined

null 空

undefined 未定义

数组

Java的数组必须是一些相同类型的对象，Js中不需要这样

    <script>
        // 保证代码的可读性，尽量使用[]
       var arr = [1,2,3,4,5,"hello",null,true];

       new Array(1,21,3,5,6,"Hello");
    </script>

取数组下表：如果越界了，就会打印 undefined

对象

对象是大括号，数组是中括号

每个属性都使用逗号隔开，最后一个属性不需要添加逗号

    <script>
        // Person person = new Person(1,2,3);
       var person = {
        name: "hy",
        age: 18,
        tags:["Java","Linux","Redis","...."]
       }
    </script>

取对象的属性：person.name......

严格检查模式

使用的编辑器，需要设置支持ES6语法

'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题

必须写在JavaScript的第一行

局部变量建议都使用 let 定义

数据类型深入

字符串

1、正常的字符串使用单引号、双引号包裹

2、注意转义字符 \

\'

\n

\t

\u4e2d \u### Unicode字符

3、多行字符串编写

// ``   tab上面esc下面那个键
        var msg = `hello
        world
        你好`;

4、模版字符串

let name ="hy";
let age = 18;
let msg = `你好,${name}`

5、字符串长度

str.length

6、字符串的可变性，不可变

7、大小写转换

大写：student.toUpperCase() 是方法！不是属性！！！

小写：student.toLowerCase()

8、获取元素的下标：indexOf('t');

9、截取a~b之间的元素：substring();

student.substring(1) 从第一个字符串截取到最后一个字符串

student.substring(1,3) [1,3)包含第2个不包含第3个

数组

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

var arr = [1,3,5,2,"Hello",null,true]；通过下标取值和赋值

arr[0]

arr[0] = 1

1、长度

arr.length

注意：假如给数组长度赋值，数组大小就会发生变化! 如果赋值过小，元素就会丢失!

2、通过元素获得下表索引：indexOf();

字符串的 " 1 " 和数字 1 是不同的；

3、slice()截取Array的一部分，返回一个新的数组类似于String中的substring

4、push()、pop() 尾部添加和弹出

push()：压入到尾部

pop()：弹出尾部的一个元素

5、unshift()、shift() 头部添加或者弹出

unshift()：压入到头部

shift()：弹出头部的一个元素

6、排序：sort();

7、元素翻转：reverse()

8、添加数组并返回一个新的数组：concat()

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

9、连接符 join()

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

10、多维数组

对象

若干个键值对

var 对象名 = {

属性名：属性值，

属性名：属性值，

属性名：属性值

}

var person = {
            name:"hy",
            age: 18,
            email: "xxxxxx@xx.com",
            score: 0
        }

Js中的对象是用 {......} 表示一个对象，键值对描述属性xxx：xxx，多个属性之间使用逗号隔开，最后一个属性不加逗号

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

1、对象赋值

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

3、动态的删减属性

4、动态的添加属性

5、判断属性值是否在此对象中！ xxx in xxx

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

流程控制

if 判断

    var age = 3;
       if(age < 3){    //第一个判断
        alert("wawa");
       }else if(age > 4){    //第二个判断
        alert("haha");
       }else{    //否则....
        alert("hhh");
       }

while / do while循环，避免程序死循环

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



do{
age = age + 1;
    console.log(age);
}while(age < 50)

for循环

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

forEach循环

var age = [12,3,12,3,12,3,12,31,21,123];
age.forEach(function(value){
    console.log(value);
})

for...in循环

 // java 中的 for(type str : el){}
        // for(var index in object)
       for (var num in age) {     //in是打印下标 of是打印具体的值
        if (age.hasOwnProperty(num)) {
            console.log("存在");
            console.log(age[num]);
        }
       }

Map 和 Set

Map

var map = new Map([['tom',1000],['jack',50],['xiaohong',80]]);

var name = map.get('tom');    //通过key获取value

map.set('admin',123456);    //新增或者修改

map.delete('tom');    //删除

console.log(name);

Set：无序不重复的集合

var set = new Set([3,1,2,4,1,5,6,1]);

set.add(2);    //添加元素

set.delete(1);    //删除元素

console.log(set.has(3));    //查询是否包含某个元素

iterator

遍历数组

 //for of通过下标对应的值 / for in 通过下标
var arr = [1,2,3];
for(let i of arr){
    console.log(i);
}

遍历map

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

遍历set

var set = new Set([5,6,7]);
for(let i of set){
    console.log(i);
}

函数

定义函数

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)

abs(-10)

参数问题：JavaScript 可以传任意个参数，也可以不传递参数！

假设不存在参数，如何规避？

function abs(x){
    if(typeof x !== 'number'){     //如果 x 不是数值类型
        throw 'Not a number';    //抛出异常
    }
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

arguments

arguments是一个Js免费赠送的关键字


function abs(x){
    console.log("x>="+x);
    for(let 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("a>="+a);
        console.log(rest);
      }

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

变量的作用域

在JavaScript中，var定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用！（非要实现的话，可以研究闭包）

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

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

function qj(){
    var x = 1;
    x = x + 1;
}
function qj2(){
    var x = 'A';
    x = x + 1;
 }

内部函数可以访问外部函数的属性，反之则不行

function qj(){
    var x = 1;
    //内部函数可以访问外部函数的属性，反之则不行
    function qj2(){
        var y = x + 1;
    }
    var z  = y + 1;//Uncaught ReferenceError: y is not defined
}

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

function qj(){
    var x = 1;
    function qj2(){
        var x = 'A';
        console.log('in'+x);    //outer1
    }
    console.log('outer'+x);    //inA
    qj2()
}
qj()

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

提升变量的作用域

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

结果为xundefined

说明：Js执行引擎，自动提升了y的声明，但是不会提升变量的赋值，这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量的定义都放在函数的头部，不要乱放，便于代码的维护。

function qj(){
    var x,
        y = x + 1;
        z,i,a;//undefined
    //之后随意使用
}

全局函数

//全局变量
var x = 1;
function f(){
    console.log(x);
}
f();
console.log(x);

全局对象 window

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

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

var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
window.alert = function(){
 };
//发现 alert()失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没找到，就会报错RefrenceError

规范

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

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

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

局部作用域 let

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

建议都是用 let 去定义作用域的变量

常量 const

在ES6之前，常量的定义，都是使用全部大写字母命名的；建议不修改这样的值

var PI = '3.14';
console.log(PI);
PI = '123';//可以改变这个值
console.log(PI);

在ES6引入了常量关键字const

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

方法

定义方法

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

var hy = {
    name: 'xxx',
    birth: 2003,
    age:function(){
        var now = new Date().getFullYear;
        return now - this.birth;
    }
}
//属性
hy.name
//方法,调方法一定要带 ()
hy.age();

this指代调用它的变量

function getAge(){
            var now = new Date().getFullYear;
            return now - this.birth;
        }
        var hy = {
            name: 'xxx',
            birth: 2003,
            age: getAge    
        }
        //属性
        hy.age //ok
        //方法,调方法一定要带 ()
       getAge() //window

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

apply

在Js中可以控制this的指向

getAge.apply(hy,[]) //this指向了hy这个对象，参数为空

内部对象

标准对象

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

Date

基本使用

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

转换

now = new Date(1724131988322);
Tue Aug 20 2024 13:33:08 GMT+0800 (中国标准时间)
now.toLocaleString()    //注意，调用的是一个方法，不是一个属性
'2024/8/20 13:33:08'
now.toGMTString()
'Tue, 20 Aug 2024 05:33:08 GMT'

JSON

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

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

格式：

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

JSON字符串和对象之间的转换

var user = {
    name: "hy",
    age: 18,
    sex: '男'
}

//将对象转换为JSON字符串 {"name":"hy","age":18,"sex":"男"}
var jsonUser = JSON.stringify(user);

//将JSON字符串转为对象，参数为JSON字符串
var obj = JSON.parse('{"name":"hy","age":18,"sex":"男"}');

Ajax

原生的js写法 xhr异步请求
JQuery 封装好的方法 $("#id").ajax(" ")
axios请求

面向对象编程

JavaScript有些区别

类：模版原型对象

对象：具体的实例

在JavaScript中这个需要换一下思维方式

原型：

var user = {
            name: "hy",
            age: 18,
            sex: '男',
            run:function(){
                console.log(this.name + " run...");
            }
        }

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

class继承

class关键字是在ES6引入的

function student(name){
            this.name = name;
            hello:function(){
                alert("hello");
            }
        }

        //ES6之后
        //定义一个学生的类
        class student{
            constructor(){
                this.name = name;
            }
            
            hello(){
                alert("hello");
            }
        }

继承

class student{
            constructor(){
                this.name = name;
            }
            
            hello(){
                alert("hello");
            }
        }
    
        class xiaoStudent {
            constructor(name,grade){
                super(name);
                this.grade = grade;
            }
            myGrade(){
                alert('我是一名小学生');
            }
        }

操作BOM对象（重点）

JavaScript 与浏览器的关系：JavaScript 诞生就是为了能够让它在浏览器中运行！

BOM：浏览器对象模型

window

window 代表窗口浏览器窗口

window.innerHeight
924
window.innerWidth
363
window.outerHeight
1014
window.outerWidth
946

Navigator（不建议使用）

Navigator 封装了浏览器的信息，大多数时候，不会使用 navigator 对象，因为会被人为修改！

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

screen

代表屏幕尺寸

screen.width
1920 px
screen.height
1080 px

location（重要）

location 代表当前页面的URL信息

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

document（内容）

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

获取具体的文档树节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        document.getElementById("app");
    </script>
</head>
<body>
    <dl id="app">
        <dt>Java</dt>
        <dd>Linux</dd>
        <dd>JavaSE</dd>
    </dl>
</body>
</html>

document可以获取网页的 cookie：document.cookie

劫持cookie原理：<script src= "aa.js"></script> 恶意人员获取你的cookie上传到他的服务器

服务器端可以设置cookie：httpOnly

history

history代表浏览器的历史记录

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

操作DOM对象（重点）

DOM：文档对象模型

核心

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

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

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

获得dom节点

var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');

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

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

// father.firstChild; 获取父节点下的第一个子节点   

// father.lastChild;  获取父节点下的最后一个节点

这是原生代码，之后尽量都是使用jQuery();

更新节点

<div id="id1">

</div>
<script>
    var id1 = document.getElementById('id1');
</script>

操作文本

id1.innerText = '456'；修改文本的值
id1.innerHTML = '<strong></strong>';可以解析HTML文本标签

操作CSS

<div id="id1">

</div>
    <script>
        var id1 = document.getElementById('id1');
        id1.innerText = 'abc';
        id1.style.color = 'red';
        id1.style.fontSize = '20px';
        id1.style.padding = '2em';
    </script>

id1.style.color = 'red'; 修改文本的颜色属性使用字符串包裹
id1.style.fontSize = '20px'; 修改文本的字体大小驼峰命名
id1.style.padding = '2em'; 修改文本的内边距

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

    <div id="father">
        <h1>标题1</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
    <script>
        //对应CSS选择器
        var self = document.getElementById('p1');
        var p1 = self.parentElement;
        father.removeChild('p1');
    </script>

删除是一个动态的过程；

注意删除多个节的时候，children是在时刻变化的，删除节点的时候一定要注意！

插入节点

获得了某个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');//将id为js的标签追加到lisi标签下
    </script>

效果

创建一个新的标签，实现插入

    <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');
        //通过 JS 创建一个新的节点
        var newP =  document.createElement('p');// 创建一个p标签
        newP.id = 'newP';
        newP.innerText = 'Hello!';
        list.appendChild(newP);
    </script>

效果

测试

    <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');
        //通过 JS 创建一个新的节点
        var newP =  document.createElement('p');// 创建一个p标签
        newP.id = 'newP';//等价与 newP.setAttribute('id','newP');
        newP.innerText = 'Hello!';
        list.appendChild(newP);

        //创建一个script标签节点type类型为text/javascript
        var myScript = document.createElement('script');
        myScript.setAttribute('type','text/javascript');

        //创建一个style标签节点
        var myStyle = document.createElement('style');
        myStyle.setAttribute('type','text/css');
        myStyle.innerHTML = 'body{background-color: yellowgreen;}';
        //获取第一个名为head的标签，并将myStyle添加到head标签中
        document.getElementsByTagName('head')[0].appendChild(myStyle);
    </script>

insertBefore

    <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 ee = document.getElementById('ee');
        var list = document.getElementById('list');
        //要包含的节点insertBefore(newNode,targetNode)
        list.insertBefore(js,ee);
    </script>

操作表单（验证）

表单 form DOM树

文本框 text
下拉框 <select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
.......

表单提交的目的：提交信息

获得要提交的信息

    <form action="post">
        <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 boy_radio = document.getElementById('boy');
        var girl_radio = document.getElementById('girl');
       
        //对于单选框、多选框等固定的值，boy_radio只能去到当前的值
        boy_radio.checked;//查看返回的结果，是就为true，相反就是false，如果为true，则被选中！
        boy_radio.checked = 'true';//赋值
    </script>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://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">
        </p>
        <p>
            <span>密码：</span><input type="password" id="input_password">
        </p>
        <input type="hidden" id="md5_password" name="password">
        <!-- 绑定事件 onclick 被点击 -->
        <button type="submit" onclick="aaa()">提交</button>
    </form>
    
    <script>
        function aaa(){
            var uname =  document.getElementById('username');
            var md5pwd = document.getElementById('md5_password');
            md5pwd.value = md5(md5pwd.value);
            //可以校验判断表单内容，true就是通过提交，false阻止提交
            return true;
        }
    </script>
</body>
</html>

jQuery

JavaScript 与 jQuery库里面存在大量的JavaScript函数

获取

<!-- CDN在线 -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> -->

<!-- 下载到本地 导入 -->
<script src="lib/jquery-3.7.1.min.js"></script>

测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CDN在线 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> -->
    <!-- 下载到本地 导入 -->
    <script src="lib/jquery-3.7.1.min.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();//标签选择器
        $('#id').click();//id选择器
        $('.class').click();//class类选择器
    </script>

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

事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/jquery-3.7.1.min.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid greenyellow;
        }
    </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=Pyrgon]').text();//获得值
$('#test-ul li[name=Pyrgon]').text('123');//设置值

$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

CSS的操作

单个值为，多个值为键值对用 ,号表示间隔！

//单属性
$('#test-ul li[name=Python]').css("color","red");
//多属性
$('#test-ul li[name=Python]').css({"color":"red","font-size":"90px"});

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

$('#test-ul li[name=Python]').show();//显示
$('#test-ul li[name=Python]').hide();//隐藏

kkkk️

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记

return x;一旦执行到return 代表函数结束，返回结果！如果没有执行return，函数执行完也会返回结果，结果就是undefinedreturn x;function(x){...} 这是一个匿名函数，但是可以吧结果赋值给abs，通过abs就可以调用函数！两种定义方式等价调用函数abs(10)abs(-10)参数问题：JavaScript 可以传任意个参数，也可以不传递参数！假设不存在参数，如何规避？
复制链接

扫一扫