From 9b3977ce330135a02054d23145bf2b29cd869418 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=98=E6=96=87=E8=AF=9A?= <3287861587@qq.com>
Date: Thu, 28 Dec 2023 22:55:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...1 \350\277\207\346\273\244\345\231\250.md" | 308 ++++++++++++++++++
 ...20231212 jqyey\351\242\204\344\271\240.md" | 201 ++++++++++++
 2 files changed, 509 insertions(+)
 create mode 100644 "08 \345\256\230\346\226\207\350\257\232/20231201 \350\277\207\346\273\244\345\231\250.md"
 create mode 100644 "08 \345\256\230\346\226\207\350\257\232/20231212 jqyey\351\242\204\344\271\240.md"

diff --git "a/08 \345\256\230\346\226\207\350\257\232/20231201 \350\277\207\346\273\244\345\231\250.md" "b/08 \345\256\230\346\226\207\350\257\232/20231201 \350\277\207\346\273\244\345\231\250.md"
new file mode 100644
index 0000000..801fc33
--- /dev/null
+++ "b/08 \345\256\230\346\226\207\350\257\232/20231201 \350\277\207\346\273\244\345\231\250.md"	
@@ -0,0 +1,308 @@
+
+```js
+// 为页面选择一个class为'herolist-content'的ul元素并赋值给变量ul
+let ul = document.querySelector('.herolist-content .herolist');
+
+// 将heroArr赋值给变量data
+data = heroArr;
+
+// 定义一个名为arr的函数，参数为data
+let arr = data => {
+    // 清空ul的内部内容
+    ul.innerHTML = '';
+    let heroArr = data.length;
+    // 遍历data数组
+    data.forEach(data => {
+        // 创建一个li元素
+        let li = document.createElement('li');
+        // 如果arr的长度大于0
+        if (heroArr > 0) {
+            // 设置li的内部html为一个包含a标签的模板字符串
+            li.innerHTML = `
+      <a href="#" target="_parent">
+        <img src="${data.icon}" width="91" height="91" alt="${data.name}" />
+        ${data.name}
+      </a>
+    `;
+        }
+        // 将li添加到ul中
+        ul.appendChild(li);
+    });
+};
+
+// 调用arr函数，并传入data参数
+arr(data);
+
+// 初始化变量free和recommend为false，local为0，choose为类名为"clearfix"的元素
+let free = false,recommend = false;
+let local = 0;
+let choose = document.querySelector(".clearfix");
+
+// 定义一个结果数组result
+let result = [];
+
+choose.onclick = e => {
+    let target = e.target;
+    // console.log(target);
+
+    // let filter = data.filter(data => {
+    //     console.log(free)
+        //为什么上一步是true，这里是false
+
+        // if (local === 0) {
+        //     if (free && recommend) {
+        //         alert(1)
+        //         return data.pay_type === 11 && data.pay_type === 10 && data.hero_type == 1 | 2 | 3 | 4 | 5 | 6;
+        //     } else if (recommend) {
+        //         alert(2)
+        //         console.log(recommend)
+        //         return data.pay_type === 11 && data.hero_type == 1 | 2 | 3 | 4 | 5 | 6;
+        //     } else if (free==true) {
+        //         console.log(free,666)
+        //         return data.pay_type === 10 && data.hero_type == 1 | 2 | 3 | 4 | 5 | 6;
+        //         console.log(6666661111)
+        //     } else {
+        //         if (local === 0) {
+        //             // alert(4)
+        //             return true;
+        //         } else {
+        //             return data.hero_type == local;
+        //         }
+        //     }
+        // } else {
+        //     if (free && recommend) {
+        //         return data.pay_type === 11 && data.pay_type === 10 && data.hero_type == local;
+        //     } else if (recommend) {
+        //         console.log(recommend)
+        //         return data.pay_type === 11 && data.hero_type == local;
+        //     } else if (free) {
+        //         return data.pay_type === 10 && data.hero_type == local;
+        //     } else {
+        //         if (local === 0) {
+        //             return true;
+        //         } else {
+        //             return data.hero_type == local;
+        //         }
+        //     }
+        // }
+    // });
+
+    if (target.tagName === 'I') {
+        //如果目标元素的标签名称是'I'
+        dad = target.parentNode.parentNode;
+        // <!-- 将目标元素的父节点的父节点赋值给dad -->
+        let type = parseInt(dad.dataset.type);
+        // <!-- 将dad的数据属性ptype赋值给ptype -->
+        let ptype = dad.dataset.ptype;
+        // <!-- 获取choose元素中class为'types-ms'的元素赋值给all -->
+        let all = choose.querySelector('.types-ms');
+        // <!-- 如果ptype等于'10' -->
+        if (ptype === '10') {
+            // <!-- 切换dad元素的class列表中的'current'类 -->
+            dad.classList.toggle('current');
+            {
+                // <!-- 如果dad元素的class列表中包含'current'类 -->
+                if (dad.classList.contains('current')) {
+                    // <!-- 将free设置为true -->
+                    free = true;
+                } else {
+                    // <!-- 将free设置为false -->
+                    free = false;
+                }
+                // <!-- 调用select函数 -->
+                select();
+            }
+        }
+        if (ptype === '11') {
+            // 如果 ptype 的值为 '11'
+            dad.classList.toggle('current');
+            // 则给 dad 元素的 classList 属性添加或删除 'current' 类
+            {
+                // 创建一个代码块
+                if (dad.classList.contains('current')) {
+                    // 如果 dad 元素的 classList 属性中包含 'current' 类
+                    recommend = true;
+                    // 则将 recommend 变量的值设为 True
+                } else {
+                    // 否则，如果 dad 元素的 classList 属性中不包含 'current' 类
+                    recommend = false;
+                    // 将 recommend 变量的值设为 False
+                }
+                select();
+                // 执行 select() 函数
+            }
+        }
+        select();
+        // 执行 select() 函数
+```
+
+
+```js
+        function select() {
+            // 选择函数
+            if (!(ptype === '10' || ptype === '11')) {
+                // 如果 ptype 不等于 '10' 或者不等于 '11'
+                document.querySelector("body > div.herolist-box > div.clearfix.herolist-types > ul:nth-child(3) .current").classList.remove('current');
+                // 移除当前元素的 'current' 类
+                dad.classList.add('current');
+                // 添加dad元素的 'current' 类
+                local = type;
+                // 将local赋值为type
+            }
+            console.log('loclal', local)
+
+            result = data.filter(data => {
+                if (local === 0) {
+                    // 如果local等于0
+                    if (free && recommend) {
+                        // 如果free为true且recommend为true
+                        // 返回满足以下条件的数据
+                        return data.pay_type === 11 && data.pay_type === 10 && data.hero_type >= 0;
+                    } else if (recommend) {
+                        // 如果recommend为true
+                        // 返回满足以下条件的数据
+                        return data.pay_type === 11 && data.hero_type >= 0;
+                    } else if (free) {
+                        // 如果free为true
+                        // 返回满足以下条件的数据
+                        return data.pay_type === 10 && data.hero_type >= 0;
+                    } else {
+                        // 否则
+                        // 返回满足以下条件的数据
+                        return data.hero_type >= 0;
+                    }
+
+                } else {
+                    // 否则
+                    if (free && recommend) {
+                        // 如果free为true且recommend为true
+                        // 返回满足以下条件的数据
+                        return data.pay_type === 11 && data.pay_type === 10 && data.hero_type == local;
+                    } else if (recommend) {
+                        // 如果recommend为true
+                        // 返回满足以下条件的数据
+                        return data.pay_type === 11 && data.hero_type == local;
+                    } else if (free) {
+                        // 如果free为true
+                        // 返回满足以下条件的数据
+                        return data.pay_type === 10 && data.hero_type == local;
+                    } else {
+                        // 否则
+                        // 返回满足以下条件的数据
+                        return data.hero_type == local;
+                    }
+                }
+            })
+        }
+```
+
+
+```js
+        // if (type === '0') {
+        //     document.querySelector("body > div.herolist-box > div.clearfix.herolist-types > ul:nth-child(3) .current").classList.remove('current');
+        //     //添加style样式
+        //     dad.classList.add('current');
+        //     local = type;
+        //     result = data.filter(data => {
+        //         if (free && recommend) {
+        //             return data.pay_type === 11 && data.pay_type === 10;
+        //         } else if (recommend) {
+        //             console.log(recommend)
+        //             return data.pay_type === 11;
+        //         } else if (free) {
+        //             return data.pay_type === 10;
+        //         } else {
+        //             return true;
+        //         }
+        //     })
+        // } else if (type === '1') {
+        //     local = type;
+        //
+        //     document.querySelector("body > div.herolist-box > div.clearfix.herolist-types > ul:nth-child(3) .current").classList.remove('current');
+        //     //添加style样式
+        //     dad.classList.add('current');
+        //     result = data.filter(data => {
+        //         if (free) {
+        //             return data.pay_type === 10;
+        //         } else if (recommend) {
+        //             return data.pay_type === 11;
+        //         } else {
+        //             return data.hero_type === 1;
+        //         }
+        //     });
+        // } else if (type === '2') {
+        //     local = type;
+        //
+        //     document.querySelector("body > div.herolist-box > div.clearfix.herolist-types > ul:nth-child(3) .current").classList.remove('current');
+        //     dad.classList.add('current');
+        //     result = data.filter(data => {
+        //         if (free) {
+        //             return data.pay_type === 10 && data.hero_type == type;
+        //         } else if (recommend) {
+        //             return data.pay_type === 11 && data.hero_type == type;
+        //         } else {
+        //             return data.hero_type === 2;
+        //         }
+        //     });
+        // } else if (type === '3') {
+        //     local = type;
+        //
+        //     document.querySelector("body > div.herolist-box > div.clearfix.herolist-types > ul:nth-child(3) .current").classList.remove('current');
+        //     dad.classList.add('current');
+        //     result = data.filter(data => {
+        //         if (free) {
+        //             return data.pay_type === 10 && data.hero_type == type;
+        //         } else if (recommend) {
+        //             return data.pay_type === 11 && data.hero_type == type;
+        //         } else {
+        //             return data.hero_type === 3;
+        //         }
+        //     });
+        // } else if (type === '4') {
+        //     local = type;
+        //
+        //     document.querySelector("body > div.herolist-box > div.clearfix.herolist-types > ul:nth-child(3) .current").classList.remove('current');
+        //     dad.classList.add('current');
+        //     result = data.filter(data => {
+        //         if (free) {
+        //             return data.pay_type === 10 && data.hero_type == type;
+        //         } else if (recommend) {
+        //             return data.pay_type === 11 && data.hero_type == type;
+        //         } else {
+        //             return data.hero_type === 4;
+        //         }
+        //     });
+        // } else if (type === '5') {
+        //     local = type;
+        //
+        //     document.querySelector("body > div.herolist-box > div.clearfix.herolist-types > ul:nth-child(3) .current").classList.remove('current');
+        //     dad.classList.add('current');
+        //     result = data.filter(data => {
+        //         if (free) {
+        //             return data.pay_type === 10 && data.hero_type == type;
+        //         } else if (recommend) {
+        //             return data.pay_type === 11 && data.hero_type == type;
+        //         } else {
+        //             return data.hero_type === 5;
+        //         }
+        //     });
+        // } else if (type === '6') {
+        //     local = type;
+        //
+        //     document.querySelector("body > div.herolist-box > div.clearfix.herolist-types > ul:nth-child(3) .current").classList.remove('current');
+        //     dad.classList.add('current');
+        //     result = data.filter(data => {
+        //         if (free) {
+        //             return data.pay_type === 10 && data.hero_type == type;
+        //         } else if (recommend) {
+        //             return data.pay_type === 11 && data.hero_type == type;
+        //         } else {
+        //             return data.hero_type === 6;
+        //         }
+        //     });
+        // }
+        //将result作为参数传递给arr函数。
+        arr(result);
+    }
+}
+```
\ No newline at end of file
diff --git "a/08 \345\256\230\346\226\207\350\257\232/20231212 jqyey\351\242\204\344\271\240.md" "b/08 \345\256\230\346\226\207\350\257\232/20231212 jqyey\351\242\204\344\271\240.md"
new file mode 100644
index 0000000..ecedb64
--- /dev/null
+++ "b/08 \345\256\230\346\226\207\350\257\232/20231212 jqyey\351\242\204\344\271\240.md"	
@@ -0,0 +1,201 @@
+jQuery
+jQuery 是一个JavaScript库
+
+jQuery极大简化JavaScript编程
+
+jQuery 库特性
+jQuery 是一个 JavaScript 函数库。
+
+jQuery 库包含以下特性：
+
+HTML 元素选取
+HTML 元素操作
+CSS 操作
+HTML 事件函数
+JavaScript 特效和动画
+HTML DOM 遍历和修改
+AJAX
+Utilities
+添加 jQuery库
+jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
+
+可以通过下面的标记把 jQuery 添加到网页中：
+
+<head>
+<script type="text/javascript" src="jquery.js"></script>
+</head>
+请注意，<script> 标签应该位于页面的
+
+部分。
+库的替代
+Google 和 Microsoft 对 jQuery 的支持都很好。
+
+如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
+
+使用 Google 的 CDN
+<head>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
+/jquery/1.4.0/jquery.min.js"></script>
+</head>
+使用 Microsoft 的 CDN
+<head>
+<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
+/jquery-1.4.min.js"></script>
+</head>
+使用百度的CDN
+<script type="text/javascript" src=" <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> "></script>
+jQuery 语法实例
+$(this).hide()
+
+演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
+
+$("#test").hide()
+
+演示 jQuery hide() 函数，隐藏 id="test" 的元素。
+
+$("p").hide()
+
+演示 jQuery hide() 函数，隐藏所有
+
+元素。
+
+$(".test").hide()
+
+演示 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 代码放到
+
+部分的事件处理方法中：
+实例
+<html>
+<head>
+<script type="text/javascript" src="jquery.js"></script>
+<script type="text/javascript">
+    $(document).ready(function(){
+      $("button").click(function(){
+        $("p").hide();
+      });
+    });
+</script>
+</head>
+
+<body>
+    <h2>This is a heading</h2>
+    <p>This is a paragraph.</p>
+    <p>This is another paragraph.</p>
+    <button>Click me</button>
+</body>
+
+</html>
+单独文件中的函数
+如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
+
+当我们在教程中演示 jQuery 时，会将函数直接添加到
+
+部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：
+实例
+<head>
+<script type="text/javascript" src="jquery.js"></script>
+<script type="text/javascript" src="my_jquery_functions.js"></script>
+</head>
+jQuery 名称冲突
+jQuery 使用 $ 符号作为 jQuery 的简介方式。
+
+某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
+
+jQuery 使用名为 noConflict() 的方法来解决该问题。
+
+var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
+
+axios 封装
+<script>
+    // 分装一个 axios 函数，接收一个对象
+    function myaxios(config) {
+        // 1. 返回 promise 对象
+        return new Promise((resolve, reject) => {
+            // 2. 创建 XHR 对象
+            const xhr = new XMLHttpRequest()
+            // 3 调用 open 方法，规定请求格式，URL地址
+            xhr.open(config.method || 'get', config.url)
+            // 4. 添加 loadend 事件
+            xhr.addEventListener('loadend', () => {
+                // console.log(xhr);
+                // 5. 判断 XHR 是否请求成功(通过状态码)
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    // 告诉外面请求成功了，使用 resolve 传入响应的结果
+                    resolve(JSON.parse(xhr.response))
+                } else {
+                    // 告诉外面请求失败了，使用 erject 传入失败信息
+                    reject(new Error(xhr.response))
+                }
+            })
+            // 6. 设置请求头，告诉服务器内容类型（JSON字符串）
+            xhr.setRequestHeader('Content-Type', 'application/json')
+            // 7. 提交请求
+            xhr.send(JSON.stringify(config.data))
+        })
+    }
+
+    // 8. 调用自己分装的 axios 函数
+    myaxios({
+        url: 'https://hmajax.itheima.net/api/register',
+        method: 'post',
+        data: {
+            username: '觉得时间da都浪',
+            password: '123456'
+        }
+    }).then(result => {
+        console.log(result);
+    }).catch(error => {
+        console.log(error);
+    })
+</script>
\ No newline at end of file
-- 
Gitee