关闭javascript 下一页 javascript

转载

数据探索者11 2023-08-07 16:20:26

文章标签 关闭javascript 下一页数组字符串作用域 文章分类 JavaScript 前端开发

JavaScript

什么是JavaScript

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

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

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

快速入门

引入JavaScript

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

<!--    script标签内，写JavaScript代码-->
<!--    <script>-->
<!--        alert("hello world")-->
<!--    </script>-->

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

<!--    不用显示定义type，也默认就是javascript-->
    <script type="text/javascript"></script>

</head>
<body>

<!--这里也可以存放-->
</body>
</html>

外部引入：first.js

alert("hello world")

基本语法入门

<!--    JavaScript严格区分大小写！！！-->
    <script>
        // 1.定义变量    变量类型    变量名 = 变量值;
        var num = 52;
        // alert(num);
        // 2.条件控制
        if(num>40&&num<50){
            alert("40~50");
        }else if(num>50&&num<60){
            alert("50~60");
        }else{
            alert("other");
        }
        // console.log(num) 在浏览器的控制台打印变量！ 相对于sout
        
    </script>

关闭javascript 下一页 javascript_数组

数据类型

数值、文本、图像、音频、视频

变量

var a

number

js不区分小数和整数：Number

123 // 整数123
123.1 // 浮点数123.1
1.123e3 // 科学计数法
-99 // 负数
NaN // not a number
Infinity // 表示无限大

字符串

"abc" 'abc'

布尔值

ture false

逻辑运算

与&& 或|| 非 !

比较运算符

= 赋值
== 等于（类型不一样，值一样，也会判断为ture）
=== 绝对等于（类型一样，值一样）
这是js的一个缺陷，坚持不要使用 == 比较，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中不需要这样

var arr=[1,2,3,4,5,'hello',null,ture]
// 保证代码的可读性，尽量使用[]

取数组下标，如果越界了，就会undefined

对象

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

每个属性之间使用逗号隔开

//Person person = new Person(1,2,3,4,5);
var person={
    name:"zhangsan",
    age:18,
    tags['js','web','java']
}

取对象的值

person.name
> "zhangsan"
person.age
> 18

严格检查模式

'use strict';

<!--前提：IDEA需要设置支持ES6语法
    'use strict';   必须写在JavaScript的第一行！！
    严格检查模式,预防JavaScript的岁以下导致产生的一些问题
    局部变量建议都使用let去定义-->
    <script>
        'use strict';
        // 局部变量
        let i = 1;

    </script>

数据类型

字符串

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

2、注意转义字符 \

\n 换行
\t tab
\u#### Unicode字符
\x41 Ascii字符

3、多行字符串编写

<script>
  'use strict';

  var name=`早上好
            中午好
            晚上好`

</script>

4、模板字符串

let name="张三";
let age = 19;

let msg = `你好，${name}`

5、字符串长度

str.length

关闭javascript 下一页 javascript_关闭javascript 下一页_02

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

关闭javascript 下一页 javascript_作用域_03

7、大小写转换

//toUpperCase()方法
student.toUpperCase()	//大写
student.toLowerCase()	//小写

8、获取指定的下标

//indexOf()方法
student.indexOf('t')	// 1

9、截取某一段字符串

//substring()方法
student.substring(1,3)	// tu
student.substring(1)	// tudent  从第一个字符串截取到最后一个字符串

数组

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

var arr = [1,2,3,4,5]

1、长度

arr.length

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

2、IndexOf

通过元素获得下标索引

arr.indexOf(2)
1

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

3、slice()

截取Array的一部分，返回一个新数组，类似于String中的substring（）

4、push()，pop()

push：压入到尾部，在数组尾部添加元素
pop：弹出尾部的一个元素

关闭javascript 下一页 javascript_数组_04

5、unshift()，shift()头部

unshift：压入到头部，在数组头部添加元素
shift：弹出头部的一个元素

关闭javascript 下一页 javascript_字符串_05

6、排序sort()

关闭javascript 下一页 javascript_字符串_06

7、元素反转reverse()

关闭javascript 下一页 javascript_作用域_07

8、拼接concat()

关闭javascript 下一页 javascript_作用域_08

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

9、连接符join

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

