JavaScript+jQuery程序设计源码_javascript+jquery源码资源-CSDN下载

共513个文件

html：192个

jpg：111个

gif：74个

需积分: 38 18 浏览量 2018-09-02 10:08:34 上传评论收藏 79.08MB RAR 举报

JavaScript 和 jQuery 是两种广泛应用于网页开发的编程工具。JavaScript 是一种轻量级的脚本语言，主要用于客户端的网页交互，而 jQuery 是一个 JavaScript 库，它简化了 JavaScript 的使用，使得DOM操作、事件处理、动画制作和Ajax交互变得更加便捷。在"JavaScript+jQuery程序设计源码"中，我们可以深入学习以下几个重要的知识点： 1. **JavaScript基础**：这包括变量声明、数据类型（如字符串、数字、布尔、对象和数组）、控制结构（如条件语句、循环）、函数定义与调用，以及作用域和闭包等概念。理解这些基础知识是掌握JavaScript的关键。 2. **DOM操作**：Document Object Model (DOM) 是HTML和XML文档的结构表示，JavaScript通过DOM API可以对网页内容进行动态操作，例如添加、删除或修改元素。在源码中，你可以看到如何选取元素（如`getElementById`、`querySelector`等）、修改属性（如`innerHTML`、`style`）以及事件绑定等操作。 3. **jQuery库的使用**：jQuery通过简洁的API极大地简化了DOM操作，例如`$`符号是jQuery的核心，用于选择元素。`$(selector).action()`是常见的使用模式，其中`selector`是选择器，`action()`是执行的操作，如`click()`、`hide()`等。此外，还有动画效果如`fadeIn`、`slideUp`等，以及AJAX请求功能。 4. **事件处理**：JavaScript和jQuery都支持事件处理，例如点击（click）、鼠标悬浮（hover）、提交表单（submit）等。在源码中，你可以看到如何绑定事件处理器以及处理事件触发时的逻辑。 5. **Ajax交互**：在现代Web开发中，Ajax（异步JavaScript和XML）用于在不刷新整个页面的情况下更新部分网页内容。jQuery的`$.ajax()`或简化的`$.get()`、`$.post()`方法使得发送Ajax请求变得容易。 6. **响应式和跨浏览器兼容**：在JavaScript+jQuery编程中，了解如何使代码适应不同屏幕尺寸和浏览器版本是很重要的。jQuery帮助解决了许多浏览器之间的差异，但仍然需要理解如何处理兼容性问题。 7. **插件使用**：jQuery生态系统中有大量的插件，它们提供了更丰富的功能，如轮播图、日期选择器、表单验证等。源码中可能包含了一些插件的使用示例，通过阅读可以学习如何引入和使用它们。通过分析和实践这个"JavaScript+jQuery程序设计源码"，学习者不仅能巩固JavaScript和jQuery的基础知识，还能提升实际项目开发经验，尤其是处理网页交互和动态效果的能力。同时，这也将有助于理解和应用更多高级特性，如Promise、ES6语法、模块化等。

资源推荐

资源详情

资源评论

收起资源包目录

JavaScript+jQuery程序设计源码（513个子文件）

1.bmp 2.12MB

2.bmp 335KB

style.css 6KB

style.css 2KB

edit.css 388B

sheet.css 153B

progress.css 140B

Mymouse.gif 26KB

dl_01.gif 12KB

06.gif 9KB

mr.gif 6KB

shop_06.gif 4KB

04.gif 4KB

shop_04.gif 4KB

dl_03.gif 3KB

dl_07.gif 3KB

top.gif 3KB

dl_06.gif 3KB

bottom.gif 3KB

menu_bg.gif 2KB

title_show.gif 2KB

title_hide.gif 2KB

title_quit.gif 2KB

title.gif 2KB

item_bg.gif 2KB

dl_02.gif 1KB

2.gif 1KB

xian.gif 1KB

1.gif 1012B

i13.gif 972B

dl_04.gif 955B

dl_05.gif 895B

dl_08.gif 890B

dl_10.gif 758B

dl_09.gif 699B

right.gif 691B

left.gif 687B

mai.gif 605B

3.gif 419B

7.gif 338B

6.gif 233B

3.gif 231B

4.gif 230B

8.gif 225B

9.gif 220B

4.gif 217B

2.gif 211B

0.gif 210B

5.gif 206B

1.gif 204B

ra_03.gif 61B

dian.gif 47B

i14.gif 46B

分隔符.gif 43B

index.html 20KB

action.html 17KB

love.html 15KB

scienceFiction.html 12KB

cartoon.html 11KB

art.html 11KB

horror.html 11KB

index.html 10KB

index.html 6KB

cart.html 4KB

index.html 4KB

index.html 3KB

共 513 条

