1. js学习笔记

基于butterfly下local-search文档解读的js学习笔记。

window对象：表示浏览器中打开的窗口。

https://www.w3school.com.cn/jsref/obj_window.asp

addEventListener()方法：添加当用户点击按钮时触发的事件监听器：

document.getElementById("myBtn").addEventListener("click", displayDate);

document对象:每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

1.1 async函数：

async函数声明声明了一个异步函数，其中函数体中允许使用await关键字。async和await关键字使不同时(asynchronous)、基于承诺的行为能够以更简洁的方式编写，避免了显式配置承诺链的需要。async and await make promises easier to write[大概第50行]

函数前的关键字async使函数返回promise：

async function myFunction() {
  return "Hello";
}

与以下内容相同：

function myFunction() {
  return Promise.resolve("Hello");
}

（一）Promise 是一个对象，它代表了一个异步操作的最终完成或者失败。

“Producing code（生产代码）” 是需要一些时间的代码

“Consuming code（消费代码）” 是必须等待结果的代码

Promise 是一个 JavaScript 对象，它链接生成代码和消费代码

JavaScript Promise 对象包含生产代码和对消费代码的调用：

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code"（可能需要一些时间）

myResolve(); // 成功时
myReject();  // 出错时
});

// "Consuming Code" （必须等待一个兑现的承诺）
myPromise.then(
function(value) { /* 成功时的代码 */ },
function(error) { /* 出错时的代码 */ }
);

JavaScript Promise 对象可以是：

  • Pending:undefined
  • Fulfilled:结果值
  • Rejected:error 对象

（二）异步编程技术使你的程序可以在执行一个可能长期运行的任务的同时继续对其他事件做出反应而不必等待任务完成。与此同时，你的程序也将在任务完成后显示结果。

浏览器提供的许多功能（尤其是最有趣的那一部分）可能需要很长的时间来完成，因此需要异步完成，例如：

1.2 fetch函数

全局的 fetch() 方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。[大概第52行]

Fetch API 接口允许 Web 浏览器向 Web 服务器发出 HTTP 请求。不再需要 XMLHttpRequest。

HTTP请求：是指从客户端到服务器端的请求消息。包括：消息首行中，对资源的请求方法、资源的标识符及使用的协议。

下面的例子获取文件并显示内容：

<!DOCTYPE html>
<html>
<body>
<p id="demo">获取文件以更改此文本。</p>
<script>

let file = "/demo/js/fetch_info.txt"

fetch (file)
.then(x => x.text())
.then(y => document.getElementById("demo").innerHTML = y);

</script>
</body>
</html>

甚至可以更好：请使用易于理解的名称而不是 x 和 y：

<!DOCTYPE html>
<html>
<body>
<p id="demo">获取文件以更改此文本。</p>

<script>
//- let Text = "https://www.dhndzwxj.top/local_file/test.txt"
let Text = "https://www.dhndzwxj.top/123068617.html"
fetchData(Text);

//- 下面是定义getText函数的代码
//- t和a返回了一个[object XMLDocument]
async function fetchData(path) {
  let data = []  
  const response = await fetch(path)
  const res = await response.text()
  const t = await new window.DOMParser().parseFromString(res, 'text/html')
  const a = await t
  var myNodelist = a.querySelectorAll('meta')
  document.getElementById("demo").innerHTML = myNodelist.length 
  //- 参数“demo”意味着这个脚本只对文中`id=demo`的标签起作用
}
</script>

</body>
</html>

1.3 Document.querySelectorAll()

返回一个静态（非活动）NodeList，表示与指定选择器组匹配的文档元素列表。[大概在第59行]

querySelectorAll(selectors)
  • selectors：包含一个或多个要匹配的选择器的字符串。此字符串必须是有效的CSS选择器字符串；如果不是，则抛出SyntaxError异常。有关使用选择器标识元素的更多信息，请参阅使用选择器查找DOM元素。可以使用逗号分隔多个选择器。
  • 返回值：一个非活动NodeList，每个元素包含一个Element对象，该对象至少匹配一个指定的选择器，如果不匹配，则为空NodeList。

例子：

//- 获取文档中 class="example" 的所有元素:
var x = document.querySelectorAll(".example");
//- 获取文档中所有的 <p> 元素， 并为匹配的第一个 <p> 元素 (索引为 0) 设置背景颜色:
//-- 获取文档中所有的 <p> 元素
var x = document.querySelectorAll("p"); 
//-- 设置第一个 <p> 元素的背景颜色
x[0].style.backgroundColor = "red";
//-- 设置第一个 <p> 元素的文字颜色
x[0].style.color = "blue";