关闭javascript 下一页 javascript_数组_09

10、多维数组

关闭javascript 下一页 javascript_数组_10

数组：存储数据（如何存，如何取，方法都可以自己实现）

对象

1、若干个键值对

var 对象名 = {
    属性名:属性值,
    属性名:属性值,
    属性名:属性值,
}

// 定义了一个person对象，有四个属性
      var person ={
          name:"张三",
          age:17,
          sex:"男",
          score:89
      }

关闭javascript 下一页 javascript_关闭javascript 下一页_11

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

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

对象赋值

关闭javascript 下一页 javascript_关闭javascript 下一页_12

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

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

关闭javascript 下一页 javascript_关闭javascript 下一页_13

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

关闭javascript 下一页 javascript_字符串_14

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

关闭javascript 下一页 javascript_关闭javascript 下一页_15

// 继承
'toString' in person
ture

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

关闭javascript 下一页 javascript_作用域_16

流程控制

if判断

'use strict';
var age = 15;
if(age<10){
    alert("小孩");
}else if(age>10&&age<20){
    alert("青少年");
}else {
    alert("成年人")
}

循环

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 arr = [1,2,3,4,5,6,7,32];

// 函数
arr.forEach(function (value) {
    console.log(value)
})

for...in、for...of 函数

var arr = [3,4,5]
        for(let x in arr){
            console.log(x);
        }	//打印数组的下标
        for(let x of arr){
            console.log(x);
        }	//遍历数组的所有元素

Map和Set

Map：

'use strict';

var map = new Map([['a',58],['b',64],['c',48]]);
var name = map.get('a');// 通过key获得value
console.log(name);
map.set('admin',123456);//	新增或修改
map.delete('b');	// 	删除一个

关闭javascript 下一页 javascript_字符串_17

Set：无序不重复的集合

var set = new Set([1,1,2,3]);// set可以去重
set.add(4);
set.delete(1);
console.log(set.has(3));    //ture  数组中是否包含某个元素

iterator迭代

只能使用for of遍历map和set数组中的所有元素

var map = new Map([['a',58],['b',64],['c',48]]);
for(let x of map){
    console.log(x);
}

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

函数

定义函数

定义方式一

绝对值函数：

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

对比Java中定义函数：

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

一旦执行到return代表函数结束，返回结果！

如果没用执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

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

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

关闭javascript 下一页 javascript_作用域_18

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

var abs = function(x){
    // 手动抛出异常来判断
    if(typeof x!=='number'){
        throw 'Not a Number';
    }else if(x>=0){
        return x;
    }else{
        return -x;
    }
}

arguments

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

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

abs（）中传递了多个参数时：

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

rest

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

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

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

变量的作用域

在JavaScript中，var定义变量实际是有作用域的。若是在函数体中声明，则在函数体外不可以使用（如果非要实现，可以研究一下闭包）。

