JS
Published on 2022-07-13 14:59 in 暂未分类 with 深巷の猫

JS

一、JavaScript概述

1、JavaScript组成

  • 核心（ECMAScript），最新ES6版本（大部分浏览器只支持ES5）
  • 文档对象模型（DOM，Document Object Model）：让JavaScript有能力与网页进行对话
  • 浏览器对象模型（BOM，Browser Object Model）：让JavaScript有能力与浏览器进行对话

2、特点

  • 解释型语言
  • 弱类型语言：由数据来决定数据类型4
  • 面向对象

3、JavaScript脚本嵌入页面

  • 将JavaScript代码嵌入在元素“事件”中

    		<div onclick="JavaScript代码"></div>
    		 
    		<body>
    		    <botton onclick="console.log('Hello World');">//onclick：当单击元素时所做的操作
    		        打印消息
    		    </botton>
    		</body>

  • 将JavaScript代码嵌入在script标签中（允许出现在网页的任意位置）

    		<head>
    		    <script>
    		        JavaScript代码
    		    </script>
    		</head>
    		 
    		<body>
    		    <script>
    		        JavaScript代码
    		    </script>
    		</body>

  • 将页面引入JavaScript文件

    		<head>
    		    <script src="路径"></script>
    		</head>

    引入了JavaScript文件的script标签中不能出现代码

二、JavaScript语法

1、变量声明

var 变量名=值，省略var关键字，则声明的是全局变量

局部变量建议使用let定义

2、数据类型

  • 数字类型（......NAN：不是数字，Infinity：无限大）

  • 字符串类型

    • \u4e00：汉字的起始字符

    • \u9fa5：汉字的结束字符

    • 长字符串var str=``;

    • 模板字符串

      		let  name="qingjiang";
      		let msg="你好，${name}"

  • 布尔类型

  • 空null：声明对象未赋值

  • 未定义undefined：声明变量未赋值、访问对象不存在的属性

  • typeof(变量)/typeof 变量:获取数据类型

强制转换为字符串:变量.toString()

parseInt(数据)：获取指定数据的整数部分

parseFloat(数据)：将指定数据转化为小数（数字+字符串，返回数字部分；字符串+数字，返回NaN）

Number(数据)：将一个字符串解析为number（包含非法字符返回NaN）

  • ==：等于（不比较类型，只比较数值）
  • ===：全等（除数值外，连同类型也会一起比较）
  • NaN===NaN(false)，NaN与所有的数值都不相等，包括自己，只能通过isNaN(NaN)判断这个数是否为NaN

3、数组

创建（元素类型可以不同）

var arr=[];
 
var arr=new Array();

  • 索引数组：长度可变、不限制下表越界、不限制数据类型

  • 关联数组：可自定义下标名称

    		//遍历关联数组
    		for(var key in arr){
    		    
    		}

4、数组API

  • String(arr):将数组中每一个元素转化为字符串，用逗号分隔
  • arr.join("连接符"):将数组中每个元素转化为字符串，用自定义连接符分隔
  • arr1.concat(值1，值2，arr2，值3):拼接并返回一个新数组
  • arr.slice(starti,endi+1):返回一个子数组（含头不含尾）
  • arr.splice(starti,n):删除starti开始的n个元素，返回值为被删除元素组成的临时数组
  • arr.splice(starti,0,值1，值2):在starti插入值
  • arr.splice(starti,n,值1，值2):将starti位置的n个值替换（删除的元素个数和插入的新元素个数不必一致）
  • arr.reverse():颠倒数组
  • arr.sort():将元素从小到大排序（默认将元素转化为字符串再 排列）
  • push(),pop()：尾部加入，删除元素
  • unshift(),shift()：头部加入，删除元素

Map和Set

var map = new Map([['tom',100],['jack',60]]);
var name = map.get('tom');
map.set('lisa',0);
map.delete('tom');
 
var set = new Set([1,1,1,5,6]);
set.add(2);
set.delete(1);

iterator

//for in 返回下标  for of  返回值
//遍历数组
var arr=[1,2,3];
for(var x of arr){}
 
//遍历map
var map = new Map([['tom',100],['jack',60]]);
for(var x of map){}
 
//遍历set
var set = new Set([1,1,1,5,6]);
for(varr of set){}

5、严格检查模式

