当前位置：首页>笔记分享>前端笔记>JavaScript

JavaScript

JavaScript

1、 什么是JavaScript

1.1、 概述

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

Java、JavaScript

10天JavaScrip被写出来

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

1.2、 历史

https://blog.csdn.net/kese7952/article/details/79357868

ECMAScirpt他可以理解为是JavaScript的一个标准

最新版本已经到es6版本，但是大部分浏览器还只停留在支持es5代码上！

开发环境—线上环境，版本不一致

2、 快速入门

2.1、 引入JavaScript

  1. 内部标签
<script>window.alert("你好");</script>
  1. 外部引入
<script src="js/fistjs.js"></script>
  1. 测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签内写JavaScript代码，script标签必须成对出现，不用显式定义type，默认就是JavaScript-->
<script type="text/javascript"></script>
<!--第一种方式，内部引用
<script>
window.alert("你好，小鹏");
</script>-->
<!--第二种方式，外部引用-->
<script src="js/fistjs.js"></script>
</head>
<body>
</body>
</html>

2.2、 基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var score = 71;
    if (score>=0&&score<=100){
        if (score>70&&score<80){
            alert("70-80");
        }else if (score<70) {
            alert("0-70");
        }else {
            alert("other");
        }
    }
</script>
</body>
</html>

2.3、 数据类型

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

变量

var a = 1;

number

js不区分小数和整数统一用Number

123//整数
123.1//浮点数
-99//负数
NaN//not a number
Infinity//表示无限大

字符串

‘abc’ “abc”

布尔值

true false

逻辑运算符

&&  //两个都为真，结果为真
||    //一个为真，结果为真
!    //真即假，假即真

比较运算符

=    //赋值预算法
==    //等于（类型不一致，值一样，也会判断为true  即判断1=='1'）
===    //    绝对等于（类型一样，值一样，结果为true）***************

这是一个JS的缺陷，坚持用===进行比较

须知：

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

浮点数问题：

console.log(1/3)===(1-2/3) //结果为false

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

Math.abs(1/3-(1-2/3))<0.00000001 //结果为true

null和undifined

  • null 空
  • undefined 未定义

数组

Java的数组必须是相同类型的对象。JS中不需要这样！

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',null,true];
//取数组下标：如果越界了，就会报undefined 不像java报错

对象

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

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

var person = {
    name: "小鹏",
    age: 16,
    tags: ['有趣','幽默', '一米五', '大眼睛']
}

取对象的值

person.name //"小鹏"
person.tags[0] //"幽默"

2.4、 严格检查格式

'use strict'严格价差模式，预防JavaScript随意性导致产生的一些问题 （要在ES6下）

必须写在script标签内的第一行！

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
前提：Idea，设置支持ES6语法
'use strict';严格检查模式，预防JavaScript随意性导致产生的一些问题
必须写在script标签内的第一行！
局部变量建议都使用let去定义
-->
<script>
    'use strict';
    let i = 1;
</script>
</body>
</html>

3、 数据类型

3.1、 字符串

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

2.注意转义字符 \

\'
\n   //换行
\t   //table
\u4e2d   \u#### Unicode 字符
\x41       // Ascll字符

3.多行字符串编写

//tab 和ESC键中间的字符`` 包裹
var msg = `
        hello
        world
        你好
        `

4.模板字符串

let name = '小鹏';
let msg = `你好呀，${name}`;

5.字符串长度

str.length

6.字符串不可变

let student = "student"; student[1] = 1;
>1
console.log(student)
>student

7.大小写转换方法

let student = "student";
console.log(student.toUpperCase());
console.log(student.toLowerCase());

8.获取指定下标

sutdent.indexOf(‘t’);

9.substring

let student = "student";
//左闭右开[0,3)，从第一个字符串取到第二个 stu;
console.log(student.substring(0,3));

3.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”和数字的1是不同的

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

4.push() ， pop() 从尾部增或者删

//push(); 压入到尾部
let arr = [1,2,3,4,5,"6","a"];
arr.push("b");
[1, 2, 3, 4, 5, "6", "a", "b"];
//pop();删除尾部
arr.pop();
[1, 2, 3, 4, 5, "6", "a"];

5.unshift() , shift() 从头部增或者删

//unshift() 头部增加
let arr = [1, 2, 3, 4, 5];
arr.unshift(0);
[0, 1, 2, 3, 4, 5];
//shift(),删除头部
arr.shift();
[1, 2, 3, 4, 5];

6.排序 sort()

let arr = [6, 2, 8, 4, 5];
arr.sort();
[2, 4, 5, 6, 8];

7.元素反转

let arr = [2, 4, 5, 6, 8];
arr.reverse();
[8, 6, 5, 4, 2];