例子：【解析方式为text/xml】

<!doctype html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!--没有这个插件不能循环生成代码-->
</head>


<body>
<p id="demo">获取文件以更改此文本。</p>
<p class="demon"></p>

<script>	
//- var Text = "https://www.dhndzwxj.top/local_file/test.txt"
var Text = "https://www.dhndzwxj.top/123068617.html"
fetchData(Text);
//- 下面是定义getText函数的代码
//- t和a返回了一个[object XMLDocument]
async function fetchData(path) {
  let data = []  
  const response = await fetch(path)
  const res = await response.text()
  const t = await new window.DOMParser().parseFromString(res, 'text/xml')
  //- 这后面的'text/xml'替换为'text/html'，更容易提取文字
  const a = await t
  var myNodelist = a.querySelectorAll('meta')
  //- a是一个[XML Objext]，myNodelist提取了该对象中所有的meta标签，myNodelist生成了一个[object NodeList]
  document.getElementById("demo").innerHTML = myNodelist.length 
 
  //- 获取[object NodeList]的长度,并将其放在body中id=demo的位置
  //- 这一步先是依靠循环生成myNodelist.length 个
	//- <p class="demo0">获取文件以更改此文本:0</p>
	//- <p class="demo1">获取文件以更改此文本:1</p>
	//- 放在上面的<p class="demo+数字"></p>位置。
  for (let i=0;i<myNodelist.length;i++){
    p_demo ='<p id="demo';
  	p_demo+= i.toString();
  	p_demo+= '">获取文件以更改此文本:'+i.toString()+'</p>';
  	$(".demon").append(p_demo);
    id = "demo" + i.toString()
    document.getElementById(id).innerHTML = "第" + i.toString() + "段文字:<br/>" + myNodelist[i].textContent
  }  
  //- 参数“demo+数字”意味着这个脚本只对本网页中`id=demo+数字`的标签起作用
  //- myNodelist[i].textContent，表示该[object NodeList]第i+1个元素的内容
}
</script>
 
 
</body>
</html>

例子：【解析方式为text/html】

<!doctype html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!--没有这个插件不能循环生成代码-->
</head>


<body>
<p id="demo">获取文件以更改此文本。</p>
<p class="demon"></p>

<script>	
//- var Text = "https://www.dhndzwxj.top/local_file/test.txt"
var Text = "https://www.dhndzwxj.top/123068617.html"
fetchData(Text);
//- 下面是定义getText函数的代码
//- t和a返回了一个[object HTMLDocument]
async function fetchData(path) {
  let data = []  
  const response = await fetch(path)
  const res = await response.text()
  const t = await new window.DOMParser().parseFromString(res, 'text/html')
  const a = await t
  var myNodelist = a.querySelectorAll('.article-meta__tags') 
  //- a是一个[HTML Objext]，myNodelist提取了该对象中所有的class='article-meta__tags'的内容，也就是提取了网页的标签tags，myNodelist生成了一个[object NodeList]
  document.getElementById("demo").innerHTML = myNodelist.length 
  //- 获取[object NodeList]的长度,并将其放在body中id=demo的位置
  //- 这一步是依靠循环生成myNodelist.length个
	//- <p class="demo0">获取文件以更改此文本:0</p>
	//- <p class="demo1">获取文件以更改此文本:1</p>
	//- 放在上面的<p class="demon+数字"></p>位置。
  for (let i=0;i<myNodelist.length;i++){
    p_demo ='<p id="demo';
  	p_demo+= i.toString();
  	p_demo+= '">获取文件以更改此文本:'+i.toString()+'</p>';
  	$(".demon").append(p_demo);
    id = "demo" + i.toString()
    document.getElementById(id).innerHTML = "第" + i.toString() + "段文字:<br/>" + myNodelist[i].textContent
  }  
  //- 参数“demo+数字”意味着这个脚本只对本网页中`id=demo+数字`的标签起作用
  //- myNodelist[i].textContent，表示该[object NodeList]第i+1个元素的内容
}
</script>
 
 
</body>
</html>

querySelector

返回

Document.querySelector()：返回文档中与指定选择器或选择器组匹配的第一个元素。如果未找到匹配项，则返回null。

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll()方法替代。

CSS 变量可以访问 DOM，这意味着您可以通过 JavaScript 更改它们。

可以通过js获取css变量， 也可以通过js改变css变量。

querySelector(selectors)
  • selectors：包含一个或多个要匹配的选择器的字符串。此字符串必须是有效的CSS选择器字符串；如果不是，则抛出SyntaxError异常。有关选择器以及如何管理选择器的更多信息，请参阅使用选择器查找DOM元素。

