diff --git "a/06 \351\231\210\345\277\227\344\274\237/20231129 \347\254\224\350\256\260.md" "b/06 \351\231\210\345\277\227\344\274\237/20231129 \347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..b9bef29ad8070e0f8843b7a18c69680d8fdf182e --- /dev/null +++ "b/06 \351\231\210\345\277\227\344\274\237/20231129 \347\254\224\350\256\260.md" @@ -0,0 +1,1505 @@ +```html + + + + + + 小兔鲜儿 - 新鲜 惠民 快捷! + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ +

小兔鲜儿

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

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

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

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

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

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

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

生鲜

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

服饰

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

餐厨

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

居家

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

最新专题

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

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

+

CopyRight © 小兔鲜儿

+
+
+
+
+ + + + + +``` + + + +### 正则基本使用 + +1. 定义规则 + + ~~~JavaScript + const reg = /表达式/ + ~~~ + + - 其中` / / `是正则表达式字面量 + - 正则表达式也是`对象 ` + +2. 使用正则 + + - `test()方法` 用来查看正则表达式与指定的字符串是否匹配 + - 如果正则表达式与指定的字符串匹配 ，返回`true`，否则`false` + +~~~html + + + +~~~ + +### 元字符 + +1. **普通字符:** + +- 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。 +- 普通字符只能够匹配字符串中与它们相同的字符。 +- 比如，规定用户只能输入英文26个英文字母，普通字符的话 /[abcdefghijklmnopqrstuvwxyz]/ + +2. **元字符(特殊字符）** + +- 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。 +- 比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/ + +#### 边界符 + +正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符 + +>如果 ^ 和 $ 在一起，表示必须是精确匹配 + +~~~html + + + +~~~ + +#### 量词 + +量词用来设定某个模式重复次数 + +![67608018538](assets/1676080185383.png) + +> 注意： 逗号左右两侧千万不要出现空格 + +~~~html + + +~~~ + +#### 范围 + +表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围 + + ![67608029616](assets/1676080296168.png) + +~~~html + + + +~~~ + +#### 字符类 + +某些常见模式的简写方式，区分字母和数字 + +![67608035363](assets/1676080353637.png) + + ![67608037232](assets/1676080372325.png) + +## 替换和修饰符 + +replace 替换方法，可以完成字符的替换 + + ![67608043716](assets/1676080437160.png) + +~~~html + + + +~~~ + +修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等 + +- i 是单词 ignore 的缩写，正则匹配时字母不区分大小写 +- g 是单词 global 的缩写，匹配所有满足正则表达式的结果 + +~~~html + + + +~~~ + +## change 事件 + +给input注册 change 事件，值被修改并且失去焦点后触发 + +## 判断是否有类 + + ![67608061879](assets/1676080618794.png) + +元素.classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false \ No newline at end of file diff --git "a/06 \351\231\210\345\277\227\344\274\237/20231204 \347\216\213\350\200\205\350\215\243\350\200\200.md" "b/06 \351\231\210\345\277\227\344\274\237/20231204 \347\216\213\350\200\205\350\215\243\350\200\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..21f7edebe24ca331542d35fe121ddba3393da8f6 --- /dev/null +++ "b/06 \351\231\210\345\277\227\344\274\237/20231204 \347\216\213\350\200\205\350\215\243\350\200\200.md" @@ -0,0 +1,335 @@ +## 价格筛选 + +```html + + + + + + + + 商品渲染 + + + + +
+ 0-100元 + 100-300元 + 300元以上 + 全部区间 +
+
+ +
+ + + + +``` + +## 王者荣耀大作业： + +```html + + + + + + + + 英雄 + + + + + +
+
+ + + +
+
+ +
+
+ + + + + + + + + +``` \ No newline at end of file diff --git "a/06 \351\231\210\345\277\227\344\274\237/20231207 \350\201\212\345\244\251\346\234\272\345\231\250\344\272\272.md" "b/06 \351\231\210\345\277\227\344\274\237/20231207 \350\201\212\345\244\251\346\234\272\345\231\250\344\272\272.md" new file mode 100644 index 0000000000000000000000000000000000000000..59844aef46d767246bc526f1742396ec9ff67071 --- /dev/null +++ "b/06 \351\231\210\345\277\227\344\274\237/20231207 \350\201\212\345\244\251\346\234\272\345\231\250\344\272\272.md" @@ -0,0 +1,119 @@ +```javascript +新闻列表数据 URL 网址：http://hmajax.itheima.net/api/news +axios({ + url: 'http://hmajax.itheima.net/api/news' +}).then(result => { + console.log(result) +}) + +> url解释：从黑马服务器使用http协议，访问/api/news路径下的新闻列表资源 +``` + +```javascript +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 + }) + }) +``` + +```javascript +/* + 注册用户：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' + } + }) +}) +``` + +# 作业： + +```javascript + +``` \ No newline at end of file