【免费】前端jquery练习网页_jquery网页作品资源-CSDN下载

共111个文件

svg：58个

avif：15个

jpeg：8个

需积分: 0 134 浏览量 2023-10-12 02:36:20 上传评论 1 收藏 241.58MB ZIP 举报

**jQuery 是一个强大的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及Ajax交互等前端开发任务。这个“前端jQuery练习网页”项目是您在学习阶段完成的一个作品，虽然存在一些bug，但它仍然是一个很好的学习和回顾jQuery核心概念的起点。** 在项目中，`js` 文件夹可能包含你编写的所有 JavaScript 代码，这些代码利用 jQuery API 来实现动态效果和交互。jQuery 的基本用法包括选择元素（如 `$("#elementID")`）、操作元素属性（如 `.attr()`）、以及添加事件监听器（如 `.click(function() {})`）。 `css` 文件夹则包含了项目的样式表。CSS 用于定义页面的布局和视觉样式，例如颜色、字体、布局等。在jQuery中，你可以使用 `.css()` 方法动态改变元素的样式。例如，`$("#myElement").css("color", "red")` 将改变指定元素的文字颜色为红色。 `html` 文件夹内的文件构成了网页的结构。HTML (HyperText Markup Language) 用于创建和组织网页内容。jQuery 可以与 HTML 文档进行交互，通过 `.html()` 方法可以获取或设置元素的 HTML 内容。 `images` 文件夹存放了项目所需的图像资源。在网页中，可以使用 `<img>` 标签引用图片，或者使用 CSS 背景图片属性。jQuery 也可以用来改变图像，例如通过 `.attr()` 更改 `src` 属性来实现动态加载图片。 `video` 文件夹可能包含视频资源，这些视频可以通过 HTML5 的 `<video>` 标签集成到网页中。jQuery 可以帮助控制视频播放，例如使用 `.get(0)` 获取 video 对象，然后调用其 `play()` 或 `pause()` 方法。 `json` 文件通常用于存储结构化数据。在前端，可以通过 `$.getJSON()` 或 `$.ajax()` 来从服务器获取 JSON 数据，并将其解析为 JavaScript 对象，以便在页面上展示或处理。在项目中，你可能已经实践了以下jQuery特性： 1. **选择器**：jQuery 提供了一系列强大的选择器，如 `id` 选择器（`#id`）、类选择器（`.class`）、属性选择器（`[attribute=value]`）等，用于选取DOM元素。 2. **DOM 操作**：使用 `.append()`、`.prepend()`、`.before()` 和 `.after()` 添加或插入元素，`.remove()` 删除元素。 3. **事件处理**：`.on()` 方法用于绑定事件监听器，如 `click`、`mouseover` 等。 4. **动画**：`.fadeIn()`、`.fadeOut()`、`.slideToggle()` 等方法用于创建平滑的过渡效果。 5. **Ajax**：`.ajax()` 或简化的 `$.get()`、`$.post()` 方法用于异步数据请求。 6. **遍历和过滤**：`.each()` 遍历集合，`.first()`、`.last()`、`.next()`、`.prev()` 等方法用于遍历或筛选元素。 7. **插件**：jQuery 社区提供了大量插件，如滑动效果、轮播图、日期选择器等，可扩展其功能。在修复项目中的bug时，你可以回顾这些知识点，检查选择器是否正确、DOM操作是否影响了预期元素、事件绑定是否准确、动画逻辑是否有误，以及Ajax请求是否成功。同时，使用开发者工具（如Chrome的DevTools）可以帮助你调试和定位问题。记住，修复bug是提升技能的好机会，每次解决一个问题，都是对jQuery理解的一次加深。

资源推荐

资源详情

资源评论

收起资源包目录

前端jquery练习网页（111个子文件）

runPic2.avif 48KB

runPic7.avif 42KB

runPic6.avif 37KB

runPic1.avif 33KB

runPic4.avif 22KB

runPic3.avif 18KB

fgo.avif 18KB

banner.avif 16KB