实例：

//- 获取文档中第一个 <p> 元素：
document.querySelector("p");
//-获取文档中 class="example" 的第一个元素:
document.querySelector(".example");
//-获取文档中 class="example" 的第一个 <p> 元素:
document.querySelector("p.example");
//- 获取文档中有 "target" 属性的第一个 <a> 元素：
document.querySelector("a[target]");
//-以下实例演示了多个选择器的使用方法。
//--假定你选择了两个选择器: <h2> 和 <h3> 元素。
//--以下代码将为文档的第一个 <h2> 元素添加背景颜色：
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2, h3").style.backgroundColor = "red";
//-但是，如果文档中 <h3> 元素位于 <h2> 元素之前，<h3> 元素将会被设置指定的背景颜色。
<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2, h3").style.backgroundColor = "red";

例子1：使用querySelectorAll。

<!DOCTYPE html>
<html>
<body>
<p id="demo">获取文件以更改此文本。</p>
<p id="demo1">获取文件以更改此文本1。</p>
<p id="demo1">获取文件以更改此文本2。</p>
<p id="demo1">获取文件以更改此文本3。</p>

<script>

var myNodelist = document.querySelectorAll('#demo1')
//- 找到本文档中所有id=demo1的标签
document.getElementById("demo1").style.color="yellow"
document.getElementById("demo1").style.backgroundColor="black"
document.getElementById("demo").innerHTML = myNodelist[2].textContent
//- myNodelist第三个元素的文本内容（.textContent）

</script>

</body>
</html>

例子2：使用querySelector。

<!DOCTYPE html>
<html>
<body>
<p id="demo">获取文件以更改此文本。</p>
<p id="demo1">获取文件以更改此文本100。</p>
<p id="demo1">获取文件以更改此文本2。</p>
<p id="demo1">获取文件以更改此文本3。</p>

<script>

var myNodelist = document.querySelector('#demo1')
//- 找到本文档中第一个id=demo1的标签
document.getElementById("demo1").style.color="yellow"
document.getElementById("demo1").style.backgroundColor="black"
document.getElementById("demo").innerHTML = myNodelist.textContent
//- myNodelist的文本内容（.textContent）

</script>

</body>
</html>

1.4 DOMParser.parseFromString()

接口解析包含HTML或XML的字符串，返回HTMLDocument或XMLDocument。[大概在第57行]

parseFromString(string, mimeType)
  • string：要分析的字符串。它必须包含HTML、xml、xhtml+xml或svg文档。
  • mimeType：字符串。此字符串确定是使用XML解析器还是HTML解析器来解析字符串。有效值为：
    • text/html、text/xml、application/xml、application/xhtml+xml、image/svg+xml
    • text/html的值将调用html解析器，该方法将返回一个HTMLDocument。
    • 其他有效值（text/xml、application/xml、applications/xhtml+xml和image/svg+xml）在功能上是等效的。它们都调用XML解析器，方法将返回XMLDocument。

1.5 getElementById方法

可返回对拥有指定 ID 的第一个对象的引用。

document.getElementById(id)

如果您需要查找文档中的一个特定的元素，最有效的方法是getElementById()。在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。

innerHTML属性设置或返回表格行的开始和结束标签之间的 HTML。

1.6 JavaScript forEach()方法

//- 列出数组的每个元素：
<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>
 
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
 
function myFunction(item, index) {
    demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; 
}
</script>

1.7 NodeList

NodeList对象是节点的集合，通常由Node.childNodes等属性和document.querySelectorAll()等方法返回。NodeList有两种类型：live和static。

在某些情况下，NodeList是live的，这意味着DOM中的更改会自动更新集合。例如：

const parent = document.getElementById('parent');
let childNodes = parent.childNodes;
console.log(childNodes.length); // let's assume "2"
parent.appendChild(document.createElement('div'));
console.log(childNodes.length); // outputs "3"

在其他情况下，NodeList是static的，其中DOM中的任何更改都不会影响集合的内容。无处不在的document.querySelectorAll()方法返回静态NodeList。

可以使用for循环遍历NodeList中的项：

for (let i = 0; i < myNodeList.length; i++) {
  let item = myNodeList[i];
}

css选择器

1.8 CSS选择器

CSS选择器（属性选择器）字符串：从 HTML 的学习中，你已经知道，元素可以带有属性，它提供了关于如何标记的更详细信息。CSS 中，你能用属性选择器来选中带有特定属性的元素。

想了解，可以点这里。