function arr(){
    var x = 1;
    x = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined	函数未定义

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

function arr(){
    var x = 1;
    x = x + 1;
}
function arr2(){
    var x = 1;
    x = x + 1;
}

function arr(){
    var x = 1;

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

内部函数变量和外部函数变量重名（双亲委派机制），函数会从当前函数自身开始从内向外查找变量

function arr(){
    var x = 1;

    function arr2(){
        var x = 2;
        console.log(x);	//2
    }
    arr2();
    console.log(x);	//1
}

提升变量的作用域

function arr(){
        var x = 'x'+ y;
        console.log(x);
        var y = 'y';
    }
    arr(); // xundefined

说明js执行时自动提升了y的声明，但不会提升变量的赋值。这是JavaScript建立之初就存在的特性。

规范：所有变量的定义都放在函数头部，便于代码的维护

全局函数

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

全局对象window

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

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

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

window.alert = function (){

};
window.alert(123);  // 发现alert()失效了

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

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

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

//自定义唯一全局变量，而不使用window
var Wang = {};
Wang.name = "张三";
Wang.add = function (a,b){
    return a+b;
}

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

局部作用域 let

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

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

function aaa(){
    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i); //Uncaught ReferenceError: i is not defined
}

建议都使用let定义局部作用域的变量。

常量 const

只要是用全部大写字母命名的变量就是常量，建议不要修改这样的值，引入了常量关键字const

const PI = '3.14';  //只读常量
console.log(PI);
PI = '123'; //Uncaught TypeError: Assignment to constant variable 类型错误
console.log(PI);

方法

定义方法

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

var Wang = {
    name:'萘汝',
    birth:1997,
    //方法
    age:function (){
        //今年-出生的年
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}

//属性
Wang.name
//方法，一定要带()
Wang.age()

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

function getAge(){
    var now = new Date().getFullYear();
    return now-this.birth;
}
var Wang = {
    name:'萘汝',
    birth:1997,
    age: getAge
}

// Wang.age()  ok  调用对象是Wang
// getAge()  NaN   调用对象是window

apply

在JavaScript中可以控制this指向。

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

内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof ture
"boolean"
typeof []
"object"
typeof Math.abs
"function"
typeof undefined
"function"

Data

基本使用：

var now = new Date(); // Sun Sep 26 2021 13:06:53 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月
now.getDay();//星期几
now.getDate();//日
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒

now.getTime();//时间戳

console.log(now.getFullYear(),now.getMonth(),now.getDay(), now.getDate(),now.getHours(),now.getMinutes(),now.getSeconds(),now.getTime());
// 2021 8 0 26 13 13 18 1632633198443
console.log(new Date(1632633198443));// Sun Sep 26 2021 13:13:18 GMT+0800 (中国标准时间) 时间戳转为时间

转换

now.toLocaleDateString()
'2021/9/26'
now.toGMTString()
'Sun, 26 Sep 2021 05:19:35 GMT'

JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言

易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

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

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

JSON字符串和JS对象的转化

var user = {
    name:"萘汝",
    age:22,
    sex:'男'
}
//对象转化为json字符串 .stringify()
var jsonUser = JSON.stringify(user);
console.log(user);
console.log(jsonUser);

//json字符串转化为对象 .parse()
var user2 = JSON.parse(jsonUser);

区别：

var user2 = {name: '萘汝', age: 22, sex: '男'}
var jsonUser = {"name":"萘汝","age":22,"sex":"男"}

Ajax

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

面向对象编程

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

原型对象

原型：每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性

var Student = {
    name:"zhangsan",
    age:15,
    run:function (){
        console.log(this.name+"run...");
    }
}

var xiaoming = {
    name:"xiaoming"
}

xiaoming.__proto__ = Student; 
console.log(xiaoming.run())//xiaomingrun...

var Bird = {
    fly:function (){
        console.log(this.name+"fly..."); 
    }
}
xiaoming.__proto__ = Bird;
console.log(xiaoming.fly())//xiaomingfly...
//__proto__可以随意指向

class对象

class关键字，是在ES6引入的。

定义一个类，属性，方法

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

    hello(){
        alert('hello');
    }
}

var xiaoming = new Student("xiaoming");

继承

class pupil extends Student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        myGrade(){
            alert("一名小学生")
        }
    }
    var lihua = new pupil("lihua",1);

本质：查看原型对象

关闭javascript 下一页 javascript_关闭javascript 下一页_19

原型链

__proto__：这是每个对象(除null外)都会有的属性，这个属性会指向该对象的原型