runPic8.avif 16KB

runPic5.avif 15KB

sklr.avif 7KB

blhx.avif 6KB

gzqs.avif 6KB

activity1.avif 6KB

activity2.avif 3KB

bootstrap.min.css 120KB

navbase.css 12KB

index.css 7KB

fixedrightpage.css 5KB

navanimation.css 2KB

autoRunningPic.css 357B

fixedrightpageAnimation.css 229B

index.html 210KB

nav.html 107B

gura.jpeg 336KB

gurafool.jpeg 336KB

steamer-head6.jpeg 258KB

steamer-head5.jpeg 80KB

steamer-head2.jpeg 69KB

steamer-head3.jpeg 26KB

steamer-head4.jpeg 21KB

steamer-head1.jpeg 13KB

chenfushma.jpg 71KB

pokemanbattle.jpg@672w_378h_1c_!web-home-common-cover 43KB

jquery-3.6.1.min.js 88KB

bootstrap.min.js 39KB

fixedrightpageAnimation.js 9KB

navanimation.js 7KB

indexAnimation.js 953B

fixedrightpageConfig.js 42B

index.js 37B

navConfig.js 31B

pokemanbattle.mp4 221.61MB

wixin.mp4 24.74MB

game1.png 102KB

game2.png 99KB

game6.png 65KB

game5.png 56KB

game3.png 51KB

game7.png 35KB

game4.png 3KB

hotIcon.png 1KB

sort-cartoonBar.svg 32KB

greatvip-black.svg 16KB

greatvip.svg 16KB

greatvip-blue.svg 16KB

sort-animation.svg 5KB

sort-musicBar.svg 3KB

sort-teleplayBar.svg 3KB

technologyBar.svg 3KB

sort-cinimaBar.svg 3KB

sort-recreateBar.svg 2KB

sort-dailyBar.svg 2KB

sort-sportsBar.svg 2KB

video_manage.svg 2KB

sort-madeOnChinaBar.svg 2KB

home.svg 2KB

home-blue.svg 2KB

home-black.svg 2KB

sort-animalBar.svg 2KB

sort-ghostanimalBar.svg 2KB

collect.svg 2KB

collect-blue.svg 2KB

create.svg 2KB

create-blue.svg 2KB

sort-documentaryBar.svg 2KB

bulletChat.svg 2KB

server.svg 2KB

sort-fationBar.svg 2KB

sort-varietyBar.svg 2KB

download.svg 2KB

download-blue.svg 2KB

sort-deliciousMealBar.svg 2KB

sort-moviesBar.svg 2KB

sort-lectureBar.svg 1KB

sort-fancyOperaBar.svg 1KB

sort-autoCarBar.svg 1KB

sort-danceBar.svg 1KB

sort-knowlegeBar.svg 1KB

prompt_server.svg 1KB

menuIcon.svg 1KB

classify.svg 1KB

windmill-blue.svg 1KB

windmill.svg 1KB

sort-newsBar.svg 1KB

videoPlayCount.svg 1016B

sort-live.svg 1011B

search.svg 1002B

uploader.svg 948B

history-blue.svg 928B