1.9 toLowerCase() 方法

toLowerCase()方法用于把字符串转换为小写。

1.10 indexOf()方法

string.indexOf(searchvalue,start)
  • searchvalue:必需。规定需检索的字符串值。
  • start:可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数，则将从字符串的首字符开始检索。

1.11 push()方法

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

array.push(item1, item2, ..., itemX)

例子：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi","Lemon","Pineapple")

输出

Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple

1.12 slice()方法

slice() 方法可从已有的数组中返回选定的元素。

slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

slice()方法不会改变原始数组。

array.slice(start, end)
  • start:可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
  • end: 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

1a js中的括号

1a.1 { } 大括号

表示定义一个对象，大部分情况下要有成对的属性和值，或是函数

var LangShen = {"Name":"Langshen","AGE":"28"};

上面声明了一个名为“LangShen”的对象，多个属性或函数用,（逗号）隔开，因为是对象的属性，所以访问时，应该用.（点）来层层访问：

LangShen.Name、LangShen.AGE

当然我们也可以用数组的方式来访问，结果是一样的。

LangShen["Name"]、LangShen["AGE"]

1a.2 [ ]中括号

[ ]中括号，表示一个数组，也可以理解为一个数组对象

var LangShen = [ "Name","LangShen","AGE","28" ];

很明显，每个值或函数，都是独立的，多个值之间只用,（逗号）隔开，因为是数组对象，所以它等于：

var LangShen = Array( "Name","LangShen","AGE","28" );

访问时，也是和数组一样，

alert( LangShen[0] );

1a.3 { } 和[ ] 一起使用

{ } 和[ ] 一起使用，我们前面说到，{ } 是一个对象，[ ] 是一个数组，我们可以组成一个对象数组

var LangShen = { "Name":"Langshen", 
	"MyWife":[ "LuLu","26" ], 
	"MySon":[{"Name":"Son1"},{"Name":"Son2"},{"Name":"Son3"}] }

从上面的结构来看，是一个对象里面的第一项是个属性，第二项是一个数组，第三个是包含有多个对象的数组。调用起来，也是一层一层访问，对象的属性用.（点）叠加，数组用 [下标] 来访问。

alert( LangShen.MySon[1].Name ) ;

object

1b js中的Object

JS常见坑：对象赋值会影响原对象

现象：直接用=的方式把一个对象赋值给另一个对象，会导致修改新对象时，原对象也发生变化

var obj1 = {'name': '1111'};
var obj2 = obj1;
obj2.name = '2222';
console.log(obj1.name); //'2222'

原因：JavaScript 中对象的赋值是默认引用赋值的（两个对象指向相同的内存地址）

可采用的方法：Object.assign()拷贝对象

// 使用 Object.assign() 方法复制对象
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

obj2.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}

obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}

不足之处：

  • 可以看到当修改obj2.b.c的值时，原对象obj1.b.c也跟着发生了变化，Object.assign()只是让对象里第一层的数据没有了关联性，但是对象内的对象则跟被复制的对象有着关联性的。
  • Object.assign(obj) --浅拷贝
    Object.assign({},obj) --只有第一层深拷贝 （ES6中扩展运算符…也是如此）

【大神教程】原生JS实现深拷贝：

// 定义一个深拷贝函数  接收目标target参数
function deepClone(target) {
    // 定义一个变量
    let result;
    // 如果当前需要深拷贝的是一个对象的话
    if (typeof target === 'object') {
        // 如果是一个数组的话
        if (Array.isArray(target)) {
            result = []; // 将result赋值为一个数组，并且执行遍历
            for (let i in target) {
                // 递归克隆数组中的每一项
                result.push(deepClone(target[i]))
            }
         // 判断如果当前的值是null的话；直接赋值为null
        } else if (target === null) {
            result = null;
         // 判断如果当前的值是一个RegExp对象的话，直接赋值 
        } else if (target.constructor === RegExp) {
            result = target;
        } else {
            // 否则是普通对象，直接for in循环，递归赋值对象的所有值
            result = {};
            for (let i in target) {
                result[i] = deepClone(target[i]);
            }
        }
    } else {
        // 如果不是对象的话，就是基本数据类型，那么直接赋值
        result = target;
    }
    // 返回最终结果
    return result;
}

2. js中let和var的区别：

  • let是es6中新增命令，也是用来声明变量的
  • let和var的区别体现在作用域上。var的作用域被规定为一个函数作用域，而let则被规定为块作用域，块作用域要比函数作用域小一些，但是如果两者既没在函数中，也没在块作用域中定义，那么两者都属于全局作用域。

