diff --git "a/43 \351\237\251\346\226\207\346\235\260/ajaxs.md" "b/43 \351\237\251\346\226\207\346\235\260/ajaxs.md" new file mode 100644 index 0000000000000000000000000000000000000000..359c2c534fd339bd618d312c4b7c11cefced7dab --- /dev/null +++ "b/43 \351\237\251\346\226\207\346\235\260/ajaxs.md" @@ -0,0 +1,199 @@ +## 概念 + +#### 1.什么是Ajax + +Ajax (Asynchronous Javascript And XML)即是异步的JavaScript和XML，Aiax其实就是浏览器与服务器之间的一种异步通信方式 + +#### 2.异步的JavaScript + +它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。 + +#### 3.XML + +是前后端数据通信时传输数据的一种格式，现在已经不怎么用了，现在比较常用的是 JSON所以归纳上述的概念，Ajax就是在浏览器不重新加载网页的情况下，对页面的某部分进行更新 + +4.所以Aiax最大的优点就是，发送请求的时候不会影响用户的操作，相当于两条平行线一样，“你忙你的，我忙我的”，不需要去等待页面的跳转而浪费时间 + +## Ajax的执行步骤: + +1.创建一个xhr对象 + +2.使用xhr的readystatechange属性，判断Ajax的状态码 + +3.判断HTTP的状态码 + +4.xhr.open()准备发送请求 + +5.xhr.send()发送请求 + +## 三、跨域 + +概念 什么是跨域？为什么会有跨域这种问题存在？ + +跨域的字面意思来说，就是向一个域发送请求，如果要请求的域和当前域是不同域，就叫跨域 + +https（协议）://a.xxx.com（域名）:8080（端口号）/flie/list（路径） + +只要协议、域名、端口号，只要有任何一个不一样，都是不同域 + +同源策略 同源策略限制了跨域，同源策略是浏览器核心的安全机制，如果没有了同源策略，浏览器的正常功能就会受到影响，所以web是构建在同源策略的基础之上。 + +如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。 + +以下就是不同源： + +前端： [http://a.com:8080/](https://gitee.com/link?target=http%3A%2F%2Fa.com%3A8080%2F) + +服务端：https//b.com/api/xxx + +## 四、实现Ajax + +``` +我们先看一组代码：在这里创建的json文件和html文件都在同一个文件夹中 + +//test.josn的代码 +{ + "reply":"我收到啦！" +} + +const xhr = new XMLHttpRequest(); +xhr.onreadystatechange = () => { + if (xhr.readyState !== 4) return; + if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { + console.log(xhr.responseText); + } +}; +xhr.open('GET', 'text.json', true); +xhr.send(null); +执行结果： +在这里要啰嗦两句：json文件中的对象键名一定要用双引号包裹，如果属性值里面有字符串，也需要用双引号包裹。 +执行步骤 +1.创建xhr对象 +const xhr = new XMLHttpRequest(); +2.利用onreadystatechange属性，封装一个函数，用于监听 readyState的变化。 +xhr.onreadystatechange = () => { +if (xhr.readyState !== 4) return; +if (xhr.status >= 200 && xhr.status < 300 ){ + console.log(xhr.responseText); + } +}; +2.1在xhr对象执行收发数据的时候，它会经历五种状态： + +Ajax状态码 状态 +0 （未初始化）未启动 +1 （启动）已经调用 open()，但尚未调用 send() +2 （发送）发送状态，已经调用 send()，但尚未接收到响应 +3 （接收）已经接收到部分响应数据 +4 （完成）已经接收到全部响应数据，而且已经可以在浏览器中使用了 +加两句console.log()就可以看见状态码的变化了。 +上述的readyStateChange事件是专门用来监听xhr对象的Ajax状态码，只要readyState（也就是Ajax状态码）发生了变化，就会触发这个事件。 +2.2判断HTTP状态码是否为200-299 + +Ajax状态码为4是不够的，这仅仅表明收到服务器端响应的全部数据，并不能保障数据都是正确的。 + +所以，我们还需要判断HTTP的状态码，判断xhr对象的status属性值是否在200到300之间（200-299 用于表示请求成功） + +if (xhr.status >= 200 && xhr.status < 300 ){ + console.log(xhr.responseText); +} +所以要想请求成功完成，必须要满足上面两个条件。 + +3.准备发送请求 +xhr.open('GET','text.json', true); +参数1：选用"GET"或者“POST”的请求方式 + +参数2：发送请求的地址 + +参数3：是否异步 + +4.发送请求 +xhr.send(null) + 注意：send() 的参数是通过请求体携带的数据，而GET请求是通过请求头携带数据的，所以要把send的参数置为null +``` + +#### + +```` +AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 +推荐使用字面量方式声明数组，而不是 `Array` 构造函数 + +2. 实例方法 `forEach` 用于遍历数组，替代 `for` 循环 (重点) + +3. 实例方法 `filter` 过滤数组单元值，生成新数组(重点) + +4. 实例方法 `map` 迭代原数组，生成新数组(重点) + +5. 实例方法 `join` 数组元素拼接为字符串，返回字符串(重点) + +6. 实例方法 `find` 查找元素， 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined(重点) indexOf() + +7. 实例方法`every` 检测数组所有元素是否都符合指定条件，如果**所有元素**都通过检测返回 true，否则返回 false(重点) + +8. 实例方法`some` 检测数组中的元素是否满足指定条件 **如果数组中有**元素满足条件返回 true，否则返回 false + +9. 实例方法 `concat` 合并两个数组，返回生成新数组 + +10. 实例方法 `sort` 对原数组单元值排序 + +11. 实例方法 `splice` 删除或替换原数组单元 + +12. 实例方法 `reverse` 反转数组 + +13. 实例方法 `findIndex` 查找元素的索引值 + + + +### 包装类型 + +在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法，如下代码举例： + +```html + +``` + +之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。 + +#### String + +`String` 是内置的构造函数，用于创建字符串。 + +```html + +``` + +总结： + +1. 实例属性 `length` 用来获取字符串的度长(重点) +2. 实例方法 `split('分隔符')` 用来将字符串拆分成数组(重点) +3. 实例方法 `substring（需要截取的第一个字符的索引[,结束的索引号]）` 用于字符串截取(重点) +4. 实例方法 `startsWith(检测字符串[, 检测位置索引号])` 检测是否以某字符开头(重点) +5. 实例方法 `includes(搜索的字符串[, 检测位置索引号])` 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false(重点) +6. 实例方法 `toUpperCase` 用于将字母转换成大写 +7. 实例方法 `toLowerCase` 用于将就转换成小写 +8. 实例方法 `indexOf` 检测是否包含某字符 +9. 实例方法 `endsWith` 检测是否以某字符结尾 +10. 实例方法 `replace` 用于替换字符串，支持正则匹配 +11. 实例方法 `match` 用于查找字符串，支持正则匹配 + +注：String 也可以当做普通函数使用，这时它的作用是强制转换成字符串数据类型。 +```` \ No newline at end of file diff --git "a/43 \351\237\251\346\226\207\346\235\260/jquery.md" "b/43 \351\237\251\346\226\207\346\235\260/jquery.md" new file mode 100644 index 0000000000000000000000000000000000000000..e332f065246440ca538d4c19899eb92e4480f584 --- /dev/null +++ "b/43 \351\237\251\346\226\207\346\235\260/jquery.md" @@ -0,0 +1,289 @@ +```` +jQuery 是一个JavaScript库 +jQuery极大简化JavaScript编程 +jQuery 库特性 +jQuery 是一个 JavaScript 函数库。 +jQuery 库包含以下特性： +- HTML 元素选取 +- HTML 元素操作 +- CSS 操作 +- HTML 事件函数 +- JavaScript 特效和动画 +- HTML DOM 遍历和修改 +- AJAX +- Utilities +### 添加 jQuery库 +jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。 +可以通过下面的标记把 jQuery 添加到网页中： +~~~html + + + + +请注意， + +``` + +### 使用 Microsoft 的 CDN + +```html + + + +``` + +### 使用百度的CDN + + + +"> + + +## jQuery 语法实例 + +- [$(this).hide()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_this) + + 演示 jQuery hide() 函数，隐藏当前的 HTML 元素。 + +- [$("#test").hide()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_id) + + 演示 jQuery hide() 函数，隐藏 id="test" 的元素。 + +- [$("p").hide()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_p) + + 演示 jQuery hide() 函数，隐藏所有

