JavaScript相关知识（超详细）

沪漂豫姑娘～

已于 2023-12-18 22:29:47 修改

阅读量62

点赞数 1

文章标签： javascript ecmascript es6 ajax json jquery css

于 2023-11-11 00:00:00 首次发布

本文链接：https://blog.csdn.net/m0_64245578/article/details/134338200

版权

1.什么是JavaScript?

1.1概述

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

1.2历史

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

2.快速入门

2.1引入JavaScript

创建项目；
删除src(可省)，右键创建html文件(也可直接创建一个js文件)
加入JavaScript代码
方式一：直接在html中使用script标签

<!--方式一：标签-->
<!--script标签：写JavaScript代码-->
  <script>
<!--alert：弹窗-->
    alert('hello javascript!');
  </script>
<script>标签可以放到html的任何地方(head、body、html外部)

方式二：创建js文档外部引入，用script标签引入

alert('hello javascript!');
<!--方式二：js文件外部引入 -->
<!--注意：script必须成对出现-->
    <script src="js/hello.js"></script>
<!--不用显示定义type，也默认就是js外部引入-->
    <script type="text/javascript"></script>

2.2基本语法入门

JavaScript严格区分大小写

<!--JavaScript严格区分大小写-->
    <script>
        // 1.定义变量   变量类型（var-全局变量、let-局部变量） 变量名=变量值
        var num01 = 1;
        var num02 = 2;
        alert(num01);  //弹窗输出
        // 2.条件控制
        if (2 > num01) {
            if (num01 > num02) {
                alert(num01)
            } else if (num01 < num02) {
                alert(num02)
            } else {
                alert("equal");
            }
        }
    </script>

调试代码：

浏览器中打开html页面
右键单击检查代码—选择控制台(console.log(变量)、alert(内容)…)
通过浏览器必备调试须知：

2.3数据类型（初识）

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

2.3.1 变量

变量名的定义和Java变量名定义相同

var name='晨晨';

2.3.2 number

js不区分小数和整数，Number

123 //整数123
123.1  //浮点数
1.12e3 //科学计数法
-99   //复数
NaN  //not a number
Infinity  //无限大

2.3.3 字符串

 'abc' 
 "abc"

2.3.4 布尔值

true 
false

2.3.5 逻辑运算

&&
||
！

2.3.6 比较运算符

=
==  //类型不一样，值一样，也会判断为true
=== //绝对等于(常用),类型一样，值一样
NaN===NaN  //false
isNaN(NaN)   //true

注意：

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

2.3.7 浮点数

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

console.log(1/3)===(1-(2/3))    //不提倡使用
Math.abs(1/2-(1-2/3))<0.00000000001
null(空指针)和undefined(未定义)
null  //空，没有值
undefined  //未定义

2.3.8 数组

Java数组中的数值必须满足存储的是一系列相同的对象，而JavaScript中不需要要求

//数组
//保证代码的可读性，尽量使用[]
var arr=[1,2,3,4,5,'hello',null,true];
new Array(1,2,3,'hello',true);
取数组下标：如果越界了，就会认为是未定义undefined

2.3.9对象

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

//对象
//每个属性之间使用逗号隔开，最后一个不需要加逗号
//对应的Java创建对象：Person person=new Person(1,2,3,4,5);
var person = {
    name: "晨晨",
    age: 3,
    tags: ['js', 'java', 'web', '...']
}
//取对象的值
person.name
person.age

2.4 严格检查格式

<script>
    /*
    * 严格检查模式的使用前提：IDEA需要设置使用ES6语法
    * 严格检查模式,'use strict'
    * 必须写在JavaScript的第一行
    * 预防JavaScript的随意性导致产生的一些问题
    * 问题：在定义变量时，无法对变量的类型进行定义
    * 如加上严格检查模式，则会给出错误提示
    * 须加上let（常用）或var类型修饰符
    *
    * 局部变量都建议使用let定义
    * */
    'use strict'
    //1.全局变量
    var i = 1;
    //2.ES6中，用Let定义局部变量
    let j = 2;
</script>

IDEA设置ES6模式
在这里插入图片描述

3.数据类型

3.1字符串

简单字符串

/*
1.正常字符串我们使用单引号''或双引号""包裹
2.如果需要包裹输出引号，可以使用转义字符\n-换行、\r-
 */
'use scrict'
console.log('a');
console.log("a");

转义字符

//转义字符
"\'"   //字符串
"\n"   //换行
"\t"   //空格
"\u4e2d"   //  \u####Unicode字符
"\x41"     //AscII字符

多行字符串编写