var 和let 声明的变量在全局作用域中被定义时，两者非常相似

let bar = 'hehe';
var baz = 'lala';

但是，被let声明的变量不会作为全局对象window的属性，而被var声明的变量却可以

console.log(window.bar) //undefined
console.log(window.baz) // 'able'

var 和 let 在函数作用域中声明一个变量，两个变量的意义是相同的。

function aFun(){
  let bar = 'hehe'; //函数作用域中的变量
  var baz = 'lala'; //函数作用域中的变量
}

在块作用域中两者的区别较为明显， let只在for()循环中可用，而var是对于包围for循环的整个函数可用

function  aFun1(){
    // i 对于for循环外的范围是不可见的(i is not defined)
    for(let i = 1; i<5; i++){
        //  i只有在这里是可见的
    }
    // i 对于for循环外的范围是不可见的(i is not defined)
}
function aFun2(){
    // i 对于for循环外的范围是可见的
    for(var i = 1;i<5; i++){
        // i 在for 在整个函数体内都是可见的
    }
    // i 对于for循环外的范围是可见的
}

var允许在同一作用域中声明同名的变量，而let不可以

let me  = 'foo';
let me  = 'bar'; //SyntaxError: Identifier 'me' has already been declared

var me = 'foo';
var me = 'bar'; //这里me被替代了，是可以重复声明的

es6中还有一个声明变量的命令const，const和let都是在声明的块作用域中有效，但是let声明的变量可变，值和类型都可以改变，没有限制。const声明额变量不能改变，所以，const一旦声明一个变量，就必须马上初始化，不能留到以后赋值。

const hehe; //报错，Missing initializer in const declaration

const a = 3;
a = 5; //报错，Uncaught TypeError: Assignment to constant variable.

那么在什么情况下要用到let呢？

let 在块作用域中有效，有的时候，我们为了降低变量污染的风险，在块作用域中使用let来代替var，这样不会污染块作用域的外部作用域，降低 bug率，使代码更安全。

3. 什么是es6？

es6学习文档：http://caibaojian.com/es6/。

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言

ECMAScript是JavaScript的组成部分，JavaScript没了它可是不行的。

大家再回忆一下，平时我们写javascript代码的时候，用什么声明一个变量，没错，是用关键字：var，为什么是 var 而不是其他的单词？此外，为什么我们都用function关键字来声明一个函数，而不是用其他单词？为什么呢？因为这是ECMAScript规定了我们要这么做，它规定了javascript的语法规则。

ECMAScript就是JavaScript中的语法规范！

ES6是ECMAScript 6的缩写简称，这个好理解。顾名思义，它是ECMAScript的第6个版本，为什么ES6好像挺火的样子？

4. jQuery

jQuery官网：https://jquery.com/。

jQuery引用链接：<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.2.min.js"></script>。

jQuery是一个封装 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。

js的弊端：

  • 不能添加多个入口函数(window.onload)，添加多个，后面的会覆盖前面的
  • 原生js有时候会有代码冗余
  • 原生js的某些属性或方法，有浏览器兼容问题
  • 原生js容错率较低，前面的代码出了问题，后面的代码执行不了

jQuery优势：

  • 可以写多个入口函数
  • 代码简洁（隐式迭代）
  • 解决浏览器兼容
  • 容错率高

jQuery有版本

  • 1.x 支持老浏览器比如ie678，停止更新
  • 2.x 不支持老浏览器，停止更新
  • 3.x不支持老浏览器，持续更新

学习教程地址：https://www.runoob.com/jquery/jquery-tutorial.html。

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

4.1 一个例子

原生js代码：

<!DOCTYPE html>
<html>
    <body>
        <input type="button" value="设置边框" id="btnOne" />
        <input type="button" value="设置文本" id="btnTwo" />
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>
<!-- 需求：点击按钮给三个div设置边框和文本 -->
<script>
    //- 入口函数
    window.onload = function(){
        //- 1先要获取对应的元素
        var btnOne = document.getElementById("btnOne");
        var btnTwo = document.getElementById("btnTwo")
        var divs = document.getElementsByTagName("div")
        //- 2给btnOne按钮设置点击事件
        btnOne.onclick = function(){
            for(var i=0;i<divs.length;i++){
                divs[i].style.border = '1px solid red'
            }
        }
        //- 3给btnTwo按钮设置点击事件
        btnTwo.onclick = function(){
            for(var i=0;i<divs.length;i++){
                divs[i].textContent = "我是设置的文本"
            }
        }
    }
</script>

jQuery代码