预防JavaScript的随意性导致产生的一些问题

'use struct';//严格检查模式，必须写在第一行
var i=0;

三、函数及面向对象

1、函数声明

function 函数名(参数列表声明){
    语句
    return 值;
}
 
var 函数名 =function(参数列表声明){
    语句
    return 值;
}

  • function(){}是一个匿名函数，但是可以把结果赋值给变量，可以通过变调用函数

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

    		var abs = function(x){
    		    //手动抛出异常来判断
    		    if(typeof x != 'number'){
    		        throw 'Not a Number';
    		    }
    		    //argument是传进来的所有参数的数组
    		    for(var i=0;i<argument.length;i++){
    		        
    		    }
    		    if(x>=0){
    		        return x;
    		    }
    		    else{
    		        return -x;
    		    }
    		}
    		 
    		//rest,获取已经定义的参数之外的所有参数
    		function a(a,b,...rest){
    		    
    		}

2、变量作用域

2.1、变量作用域

在JavaScript中，用 var 申明的变量实际上是有作用域的。

如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：

'use strict'; 
function foo() {
    var x = 1; x = x + 1;
}
x = x + 2; // ReferenceError! 无法在函数体外引用变量x

如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响：

'use strict'; 
function foo() {
    var x = 1; x = x + 1; 
}
function bar() { 
    var x = 'A'; x = x + 'B';
}

由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行：

'use strict';
function foo() { 
    var x = 1;
    function bar() { 
        var y = x + 1; // bar可以访问foo的变量x! 
    }var z = y + 1; // ReferenceError! foo不可以访问bar的变量y!
}

如果内部函数和外部函数的变量名重名怎么办？来测试一下：

function foo() {
    var x = 1;
    function bar() {
        var x = 'A'; console.log('x in bar() = ' + x); // 'A'
    }console.log('x in foo() = ' + x); // 1 bar(); 
}
foo();

这说明JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。

2.2、变量提升

JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：

'use strict';
function foo() { 
    var x = 'Hello, ' + y; 
    console.log(x); 
    var y = 'Bob';
}
foo();
 
/*结果：Hello, undefined ， 说明 y 的值为 undefined；
这正是因为JavaScript引擎自动提升了变量 y 的声明，但不会提升变量 y 的赋值。*/
 
//JavaScript引擎看到的代码相当于：
function foo() { 
    var y; // 提升变量y的申明，此时y为undefined 
    var x = 'Hello, ' + y;
    console.log(x);
    y = 'Bob'; 
}

由于JavaScript的这一怪异的“特性”，我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个 var 申明函数内部用到的所有变量：

function foo() { 
    var x = 1, // x初始化为1
        y = x + 1, // y初始化为2 
        z, i; // z和i为undefined 
    // 其他语句: 
    for (i=0; i<100; i++) {
        ... 
    } 
}

2.3、全局作用域

不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象 window ，全局作用域的变量实际上被绑定到 window 的一个属性，直接访问全局变量 a和访问 window.a是完全一样的。

顶层函数的定义也被视为一个全局变量，并绑定到 window 对象：

'use strict'; 
function foo() {
    alert('foo');
}
foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用
 
//我们每次直接调用的 alert() 函数其实也是 window 的一个变量：
window.alert('调用window.alert()'); 
// 把alert保存到另一个变量:
var old_alert = window.alert;
// 给alert赋一个新函数: 
window.alert = function () {} 
alert('无法用alert()显示了!');
// 恢复alert: 
window.alert = old_alert; 
alert('又可以用alert()了!');

这说明JavaScript实际上只有一个全局作用域。任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报 ReferenceError 错误

全局变量会绑定到 window 上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中

// 唯一的全局变量MYAPP: 
var MYAPP = {}; 
 
// 其他变量:
MYAPP.name = 'myapp'; 
MYAPP.version = 1.0; 
// 其他函数:
MYAPP.foo = function () { 
    return 'foo'; 
};

2.4、局部作用域

由于JavaScript的变量作用域实际上是函数内部，我们在 for 循环等语句块中是无法定义具有局部作用域的变量的：

'use strict';
function foo() {
    for (var i=0; i<100; i++) { 
        // 
    }
    i += 100; // 仍然可以引用变量i
}