<!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=gb2312" /> <title>365影视网</title> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/chk.js"></script> <script type="text/javascript" src="js/AjaxRequest.js"></script> <script type="text/javascript"> /******************错误处理的方法*******************************/ function onerror(){ alert("您的操作有误！"); } /******************实例化Ajax对象的方法*******************************/ function getInfo(){ var loader=new net.AjaxRequest("check.php?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET"); } /************************回调函数**************************************/ function deal_getInfo(){ document.getElementById("showInfo").innerHTML=this.req.responseText; } window.onload=function(){ getInfo(); //调用getInfo()方法获取最新消息 window.setInterval("getInfo()", 600000); //每隔10分钟调用一次getInfo()方法 } </script> <script type="text/javascript"> $(document).ready(function(){ $(".scroll").hover(function(){//鼠标指向滚动区域 clearTimeout(timeID);//中止超时，即停止滚动 },function(){//鼠标离开滚动区域 timeID=setInterval('autoScroll()',3000); //设置超时函数，每过3秒执行一次函数 }); }); function autoScroll(){ $(".scroll").find(".list").animate({ //自定义动画效果 marginTop : "-25px" },500,function(){ $(this).css({"margin-top" : "0px"}).find("li:first").appendTo(this); //把列表第一行内容移动到列表最后 }) } var timeID=setInterval('autoScroll()',3000); //设置超时函数，每过3秒执行一次函数 $(document).ready(function() { $(".tab_content").hide(); //将class值为tab_content的div隐藏 $("ul.tabs li a:first").addClass("active"); //为第一个选项卡添加样式 $(".tab_content:first").show(); //将第一个class值为tab_content的div显示 $("ul.tabs li a").hover(function() { //将鼠标移到某选项卡上 $("ul.tabs li a").removeClass("active"); //移除样式 $(this).addClass("active"); //为当前的选项卡添加样式 $(".tab_content").hide(); //将所有class值为tab_content的div隐藏 var activeTab = $(this).attr("name"); //获取当前选项卡的name属性值 $(activeTab).show(); //将相同id值的div显示 }); }); </script> <link rel="stylesheet" href="css/style.css" /> </head> <body> <table class="top_box" width="1206" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff"> <tr> <td width="860" height="98" style="cursor: pointer" onclick="javascript:location='index.html'"><img src="images/ball.png"></td> </tr> <tr> <td colspan="6" height="1" bgcolor="#e5e5e5"></td> </tr> <tr> <td colspan="6" align="center" valign="top">  <div> <script type="text/javascript"> function showadv(par,par2,par3){ document.getElementById("a0").style.display = "none"; document.getElementById("a0color").style.color = ""; document.getElementById("a0bg").style.backgroundImage=""; document.getElementById("a1").style.display = "none"; document.getElementById("a1color").style.color = ""; document.getElementById("a1bg").style.backgroundImage=""; document.getElementById("a2").style.display = "none"; document.getElementById("a2color").style.color = ""; document.getElementById("a2bg").style.backgroundImage=""; document.getElementById("a3").style.display = "none"; document.getElementById("a3color").style.color = ""; document.getElementById("a3bg").style.backgroundImage=""; document.getElementById("a4").style.display = "none"; document.getElementById("a4color").style.color = ""; document.getElementById("a4bg").style.backgroundImage=""; document.getElementById("a5").style.display = "none"; document.getElementById("a5color").style.color = ""; document.getElementById("a5bg").style.backgroundImage=""; document.getElementById("a6").style.display = "none"; document.getElementById("a6color").style.color = ""; document.getElementById("a6bg").style.backgroundImage=""; document.getElementById(par).style.display = ""; document.getElementById(par2).style.color = "#ffffff"; document.getElementById(par3).style.backgroundImage = "url(images/i13.gif)"; } </script> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td><div class="i01w"> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td width="166" height="42" align="center" id="a0bg"><span id="a0color" onmouseover="showadv('a0','a0color','a0bg')"><a href="index.html"><font color="#FA4A05">首页</font></a></span></td> <td width="1"><img src="images/i14.gif" width="1" height="25" /></td> <td id="a1bg" align="center" width="166"><span id="a1color" onmouseover="showadv('a1','a1color','a1bg')"><a href="love.html">爱情片</a></span></td> <td width="1"><img src="images/i14.gif" width="1" height="25" /></td> <td id="a2bg" align="center" width="166"><span id="a2color" onmouseover="showadv('a2','a2color','a2bg')"><a href="action.html">动作片</a></span></td> <td width="1"><img src="images/i14.gif" width="1" height="25" /></td> <td id="a3bg" align="center" width="166"><span id="a3color" onmouseover="showadv('a3','a3color','a3bg')"><a href="scienceFiction.html">科幻片</a></span></td> <td width="1"><img src="images/i14.gif" width="1" height="25" /></td> <td id="a4bg" align="center" width="166"><span id="a4color" onmouseover="showadv('a4','a4color','a4bg')"><a href="horror.html">恐怖片</a></span></td> <td width="1"><img src="images/i14.gif" width="1" height="25" /></td> <td id="a5bg" align="center" width="166"><span id="a5color" onmouseover="showadv('a5','a5color','a5bg')"><a href="art.html">文艺片</a></span></td> <td width="1"><img src="images/i14.gif" width="1" height="25" /></td> <td id="a6bg" align="center" width="166"><span id="a6color" onmouseover="showadv('a6','a6color','a6bg')"><a href="cartoon.html">动漫</a></span></td> </tr> </table> </div></td> </tr> <tr> <td><table width="100%" height="41" cellpadding="0" cellspacing="0" id="a0"　border="0"> <tr> <td align="left" style="padding-left:12px">欢迎来到365影视网</td> </tr> </table> <table id="a1" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td style="padding-left:97px" align="left"><ul class="i02w"> <li>爱情喜剧</li> <li>古典爱情</li> <li>现代爱情</li> </ul></td> </tr> </table> <table id="a2" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td style="padding-left:292px" align="left"><ul class="i02w"> <li><a href="#">枪战片</a></li> <li><a href="#">武侠片</a></li> <li><a href="#">魔幻片</a></li> </ul></td> </tr> </table> <table id="a3" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td style="padding-left:456px"><ul class="i02w"> <li><a href="#">外星人</a></li> <li><a href="#">自然灾难</a></li> <li><a href="#">生物变异</a></li> </ul></td> </tr> </table> <table id="a4" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" b

评论收藏

内容反馈