<!DOCTYPE html>
<html>
    <body>
        <input type="button" value="设置边框" id="btnOne" />
        <input type="button" value="设置文本" id="btnTwo" />
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

<!--下面先引入了jQuery的库-->>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.2.min.js"></script>
<!-- 需求：点击按钮给三个div设置边框和文本 -->
<script>
    //- 入口函数
    $(document).ready(function(){
        //- 设置边框
        $('#btnOne').click(function(){
            $('div').css('border','1px solid red');
        })
        //- 设置文本
        $('#btnTwo').click(function(){
            $('div').text('我是设置的文本');
        })
    })
</script>

4.3 引入jQuery文件

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.2.min.js"></script>

4.4 写一个入口函数

$(document).ready(function(){
  
})

为什么写入口函数？为了防止页面标签还没渲染出来，js就执行了。

其写法有两种。第一种就是上面的例子。第二种是[更简单、更常用]：

$(function(){
  
})

jQuery入口函数和window.onload有何区别？

  • 后者只能写一个
  • 执行时机不同。

找到要操作的元素（jQuery选择器，selector），去操作它（添加属性、样式、文本……）

$(document).ready(function(){
  $('div').width(100).height(100).css('backgroundColor','red').text('添加文本')
  //- 点代表链式编程
})

4.5 $是什么？

这个函数是获取指定网页元素的函数。以后在网页就不用每次使用document.getElementById("ID名")来获取元素，只用$('ID名')即可，非常简使了。

如果报错：$ is not defined，说明没有引入jQuery文件。

jQuery文件的结构：其实是一个自执行函数

(function(){
  window.jQuery = window.$ = jQuery
}())

注意：引入一个js文件，是会执行这个js文件的代码的。jQuery是一个自执行函数，执行其代码，就是执行这个函数

这个自执行文件就是给window对象添加一个jQuery属性和$属性。

$其实和jQuery是等价的，是一个函数！

console.log(window.jQuery === window.$)
//- true

参数不同，效果也不一样

  • 参数传递的是个匿名函数-入口函数。$()可以是$(function)，即一个函数，它是$(document).ready()的一个速记方式。如常见的形式是这样的：
  • 参数传递的是一个字符串-选择器（css selector）/创建一个标签、Xpath或html元素。也就是通过上述表达式来匹配目标元素。 比如：$("a")构造的这个对象，是用CSS选择器构建了一个jQuery对象——它选择了所有的<a></a>这个标签。如： $("a").click(function(){...})
  • 参数传递一个dom对象，把其转化为jQuery对象。如常用的DOM对象有document、location、form等。如这样一行代码： $(document).find("div>p").html()); $()中的document是一个DOM元素，即在全文寻找带<p>的<div>元素，并显示<p>中的内容。
//- ①入口函数
$(document).ready(function(){ 
	alert("Hello world!"); 
}); 
//- 等同于下面：
$(function(){
  alert("Hello world!"); 
})


//- ②css选择器
//- id
$('#one')
//- 创建一个标签
$('<div>啦啦，我是一个div</div>')


//- ③创建一个dom元素
$(document).find("div>p").html());

在不用JQUERY的情况，一般自己也会在js里自定义一个$函数。

function $(Nid){
 return document.getElementById(Nid);
}

4.6 DOM对象

原生js选择器获取到的对象。只能调用dom方法或者属性，不能调用jQuery方法或者属性

document.getElementById("")
document.getElementByTagName("")

jQuery对象：用jQuery选择器获取的对象。

5. jQuery的方法

5.1 获取、设置文本内容text()

$('#div1')代表id = div1

$('div')代表<div></div>

text()不给参数。会获取到这个标签中所有的文本，包括后代元素的文本。

$('#getBtn').click(function(){
  $('#div1').text()
})
//- 获取id=div1 的文本

获取标签为div元素的文本。包含了多个dom元素的jQuery对象，通过text()方法会把所有dom元素的文本获取到

$('div').text()

设置文本：text()给参数，参数就是要设置的文本。会覆盖原来的内容。如果设置的文本中包含标签，也不会把这个标签解析出来的。

$('#setBtn').click(function(){
  $('#div1').text('我是新设置的文本')
   $('#div1').text('我是新设置的文本<a>我是链接</a>')
})

给标签为div的元素设置文本。

包含了多个dom元素的jQuery对象，通过text()方法设置文本，会把所有的dom元素设置上。（这里存在一个隐式迭代，偷偷地帮你遍历了）

$('div').text('设置的文本')

5.2 获取、设置样式css()

获取样式,css()方法为要获取值的样式名