元素。 + +- [$(".test").hide()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_class) + + 演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。 + +## jQuery 语法 + +jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 + +基础语法是：*$(selector).action()* + +- 美元符号定义 jQuery +- 选择符（selector）“查询”和“查找” HTML 元素 +- jQuery 的 action() 执行对元素的操作 + +### 示例 + +$(this).hide() - 隐藏当前元素 + +$("p").hide() - 隐藏所有段落 + +$(".test").hide() - 隐藏所有 class="test" 的所有元素 + +$("#test").hide() - 隐藏所有 id="test" 的元素 + +**提示：**jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。 + +关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。 + +jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。 + +选择器允许您对 HTML 元素组或单个元素进行操作。 + +在 HTML DOM 术语中： + +选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。 + +## jQuery 元素选择器 + +jQuery 使用 CSS 选择器来选取 HTML 元素。 + +$("p") 选取

元素。 + +$("p.intro") 选取所有 class="intro" 的

元素。 + +$("p#demo") 选取所有 id="demo" 的

元素。 + +## jQuery 事件函数 + +jQuery 事件处理方法是 jQuery 中的核心函数。 + +事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。 + +通常会把 jQuery 代码放到 部分的事件处理方法中： +jQuery 库包含以下特性： +- HTML 元素选取 +- HTML 元素操作 +- CSS 操作 +- HTML 事件函数 +- JavaScript 特效和动画 +- HTML DOM 遍历和修改 +- AJAX +- Utilities +/** + * 目标1：渲染图书列表 + * 1.1 获取数据 + * 1.2 渲染数据 + */ +const creator = '成功呢' +// 封装-获取并渲染图书列表函数 +function getBooksList() { + // 1.1 获取数据 + axios({ + url: 'http://hmajax.itheima.net/api/books', + params: { + // 外号：获取对应数据 + creator + } + }).then(result => { + // console.log(result) + const bookList = result.data.data + // console.log(bookList) + // 1.2 渲染数据 + const htmlStr = bookList.map((item, index) => { + return ` + ${index + 1} + ${item.bookname} + ${item.author} + ${item.publisher} + + 删除 + 编辑 + + ` + }).join('') + // console.log(htmlStr) + document.querySelector('.list').innerHTML = htmlStr + }) +} +// 网页加载运行，获取并渲染列表一次 +getBooksList() + +/** + * 目标2：新增图书 + * 2.1 新增弹框->显示和隐藏 + * 2.2 收集表单数据，并提交到服务器保存 + * 2.3 刷新图书列表 + */ +// 2.1 创建弹框对象 +const addModalDom = document.querySelector('.add-modal') +const addModal = new bootstrap.Modal(addModalDom) +// 保存按钮->点击->隐藏弹框 +document.querySelector('.add-btn').addEventListener('click', () => { + // 2.2 收集表单数据，并提交到服务器保存 + const addForm = document.querySelector('.add-form') + const bookObj = serialize(addForm, { hash: true, empty: true }) + // console.log(bookObj) + // 提交到服务器 + axios({ + url: 'http://hmajax.itheima.net/api/books', + method: 'POST', + data: { + ...bookObj, + creator + } + }).then(result => { + // console.log(result) + // 2.3 添加成功后，重新请求并渲染图书列表 + getBooksList() + // 重置表单 + addForm.reset() + // 隐藏弹框 + addModal.hide() + }) +}) + +/** + * 目标3：删除图书 + * 3.1 删除元素绑定点击事件->获取图书id + * 3.2 调用删除接口 + * 3.3 刷新图书列表 + */ +// 3.1 删除元素->点击（事件委托） +document.querySelector('.list').addEventListener('click', e => { + // 获取触发事件目标元素 + // console.log(e.target) + // 判断点击的是删除元素 + if (e.target.classList.contains('del')) { + // console.log('点击删除元素') + // 获取图书id（自定义属性id） + const theId = e.target.parentNode.dataset.id + // console.log(theId) + // 3.2 调用删除接口 + axios({ + url: `http://hmajax.itheima.net/api/books/${theId}`, + method: 'DELETE' + }).then(() => { + // 3.3 刷新图书列表 + getBooksList() + }) + } +}) + +/** + * 目标4：编辑图书 + * 4.1 编辑弹框->显示和隐藏 + * 4.2 获取当前编辑图书数据->回显到编辑表单中 + * 4.3 提交保存修改，并刷新列表 + */ +// 4.1 编辑弹框->显示和隐藏 +const editDom = document.querySelector('.edit-modal') +const editModal = new bootstrap.Modal(editDom) +// 编辑元素->点击->弹框显示 +document.querySelector('.list').addEventListener('click', e => { + // 判断点击的是否为编辑元素 + if (e.target.classList.contains('edit')) { + // 4.2 获取当前编辑图书数据->回显到编辑表单中 + const theId = e.target.parentNode.dataset.id + axios({ + url: `http://hmajax.itheima.net/api/books/${theId}` + }).then(result => { + const bookObj = result.data.data + // document.querySelector('.edit-form .bookname').value = bookObj.bookname + // document.querySelector('.edit-form .author').value = bookObj.author + // 数据对象“属性”和标签“类名”一致 + // 遍历数据对象，使用属性去获取对应的标签，快速赋值 + const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher'] + keys.forEach(key => { + document.querySelector(`.edit-form .${key}`).value = bookObj[key] + }) + }) + editModal.show() + } +}) +// 修改按钮->点击->隐藏弹框 +document.querySelector('.edit-btn').addEventListener('click', () => { + // 4.3 提交保存修改，并刷新列表 + const editForm = document.querySelector('.edit-form') + const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true}) + // 保存正在编辑的图书id，隐藏起来：无需让用户修改 + // + axios({ + url: `http://hmajax.itheima.net/api/books/${id}`, + method: 'PUT', + data: { + bookname, + author, + publisher, + creator + } + }).then(() => { + // 修改成功以后，重新获取并刷新列表 + getBooksList() + + // 隐藏弹框 + editModal.hide() + }) +}) +```` \ No newline at end of file diff --git "a/43 \351\237\251\346\226\207\346\235\260/jquery\350\275\256\346\222\255\345\233\276.md" "b/43 \351\237\251\346\226\207\346\235\260/jquery\350\275\256\346\222\255\345\233\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..43990207050766ba4d5b0d256b80c2615f62b297 --- /dev/null +++ "b/43 \351\237\251\346\226\207\346\235\260/jquery\350\275\256\346\222\255\345\233\276.md" @@ -0,0 +1,389 @@ +``` +i.jquery操作DOM之内容 + 取值(文本)： + html()：获取值，获取的是元素的内容，包括元素内部的各种标签 innerHTML + text()：获取值，只获取内容值，不包括各种标签 innerText + 赋值： + html("xxx")：先渲染，后显示 innerHTML= xxx + text("xxx")：原封不动显示，不进行渲染 innerText = xxx + + 表单的： + val()：获取属性值 .value + val("xxx")：赋值 .value =xxx + + +ii.jquery工厂$()的作用 + -$("jquery选择器")：jquery选择器： + -$(document)：类型转换，DOM对象转换为jquery对象 + -$(html字符串)：创建节点 + + 插入节点： + -内部插入： + $("A").append($("B"))：将B插入到A尾部 + $("A").prepend($("B"))：将B插入到A头部 + + 外部插入： + $("A").before($("B"))：将B插入到A前面（外部） + $("A").after($("B"))：将B插入到A后面（外部） + + 替换节点 + -$("A").replaceWith($("B"))：用B替换A + + 删除节点 + -remove()：彻底删除，包括节点关联的一切 + -empty()：只删除节点内容 + + 克隆节点 + -clone(true|false) + 其中true代表克隆节点的同时克隆节点所绑定的事件，false代表只克隆节点 + +iii.属性操作 + attr("属性名")：根据属性名获取属性值 + attr("属性名","属性值")：设置单个属性值 + attr({"属性名":"属性值","属性名":"属性值","属性名":"属性值"})：设置多个属性值 + removeAttr("属性名")：删除属性值 + +iiii.jquery获取集合和遍历集合 + 获取子节点集合：$("选择器").children("过滤") + + + 同辈集合： + -next()：下一个 + -prev()：前一个 + -sublings()：左右 + + 前辈集合： + -parent()：父辈 + -parents()：祖先 + +iiiii.集合遍历： + $("选择器").each(function(index,element){ + + }) + 其中参数index表示当前是第几个元素，element代表当前元素，注意element是dom对象，必须进行jquery工厂进行转换 + + + + + + + + 轮播图点击切换 + + + + + +

