总结本人学习b站黑马前端课程，各部分案例汇总

置顶 已于 2023-08-16 16:33:14 修改
阅读量2.2k 收藏 23
点赞数 2
分类专栏： 前端工具网站/软件/插件 文章标签： 前端 学习 javascript ajax node.js
于 2022-12-10 16:28:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72322475/article/details/128266350
版权

目录

1.Ajax：

对应课程：

b站黑马JavaScript的Ajax案例代码——新闻列表案例

b站黑马JavaScript的Ajax案例代码——评论列表案例

b站黑马JavaScript的Ajax案例代码——聊天机器人案例

b站黑马JavaScript的Ajax案例代码——图书管理案例

2.ES6面向对象：

对应课程：

b站pink老师JavaScript的ES6面向对象课程中：正则表达式案例代码——敏感词过滤

b站pink老师JavaScript的ES6面向对象课程中：正则表达式案例代码——表单验证

b站pink老师JavaScript的ES6面向对象课程中：正则表达式案例代码——用户名表单验证

【用bind(）完善】b站pink老师JavaScript的ES6面向对象案例代码——面向对象版Tab栏切换

b站pink老师JavaScript的ES6面向对象案例代码——查询商品案例

b站pink老师JavaScript的ES6面向对象案例代码——面向对象版Tab栏切换

3.PC端特效,BOM，DOM，移动端网页特效：

对应课程：

b站pink老师JavaScript的移动端网页特效 案例代码——记住用户名

b站pink老师JavaScript的移动端网页特效 案例代码——移动端轮播图+返回顶部模块

b站pink老师JavaScript的移动端网页特效 案例代码——移动端拖动元素

PC端网页特效：

b站pink老师JavaScript的PC端网页特效 案例代码——筋斗云案例

b站pink老师JavaScript的PC端网页特效 案例代码——仿淘宝返回顶部(带有动画的返回顶部)

【重点案例】b站pink老师JavaScript的PC端网页特效 案例代码——网页轮播图

b站pink老师JavaScript的PC端网页特效 案例代码——引用animate.js案例

b站pink老师JavaScript的PC端网页特效 案例代码——仿淘宝固定侧边栏

b站pink老师JavaScript的PC端网页特效 案例代码——仿京东放大镜效果

b站pink老师JavaScript的PC端网页特效 案例代码——拖动模态框

b站pink老师JavaScript的PC端网页特效 案例代码——获取鼠标在盒子内的坐标

BOM：

b站pink老师JavaScript的BOM案例代码——获取URL参数

b站pink老师JavaScript的BOM案例代码——5秒钟之后跳转页面

b站pink老师JavaScript的BOM案例代码——发送短信案例

b站pink老师JavaScript的BOM案例代码——倒计时

b站pink老师JavaScript的BOM案例代码——5秒之后自动关闭的广告

DOM：

b站pink老师JavaScript的DOM案例代码——模拟京东快递单号查询

b站pink老师JavaScript的DOM案例代码——模拟京东按钮输入内容

(重要）b站pink老师JavaScript的DOM案例代码——跟随鼠标的天使

（重要）b站pink老师JavaScript的DOM+节点案例代码——动态生成/删除表格

b站pink老师JavaScript的DOM+节点案例代码——简单发布留言+删除留言

b站pink老师JavaScript的DOM+节点案例代码——新浪下拉菜单

（重要）b站pink老师JavaScript的DOM案例代码——tab栏切换

b站pink老师JavaScript的DOM案例代码——全选，反选多选框

4.jQuery

对应课程：

b站pink老师JavaScript的jQuery 案例代码——微博发布案例

b站pink老师JavaScript的jQuery 案例代码——电梯导航案例

b站pink老师JavaScript的jQuery 案例代码——带有动画返回顶部

b站pink老师JavaScript的jQuery 案例代码——购物车案例

b站pink老师JavaScript的jQuery 案例代码——王者荣耀手风琴案例

b站pink老师JavaScript的jQuery 案例代码——突出显示案例

b站pink老师JavaScript的jQuery 案例代码——tab栏切换案例

b站pink老师JavaScript的jQuery 案例代码——淘宝服饰精品案例

b站pink老师JavaScript的jQuery 案例代码——新浪下拉菜单

５.Vue2快速入门：

对应课程：

b站黑马的Vue快速入门案例代码——计数器

b站黑马的Vue快速入门案例代码——图片切换（类似手动播放的轮播图）

b站黑马的Vue快速入门案例代码——小黑记事本

b站黑马的Vue快速入门案例代码——【axios+Vue2】天知道（天气信息查询功能）

b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)

6.黑马Vue2后台管理项目：

对应课程：

b站黑马Vue后台管理项目笔记——（1）登录功能

b站黑马Vue后台管理项目笔记——（2）主页布局（整体，Header，左侧菜单布局）

b站黑马Vue后台管理项目笔记——（3）用户列表

1.Ajax：

对应课程：

b站黑马JavaScript的Ajax案例代码——新闻列表案例

http://t.csdn.cn/UgQpo

b站黑马JavaScript的Ajax案例代码——评论列表案例

http://t.csdn.cn/OK9cC

b站黑马JavaScript的Ajax案例代码——聊天机器人案例

http://t.csdn.cn/KcfXS

b站黑马JavaScript的Ajax案例代码——图书管理案例

http://t.csdn.cn/of16y

2.ES6面向对象：

对应课程：

b站pink老师JavaScript的ES6面向对象课程中：正则表达式案例代码——敏感词过滤

http://t.csdn.cn/USItm

b站pink老师JavaScript的ES6面向对象课程中：正则表达式案例代码——表单验证

http://t.csdn.cn/hwLpZ

b站pink老师JavaScript的ES6面向对象课程中：正则表达式案例代码——用户名表单验证

http://t.csdn.cn/UHyxo

【用bind(）完善】b站pink老师JavaScript的ES6面向对象案例代码——面向对象版Tab栏切换

http://t.csdn.cn/fWmAf

b站pink老师JavaScript的ES6面向对象案例代码——查询商品案例

http://t.csdn.cn/0W6QT

b站pink老师JavaScript的ES6面向对象案例代码——面向对象版Tab栏切换

http://t.csdn.cn/a89dZ

3.PC端特效,BOM，DOM，移动端网页特效：

对应课程：

b站pink老师JavaScript的移动端网页特效 案例代码——记住用户名

http://t.csdn.cn/zhyqc

b站pink老师JavaScript的移动端网页特效 案例代码——移动端轮播图+返回顶部模块

http://t.csdn.cn/AlyUY

b站pink老师JavaScript的移动端网页特效 案例代码——移动端拖动元素

http://t.csdn.cn/uVYLe

PC端网页特效：

b站pink老师JavaScript的PC端网页特效 案例代码——筋斗云案例

http://t.csdn.cn/Cnaxn

b站pink老师JavaScript的PC端网页特效 案例代码——仿淘宝返回顶部(带有动画的返回顶部)

http://t.csdn.cn/u2tEe

【重点案例】b站pink老师JavaScript的PC端网页特效 案例代码——网页轮播图

http://t.csdn.cn/YGuUZ

b站pink老师JavaScript的PC端网页特效 案例代码——引用animate.js案例

http://t.csdn.cn/Mgkjn

b站pink老师JavaScript的PC端网页特效 案例代码——仿淘宝固定侧边栏

http://t.csdn.cn/NSaDG

b站pink老师JavaScript的PC端网页特效 案例代码——仿京东放大镜效果

http://t.csdn.cn/mdyx2

b站pink老师JavaScript的PC端网页特效 案例代码——拖动模态框

http://t.csdn.cn/Uq3ih

b站pink老师JavaScript的PC端网页特效 案例代码——获取鼠标在盒子内的坐标

http://t.csdn.cn/ZmOdT

BOM：

b站pink老师JavaScript的BOM案例代码——获取URL参数

http://t.csdn.cn/44gbk

b站pink老师JavaScript的BOM案例代码——5秒钟之后跳转页面

http://t.csdn.cn/KDmDU

b站pink老师JavaScript的BOM案例代码——发送短信案例

http://t.csdn.cn/nuOGR

b站pink老师JavaScript的BOM案例代码——倒计时

http://t.csdn.cn/NWQyt

b站pink老师JavaScript的BOM案例代码——5秒之后自动关闭的广告

http://t.csdn.cn/NskpX

DOM：

b站pink老师JavaScript的DOM案例代码——模拟京东快递单号查询

http://t.csdn.cn/qgZQT

b站pink老师JavaScript的DOM案例代码——模拟京东按钮输入内容

http://t.csdn.cn/I5guG

(重要）b站pink老师JavaScript的DOM案例代码——跟随鼠标的天使

http://t.csdn.cn/1lptp

（重要）b站pink老师JavaScript的DOM+节点案例代码——动态生成/删除表格

http://t.csdn.cn/cFt4l

b站pink老师JavaScript的DOM+节点案例代码——简单发布留言+删除留言

http://t.csdn.cn/mCTsQ

b站pink老师JavaScript的DOM+节点案例代码——新浪下拉菜单

http://t.csdn.cn/f8w2j

（重要）b站pink老师JavaScript的DOM案例代码——tab栏切换

http://t.csdn.cn/bKShJ

b站pink老师JavaScript的DOM案例代码——全选，反选多选框

http://t.csdn.cn/tKPka

4.jQuery

对应课程：

b站pink老师JavaScript的jQuery 案例代码——微博发布案例

http://t.csdn.cn/lxH1W

b站pink老师JavaScript的jQuery 案例代码——电梯导航案例

http://t.csdn.cn/MZtZm

b站pink老师JavaScript的jQuery 案例代码——带有动画返回顶部

http://t.csdn.cn/gPei9

b站pink老师JavaScript的jQuery 案例代码——购物车案例

http://t.csdn.cn/oybOH

b站pink老师JavaScript的jQuery 案例代码——王者荣耀手风琴案例

http://t.csdn.cn/js8pv

b站pink老师JavaScript的jQuery 案例代码——突出显示案例

http://t.csdn.cn/mRA8g

b站pink老师JavaScript的jQuery 案例代码——tab栏切换案例

http://t.csdn.cn/3CU13

b站pink老师JavaScript的jQuery 案例代码——淘宝服饰精品案例

http://t.csdn.cn/ufMrb

b站pink老师JavaScript的jQuery 案例代码——新浪下拉菜单

http://t.csdn.cn/bfoLB

５.Vue2快速入门：

对应课程：

b站黑马的Vue快速入门案例代码——计数器

http://t.csdn.cn/2Kcqj

b站黑马的Vue快速入门案例代码——图片切换（类似手动播放的轮播图）

http://t.csdn.cn/8Nwt0

b站黑马的Vue快速入门案例代码——小黑记事本

http://t.csdn.cn/CyTsh

b站黑马的Vue快速入门案例代码——【axios+Vue2】天知道（天气信息查询功能）

http://t.csdn.cn/YFBYj

b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)

http://t.csdn.cn/EumFZ

6.黑马Vue2后台管理项目：

对应课程：

b站黑马Vue后台管理项目笔记——（1）登录功能

http://t.csdn.cn/eKiVm

b站黑马Vue后台管理项目笔记——（2）主页布局（整体，Header，左侧菜单布局）

http://t.csdn.cn/sIoWY

b站黑马Vue后台管理项目笔记——（3）用户列表

http://t.csdn.cn/FQOPV

快意人生大社畜
关注
  • 2
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
2022年前端自学全套路线总结（黑马版）
qq_39950127的博客
07-04 4664
前端完整自学路线（黑马整理版）
【Vue】Vue学习笔记汇总
DingDong的博客
02-26 125
Vue学习笔记
2024年前端小白进阶大神必看编程资源免费分享（视频+源码+笔记）
最新发布
2401_84103714的博客
04-28 613
小编在这里分享些我自己平时的学习资料，由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】程序员代码面试指南 IT名企算法与数据结构题目最优解这是” 本程序员面试宝典!书中对IT名企代码面试各类题目的最优解进行了总结，并提供了相关代码实现。
黑马B站前端视频笔记
2301_78482533的博客
11-27 93
b站黑马视频的笔记
Vue黑马笔记(最新）
weixin_46191445的博客
03-19 805
vue是一个用于构建用户界面的渐进式框架。
vue学习笔记（黑马程序员）--目录
qq_43327134的博客
08-21 864
目录 ES6模块化 Promise async/await EventLoop 宏任务和微任务 API接口案例 ES6模块化与异步编程高级用法--开始 部分规范： 每个Js文件都是一个独立的模块 导入其他模块成员使用import关键字 向外共享模块成员使用export关键字 要求： 1.node.js版本高于v14.15.1 C:\Users\My>node -v v12.16.3 这里版本低于v14.15.1,使用gnvm工具切换node版本 ①gnvm v..
前端学习笔记(B站黑马程序员)
11-17
跟着黑马程序员教程做的笔记
web前端案例源代码，效果图，案例课程答辩，新手学习，黑马程序课程 html+css+javescript
06-01
适合刚接触web前端的小白，教材适应html+css+javescript的新手学习，附带课程内的案例源码及课程的结课设计，包括期末大作业（非遗网站介绍，爱奇艺视频网站介绍的设计及源码
spring,springMVC,mybatis学习资料(B站黑马总结)
07-13
需要的伙伴可以免费下载，可以学习，也可以复习
前端学习笔记-黑马程序员
01-09
前端学习笔记-黑马程序员 本篇文章主要介绍了 HTML 基础知识，涵盖了标签的基本概念、HTML 基本结构、文档类型声明、字符集、标签语义、标题标签、段落和换行标签、文本格式化标签、图像标签、路径、超链接标签、...
黑马基础学习html+css课程笔记和案例
06-29
包含html和css最基础的学习内容 前端最基础的内容
js黑马品优购项目案例
06-16
通过对js的学习和html搭建品优购项目，有素材
html教程课堂笔记（黑马程序员）
03-22
视频资料以及笔记代码（其实只有笔记资源）
看传智播客刘龙宾老师的Vue.js学习笔记
dorabimon的博客
07-27 3024
文章目录1、指令语法2、在vue中使用样式2.1、使用class样式2.2、使用内联样式3、v-for循环3.1 v-for循环数组3.2 v-for循环对象数组3.3 v-for循环对象中的属性4、v-if和v-show的使用4、过滤器4.2全局过滤器4.2私有过滤器5、自定义指令5.1 全局自定义指令5.2 binding.value参数5.3 私有自定义指令6、按键修饰符7、vue生命周期函数8、使用vue-resource请求数据8.1 get请求8.2 post请求8.3 jsonp请求9、使用a
Vue黑马版（总结中）
liangweihao的博客
03-08 462
什么是vue？
vue的优点？
a2724265459的博客
07-19 1893
首先呢 VUE是当年 美国留学生 尤雨溪 开发的 1、轻量级框架 只关注视图层,是一个构建数据的视图集合,大小只有几十kb Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统 2、简单易学 国人开发,中文文档,不存在语言障碍,易于理解和学习 3、双向数据绑定 也就是所谓的响应式数据绑定。这里的响应式不是@media 媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出同步的响应。 也就是说，vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所
黑马程序员_JavaScript案例（一）
晓染霜林的专栏
03-16 1310
------- android培训、java培训、期待与您交流！ ----------       这一段时间学习了JavaScript，使用JavaScript做了几个案例。 1、JS控制网页字体大小 2、JS控制某个部分显示或者隐藏 3、菜单切换效果 4、广告漂浮效果 1、JS控制字体大小，在网页上有一句话，还有两个按钮，一个按钮是变大，一个按钮是变小，当我点击变大按钮时，
《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》学习笔记总目录
放下华子我只抽RuiKe5的博客
09-23 1012
本文是对《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》所有知识点的笔记进行总结分类。 学习时总结的目录笔记以及思维导图和实训，将在后续更新。
b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)
weixin_72322475的博客
12-18 4190
b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)。该案例需要更换视频中老师的 搜索音乐接口的请求地址 和 获取MV接口的参数，为本文中的地址和参数。！！！本文内含有有声音的效果展示视频，播放的时候注意音量！！！本文案例修改了原代码的BUG：如果退出MV遮罩层之前，不暂停MV的播放。则退出MV之后，依然会有MV中的声音继续播放。
b站黑马JavaScript的Ajax案例代码——图书管理案例搜索事件
04-23
好的，以下为B站黑马JavaScript的Ajax案例代码——图书管理案例搜索事件： ```javascript /** * 搜索事件 */ function searchBook() { // 获取搜索框内容 var searchInput = document.querySelector("#searchInput"); var keywords = searchInput.value.trim(); // 如果搜索框内容为空，提示用户 if (keywords == "") { alert("请输入关键字进行搜索！"); return; } // 发送Ajax请求 var xhr = new XMLHttpRequest(); // 创建XmlHttpRequest对象 xhr.open("GET", "/api/book/search?keywords=" + keywords, true); // 配置请求 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // 处理响应数据 var books = JSON.parse(xhr.responseText); // 将响应数据转成JavaScript对象 renderBooks(books); // 渲染图书列表 } }; xhr.send(null); // 发送请求 } /** * 渲染图书列表 * @param {*} books 图书列表数据 */ function renderBooks(books) { // 获取图书列表容器 var bookList = document.querySelector("#bookList"); var html = ""; if (books.length > 0) { // 遍历图书列表数据，生成HTML字符串 for (var i = 0; i < books.length; i++) { html += '<tr>'; html += '<td>' + books[i].title + '</td>'; html += '<td>' + books[i].author + '</td>'; html += '<td>' + books[i].category + '</td>'; html += '<td>' + books[i].price + '</td>'; html += '<td>' + books[i].publisher + '</td>'; html += '</tr>'; } } else { // 如果没有搜索到任何图书，提示用户 html = '<tr><td colspan="5">没有搜索到任何图书！</td></tr>'; } // 将生成的HTML字符串添加进图书列表容器 bookList.innerHTML = html; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值