$('#getBtn').click(function(){
  $('#div1').css('width')	//-宽度
  $('#div1').css('height')	//-高度
  $('#div1').css('background-color')	//-背景色
  $('#div1').css('border')	//- 边框
})

获取标签为div的元素们的样式，只能获取第一个元素的值！

包含了多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式。

设置样式：设置样式是行内样式。设置单样式

$('#setBtn').click(function(){
  $('#div1').css('width','300px')	//-宽度
  $('#div1').css('height',300)	//-高度,不带px的话，数字可以不加引号
  $('#div1').css('background-color','red')	//-背景色
  $('#div1').css('border','10px solid green')	//- 边框
})

设置多样式：增加一个对象

$('#div1').css({
  width:300,
  'height':'300px',
  'backgrond-color':'green',
  backgroundColor:'green',
  border:'10px solid pink',
  'border-top-width':'10px'
})

给标签为div 的元素们设置样式：隐式迭代，把每一个div都设置了同样的样式

$('div').css({
  width:300,
  'height':'300px',
  'backgrond-color':'green',
  'border-top-width':'10px solid red'
  marginTop:10
})

5.3 jQuery选择器

名称 用法 描述
ID选择器 $('#id') 获取指定ID的元素
类选择器 $('.class') 获取同一类class的元素
标签选择器 $('div') 获取同一类标签的所有元素
并集选择器 $('div,p,li') 使用逗号分隔，只要符合条件之一即可
交集选择器 $('div.redClass') 获取clss为redClass的div元素

跟css选择器的用法一模一样。

//- 并集的实例
$('.hf,.wsy').css('backgroundColor','white')
//- 交集的实例
$('li.nj').css('backgroundColor','green')

层级选择器

名称 用法 描述
子代选择器 $('ul > li') 使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器 $('ul li') 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 
$('#father > div')
$('#father div')

5.4 class类操作

<style>
  div {
    width: 100px;
    height: 100px;
    margin-top: 10px;
  }
  .fontSize30{
    font-size: 30px;
  }
  .width200{
    width: 200px;
  }
</style>
<script>
  $(function(){
    //- 1添加类 addClass(类名)
    $('#addClass').click(function(){
      //- 1.1 给id为div1的元素添加类
      //添加单个类
      $('#div1').addClass('fontSize30')
      //添加多个类
      $('#div1').addClass('fontSize30 width200')
    })  
    //- 2移除类
    $('#removeClass').click(function(){
      //- 2.1 给id为div1的元素移除类
      //移除单个类
      $('#div1').removeClass('fontSize30')
      //移除多个类
      $('#div1').removeClass('fontSize30 width200')
      //移除所有类
      $('#div1').removeClass()
    })
    //- 3判断类
    $('#hasClass').click(function(){
      //- 判断一个元素有没有某个类
      $('#div1').hasClass('fontSize30')	//true or false
    })
    //- 4切换类
    $('#toggleClass').click(function(){
      //- 如果元素有某个类，就移除这个类；如果元素没有这个类，就添加这个类
      $('#div1').toggleClass('fontSize30')
    })
  })
</script>

5.5 动态创建元素-html()和$()

原生js中创建节点：

document.write('<div>')
//- 标签可以被解析出来。但是慎用，会覆盖掉页面。
innerHTML
//- 设置内容。如果内容中有标签，也可以被解析出来，可以设置节点
document.createElement('div')
//- 会创建一个div标签，但这个标签只存在于内存中

jQuery创建节点

①html()：设置或者获取内容

$('#btnHtml1').click(function(){
  //获取内容：html()方法不给参数
  //获取到元素的所有内容
  $('#div1').html()
  //设置内容：html()方法给参数
  //会把原来的内容给覆盖
  $('#div1').html('我是设置的内容')
  //如果设置的内容中包含了标签，是会把标签给解析出来的
  $('#div1').html('我是设置的内容<a href="https://baidu.com">百度一下</a>')
})

②$：

//- 确实能创建元素，但是创建的元素只存在于内存中。如果要在页面上显示，需要追加。
$('#btn1').click(function(){
  var $link = $('<a href="http://news.baidu.com">我是新闻</a>')
  //- 追加节点
  $('#div1').append($link)
})

5.6 jQuery val() 方法

原生js中通过value属性来获取或者设置表单元素的值

jQuery通过val()属性来获取或者设置表单元素的值

$('#btn').click(function(){
  //- val()不给参数就是获取
  $('#txt').val()
  //- val()给参数就是设置
  $('#txt').val('我是设置的值')
})