+
+ +
+
+

对人类来说会不会太超前了？

+ +
+ + +
+
+
+ + + + + + + + + + + + tab栏切换 + + + + + +
+
+

每日特价

+ +
+
+
+
+
+
+
+
+
+ + + + +``` \ No newline at end of file diff --git "a/43 \351\237\251\346\226\207\346\235\260/\345\233\276\344\271\246\347\256\241\347\220\206.md" "b/43 \351\237\251\346\226\207\346\235\260/\345\233\276\344\271\246\347\256\241\347\220\206.md" new file mode 100644 index 0000000000000000000000000000000000000000..8b531c631af07f2b56dbdcae9c61b09f2487558c --- /dev/null +++ "b/43 \351\237\251\346\226\207\346\235\260/\345\233\276\344\271\246\347\256\241\347\220\206.md" @@ -0,0 +1,149 @@ +``` +* 目标1：渲染图书列表 + * 1.1 获取数据 + * 1.2 渲染数据 + */ +const creator = '张泡泡' +// 封装-获取并渲染图书列表函数 +function getBooksList() { + // 1.1 获取数据 + axios({ + url: 'http://hmajax.itheima.net/api/books', + params: { + // 外号：获取对应数据 + creator + } + }).then(result => { + // console.log(result) + const bookList = result.data.data + // console.log(bookList) + // 1.2 渲染数据 + const htmlStr = bookList.map((item, index) => { + return ` + ${index + 1} + ${item.bookname} + ${item.author} + ${item.publisher} + + 删除 + 编辑 + + ` + }).join('') + document.querySelector('.list').innerHTML = htmlStr + }) +} +// 网页加载运行,获取并渲染列表一次 +getBooksList() +/** + * 目标2：新增图书 + * 2.1 新增弹框 显示影藏 + * 2.2 收集表单数据，并提交服务器保存 + * 刷新图书列表 + */ +// 2.1 创建弹框对象 +const addModalDom = document.querySelector('.add-modal') +const addModal = new bootstrap.Modal(addModalDom) +// 保存按钮 点击 隐藏弹框 +document.querySelector('.add-btn').addEventListener('click', () => { + // 2.2 收集表单数据，并提交到服务器保存 + const addForm = document.querySelector('.add-form') + const bookObj = serialize(addForm, { hash: true, empty: true }) + // 提交到服务器 + axios({ + url: 'http://hmajax.itheima.net/api/books', + method: 'POST', + data: { + ...bookObj, + creator + } + }).then(result => { + console.log(result); + // 2.3 添加成功后，重新请求并渲染图书列表 + getBooksList() + // 重置表单 + addForm.reset() + // 隐藏弹框 + addModal.hide() + }) +}) + +/** + * 目标3：删除图书 + * 3.1 删除元素绑定点击事件-> 获取图书id + * 3.2 调用删除接口 + * 3.3 刷新图书列表 + */ +// 3.1 删除元素 ->点击（事件委托） +document.querySelector('.list').addEventListener('click', e => { + // 获取触发事件目标元素 + // 判断点击的是删除元素 + if (e.target.classList.contains('del')) { + // 获取图书id（自定义属性id） + const theId = e.target.parentNode.dataset.id + // 3.2 调用删除接口 + axios({ + url: `http://hmajax.itheima.net/api/books/${theId}`, + method: 'DELETE' + }).then(() => { + // 3.3 刷新图书列表 + getBooksList() + }) + } +}) + +/** + * 目标4：编辑图书 + * 4.1 编辑弹框 ->显示和隐藏 + * 4.2 获取当前编辑图书数据 -> 回显到编辑表单中 + * 4.3 提交保存修改，刷新列表 + */ +// 4.1 编辑弹框 显示 和隐藏 +const editDom = document.querySelector('.edit-modal') +const editModal = new bootstrap.Modal(editDom) +// 编辑元素 点击 弹框显示 +document.querySelector('.list').addEventListener('click', e => { + // 判断点击是否为编辑元素 + if (e.target.classList.contains('edit')) { + // 4.2 获取当前编辑图书数据->回显到编辑表单中 + const theId = e.target.parentNode.dataset.id + axios({ + url: `http://hmajax.itheima.net/api/books/${theId}` + }).then(result => { + const bookObj = result.data.data + // document.querySelector('.edit-form .bookname').value = bookObj.bookname + // document.querySelector('.edit-form .author').value = bookObj.author + // 数据对象“属性”和标签“类名”一致 + // 遍历数据对象，使用属性去获取对应的标签，快速赋值 + const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher'] + keys.forEach(key => { + document.querySelector(`.edit-form .${key}`).value = bookObj[key] + }) + }) + editModal.show() + } +}) +// 修改按钮->点击->隐藏弹框 +document.querySelector('.edit-btn').addEventListener('click', () => { + // 4.3 提交保存修改，并刷新列表 + const editForm = document.querySelector('.edit-form') + // console.log(editForm); + const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true }) + // 保存正在编辑的图书id，隐藏起来：无需让用户修改 + // + axios({ + url: `http://hmajax.itheima.net/api/books/${id}`, + method: 'PUT', + data: { + creator, + ...book + } + }).then((result) => { + console.log(result); + // 修改成功以后，重新获取并刷新列表 + getBooksList() + // 隐藏弹框 + editModal.hide() + }) +}) +``` \ No newline at end of file diff --git "a/43 \351\237\251\346\226\207\346\235\260/\345\244\247\344\275\234\344\270\232.md" "b/43 \351\237\251\346\226\207\346\235\260/\345\244\247\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..844b10636e5d5ea47530e7a4b30a62e190864cf5 --- /dev/null +++ "b/43 \351\237\251\346\226\207\346\235\260/\345\244\247\344\275\234\344\270\232.md" @@ -0,0 +1,1967 @@ +~~~js + + + + + + 小兔鲜儿 - 新鲜 惠民 快捷! + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ +

小兔鲜儿

+ +
+ +
+ +
+ + + 2 + + +
+ +
+
+
+
+ +
+
+ +
+ + + +
+ +
+
+ +
+ + + + + + +
+ + + + + +
+ +
+
+
+ +
+
+ +
+

新鲜好物新鲜出炉 品质靠谱

+ + 查看全部 + +
+ +
+ + + 睿米无线吸尘器F8 + ￥899 + + + + 智能环绕3D空调 + ￥1299 + + + + 广东软软糯米煲仔饭 + ￥129 + + + + 罗西机械智能手表 + ￥3399 + +
+
+
+ +
+
+ +
+

人气推荐人气爆款 不容错过

+
+ +
+ + + 特惠推荐 + 我猜得到 你的需要 + + + + 爆款推荐 + 人气好物推荐 + + + + 场景使用一站买全 + 编辑精心整理推荐 + + + + 领券中心 + 发现更多超值优惠券 + +
+
+
+ +
+
+
+

热门品牌国际经典 品质保证

+
+ + +
+
+ +
+ +
+
+
+ +
+
+ +
+

生鲜

+ + 查看全部 + +
+ 水果 + 蔬菜 + 肉禽蛋 + 裤装 + 衬衫 + 内衣 +
+
+ +
+ +
+ + +
+