function Person() {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

关闭javascript 下一页 javascript_关闭javascript 下一页_20

操作BOM对象（重点）

浏览器介绍

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

BOM：浏览器对象模型

window：代表浏览器窗口

window.innerHeight
450
window.outerHeight
1047

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

navigator.appName
'Netscape'
navigator.appVersion  //当前浏览器版本
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
navigator.userAgent  //用户信息
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
navigator.platform
'Win32'

scree：代表全屏幕属性。

screen.height
1080
screen.width
1920

location：代表当前页面的URL信息

host: "www.baidu.com"			//主机
href: "https://www.baidu.com/"  //当前指向的位置
protocol: "https:"				//协议
reload: ƒ reload()				//刷新网页
//设置新的地址
location.assign('url')

document：代表当前的页面

document.title
'百度一下，你就知道'
document.title='123'
'123'

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

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

获取cookie（客户端的本地信息）
恶意人员获取你的cookie上传到他的服务器，服务器端可设置cookie：httpOnly来保证安全性

document.cookie
'_ga=GA1.1.1317287882.1610547162'

history 代表浏览器的历史记录

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

操作DOM对象（重点）

DOM：文档对象模型

核心：整个浏览器网页就是一个DOM树形结构！

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

获得DOM节点

原生代码，之后尽量使用jQuery

<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 children =  father.children;// 获取父节点下的所有子节点
    
</script>

关闭javascript 下一页 javascript_关闭javascript 下一页_21

更新DOM节点

<div id="a"></div>
<script>
    var a = document.getElementById('a');
</script>

操作文本

a.innerText='123' //修改文本的值
a.innerHTML='123' //可以解析HTML文本标签

操作css

a.style.color = 'red'
'red'
a.style.fontSize = '30px'
'30px'
a.style.padding = '2em'
'2em'

删除DOM节点

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

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

<script>
        var self = document.getElementById('p1');
        var father = self.parentElement
        father.removeChild(p1)
</script>

<script>
    //删除是一个动态的过程
    father.children;	//h
    father.removeChild(father.children[0])
</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);//追加到后面
    
</script>

关闭javascript 下一页 javascript_字符串_22

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

<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');

    //通过JS创建一个新的节点
    var newP = document.createElement('p');//创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello World!';
    list.appendChild(newP);

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

    //可以创建一个Style标签
    var myStyle = document.createElement('style');//创建一个空的style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:red;}';//设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle)

</script>

insertBefore

<script>
    var ee = document.getElementById(`ee`);
    var js = document.getElementById(`js`);
    var list = document.getElementById(`list`);
    list.insertBefore(js,ee);//将js插入到ee前面
    
</script>

操作表单（验证）

文本框 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="boy" id="man">男
        <input type="radio" name="sex" value="girl" id="woman">女
    </p>
</form>

<script>
    var input_text = document.getElementById('username');
    var input_man = document.getElementById('man');
    var input_woman = document.getElementById('woman');
   //得到输入框的值
   //input_text.value
    input_text.value = '123' //修改输入框的值
    //input_man.value
    //获取单选框的值
    //对于单选框，它的值是固定的，使用input_man.checked;//查看返回的结果来判断是否被选中

</script>

提交表单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<!--  MD5工具类-->
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<form action="post">
  <p>
    <span>用户名：</span><input type="text" id="username" name="username">
  </p>
  <p>
    <span>密码：</span><input type="password" id="passward" name="password">
  </p>
  <!--    绑定事件 onclick 被点击-->
  <button type="button" onclick="aaa()">提交</button>

</form>

<script >
  function aaa(){
    var uname = document.getElementById('username');
    var pwd = document.getElementById('passward');
    console.log(uname.value);
    console.log(pwd.value);
    // MD5算法
    pwd.value = md5(pwd.value);
    console.log(pwd.value);
  }

</script>

</body>
</html>

密码校验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--  MD5工具类-->
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<!--表单绑定事件
onsubmit=绑定一个提交检测的函数，ture,false
将这个结果返回给表单，使用onsubmit接收
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
  <p>
    <span>用户名：</span><input type="text" id="username" name="username">
  </p>
  <p>
    <span>密码：</span><input type="password" id="input-passward" >
  </p>
  <input type="hidden" id="md5-password" name="password">

  <button type="submit">提交</button>

</form>

<script >
  function aaa(){
    alert(1)
    var uname = document.getElementById('username');
    var pwd = document.getElementById('input-passward');
    var md5pwd = document.getElementById('md5-password')

    md5pwd.value=md5(pwd.value);
    //可以校验判断表单内容，ture就是通过提交，false阻止提交
    return ture;
  }

</script>

</body>
</html>

jQuery

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

获取jQuery

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

    <!--  公式： $(selector).action  -->

<a href="" id="test-jquery">点我</a>

<script>
    
    //选择器就是css的选择器
    $('#test-jquery').click(function () {
        alert('hello jQuery')
    });
    
</script>
    
</body>
</html>

选择器

//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();

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

事件

<!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('');//设置值

css操作

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

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

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

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：python 蓝牙读取 python获取蓝牙数据

下一篇：Java短视频项目亮点 javaweb做视频网站项目

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