val() 方法返回或设置被选元素的 value 属性。

  • 返回：该方法返回第一个匹配元素的 value 属性的值。
  • 设置：该方法设置所有匹配元素的 value 属性的值。
$("button").click(function(){
    $("input:text").val("Glenn Quagmire");
});
//- 返回 value 属性：
$(selector).val()
//- 设置 value 属性：
$(selector).val(value)
//- 通过函数设置 value 属性：
$(selector).val(function(index,currentvalue))

5.7 prop()操作布尔类型的属性

<script>
  $(function(){
    //- 回忆一下，有一类属性比如，checked，写在元素的身上就表示选中，没有写在元素上就表示没有选中
    //- 这一类属性用原生js是如何操作的呢？给它设置true或者false，取值也是得到true或者false
    document.getElementById("btn1").onclick = function(){
      //- 设置操作
      document.getElementById("ckb1").checked = true //- or false
      // 获取操作
      document.getElementById("ckb1").checked
    }
    
    //-jQuery
    $('#btn1').click(function(){
      $('#ckb1').attr('checked') //无论是选中还是没有选中，都返回一个undefined
    })
    //在jQuery1.6之后，对于checked、 selected、 disabled这类boolean类型的属性来说，不能用attr方法,只能用prop方法。
    $('#btn1').click(function(){
      $('#ckb1').prop('checked') 
      // 如果多选框是选中状态，返回true；如果多选框是取消选中状态，返回false
    })
  })
</script>

5.8 each()方法

作用：遍历jQuery对象，为每一个匹配到的元素执行一个函数。

如果给每一个遍历对象设置不同的值实9，需要用显式迭代。否则用隐式迭代就够了。

<body>
  <ul id='ulList'>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
    <li>什么都看不见</li>
  </ul>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.2.min.js"></script>
  <script>
    $(function(){
      //- 需求：找到所有的1i标签，分别设置透明度，透明度是递增到1.
      
      //- 1获取所有li标签
      var $lis = $('#ulList').children
      
      //- 2给$lis里面的每一个li标签设置透明度
      // $lis.css('opacity',0.5)	//由于隐式迭代，每一个li标签的透明度都设置成了0.5
      $lis.each(function(index,element){
        //- index代表索引，element代表li标签，是一个dom对象
        $(element).css('opacity',index/10)
      })
      
    })
  </script>
</body>

5.9 事件对象

<script>
  $(function(){
    //- 1什么是事件对象
    //注册一个事件，系统就会帮我们生成一个对象，记录这个事件触发时候的一些信息，比如触发事件的时候有没有按住某个键，再比如触发这个事件时候的坐标信息
    //jQuery中用事件参数e获取
    //jQuery事件对象对原生js对象的一个封装，帮你处理好了兼容性
    $('#one').on('click',function(event){
      console.log(event)
    })
  })
</script>

5.10 siblings()方法

siblings() 方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素

例子：返回带有类名 “start” 的每个

  • 元素的所有同级元素：

    $(document).ready(function(){
    $("li.start").siblings().css({"color":"red","border":"2px solid red"});
});

    5.11 split()方法

    分割多个标签文本的例子：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<p id="demon"></p>

<script>
var dataTags="科层制 扁平化";
var splitT=dataTags.split(" ");
for (let i=0;i<splitT.length;i++){
	p_demo = '<p id="demo';
	p_demo += i.toString();
	p_demo+= '">获取文件以更改此文本:'+i.toString()+'</p>';
	$("#demon").append(p_demo);
	id = "demo" + i.toString();
	document.getElementById(id).innerHTML=splitT[i];
}
</script>

</body>
</html>

    5.12 trim()方法

    2023.01.09更新

    trim()方法用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。

    trim()方法不会改变原始字符串。

    trim() 方法不适用于 null, undefined, Number 类型。

    6. jQuery插件

    插件网址：<www.jq22.com>。

    也可以知道插件名，然后下载到本地。

    一个例子：颜色插件

    <html>
  <head>
  <style>
    div {
      width:200px;
      height:200px;
      background-color:red;
      position:relative;
      top:0px;
      left:0px;
    }
  </style>
</head>
<body>
  <input type="button" value="按钮" id="btn"/><br/><br/>
  <div></div>
  
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.2.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-color/2.1.2/jquery.color.js"></script>
  <script>
    $(function(){
      //需求:点击按钮,让div做动画，left改变到800，改变背景色
      //动画不会改变背景色。如果非要改，只能用插件
      $('#btn').on('click',function(){
        //让div做动画
        $('div').animate({
          left:800,
          width:100,
          height:100,
          backgroundColor:'green'
        },2000)
      })
    })
  </script>
</body>
</html>