服饰

+ + 查看全部 + +
+ 行李箱 + 男士包袋 + 女士包袋 + 钱包及小提袋 + 男鞋 + 女鞋 + 拖鞋 +
+
+ +
+ +
+ + +
+

餐厨

+ + 查看全部 + +
+ 水果 + 蔬菜 + 肉禽蛋 + 裤装 + 衬衫 + 内衣 +
+
+ +
+ +
+ + +
+

居家

+ + 查看全部 + +
+ 咖啡具 + 水具酒具 + 锅具 + 餐具 + 功能厨具 + 茶具 + 清洁保鲜 +
+
+ +
+ +
+
+
+ +
+
+
+

最新专题

+ + 查看全部 + +
+
+ +
+
+
+ +
+
+ +
+
+
客户服务
+
在线客服
+ +
+
+
关注我们
+
公众号
+
微博
+
+
+
下载APP
+
+ +
+
+ 扫描二维码 + 立马下载APP + 下载页面 +
+
+
+
服务热线
+
+ 400-0000-000 + 周一至周日 8:00-18:00 +
+
+
+
+ +
+
+ +
+ 价格亲民 + 物流快捷 + 品质新鲜 +
+ +
+

+ 关于我们 + 帮助中心 + 售后服务 + 配送与验收 + 商务合作 + 搜索推荐 + 友情链接 +

+

CopyRight © 小兔鲜儿

+
+
+
+
+ + + + + + + + + + + + + + 小兔鲜儿 - 新鲜 惠民 快捷! + + + + + + + + + + +
+

+ 进入网站首页 +
+ +
+
+
+
+
+ 账户登录 + 二维码登录 +
+
+
+ 手机验证码登录 +
+
+ + +
+
+ + +
+
+ + 我已同意 《服务条款》 和 《服务条款》 +
+
+ + + 忘记密码？ + 免费注册 +
+
+ +
+
+
+
+ +
+ +
+

+ 关于我们 + 帮助中心 + 售后服务 + 配送与验收 + 商务合作 + 搜索推荐 + 友情链接 +

+

CopyRight © 小兔鲜儿

+
+
+ + + + + + + + + 小兔鲜儿 - 新鲜 惠民 快捷! + + + + + + + + + + +
+
+ + +
+
+ +
+
+ +

小兔鲜儿

+ +
+ +
+ +
+ + + 2 + + +
+ +
+
+
+
+
+
+ +
+

新用户注册

+
+
+ + + +
+
+ + + +
+
+ + + + 发送验证码 +
+
+ + + +
+
+ + + +
+
+ + 已阅读并同意《用户服务协议》 +
+
+ + +
+
+
+
+
+ +
+
+ +
+
+
客户服务
+
在线客服
+ +
+
+
关注我们
+
公众号
+
微博
+
+
+
下载APP
+
+ +
+
+ 扫描二维码 + 立马下载APP + 下载页面 +
+
+
+
服务热线
+
+ 400-0000-000 + 周一至周日 8:00-18:00 +
+
+
+
+ +
+
+ +
+ 价格亲民 + 物流快捷 + 品质新鲜 +
+ +
+

+ 关于我们 + 帮助中心 + 售后服务 + 配送与验收 + 商务合作 + 搜索推荐 + 友情链接 +

+

CopyRight © 小兔鲜儿