为了解决块级作用域，ES6引入了新的关键字 let ，用 let 替代 var 可以申明一个块级作用域的变量：

'use strict'; 
function foo() { 
    var sum = 0; 
    for (let i=0; i<100; i++) {
        sum += i; 
    }// SyntaxError:
    i += 1; 
}

2.5、常量

由于 var 和 let 申明的是变量，如果要申明一个常量，在ES6之前是不行的，我们通常用全部大写的变量来表示“这是一个常量，不要修改它的值”：

var PI = 3.14;

ES6标准引入了新的关键字 const 来定义常量， const 与 let 都具有块级作用域：

use strict';
const PI = 3.14; 
PI = 3; // 某些浏览器不报错，但是无效果！
PI; // 3.14

3、方法

定义方法

在一个对象中绑定函数，称为这个对象的方法

var xiaoming = {
    name: '小明',
    birth: 1990, 
    age: function () {
        var now = new Date().getFullYear(); 
        return now - this.birth;
    } 
};
xiaoming.age; // function xiaoming.age()
 
//拆开写
function getAge() { 
    var y = new Date().getFullYear();
    return y - this.birth; 
}
var xiaoming = { 
    name: '小明',
    birth: 1990,
    age: getAge 
};
xiaoming.age(); //正常结果 
getAge(); // NaN

单独调用函数 getAge() 怎么返回了 NaN ？

JavaScript的函数内部如果调用了 this ，那么这个 this 指向视情况而定！

  • 如果以对象的方法形式调用，比如 xiaoming.age() ，该函数的 this 指向被调用的对象，也就是 xiaoming ，这是符合我们预期的。

  • 如果单独调用函数，比如 getAge() ，此时，该函数的 this 指向全局对象，也就是 window 。

apply

JavaScript中可以控制this的指向

要指定函数的 this 指向哪个对象，可以用函数本身的 apply 方法，它接收两个参数

  • 需要绑定的 this 变量
  • Array ，表示函数本身的参数。
function getAge() {
    var y = new Date().getFullYear(); 
    return y - this.birth;
}
var xiaoming = { 
    name: '小明',
    birth: 1990, 
    age: getAge
};
xiaoming.age(); 
getAge.apply(xiaoming, []);//this指向xiaoming, 参数为空

四、对象

1、标准对象

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

2、Date

var now = new Date(); 
now; // 星期 月 日 年 时间 时区 
now.getFullYear(); // 年份 
now.getMonth(); //  月份，注意月份范围是0~11
now.getDate(); // 号
now.getDay(); // 星期几
now.getHours(); // 小时
now.getMinutes(); //分钟 
now.getSeconds(); // 秒
now.getMilliseconds(); //  毫秒数
now.getTime(); //  以number形式表示的时间戳

Date 对象表示的时间总是按浏览器所在时区显示的，不过我们既可以显示本地时间，也可以显示调整后的UTC时间：

只要我们传递的是一个 number 类型的时间戳，我们就不用关心时区转换。任何浏览器都可以把一个时间戳正确转换为本地时间。

 new Date(1658558687539);

3、JavaScriptON

  • JavaScriptON(JavaScript Object Notation, JavaScript 对象标记) 是一种轻量级的数据交换格式，目前使用特别广泛。

  • 采用完全独立于编程语言的文本格式来存储和表示数据。

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

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

格式：

  • 对象{}
  • 数组[]
  • 键值对key:value

JavaScriptON和JavaScript比较

var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var JavaScripton = '{"a": "Hello", "b": "World"}'; //这是一个 JavaScriptON 字符串，本质是一个字符串

JavaScriptON和JavaScript对象转换

//JavaScriptON转JavaScript
var obj = JavaScriptON.parse('{"a": "Hello", "b": "World"}'); 
//结果是 {a: 'Hello', b: 'World'}
 
//JavaScript转JavaScriptON
var JavaScripton = JavaScriptON.stringify({a: 'Hello', b: 'World'}); 
//结果是 '{"a": "Hello", "b": "World"}'

4、面向对象编程

在JavaScript中，这个概念需要改一改。JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。

原型是指当我们想要创建 xiaoming 这个具体的学生时，我们并没有一个 Student 类型可用。那怎么办？恰好有这么一个现成的对象：

var robot = { 
    name: 'Robot',
    height: 1.6,
    run: function () {
        console.log(this.name + ' is running...');
    } 
};