//多行字符串编写
//tab上的飘号，可以进行多行字符串编写
var msg = "nihao " + "JavaScript";
var str = `
hello 
javaScript
!
`;

模板字符串

//模板字符串
let name="chenchen";
let age=3;
let str1=`hello,${name},I know you are ${age}`;

字符串长度

//字符串长度
console.log(str1.length)
//6.字符串的不可变性
str1[0]='H';
console.log(str1);   //字符串的str[0]位置的数据未发生变化

字符串的大小写转换

//字符串大小写转换
//toUpperCase()是方法，不是属性
console.log(str1[0].toUpperCase());
console.log(str.toLowerCase());

字符串的索引及截取

//字符串的索引及截取
str.indexOf('t');
str.substring(1,3); //字符串截取[)

3.2数组

JS中数组中可以包含任意的数据类型
数组：存储数据（如何存，如何取，方法都可自己实现！）

'use strict'
//通过下标取值或赋值
var arr=[1,2,3,4,5,6]
// 1.长度
//注意：加入给arr.length赋值，数组大小就会发生变化
// 如果赋值过小，元素就会丢失
arr.length;

//2.indexOf,通过元素获得下标索引
//字符串的”1“和数字1是不同的
arr.indexOf(2);

//3.slice()，截取数组的一部分，返回一个新数组，类似于String中的substring
arr.slice(2,5);

//4.push():压入到尾部
//  pop():弹出尾部的一个元素
arr.push();  //压入尾部
arr.pop();   //弹出尾部的一个元素

//5.unshift()、shift()头部
arr.unshift();  //压入到头部
arr.shift();    //弹出头部的一个元素

//6.排序
arr.sort();

//7.元素反转
['A','B','C']
arr.reverse();

//8.concat():拼接,并没有修改原来的数组，只是会返回一个新数组
arr.concat([8,9,7]);

//9.连接符join
//打印拼接数组，使用特定的字符串连接
arr.join('-');

//10.多维数组
var arr1=[[1,2],[2,3],[3,4]]
arr[1][1]  //3

3.3 对象

若干个键值对

'use strict'
/*
对象的定义：
var 对象名={
    属性名:属性值,
    属性名:属性值,
    属性名:属性值
}
JavaScript中的所有的键都是字符串，值是任意对象！
JS中对象，{.....}表示一个对象，键值对描述属性xxx:xxx,多个属性之间使用逗号，最后一个属性不加逗号
 */
//定义一个person对象，有三个属性
var person={
    name:"chenchen",
    age:3,
    score:99
};
//1.对象属性赋值
person.age=23;
//2.使用一个不存在的对象属性，不会报错,会返回一个undefined
person.email="123@163.com";

//3.动态的删减属性,通过delete删除对象的属性
delete person.name;
//4.动态的添加属性，该方式如果对象中不存在该属性，则表示是添加该属性
//                     如果对象中存在该属性，则表示是修改该属性
person.name="cmy";

//5.判断属性值是否在这个对象中 xx in xx
'name' in person;
//继承
'toString' in person;

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

3.4 流程控制

'use strict'
var age=3;
//1.if
if(age>3){
    alert("haha...")
}else{
    alert("kuwa...")
}
// 2.while
var age=3;
while(age<100){
    age++;
    console.log(age);
}
do {
    age++;
}while (age<100);
// 3.for
for (let i = 0; i < 100; i++) {
    console.log(i);
}

//4.forEach循环
var num=[1,2,3,4,5,6,7,8];
num.forEach(function (value){
    console.log(value)
});

3.5 Map和Set集合

Map

'use strict'
//学生的成绩，学生的名字
// var name=["tom",'jack','haha'];
// var score=[100,29,90];

var map=new Map([['tom',100],['jack',98],['haha',88]]);
var score=map.get('tom');   //通过key获得value
map.set('admin',99);  //添加属性
console.log(score);

Set:无序不重复集合

var set =new Set([3,3,3,2,2,11,56]); //set可以去重
set.delete(11);
set.add(5);  //添加
set.has(3);  //是否包含某个元素

3.6 iterator

'use strict'
//iterator
//遍历数组
//通过for of /for in 下标
var arr=[3,5,6]

for (var x of arr) {
    console.log(x)
}

//遍历map
var map=new Map([['tom',100],['jack',98],['haha',80]])
for (let x of map) {
    console.log(x);
}

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

4.函数

4.1定义函数

定义方式一

//定义方式一（推荐使用）
// 绝对值函数
function abs1(x){
    if(x>=0){
        return x;
    }
    else{
        return -x;
    }
}
//定义方式二
var abs2=function (x){
    if(x>=0){
        return x;
    }
    else{
        return -x;
    }
}

