Ch4.zip_javascript_基于javascript资源-CSDN文库

共73个文件

html：64个

jpg：6个

css：2个

版权申诉

151 浏览量 2022-09-23 17:23:09 上传评论收藏 338KB ZIP 举报

JavaScript是一种广泛应用于Web开发的脚本语言，它主要在客户端运行，为网页添加交互性和动态功能。基于JavaScript的jQuery库是这个领域中的一个里程碑，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。在"Ch4.zip_javascript_基于javascript"这个压缩包中，我们很可能是找到了一组与jQuery相关的JavaScript小程序。 jQuery库的核心概念在于它的易用性和高效性。它通过提供简洁的API，使得开发者可以轻松地选择和操作HTML元素，执行复杂的动画序列，以及实现异步数据获取。例如，使用jQuery，一行代码`$('div').hide()`就能隐藏所有`<div>`元素，这比原生JavaScript的实现方式要简单得多。在JavaScript中，DOM（文档对象模型）是HTML和XML文档的编程接口，用于访问和修改页面内容。jQuery提供了方便的DOM遍历和选择器，如`$('selector')`，这使得开发者能够快速找到页面上的特定元素。此外，jQuery还支持链式调用，允许我们在一个选择器后连续调用多个方法，如`$('p').addClass('highlight').css('color', 'red')`，这将为所有的`<p>`元素添加高亮类并改变字体颜色。 jQuery的动画功能是其另一大亮点。通过`.fadeIn()`, `.slideToggle()`, 和`.animate()`等方法，开发者可以创建出平滑的过渡效果。这些动画函数不仅易于使用，还可以通过参数调整速度和时机，使得交互更加流畅。 Ajax是Asynchronous JavaScript and XML的缩写，虽然现在很少使用XML，但这一术语仍代表了异步数据获取和更新的能力。jQuery的`.ajax()`函数和相关的`.get()`, `.post()`方法使得开发者无需处理复杂的XMLHttpRequest对象，即可轻松进行后台数据请求和处理。在"Ch4.zip"的压缩包中，可能包含了使用以上技术编写的一系列示例或项目。这些文件可能包括HTML文件（用于页面结构），CSS文件（用于样式设计），以及JavaScript文件（其中包含了jQuery代码）。通过学习和分析这些文件，开发者可以加深对jQuery和JavaScript在实际应用中的理解，提升开发技能。基于JavaScript的jQuery库极大地提升了Web开发的效率，降低了学习曲线，使得开发者能更专注于创造优秀的用户体验。"Ch4.zip_javascript_基于javascript"的资源对于想要深入理解和实践jQuery的开发者来说是一份宝贵的学习资料。通过实践和调试这些小程序，不仅可以掌握基本的jQuery用法，还能了解如何在实际项目中整合和优化代码。

资源推荐

资源详情

资源评论

收起资源包目录

Ch4.zip （73个子文件）

Ch4

1-DOM准备

4-1-1.html 559B

4-1-5-2-document.ready.html 599B

4-1-2.html 503B

4-1-5-1-window.onload.html 472B

4-1-4.html 596B

4-1-3.html 519B

css

style.css 346B

5-事件对象的属性

4-5-1 event.type.html 607B

4-5-5 event.which2.html 510B

4-5-2 event.target.html 662B

4-5-4 event.which.html 640B

4-5-6 event.metaKey.html 631B

4-5-3 event.pageX event.pageY.html 683B

2-事件绑定

4-2-4-鼠标滑过.html 1KB

4-2-1-初始化状态.html 873B

4-2-2-点击展开.html 1KB

4-2-5-展开，简写方式.html 1KB

4-2-3-点击展开2.html 1KB

0-ready()

demo.jpg 266KB

4-0-1加载时间对比.html 941B

10-案例演示

demo3-正确实例.html 5KB

img

01.jpg 4KB

04.jpg 6KB

btn_cartoon.gif 8KB

b5df2063502528.t1.jpg 4KB

03.jpg 7KB

02.jpg 4KB

demo1-初始化.html 3KB

demo2-连续点击带bug.html 5KB

style.css 2KB

6-移除事件

4-6-4.html 969B

4-6-2.html 1KB

4-6-3.html 1KB

4-6-1.html 972B

9-动画

9-1(show和hide).html 1KB

9-4(slide).html 1KB

9-16(fadeTo).html 1KB

9-7(animate多重动画2).html 794B

9-9(css()未排队).html 970B

9-15(slideToggle).html 1KB

9-10(css()排队)-queue().html 1KB

9-12(判断是否动画).html 1KB

9-14(toggle).html 1KB

9-3(fade).html 1KB

9-5(animate简单使用).html 750B

9-6(animate多重动画1).html 766B

9-2(show和hide带时间).html 1KB

9-18(animate仿其他方法).html 2KB

9-17(fadeToggle).html 1KB

9-11(stop方法)

demo1-.stop(快速滑过有问题).html 1KB

demo2-.stop()(解决问题).html 1KB

demo3-.stop().html 2KB

demo4-.stop().html 2KB

demo5-.stop().html 2KB

9-13(延迟动画).html 995B

9-8(综合动画).html 949B

9-10(css()排队)-回调函数.html 1010B

7-模拟操作

4-7-3 trigger.html 958B

4-7-1 trigger.html 1000B

4-7-2 trigger.html 872B

4-7-4 triggerHandler.html 964B

3-合成事件

4-3-3合成事件toggle.html 1KB

4-3-4合成事件toggle.html 1KB

4-3-1合成事件hover.html 1KB

4-3-2合成事件toggle.html 1KB

4-事件冒泡

4-4-3-2阻止默认行为-false.html 879B

4-4-3-1阻止默认行为.html 928B

4-4-4停止事件冒泡 - false.html 1KB

4-4-2停止事件冒泡.html 2KB

4-4-1冒泡.html 1KB

8-其它用法

4-8-2事件命名空间, 便于管理.html 1015B

4-8-1事件类型多个.html 682B

4-8-3相同事件名称,不同命名空间执行方法.html 905B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> </title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var page = 1; var i = 4; //每版放4个图片 //向后按钮 $("span.next").click(function(){ //绑定click事件 var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域” var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素 var v_width = $v_content.width() ; var len = $v_show.find("li").length; var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数 if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画 if( page == page_count ){ //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。 $v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面 page = 1; }else{ $v_show.animate({ left : '-='+v_width }, "slow"); //通过改变left值，达到每次换一个版面 page++; } $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); } }); //往前按钮 $("span.prev").click(function(){ var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域” var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素 var v_width = $v_content.width(); var len = $v_show.find("li").length; var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数 if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画 if( page == 1 ){ //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。 $v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow"); page = page_count; }else{ $v_show.animate({ left : '+='+v_width }, "slow"); page--; } $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); } }); }); </script> </head> <body> <div class="v_show"> <div class="v_caption"> <h2 class="cartoon" title="卡通动漫">卡通动漫</h2> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> <div class="change_btn"> <span class="prev" >上一页</span> <span class="next">下一页</span> </div> <em><a href="#">更多>></a></em> </div> <div class="v_content"> <div class="v_content_list"> <ul> <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li> </ul> </div> </div> </div> </body> </html>

评论收藏

内容反馈

版权申诉