我们看这个 robot 对象有名字，有身高，还会跑，有点像小明，干脆就根据它来“创建”小明得了！

于是我们把它改名为 Student ，然后创建出 xiaoming ：

var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    } 
};
var xiaoming = { 
    name: '小明' 
};
xiaoming.__proto__ = Student;//把 xiaoming 的原型指向了对象 Student ，看上去 xiaoming 仿佛是从Student 继承下来的

JavaScript的原型链和Java的Class区别就在，它没有“Class”的概念，所有对象都是实例，所谓继承关系不过是把一个对象的原型指向另一个对象而已。

Class继承

//用函数实现Student方法
function Student(name) {
    this.name = name;
}
// 现在要给这个Student新增一个方法 
Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!'); 
}
 
 
//用Class编写Student
class Student { 
    constructor(name) {
        this.name = name; 
    }
    hello() {
        alert('Hello, ' + this.name + '!'); 
    } 
}
 
//继承
class PrimaryStudent extends Student { 
    constructor(name, grade) {
        super(name); // 记得用super调用父类的构造方法! 
        this.grade = grade; 
    }
    myGrade() { 
        alert('I am at grade ' + this.grade);
    } 
}

五、操作BOM元素（重点）

1、window

window 对象不但充当全局作用域，而且表示浏览器窗口。

window 对象有 innerWidth 和 innerHeight 属性，可以获取浏览器窗口的内部宽度和高

outerWidth 和 outerHeight 属性，可以获取浏览器窗口的整个宽高

2、navigator

navigator 对象表示浏览器的信息，最常用的属性包括：

  • navigator.appName：浏览器名称；

  • navigator.appVersion：浏览器版本；

  • navigator.language：浏览器设置的语言；

  • navigator.platform：操作系统类型；

  • navigator.userAgent：浏览器设定的 User-Agent 字符串

navigator 的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的

正确的方法是充分利用JavaScript对不存在属性返回undefined 的特性，直接用短路运算符 || 计算：

var width = window.innerWidth || document.body.clientWidth;

3、screen

screen 对象表示屏幕的信息，常用的属性有：

screen.width：屏幕宽度，以像素为单位；

screen.height：屏幕高度，以像素为单位；

screen.colorDepth：返回颜色位数

4、location

location 对象表示当前页面的URL信息

location.protocol; // 'http'
location.host; // 'www.example.com' 
location.port; // '8080' 
location.pathname; // '/path/index.html' 
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
location.reload();//重新加载页面 
location.assign('https://blog.kuangstudy.com/'); // 设置一个新的URL地址

5、document

document 对象表示当前页面信息，document 对象就是整个DOM树的根节点，要查找DOM树的某个节点，需要从 document 对象开始查找。

document 对象还有一个 cookie 属性，可以获取当前页面的Cookie。

document.cookie;

Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如 user=ABC123XYZ(加密的字符串)... ，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。

问题：

  • 由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患，这是因为在HTML页面中引入第三方的JavaScript代码是允许的，如果引入的第三方的JavaScript中存在恶意代码，则恶意网站将直接获取到网站的用户登录信息。

解决方式：

  • 服务器在设置Cookie时可以使用 httpOnly ，设定了 httpOnly 的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持 httpOnly 选项

6、history

history 对象保存了浏览器的历史记录

JavaScript可以调用 history 对象的 back() 或 forward () ，相当于用户点击了浏览器的“后退”或“前进”按钮

不要使用

六、操作DOM元素（重点）

1、DOM查找

//对应CSS选择器
 
//标签，查找指定parent节点下的所有标签为tag的子节点，返回一个动态集合
var elems = parent.getElementsByTagName("tag");
 
//id，只能用在document上，效率非常高
var elem = document.getElementById("id ");
 
//class，查找父元素下指定的class属性元素的集合
var elems = parent.getElementsByClassName("class");
 
//name属性值，返回具有指定name属性值的所有子元素的集合
var elems = document.getElementsByName("name属性值");
 
//css选择器，返回第一个
var elem = parent.querySelector("selector")
 
//返回动态集合
var elems = parent.querySelectorAll("selector")

2、DOM修改

var elem = document.getElementById('id');
 
elem.innerText="";//设置标签内的文本
elem.innerHTML="";//设置标签内的html
 