8.concat()拼接

let arr = [8, 6, 5, 4, 2];
arr.concat(['a','b','c']);
//返回一个新的数组 [8, 6, 5, 4, 2, "a", "b", "c"];
//并未改变原来的数组arr
[8, 6, 5, 4, 2];

9.连接符 join

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

let arr = [8, 6, 5, 4, 2];
arr.join("-");
"8-6-5-4-2";

10.多维数组

let arr = [[1,2], [3,4], ['a','b']];
arr[1][1];
4;

3.3、 对象

若干个键值对

/*var 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}*/
var person = {
    name : "小鹏",
    age : 16,
    email : "summer@qq.com",
    score : 100
}

js中的对象， {…..}表示一个对象，键值对描述属性xx : xx，多个属性之间使用逗号隔开，最后一个属性不加逗号！

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

  1. 对象赋值

    var person = {
   name : "",
   age : 16,
   email : "summer@qq.com",
   score : 100
}
person.name="小鹏";
>"小鹏"
person.name;
>"小鹏"

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

    var person = {
   name : "",
   age : 16,
   email : "summer@qq.com",
   score : 100
}
person.dog;
undefined

  3. 动态的删减属性，通过delete删除对象的属性

    var person = {
   name : "",
   age : 16,
   email : "summer@qq.com",
   score : 100
}
delete person.score;
person
>{name: "小鹏", age: 16, email: "summer@qq.com"}

  4. 动态的添加，直接给新的属性添加值即可

    var person = {
   name : "",
   age : 16,
   email : "summer@qq.com",
   score : 100
}
person.dog = "tom";
person.tom;
>tom

    java打死都不能实现这个操作

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

    var person = {
   name : "小鹏",
   age : 16,
   email : "summer@qq.com",
   score : 100
};
"age" in person; //键都是字符串
>true;
//继承
'toString' in person
>true;

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

    var person = {
   name : "小鹏",
   age : 16,
   email : "summer@qq.com",
   score : 100
};
person.hasOwnProperty("toString");
>false
person.hasOwnProperty("age");
>true

3.4、 流程控制

if判断

var age = 3;
if(age > 3){
    alert("哈哈");
}else if(age < 5){
    alert("kuwa~");
}else{
    alert("heihei");
}

while循环，避免程序死循环

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

for循环

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

forEach循环

var age = [12,3,4,22,23,55];
//传一个函数
age.forEach(function (value,index) {
    console.log(value);
    console.log(index);
})

fo…in

//for(var index in object)
var age = [12,3,4,22,23,55];
for (var num in age){
    console.log(age[num]);
}

3.5、 Map 和 Set

ES6新特性

Map：

var map = new Map([['tom',100],['jack',90],['tim',80]]);
var name = map.get('tom');//通过key获取value
map.delete('tom');//删除元素
map.set('kate',70);

Set: 无序不重复的集合

var set = new Set([3,2,1]);
set.add(5);//增加元素
set.delete(3);//删除元素
set.has(1);//判断是否包含元素
set.size;//长度

3.6 iterator

遍历数组

//通过for of遍历值 / for in 遍历下标
var array = [1,2,3];
for (let x of array){
    console.log(x);
}

通过for of遍历值 / for in 遍历下标

遍历map

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

遍历set

var set = new Set([3,2,1]);
for (var x of set){
    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;
    }
}

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

方式一和方式二等价！

调用函数

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

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

参数传多个问题