共 111 条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../css/index/bootstrap.min.css"> <link rel="stylesheet" href="../css/common/navbase.css"> <link rel="stylesheet" href="../css/common/navanimation.css"> <link rel="stylesheet" href="../css/common/fixedrightpage.css"> <link rel="stylesheet" href="../css/common/fixedrightpageAnimation.css"> <link rel="stylesheet" href="../css/index/autoRunningPic.css"> <link rel="stylesheet" href="../css/index/index.css"> </head> <body> <div id="customer_service" class="modal fade bs-examlpe-modal-md"> <div class="modal-dialog modal-md"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h4 class="modal-title"> 人工客服 <small>(工号:114514)</small> </h4> </div> <div class="media-body"> <div class="container-fluid"> <div class="row"> <div class="dialog_content"> <div class="communication_log"> <div class="dialog_blanket pull-left"> <img class="communication-head-pic pull-left" src="../images/common/chenfushma.jpg"> <div class="communication-content pull-left opposite-dialog">你好,这里是人工客服，请问有什么事?</div> </div> </div> <div class="communication_input"> <textarea maxlength="500" placeholder="请输入要资询的内容"></textarea></textarea> <button>发送</button> </div> </div> <div class="dialog_other_information"> <div class="opposite_profile"> <div class="opposite_profile_head"><img src="../images/common/chenfushma.jpg"></div> <div class="opposite_profile_name">沉浮sama</div> </div> <div class="quicky_question_top">常见问题</div> <div class="quicky_question"> <dl> <dd>账号封禁申诉</dd> <dd>账号找回申诉</dd> <dd>手机换绑</dd> <dd>帮助中心</dd> <dd>反馈与建议</dd> <dd>游戏常见问题</dd> <dd>大会员续费</dd> <dd>播放速度测试</dd> <dd>黑产反馈</dd> </dl> </div> </div> </div> </div> </div> </div> </div> </div> <div class=""></div> <div id="fixed-right-page"> <div class="fixed-right-page-item"> <p><img src="../images/common/classify.svg"></p> <p>分类</p> </div> <div href="#customer_service" data-toggle="modal" class="fixed-right-page-item"> <p><img src="../images/common/server.svg"></p> <p>客服</p> </div> <div class="fixed-right-page-item"> <p><img src="../images/common/backtop.svg"></p> <p>顶部</p> </div> </div> <div id="mask"></div> <div id="veritify"> <div class="elevator-head"><div><img src="../images/common/classify.svg">分区</div></div> <div class="elevator-core"><span class="name">直播</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">动画</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">番剧</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">国创</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">综艺</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">漫画</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">音乐</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">舞蹈</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">游戏</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">知识</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">课堂</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">科技</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">运动</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">汽车</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">生活</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">美食</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">动物圈</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">鬼畜</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">时尚</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">资讯</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">娱乐</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">专栏</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">电影</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">电视剧</span><img src="../images/common/menuIcon.svg"></div> <div class="elevator-core"><span class="name">影视</span><img src="../images/common/menuIcon.svg"></div> <div href="#documentaryBar" class="elevator-core"><span class="name">纪录片</span><img src="../images/common/menuIcon.svg"></div> </div> <div class="main-container"> <div class="header-container"> <div id="flexible_nav"> <div id="header-topbar"> <ul class="header-topbar-leftbox"> <li class="header-topbar-leftbox-iconLi"><div><img class="flexible-icon" src="../images/common/home.svg"><span>首页</span></div></li> <li><span>番剧</span></li> <li class="live-optionLi"><span>直播</span></li> <li class="game-optionLi"><span>游戏中心</span></li> <li><span>会员购</span></li> <li><span>漫画</span></li> <li><span>赛事</span></li> <li class="header-topbar-leftbox-iconLi"><div><img class="flexible-icon" src="../images/common/download.svg"><span>下载客户端</span></div></li> </ul> <div class="header-topbar-centerbox"> <div class="header-topbar-centerbox-search-container"> <input class="search-content" placeholder="铃芽户缔" autocomplete="off" maxlength="100"/> </div> <div class="header-topbar-centerbox-search-button"></div> </div> <ul class="header-topbar-rightbox"> <li> <div class="header-topbar-rightbox-userpic"> <img class="header-topbar-rightbox-userpic-haved" src="../images/common/gurahead.webp"> <span>登录</span> <div id="avatar-panel-popover"> <div class="avatar-name">-陌野-</div> <div class="user-coin-row"><span class="coin-name">硬币:</span><span class="coin-num">54</span></div> <div class="level-bar"> <a class="level-progress"><span>lv3</span><progress value='70' max='100'></progress><span>lv4</span></a> <div class="level-tip">当前成长3255，距离升级Lv.4 还需要1245</div> </div> <div class="counts-bar"> <div> <p>45</p> <p>�

评论收藏

内容反馈