elem.getAttribute('属性名');//获得属性值
elem.setAttribute('属性名',"value");//设置属性
 
elem.style.属性名="值";//设置样式，属性名：去横线，变驼峰

3、DOM删除

先获取父节点，再通过父节点删除自己

var elem = document.getElementById('id');
var father = elem.parentElement;
father.removeChild(elem);
 
father.removeChuld(father.children[0]);//删除节点时，节点时时刻变化的

4、DOM添加

如果DOM节点是空的，那么直接使用 innerHTML = 'child'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。

如果DOM节点不是空的，那就不能这么做，因为 innerHTML 会直接替换掉原来的所有子节点。

  1. 利用appendChild把一个节点追加到父节点的最后一个子节点
//插入的节点已存在，会从原来的位置删除，再添加到新的位置
var son = document.getElementById('js'), 
    father = document.getElementById('list'); father.appendChild(son);
 
//插入的节点不存在
var new = document.createElement('p');
new.id='';
new.HTML='';
new.setAttribute("属性","属性值");//设置属性
father.appendChild(new);
  1. 利用insertBefore在指定子节点前添加一个子节点
father.insertBefore(newChild,existingChild);

尽量减少操作DOM树（每次修改DOM树，都导致重新layout）

  • 同时创建父元素和子元素

    在内存中先将子元素添加到父元素，在将父元素挂到页面中

  • 只添加多个平级子元素

    将所有子元素临时添加到文档片段中，在将文档片段添加到页面

    文档片段：临时保存多个平级子元素的虚父元素，用法和普通父元素完全一样

    		var frag = document.creatDocumentFragment();//创建片段
    		frag.appendChild(child);//将子元素临时追加到frag中
    		parent.appendChild(frag);//将frag追加到页面

    append之后，frag自动释放，不会占用元素

5、定时器

让程序按照指定时间间隔自动执行任务（网页动态效果、计时功能等）

  • 周期性定时器

    		setInterval(exp,time)
    		//exp：执行语句
    		//time：时间周期，毫秒为单位
    		 
    		setInterval(function(){
    		    console.log("Hello World");
    		},1000)

    停止定时器

    		var timer = setInterval(exp,time);//给定时器取名
    		clearInterval(timer);//停止定时器

  • 一次性定时器

    		setTimeout(exp,time)
    		//exp：执行语句
    		//time：间隔时间

6、操作表单

var input = document.getElementById('');
input.value//获取标签的值

以上方式可以应用于text、password、hidden、select，但是对于单选框、复选框，value值已经预设，通过这种方式得到的值为预设的值，要获得是否勾选，应用checked判断：

var input = document.getElementById('');
input.checked;//true或false

提交表单

  1. 是通过 <form> 元素的 submit() 方法提交一个表单
<form id="test-form">
    <input type="text" name="test"> 
    <button type="button" onclick="doSubmitForm()">Submit</button> 
</form>
 
<script>
    function doSubmitForm() {
        var form = document.getElementById('test-form');
        // 可以在此修改form的input...
        // 提交form: 
        form.submit(); 
    }
</script>

这种方式的缺点是扰乱了浏览器对form的正常提交。

浏览器默认点击 <button type="submit"> 时提交表单，或者用户在最后一个输入框按回车键

  1. 第二种方式是响应 <form> 本身的onsubmit 事件，在提交form时作修改：
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test"> 
    <button type="submit">Submit</button> 
</form> 
 
<script> 
    function checkForm() {
        var form = document.getElementById('test-form'); 
        // 可以在此修改form的input...
        // 继续下一步:
        return true;//告诉浏览器继续提交
    }
</script>

在检查和修改<input>时，要充分利用<input type="hidden">来传递数据。

很多登录表单希望用户输入用户名和口令，但是，安全考虑，提交表单时不传输明文口令，而是口令的MD5

<form id="login-form" method="post" onsubmit="return checkForm()"> 
    <input type="text" id="username" name="username"> 
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button> 
</form> 
 
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"> 
</script>
 
<script>
    function checkForm() { 
        var pwd = document.getElementById('password'); 
        // 把用户输入的明文变为MD5:
        pwd.value = md5(pwd.value);
        // 继续下一步:
        return true;
    }
</script>