+
+
+
+
+ + + + +~~~ + diff --git "a/43 \351\237\251\346\226\207\346\235\260/\345\255\230\345\202\250.md" "b/43 \351\237\251\346\226\207\346\235\260/\345\255\230\345\202\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..6a365fb5e5e7a901bb1c57a9ef5fe1cb6501d123 --- /dev/null +++ "b/43 \351\237\251\346\226\207\346\235\260/\345\255\230\345\202\250.md" @@ -0,0 +1,220 @@ +~~~js +一. Windom 对象 + +1. DOM(Browser Object Model) 是浏览器对象模型 + +window对象是一个全局对象，是JavaScript中的顶级对象 + +像 document、alert()、log()都是window的属性基本BOM的属性都是window的 + +所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法 +2. 定时器 - 延时函数 + +延迟执行的函数：**setTimeout**，只执行一次 + +语法：**setTimeout (回调函数，等待的毫秒数)** + +清除延时函数： +let timer = setTimeout (回调函数，等待的毫秒数) +clerTimeout(timer) +3. JS执行机制 + +单线程，同一时间只能做一件事，所有任务排队执行，会遇到堵塞的可能 + +为了解决这个问题，HTML5 提出 Web Worker 标准，允许JS脚本创建多个线程，于是有了**同步**和**异步** + +**同步**：所有的任务都要按照顺序执行 如：等开水开了再去切菜 + +**异步**：执行任务遇见堵塞时，在堵塞的同时，处理其他的任务 如：在烧开水的同时，去切菜 + +耗时少的为同步任务，耗时多的为异步任务，**先执行完同步任务，在回头去执行异步任务** + +同步任务交个JS处理，异步任务交个浏览器处理 + +主线程不断获取任务并执行任务，这种机制被称为**事件循环（event loop）** +4. location ：数据类型是对象，它拆分并保存了 URL 地址的各个组成部分 + +常用属性和方法： + +**href** 属性获取完整的 URL 地址，对其赋值时用于地址的跳转 + +**search** 属性获取地址中携带的参数，符号 ？后面部分 + +**hash** 属性获取地址中的哈希值，符合 # 后面部分 +location.href = 'http://www.baidu.com' +location.search +location.hash +**reload()** 方法用来刷新当前页面，传入参数true时表示强制刷新 + + +5. navigator 对象：该对象下记录了浏览器自身的相关信息 + +通过 **userAgent** 检测浏览器的版本及平台 +6. history 数据类型对象 + +主要管理历史记录，该对象与浏览器地址栏的操作相对应，如：前进、后退、历史记录等 + +常用属性和方法： +history对象方法 作用 +back() 后退功能 +forward() 前进功能 +go(参数) 前进后退功能，参数如果是1 前进1个页面，如果是-1后退一个页面 +二. 本地存储 +数据存储在用户浏览器中 +设置、读取方便、甚至页面刷新不丢失数据 +本地存储分类 - localStorage + +作用：可以将**数据永久存储在本地**（用户的电脑），除非手动删除 + +特性：可以多窗口（页面）共享（同一浏览器可以共享），**以键值对的形式存储使用** + +本地存储分类 - sessionStorage + +特性：生命周期为关闭浏览器窗口，数据消失 （其他用法跟上面一样） +存储复杂数据类型 + +解决：需要将复杂数据类型转换成 JSON 字符串，在存储到本地 + +字符串拼接新思路：（效果更高，开发常用的写法） + +利用 **map()** 和 **join()** 数组方法实现字符串拼接 + +**map() 方法**：可以遍历数组处理数据，并且返回新的数组 + +**join() 方法**：用于把数组中的所有元素转换成一个字符串 + +作业 + +~~~ + diff --git "a/43 \351\237\251\346\226\207\346\235\260/\345\255\246\347\224\237\346\241\210\344\276\2131.md" "b/43 \351\237\251\346\226\207\346\235\260/\345\255\246\347\224\237\346\241\210\344\276\2131.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/43 \351\237\251\346\226\207\346\235\260/\346\234\272\345\231\250\344\272\272.md" "b/43 \351\237\251\346\226\207\346\235\260/\346\234\272\345\231\250\344\272\272.md" new file mode 100644 index 0000000000000000000000000000000000000000..2a70c9173a7ff61221969efae0fb623a5f2584d9 --- /dev/null +++ "b/43 \351\237\251\346\226\207\346\235\260/\346\234\272\345\231\250\344\272\272.md" @@ -0,0 +1,113 @@ +``` +新闻列表数据 URL 网址：http://hmajax.itheima.net/api/news +axios({ + url: 'http://hmajax.itheima.net/api/news' +}).then(result => { + console.log(result) +}) + +> url解释：从黑马服务器使用http协议，访问/api/news路径下的新闻列表资源 +1. 需求：根据输入的省份名字和城市名字，查询下属地区列表 + * 相关参数 + + > 查询地区: http://hmajax.itheima.net/api/area + > + > 参数名： + > + > pname：省份名字 + > + > cname：城市名字 +2. 正确代码如下： + + ```js + /* + 获取地区列表: http://hmajax.itheima.net/api/area + 查询参数: + pname: 省份或直辖市名字 + cname: 城市名字 + */ + // 目标: 根据省份和城市名字, 查询地区列表 + // 1. 查询按钮-点击事件 + document.querySelector('.sel-btn').addEventListener('click', () => { + // 2. 获取省份和城市名字 + let pname = document.querySelector('.province').value + let cname = document.querySelector('.city').value + + // 3. 基于axios请求地区列表数据 + axios({ + url: 'http://hmajax.itheima.net/api/area', + params: { + pname, + cname + } + }).then(result => { + // console.log(result) + // 4. 把数据转li标签插入到页面上 + let list = result.data.list + console.log(list) + let theLi = list.map(areaName => `
  • ${areaName}
    • `).join('') + console.log(theLi) + document.querySelector('.list-group').innerHTML = theLi + }) + }) +/* + 注册用户：http://hmajax.itheima.net/api/register + 请求方法：POST + 参数名： + username：用户名（中英文和数字组成，最少8位） + password：密码 （最少6位） + + 目标：点击按钮，通过axios提交用户和密码，完成注册 +*/ +document.querySelector('.btn').addEventListener('click', () => { + axios({ + url: 'http://hmajax.itheima.net/api/register', + method: 'POST', + data: { + username: 'itheima007', + password: '7654321' + } + }) +}) +``` + +# 作业： + +``` + +``` \ No newline at end of file diff --git "a/43 \351\237\251\346\226\207\346\235\260/\346\236\204\351\200\240\345\207\275\346\225\260.md" "b/43 \351\237\251\346\226\207\346\235\260/\346\236\204\351\200\240\345\207\275\346\225\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..bb4a1f3ead20a76888ef3653795fb0583139e3f6 --- /dev/null +++ "b/43 \351\237\251\346\226\207\346\235\260/\346\236\204\351\200\240\345\207\275\346\225\260.md" @@ -0,0 +1,465 @@ +构造函数是专门用于创建对象的函数，如果一个函数使用 `new` 关键字调用，那么这个函数就是构造函数。 + +``` + +``` + +总结： + +1. 使用 `new` 关键字调用函数的行为被称为实例化 +2. 实例化构造函数时没有参数时可以省略 `()` +3. 构造函数的返回值即为新创建的对象 +4. 构造函数内部的 `return` 返回的值无效！ + +注：实践中为了从视觉上区分构造函数和普通函数，习惯将构造函数的首字母大写。 + +### 实例成员 + +通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。 + +``` + +``` + +总结： + +1. 构造函数内部 `this` 实际上就是实例对象，为其动态添加的属性和方法即为实例成员 +2. 为构造函数传入参数，动态创建结构相同但值不同的对象 + +注：构造函数创建的实例对象彼此独立互不影响。 + +### 静态成员 + +在 JavaScript 中底层函数本质上也是对象类型，因此允许直接为函数动态添加属性或方法，构造函数的属性和方法被称为静态成员。 + +``` + +``` + +总结： + +1. 静态成员指的是添加到构造函数本身的属性和方法 +2. 一般公共特征的属性或方法静态成员设置为静态成员 +3. 静态成员方法中的 `this` 指向构造函数本身 + +## 内置构造函数 + +> 掌握各引用类型和包装类型对象属性和方法的使用。 + +在 JavaScript 中**最主要**的数据类型有 6 种，分别是字符串、数值、布尔、undefined、null 和 对象，常见的对象类型数据包括数组和普通对象。其中字符串、数值、布尔、undefined、null 也被称为简单类型或基础类型，对象也被称为引用类型。 + +在 JavaScript 内置了一些构造函数，绝大部的数据处理都是基于这些构造函数实现的，JavaScript 基础阶段学习的 `Date` 就是内置的构造函数。 + +``` + +``` + +甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数，用于创建对应类型的数据。 + +### Object + +`Object` 是内置的构造函数，用于创建普通对象。 + +``` + +``` + +。 + +总结： + +1. 推荐使用字面量方式声明对象，而不是 `Object` 构造函数 +2. `Object.assign` 静态方法创建新的对象 +3. `Object.keys` 静态方法获取对象中所有属性 +4. `Object.values` 表态方法获取对象中所有属性值 + +### Array + +`Array` 是内置的构造函数，用于创建数组。 + +``` + +``` + +数组赋值后，无论修改哪个变量另一个对象的数据值也会相当发生改变。 + +总结： + +1. 推荐使用字面量方式声明数组，而不是 `Array` 构造函数 +2. 实例方法 `forEach` 用于遍历数组，替代 `for` 循环 (重点) +3. 实例方法 `filter` 过滤数组单元值，生成新数组(重点) +4. 实例方法 `map` 迭代原数组，生成新数组(重点) +5. 实例方法 `join` 数组元素拼接为字符串，返回字符串(重点) +6. 实例方法 `find` 查找元素， 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined(重点) indexOf() +7. 实例方法`every` 检测数组所有元素是否都符合指定条件，如果**所有元素**都通过检测返回 true，否则返回 false(重点) +8. 实例方法`some` 检测数组中的元素是否满足指定条件 **如果数组中有**元素满足条件返回 true，否则返回 false +9. 实例方法 `concat` 合并两个数组，返回生成新数组 +10. 实例方法 `sort` 对原数组单元值排序 +11. 实例方法 `splice` 删除或替换原数组单元 +12. 实例方法 `reverse` 反转数组 +13. 实例方法 `findIndex` 查找元素的索引值 + +### 包装类型 + +在 JavaScript 中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法，如下代码举例： + +``` + +``` + +之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的，被称为包装类型。 + +#### String + +`String` 是内置的构造函数，用于创建字符串。 + +``` + +``` + +总结： + +1. 实例属性 `length` 用来获取字符串的度长(重点) +2. 实例方法 `split('分隔符')` 用来将字符串拆分成数组(重点) +3. 实例方法 `substring（需要截取的第一个字符的索引[,结束的索引号]）` 用于字符串截取(重点) +4. 实例方法 `startsWith(检测字符串[, 检测位置索引号])` 检测是否以某字符开头(重点) +5. 实例方法 `includes(搜索的字符串[, 检测位置索引号])` 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false(重点) +6. 实例方法 `toUpperCase` 用于将字母转换成大写 +7. 实例方法 `toLowerCase` 用于将就转换成小写 +8. 实例方法 `indexOf` 检测是否包含某字符 +9. 实例方法 `endsWith` 检测是否以某字符结尾 +10. 实例方法 `replace` 用于替换字符串，支持正则匹配 +11. 实例方法 `match` 用于查找字符串，支持正则匹配 + +注：String 也可以当做普通函数使用，这时它的作用是强制转换成字符串数据类型。 + +#### Number + +`Number` 是内置的构造函数，用于创建数值。 + +``` + +``` + +总结： + +1. 推荐使用字面量方式声明数值，而不是 `Number` 构造函数 +2. 实例方法 `toFixed` 用于设置保留小数位的长度 + +### 购物车大作业 + +``` + + + + + + + + + + 购物车 + + + +
    + + + +
    + 🏠 + / + 购物车 +
    + +
    +
    + +
    +
    +
    选中
    +
    图片
    +
    单价
    +
    个数
    +
    小计
    +
    操作
    +
    +
    + +
    + + + + + + + + +
    +
    + +
    + + +
    + + 总价  :  ¥ 0 + + +
    +
    + +
    + + +
    + + + + + + + +``` \ No newline at end of file diff --git "a/43 \351\237\251\346\226\207\346\235\260/\347\216\213\350\200\205\350\215\243\350\200\200.md" "b/43 \351\237\251\346\226\207\346\235\260/\347\216\213\350\200\205\350\215\243\350\200\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..c57e13885a17962f6c8e4f75ab80a555acedf81a --- /dev/null +++ "b/43 \351\237\251\346\226\207\346\235\260/\347\216\213\350\200\205\350\215\243\350\200\200.md" @@ -0,0 +1,330 @@ +~~~js + + + + + + + + 商品渲染 + + + + +
    + 0-100元 + 100-300元 + 300元以上 + 全部区间 +
    +
    + +
    + + + + +王者荣耀大作业： + + + + + + + + 英雄 + + + + + +
    +
    + + + +
    +
    + +
    +
    + + + + + + + + + +~~~ + diff --git "a/43 \351\237\251\346\226\207\346\235\260/\347\254\224\350\256\260.md" "b/43 \351\237\251\346\226\207\346\235\260/\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..84e186a05bf2d88f25607c9c078012a752658e9a --- /dev/null +++ "b/43 \351\237\251\346\226\207\346\235\260/\347\254\224\350\256\260.md" @@ -0,0 +1,1466 @@ +~~~js + + + + + + 小兔鲜儿 - 新鲜 惠民 快捷! + + + + + + + + + + + +
    +
    + + +
    +
    + +
    +
    + +

    小兔鲜儿

    + +
    + +
    + +
    + + + 2 + + +
    + +
    +
    +
    +
    + +
    +
    + +
    + + + +
    + +
    +
    + +
    + + + + + + +
    + + + + + +
    + +
    +
    +
    + +
    +
    + +
    +

    新鲜好物新鲜出炉 品质靠谱

    + + 查看全部 + +
    + +
    + + + 睿米无线吸尘器F8 + ￥899 + + + + 智能环绕3D空调 + ￥1299 + + + + 广东软软糯米煲仔饭 + ￥129 + + + + 罗西机械智能手表 + ￥3399 + +
    +
    +
    + +
    +
    + +
    +

    人气推荐人气爆款 不容错过

    +
    + +
    + + + 特惠推荐 + 我猜得到 你的需要 + + + + 爆款推荐 + 人气好物推荐 + + + + 场景使用一站买全 + 编辑精心整理推荐 + + + + 领券中心 + 发现更多超值优惠券 + +
    +
    +
    + +
    +
    +
    +

    热门品牌国际经典 品质保证

    +
    + + +
    +
    + +
    + +
    +
    +
    + +
    +
    + +
    +

    生鲜

    + + 查看全部 + +
    + 水果 + 蔬菜 + 肉禽蛋 + 裤装 + 衬衫 + 内衣 +
    +
    + +
    + +
    + + +
    +

    服饰

    + + 查看全部 + +
    + 行李箱 + 男士包袋 + 女士包袋 + 钱包及小提袋 + 男鞋 + 女鞋 + 拖鞋 +
    +
    + +
    + +
    + + +
    +

    餐厨

    + + 查看全部 + +
    + 水果 + 蔬菜 + 肉禽蛋 + 裤装 + 衬衫 + 内衣 +
    +
    + +
    + +
    + + +
    +

    居家

    + + 查看全部 + +
    + 咖啡具 + 水具酒具 + 锅具 + 餐具 + 功能厨具 + 茶具 + 清洁保鲜 +
    +
    + +
    + +
    +
    +
    + +
    +
    +
    +

    最新专题

    + + 查看全部 + +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    +
    客户服务
    +
    在线客服
    + +
    +
    +
    关注我们
    +
    公众号
    +
    微博
    +
    +
    +
    下载APP
    +
    + +
    +
    + 扫描二维码 + 立马下载APP + 下载页面 +
    +
    +
    +
    服务热线
    +
    + 400-0000-000 + 周一至周日 8:00-18:00 +
    +
    +
    +
    + +
    +
    + +
    + 价格亲民 + 物流快捷 + 品质新鲜 +
    + +
    +

    + 关于我们 + 帮助中心 + 售后服务 + 配送与验收 + 商务合作 + 搜索推荐 + 友情链接 +

    +

    CopyRight © 小兔鲜儿

    +
    +
    +
    +
    + + + + + +正则基本使用 +定义规则 + +const reg = /表达式/ +其中/ /是正则表达式字面量 +正则表达式也是对象 +使用正则 + +test()方法 用来查看正则表达式与指定的字符串是否匹配 +如果正则表达式与指定的字符串匹配 ，返回true，否则false + + + +元字符 +普通字符: +大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。 +普通字符只能够匹配字符串中与它们相同的字符。 +比如，规定用户只能输入英文26个英文字母，普通字符的话 /[abcdefghijklmnopqrstuvwxyz]/ +元字符(特殊字符） +是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。 +比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/ +边界符 +正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符 + +如果 ^ 和 $ 在一起，表示必须是精确匹配 + + + + +量词 +量词用来设定某个模式重复次数 + +67608018538 + +注意： 逗号左右两侧千万不要出现空格 + + + +范围 +表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围 + +67608029616 + + + + +字符类 +某些常见模式的简写方式，区分字母和数字 + +67608035363 + +67608037232 + +替换和修饰符 +replace 替换方法，可以完成字符的替换 + +67608043716 + + + + +修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等 + +i 是单词 ignore 的缩写，正则匹配时字母不区分大小写 +g 是单词 global 的缩写，匹配所有满足正则表达式的结果 + + + +change 事件 +给input注册 change 事件，值被修改并且失去焦点后触发 + +判断是否有类 +67608061879 + +元素.classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false +~~~ + diff --git "a/43 \351\237\251\346\226\207\346\235\260/\350\264\255\347\211\251\350\275\246.md" "b/43 \351\237\251\346\226\207\346\235\260/\350\264\255\347\211\251\350\275\246.md" new file mode 100644 index 0000000000000000000000000000000000000000..9034865ec1b54f02360f86e8008c7c8268a9ffcb --- /dev/null +++ "b/43 \351\237\251\346\226\207\346\235\260/\350\264\255\347\211\251\350\275\246.md" @@ -0,0 +1,134 @@ +# 购物车 + +~~~js + +~~~ +