function abs (x){
    if(typeof x!== "number"){
        throw "Not A Number"; //手动抛出异常
    }
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

arguments

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

代表 传递进来的所有参数，是一个数组！

function abs(x){
    for(let i = 0;i < arguments.length;i++){
        console.log(arguments[i]);
    }
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

arguments 包含所有的参数，想使用多余的参数操作，需要排除已有参数

rest

获取除了已定义的参数之外所有的参数 …

function abs (x,y...rest){
    console.log(rest);
}

4.2、 变量的作用域

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

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

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

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

function abs(){
    var x = 1;
    x = x +1;
}
function ab(){
    var x ="a";
    x = x + 1;
}

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

function abs(x) {
    var a = 1;
    function f(a) {
        var b =a+1;
    }
    var c = b+1;//Uncaught ReferenceError: b is not defined
}

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

function abs(x){ 
    var a = 1;
    function ab(y){
        var a ="A";
        console.log("内部"+a);
    }
    console.log("外部"+a);//输出外部1
}

全局函数

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

全局对象 window

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

规范

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

//唯一全局变量
var xxlApp={};
//定义全局变量 
xxlApp.name = "小鹏";
xxlApp.age = function (a,b){
    return a + b;
}

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

function ab(){
    for(let i = 0;i<100;i++){
        console.log(i);
    }
    console.log(i);//报错
}

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

var PI = 3.14
console.log(PI);
PI = 123;//可以修改
console.log(PI);

在ES6引入了常量关键字 const

const PI = 3.14; //只读变量
PI = 123;//报错 Attempt to assign to const or readonly variable
console.log(PI);

4.3、方法

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

var xp = {
                name:"小鹏" ,
                birth:1998 ,
                age:function(){
                    var now = new Date().getFullYear();
                    return now-this.birth ;
                }
            }
            console.log(xp.age());//调用方法要加括号

apply 改变this指向

function getAge(){
                    var now = new Date().getFullYear();
                    return now-this.birth ;
                }
            var xp = {
                name:"小鹏" ,
                birth:1998 ,
                age:getAge
            }
            console.log(xp.age());//可以
            console.log(getAge()); //this表示调用的对象
            console.log(getAge.apply(xp,[])); //apply改变this的指向，参数为空

谁调用this指向谁

5、 内部对象

5.1、 Date

data = new Date();
Tue Nov 09 2021 19:05:23 GMT+0800 (中国标准时间)
data.getDate()
9
data.getDay() 
2
data.getFullYear()
2021
data.getHours()
19
data.getMinutes()
5
data.getMonth()
10//从0-11
data.getSeconds()
23
time = data.getTime();
1636455923897
new Date(time)
Tue Nov 09 2021 19:05:23 GMT+0800 (中国标准时间)

转换

data = new Date();
Tue Nov 09 2021 19:05:23 GMT+0800 (中国标准时间)
data.toLocaleString()
"2021/11/9 下午7:05:23"

5.2、 Json

早期，所有的数据传输习惯都使用XML文件！

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

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

格式：

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

JSON字符串和JS对象的转换

var user = {
    name: '小鹏',
    age: 16,
    sex: '女'
}
let jsonUser = JSON.stringify(user); //对象转json
let json = '{"name":"小鹏","age":16,"sex":"女"}'; //json字符串转对象
let parse = JSON.parse(json);

JSON和JS对象的区别

var obj = {name:"小鹏",age:16};
var json = '{"name":"小鹏","age":"16"}';

5.3、 Ajax

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

6、 面向对象编程

javascript、java、c#。。。面向对象，javascript有些区别！

  • 类：模板（原型对象）
  • 对象：具体的实例

在javascript这个需要大家换一下思维方式！

原型

var user = {
    name: "ding",
    age: "3",
    run: function () {
        console.log(this.name + "run.....")
    }
};
// 原型对象
var xiaoming = {
    name: "xiaoming"
};
var Bird = {
    fly: function () {
        console.log(this.name+ "fly....")
    }
}
// 小明的原型 是user
xiaoming.__proto__ = user;
function Student(name) {
    this.name = name;
}
// 给student新增一个方法
Student.prototype.hello = function () {
        alert('Hello')
}

class继承

class关键字，是在ES6引入的

class Student{
    constructor(name){//构造器
        this.name = name;
    }
    hello(){ //方法
        alert('hello')
    }
}

extends继承

function Student(name) {
    this.name = name;
}
// 给student新增一个方法
Student.prototype.hello = function () {
    alert('Hello')
}
//上面是老方法可不记
//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 xiaohong = new Student("xiaohong");

本质：查看对象原型

原型链

百度哈

7、 操作BOM对象（重点）

BOM：浏览器对象模型

浏览器介绍

JavaScript和浏览器的关系

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

  • IE 6~11
  • Chrome
  • Safari
  • FireFox
  • Opera

第三方

  • QQ游览器
  • 360

window

window 代表游览器窗口

window.alert(1); 
window.innerHeight;//屏幕宽高
window.innerwidth;
window.outerHeight;
window.outerWidth;
//大家可以调整游览器窗口

Navigator

Navigator，封装了游览器的信息

navigator.appName;
navigator.appVersioin;
navigator.userAgent;
navigator.platform;

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

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

screen

screen.width
screen.height
//代表屏幕尺寸

location(重要)

location 代表当前页面的URL信息

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

document

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

document.title
document.title='ding'

获取具体的文档树节点

<body>
<dl id="app">
    <dt>java</dt>
    <dd>python</dd>
    <dd>ding</dd>
</dl>
</body>
<script>
    var dl = document.getElementById('app');
</script>

获取cookie

document.cookie;

劫持cookie原理

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

服务器端可以设置cookie：httpOnly来保证安全性

history（不建议使用）

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

8、 操作DOM对象（重点）

核心

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

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

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

获得Dom节点

//对应 css选择器
var h1 = doucment.getElementByTagName('h1');
var p1 = doucment.getElementById('p1');
var p2 = doucment.getElementByClassName('p2');
var father = doucment.getElementById('father');
//获取父节点下所有的子节点
var childrens = father.children;
//father.firstChild
//father.lastChild

这是原生代码，之后会使用jQuery();

更新节点

<div id='id1'>
    <script>
        var id1 = document.getElementById('id1');
        id1.innerHTML('123')
        id1.style.color = 'red';//属性使用''包裹
        id1.style.fontSize = '200px';//- 转驼峰命名
        id1.style.padding = '2em';
    </script>
</div>

删除节点

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

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p2 class="p2">p2</p2>
</div>
<script>
    var self = document.get ElementById('p1');
    var father = p1.parentElement;
    father.removeChild(self)
    //删除时一个动态的过程
    father.removeChild(father.children[0])
</script>

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

插入节点

我们获得了某哦个DOM节点，假设DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素，我们就不能这样做了，因为会覆盖。

追加

<p id="js">biancheng</p>
<div id="list">
<p id="se">javascript</p>
<p id="ee">java</p>
<p id="py">python</p>
</div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js); //追加到后面
</script>

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

var js = document.getElementById('js');   //已经存在的节点
var list = document.getElementById('list');
// 通过js 创建一个新的节点
var newp = document.createElement('p'); //创建一个P标签
newp.id = 'newp';
newp.innerText = 'hello,ding';
list.appendChild(newp)
// 可以创建一个Style标签
var mystyle= document.createElement('style');
mystyle.setAttribute('type','text/css');
// 设置标签内容
mystyle.innerHTML = 'body{background-color: #ffeb3b}'; 
document.getElementsByTagName('head')[0].appendChild(mystyle)
var ee = document.getElementById('ee');
var py = document.getElementById('py');
var list = document.getElementById('list');
 //要包含的节点，insertBefore（new，target）
list.insertBefore(py,ee);

9、 操作表单（验证）

表单时什么 form DOM树

  • 文本框 text
  • 下拉框 select
  • 单选框 radio
  • 多选框 checkbox
  • 隐藏域 hidden
  • 密码框 password
  • …

表单的目的：提交信息

获得要提交的信息

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <!--多选框的值，就是定义好的-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="boy" id="boy"> 男
        <input type="radio" name="sex" value="girl" 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 = '123'
    //对于单选框，多选框等等固定的值，boy_radio.value 只能取到当前的值
    boy_radio.checked; //查看返回的结果，是否为true，如果为true 则这个被选中
    girl_radio.checked = true;
</script>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
<!--
表单绑定提交事件
onsubmit= 绑定一个提交检测的函数
true,false
讲这个结果返回给表单，使用onsubmit接收！
-->
    <form action="https://www.baidu.com" method="post" onsubmit="return submitMsg()">
        <p>
            <span>用户名</span><input type="text" id="username" name="username">
        </p>
        <p>
            <span>密码</span><input type="password" id="password">
        </p>
        <p>
            <span></span><input type="password" id="pwd" name="password" hidden="hidden">
        </p>
        <p>
            <button type="submit" id="but">提交</button>
        </p>
    </form>
</div>
<script>
    function submitMsg() {
        let username = document.getElementById('username').value;
        let password = document.getElementById('password').value;
        if (username.length < 6 || password.length < 6) {
            window.alert("用户名或密码不符合规范");
            return false
        } else {
            password = "别抓了，看不到的,哈哈哈哈哈";
            document.getElementById('pwd').value = password;
            return true
        }
    }
</script>
</body>
</html>

10、 jQuery

javascript

jquery库，里面存在大量的javascript函数

获取jquery

https://www.bootcdn.cn/jquery/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
</body>
</html>

使用jquery

<a href="" id="test-jquery">点我</a>
<script>
    //选择器就是css选择器
    $('#test-jquery').click(function () {
        alert('hello,jquery')
    })
</script>

选择器

//原生态js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jquery css 中的选择器他全部都能用
('p').click(); //标签选择器('#id').click(); //id选择器
('.class1').click(); //class选择器
公式：(selector).action()

事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.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('设置值');//设置值
$('#test-ul').html();    //获得值
$('#test-ul').html('<strong>123</strong>');  //设置值

css的操作

$('#test-ul li[name=python]').css("color","red")

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

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

娱乐测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

小技巧

1、巩固JS（看游戏源码）

2、巩固HTML，CSS（扒网站，全部down下来，然后对应修改看效果~）

  • 扒站技巧删除对网页没影响的

Layer弹窗组件

Element-ui

给TA打赏
共{{data.count}}人
人已打赏
JavaScript前端
前端笔记

CSS层叠样式表

2021-12-28 17:40:58

前端笔记

初始化创建Vue工程的3种方法

2022-8-31 15:05:24

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯
购物车
优惠劵
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

返回顶部