以上做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个* 变成32个 * （因为MD5有32个字符）

要想不改变用户的输入，可以利用 <input type="hidden"> 实现：

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"> </script>
 
<form id="login-form" method="post" onsubmit="return checkForm()"> 
   <input type="text" id="username" name="username"> 
    <input type="password" id="input-password">
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">Submit</button> 
</form>
 
<script>
    function checkForm() { 
        var input_pwd = document.getElementById('input-password');
        var md5_pwd = document.getElementById('md5-password');
        // 把用户输入的明文变为MD5:
        md5_pwd.value = md5(input_pwd.value);
        // 继续下一步: 
        return true; 
    } 
</script>

七、JQuery

快速简洁的第三方JavaScript库

  • DOM操作的终极简化

  • 屏蔽了浏览器的兼容性问题

jQuery只是一个 jquery-xxx.js 文件，但你会看到有compressed（已压缩）和uncompressed（未压缩）两种版本，使用时完全一样，但如果你想深入研究jQuery源码，那就用uncompressed版本。

使用jQuery只需要在页面的 head 引入jQuery文件即可

公式： $(selector).action()

  • 美元符号定义 jQuery

  • 选择符（selector）"查询"和"查找" HTML 元素：CSS选择器

  • jQuery 的 action() 执行对元素的操作

//DOM
document.getElementById("id");
//JQuery
$("#id");
 
$('[属性=属性值]');//按属性查找
 
//前缀查找和后缀查找
var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM

1、JQuery操作DOM

  1. 查找
$("selector").text();
$("selector").html();
$("selector").attr("属性");
$("selector").css("属性");
  1. 修改
$("selector").text("值");
$("selector").html("值");
$("selector").attr("属性","值");
$("selector").css("属性","值");
  1. 删除
$("selector").remove();
  1. 添加
var $new = $("html代码片段");
$(father).append($new);

2.事件

鼠标事件

  • click: 鼠标单击时触发
  • dblclick：鼠标双击时触发
  • mouseenter：鼠标进入时触发
  • mouseleave：鼠标移出时触发
  • mousemove：鼠标在DOM内部移动时触发
  • hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件

键盘事件仅作用在当前焦点的DOM上

  • keydown：键盘按下时触发
  • keyup：键盘松开时触发
  • keypress：按一次键后触发

其他事件

  • focus：当DOM获得焦点时触发
  • blur：当DOM失去焦点时触发
  • change：当内容改变时 触发
  • submit：当提交时触发
  • ready：当页面被载入并且DOM树完成初始化后触发

初始化事件

我们自己的初始化代码必须放到 document 对象的 ready 事件中，保证DOM已完成初始化：

<html> 
    <head>
        <script>
            $(document).on('resdy',function () { 
                $('#testForm).on('submit', function () { 
                  alert('submit!'); 
            }); 
            });
        </script> 
    </head> 
    <body>
        <form id="testForm"> 
            ... 
        </form>
    </body>
</html>

由于 ready 事件使用非常普遍，所以可以这样简化:

$(document).ready(function () {
    // on('submit', function)也可以简化: 
    $('#testForm).submit(function () { 
    alert('submit!'); 
	});
});

甚至还可以再简化为：

$(function () { 
    // init...
});

事件参数

有些事件，如 mousemove 和 keypress ，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。所有事件都会传入 Event 对象作为参数，可以从 Event 对象上获取到更多的信息

<!DOCTYPE html> 
<html lang="en"> 
    <head><meta charset="UTF-8">
        <title>Title</title> 
        <style> 
            #testMouseMoveDiv{ 
                width: 300px;
                height: 300px; 
                border: 1px solid black;
            } 
        </style>
    </head> 
    <body>
        mousemove: <span id="testMouseMoveSpan"></span>
        <div id="testMouseMoveDiv"> 在此区域移动鼠标试试 </div>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> 
        <script> 
            $(function () { 
                $('#testMouseMoveDiv').mousemove(function (e) { 
                    $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
                }); 
            });
        </script>
    </body> 
</html>
posted @   深巷の猫  阅读(1185)  评论(0)  编辑  收藏  举报
相关博文：
· JavaWeb
· Spring
· JavaScript
· 走进JavaScript基础语法
· JavaScript
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
← → ↓ ↑
点击右上角即可分享
微信分享提示