function(x){…} 这是一个匿名内部类，单可以把结果赋值给abs，通过abs就可以调用函数；
方式一和方式二等价

arguments关键字

function abs1(x,y){
    console.log("x>="+x);
    // arguments是一个JS免费赠送的关键字
    //代表传递进来的所有的参数是一个数组,将参数共同组合成一个数组
    //通过该关键字可以获取输入的所有参数
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    if(arguments.length>1){
        arguments[1];
    }
    if(x>=0){
        return x;
    }
    else{
        return -x;
    }
}

rest关键字

//rest 获取出来已经定义的参数值外的所有参数,...rest表示获取a,b,c三个值以外的数据值，
//rest参数只能写在最后面，必须用...表示
function aaa(a,b,c,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

aaa(1,2,3);  //因为1，2，3所对应的都是已经定义过的，所以...rest输出的为空
aaa(1,2,3,4,5);  //因为4，5是在函数中未定义过，所以...rest输出[4,5]

4.2 函数调用

abs1(2);
abs2(-2);

4.3变量的作用域

局部变量

'use strict'
//在js中，var定义变量实际是有作用域的
//假设在函数体中声明，则在函数体外不可以使用-（非要向实现的话，需要使用闭包）
function aaa(){
    var x=1;
    x=x+1;
}
// x=x+2;

如果两个函数是用来相同的变量名，只要在函数内部就不冲突
内部函数可以访问外部函数的成员，反之不行
假设内外变量名重名，使用就近原则
假设在JavaScript中函数查找变量从自身函数开始，由内向外查找
假设外部存在这个同名的函数变量，内部变量会屏蔽外部函数的变量

function aaa2(){
    function aaa3(){
        var x='A';
        console.log('inner'+x);
    }
    console.log('outer'+x);  //inner
    aaa3();
}
aaa2();

//js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值
//所有的变量都放在函数的头部进行定义，不要乱放，便于代码维护；
function bbb(){
    var x="x"+y;
    console.log(x);
    var y='y';

全局变量

//2.全局函数
var x=1;   //全局变量
function f(){
    console.log(x);
}
f();
console.log(x);
- 全局对象window
js实际上只有一个全局作用于任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用于都没有找到，报错Refrence
var y='xxx';
window.alert(y);
alert(window.y);  //默认所有的全局变量，都会自动绑定在window对象下
由于所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的变量，冲突->如果能够减少冲突？
//唯一全局变量
var kuangApp={};
//定义全局变量
//把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名的冲突，jQuery
kuangApp.name="kuangshen";
kuangApp.add=function (a,b){
    return a+b;
}

局部作用域，let

//局部作用域 let ，let关键字，解决局部作用冲突（可以使用let定义局部变量）
function a(){
    for (var i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1);  //问题：i超过作用域还可以使用，let关键字，解决局部作用冲突
}

常量关键字，const

//常量const
//只有用全部大写字母命名的就是常量，建议
var PI=3.1415926;
console.log(PI);
PI=123;
console.log(PI);   //可以改变常量值，不符合常量规则

const PI_02=3.1415926;  //只读变量（常量）
console.log(PI_02);
// PI_02=123;   //报错

4.4 方法的定义和调用，apply

'use strict'
//定义方法
//方法就是把函数放在对象的内部，对象只有两个东西：属性和方法
var person = {
    name: 'chenchen',
    birth: 2000,
    //方法
    age: function () {
        //当前年龄=当前时间-出生时间
        var now = new Date().getFullYear();  //当前时间
        return now - this.birth;
    }
}
//属性
person.name;
//方法,一定要带()
person.age();
this.代表什么？
拆开上面的代码
// 拆开上面的方法
function getAge(){
    //当前时间-出生时间
    var now=new Date().getFullYear();
    return now-this.birth;
}
var person01={
    name:"xiaoxiao",
    birth:2000,
    age:getAge
}

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

5.内部对象

5.1 Date

5.2 JSON

'use strict'
//1.json(JavaScript Object Notation，JS对象简谱):是一种轻量级的数据交换格式
//2.简洁和清晰的层次结构使用json称为理想的数据交换语言；
//3.基于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

//在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示number、String
// 格式：
//对象和Map都用{}
//数组都用[]
//所有的键值对都使用key:value

//对象
var person01 = {
    name: "chenchen",
    age: 22,
    sex: '女'
}
//对象转化成json字符串
var jsonPerson = JSON.stringify(person01);

//json字符串转化为对象
var person02 = JSON.parse('{"name":"xiaoxiao","age":18,"sex":"男"}');

//JSON和JS对象的区别
var obj={a:'hello',b:'hellob'};   //标准的对象
var json="{'a':'hello','b':'hellob'}";   //json对象

5.3 Ajax

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

6.面向对象编程

6.1 原型继承

'use strict'
//什么是面向对象？
//JavaScript、Java、c#...都是面向对象，但JavaScript有很大的区别
//类：模板
//对象：具体实例

//在JavaScript中

//原型继承:就类似于父类

var person = {
    name: "student",
    age: 23,
    run: function () {
        console.log(this.name + "\trun.....")
    }
};
//小明的原型指向了person，像继承
var xiaoming = {
    name: "xiaoming"
};
xiaoming.__proto__ = person;  //原型继承

var xiaoli={};
xiaoli.__proto__=person;

6.2 class继承

//ES6之后
//定义一个学生的类,也是一个模板
class Student{
    constructor(name) {
        this.name=name;
    }
    hello(){
        alert("hello");
    }
}

var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");

class Student01 extends Student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
    myGrade(){
        alert('我是一个小学生');
    }
}

7.操作BOM对象（重点）

浏览器介绍
BOM ：浏览器对象模型
JavaScript和浏览器的关系？
JavaScript为了能够让它在浏览器中运行
内核浏览器：

Chrome
Safari
FireFox
三方浏览器：
QQ浏览器
360浏览器

window
window代表浏览器窗口，全局作用域
Navigator
封装了浏览器的信息
大多数时，我们不会使用navigation对象，因为会被人修改
不建议使用这些属性来判断编写代码
screen
代表屏幕尺寸

screen.height  //屏幕高度
720
screen.width  //屏幕宽度
1280

location（重要）
代表当前页面的URL信息

host:"www.baidu.com" //主机
herf:"https://www.baidu.com"//表明当前指向的位置
protocol:"https:"  //协议
reload:f reload()   //重新加载，刷新网页
//设置新的地址
location.assign()

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

document.title
document.title='chenchen'

'use strict'
// document可获取具体的文档树节点（增删改查）
var dl = document.getElementById('app');
var cookie = document.cookie;  //本地客户端信息

//截持cookie原理
/**
 * 1.登录一个个人账号，会产生个人cookie（本地信息）
 * 2.<script src="aa.js"></script>
 * 3.恶意人员通过在你登录的页面加入上面的js文件，暴露你的cookie，获取你的cookie上传到他的服务器
 * 4.获取你的cookie后，可以使用你的信息进行一些操作
 * 例如：登录淘宝账号，而天猫账号也成功登录
 */
//怎么防止cookie暴露？
/**
 * 通过服务器设置一个cookie属性:httpOnly,保证安全性
 */

history（不建议使用）

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

8.操作DOM对象（重点）

DOM：文档对象模型
核心：浏览器网页就是一个DOM树形结构

更新：更新DOM节点
遍历DOM节点，得到DOM节点
删除节点：删除一个DOM节点
添加节点：添加一个新的节点
要操作一个DOM节点，必须要先获得这个DOM节点
原生代码，之后我们尽量使用jQuery()

获得节点

 <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>操作DOM对象</title>
<!--    1.获得DOM节点-->
    <script src="../js/5.操作DOM对象/1.获得文档节点.js"></script>
</head>
<body>
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</body>
</html>

'use strict'
//对应css选择器
var h1 = document.getElementsByTagName('h1'); //标签选择器
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('h1');

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

删除节点
删除节点的步骤：先获取父节点，再通过父节点删除自己
注意：删除多个节点的时候，children是在时刻变化，删除节点的时候一定要注意！

<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self=document.getElmentById('p1');
var father=parentElement;
father.removeChild(self);
//姗迟是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
3.插入节点
获得了某个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');
//通过js创建一个新的节点
var newP=document.create.createElement('p');  //创建一个p标签
newP.id='newP';  //设置一个id
list.appendChild(js);  //把已有的标签追加到父标签的后面
list.appendChild(newP); //创建一个新标签，将新标签追加到父标签list后面

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

9.操作表单

//表单是什么？
//form、DOM树
/**
 * 1.文本框：text
 * 2.下拉框：<select>
 * 3.单选框：radio
 * 4.多选框：checkbox
 * 5.隐藏框：hidden
 * 6.密码框：password
 * 。。。
 */
//表单的目的：提交信息

9.1 获得表单

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>表单操作</title>
    <script>
        //1.文本框
        var input_text = document.getElementById("username");
        //得到输入框的值
        input_text.value
        //修改输入框的值
        input_text.value='123'

        //2.多选框
        var boy_radio = document.getElementById('boy');
        var girl_radio = document.getElementById('girl');
        //    对于单选框，多选框等固定的值，xxx.value只能取得当前的值
        boy_radio.checked=true;  //查看返回的结果，是否为true，如果为true，则被选中
    </script>
</head>
<body>
<form action="post">
<!--    1.文本框-->
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>
    
<!--    2.多选框的值，是提前定义好的value,不可修改，name值可以说明几个语句属于同一组-->
   <p>
       <span>性别：</span>
       <input type="radio" name="sex" value="boy" id="boy">男
       <input type="radio" name="sex" value="girl" id="girl">女
   </p>
</form>
</body>
</html>

9.2 提交表单验证

MD5加密密码
按钮级别的加密

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
<!--    MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post">
    <!--    1.用户名文本框-->
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
<!--    2.密码文本框-->
    <p>
<!--        <span>密码：</span><input type="password" id="password" name="password">-->
        <span>密码：</span><input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
<!--    3.提交按钮-->
<!--    绑定事件 onclick被点击时，会执行什么-->
    <button type="button" onclick="aaa()">提交</button>

</form>
<script>
    function aaa(){
        var uname = document.getElementById('username');
        // var pwd = document.getElementById('password');
        var md5pwd = document.getElementById('md5-password');

        md5pwd.value=md5(pwd.value);
        return false;

        // console.log(uname.value);
        //
        // //MD5算法：
        // pwd.value=md5(pwd.value);   //密码加密
        // console.log(pwd.value);
        // pwd.value='****';  //密码自动添加
    }
</script>
</body>
</html>

表单优化
表单级别的加密

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>表单优化</title>
  <!--    MD5工具类-->
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
  <!--    1.用户名文本框-->
  <p>
    <span>用户名：</span> <input type="text" id="username" name="username">
  </p>
  <!--    2.密码文本框-->
  <p>
    <span>密码：</span><input type="password" id="input-password">
  </p>
  <input type="hidden" id="md5-password" name="password">
  <!--    3.提交按钮-->
  <!--    绑定事件 onclick被点击时，会执行什么-->
  <button type="button">提交</button>

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

    md5pwd.value=md5(pwd.value);
    return true;
  }
</script>
</body>
</html>

10.jQuery

10.1v初始jQuery及公式

javaScript和jQuery:
jQuery:又称jQuery库，存储大量的JavaScript函数的库

获取jQuery
官网下载jQuery
引入jQuery
直接官网找到相关的文件，复制它的网址，引入到项目中即可

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
   <meta charset="UTF-8">
   <title>初识jQuery</title>
<!--    1，引入在线的jQuery-->
<!--    使用jQuery的公式：
       公式：$(selector).action   $代表jQuery,(选择器)
       $(select).action()-->

   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<a href="" id="text-jquery">点击</a>
<script>
   // document.getElementById('id');
//    选择器就是css中的选择器
   $('#test-jquery').click(function (){
       alert('hello jquery~');
   })
</script>
</body>
</html>

10.2 jQuery选择器

选择器
文档工具站：https://jquery.cuishifeng.cn/

10.3j Query事件

鼠标事件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
<!--    导入jQuery-->
    <script src="https://releases.jquery.com/git/jquery-3.x-git.min.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').onmousemove(function(e){
           $('#mousemove').text('x:'+e.pageX+'y:'+e.pageY);
       })
    });
</script>
</body>
</html>

键盘事件
其他事件

10.4 jQuery操作Dom元素

10.4.1 操作DOM

节点文本操作

// document.getElementById('')
//有参数设置值，没参数设置值
//节点文本操作
$('#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).height();  //高度
$(window).width();   //宽度
$('#test-ul li[name=python]').toggle();  //

未来学习ajax()

$('#from').ajax()

小技巧

如果巩固JS（看jQuery源码，看游戏源码）
巩固HTML，CSS（扒网站，全部down下来，然后对应修改看效果）

沪漂豫姑娘～

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript相关知识（超详细）

定义方式一//定义方式一（推荐使用）// 绝对值函数if(x>=0){return x;//定义方式二if(x>=0){return x;function(x){…} 这是一个匿名内部类，单可以把结果赋值给abs，通过abs就可以调用函数；方式一和方式二等价arguments关键字// arguments是一个JS免费赠送的关键字//代表传递进来的所有的参数是一个数组,将参数共同组合成一个数组。
复制链接

扫一扫