javascript案例百宝箱2资源-CSDN文库

共2000个文件

gif：4511个

png：955个

jpg：281个

5星 · 超过95%的资源需积分: 3 164 浏览量 2012-03-21 23:27:05 上传评论收藏 40.14MB RAR 举报

JavaScript，作为全球最广泛使用的编程语言之一，是创建交互式网页和应用程序的关键工具。"javascript案例百宝箱2"提供了一系列实用的JavaScript特效案例，帮助开发者深入理解和掌握JavaScript的运用技巧。这个资源库包含了各大网站常用的JavaScript效果，通过实例化的学习方式，可以提升开发者在实际项目中的应用能力。 JavaScript的基础知识包括变量、数据类型、控制结构（如if语句、switch语句）、循环（for、while等）、函数和数组。这些基础知识在每一个案例中都会有所体现，因为它们构成了JavaScript代码的基本框架。案例一可能涉及到DOM操作，这是JavaScript与网页内容互动的核心。通过DOM（Document Object Model），开发者可以添加、删除或修改页面元素。例如，你可以看到如何使用`getElementById`、`getElementsByClassName`或`querySelectorAll`等方法来选取特定的HTML元素，然后使用`innerHTML`、`textContent`或`style`属性来改变它们的内容、样式或行为。案例二可能涵盖了事件处理，这是让网页动态化的重要部分。JavaScript允许我们监听用户的行为，如点击按钮、鼠标移动或键盘输入，然后执行相应的函数。`addEventListener`和`removeEventListener`是两个关键函数，用于绑定和解除事件监听器。案例三可能涉及动画效果，比如平滑滚动、淡入淡出或者旋转等。这通常需要用到JavaScript的时间间隔(`setInterval`)和定时器(`setTimeout`)，以及CSS3的过渡和动画属性，以实现流畅的视觉变化。案例四可能包含Ajax技术，这是一种无刷新更新页面内容的方式，通过XMLHttpRequest对象实现。开发者可以学习如何发送异步请求到服务器，获取数据并动态更新页面，从而提高用户体验。案例五可能关于表单验证，这是确保用户输入数据有效性的关键步骤。JavaScript可以检查输入字段的值，防止无效数据的提交，比如邮箱格式验证、手机号码验证等。案例六可能涵盖响应式设计，即根据设备屏幕尺寸调整网页布局。JavaScript配合媒体查询(`matchMedia` API)可以实现更高级的响应式功能，如菜单的折叠和展开，图片的懒加载等。案例七可能涉及到JavaScript库和框架的使用，比如jQuery简化DOM操作，React.js用于构建组件化用户界面，Vue.js提供声明式的编程方式等。这些库和框架极大地提高了开发效率和代码可维护性。案例中还可能包括错误处理和调试技巧，这对于优化代码和排除问题至关重要。理解`try...catch`语句和`console.log`的使用，能帮助开发者更好地诊断和修复代码问题。通过"javascript案例百宝箱2"，开发者不仅能学习到JavaScript的各种功能，还能了解到如何将它们有效地组合在一起，以创造出更具吸引力和功能性的网页。无论是初学者还是有经验的开发者，这个资源都能提供宝贵的实践经验和灵感。所以，让我们一起探索这个百宝箱，不断提升JavaScript的实战技能吧！

资源推荐

资源详情

资源评论

收起资源包目录

javascript案例百宝箱2 （2000个子文件）

Global.asax 71B

WebForm1.aspx 1KB

Abc.aspx 738B

ScriptResource.axd 254KB

ScriptResource(1).axd 64KB

WebResource(1).axd 21KB

WebResource.axd 21KB

WebResource.axd 20KB

Web.config 4KB

AssemblyInfo.cs 2KB

Abc.aspx.cs 1KB

Global.asax.cs 1KB

DBM.cs 1KB

WebForm1.aspx.cs 1KB

haha.csproj 7KB

ext-all.css 80KB

style.css 47KB

globle_v1.css 42KB

sca.css 27KB

newhead.css 23KB

9b0aa565d286b8f0f63654d6.css 19KB

inbox.css 14KB

desktop.css 14KB

common.css 10KB

css2.css 9KB

global.css 9KB

space.css 9KB

style.css 8KB

style.css 7KB

shCore.css 7KB

fox.css 7KB

css1.css 7KB

all.css 7KB

fendou.css 6KB

layout.css 6KB

mods.css 5KB

Style.css 5KB

common.css 5KB

css1.css 5KB

skin.css 4KB

jNice.css 4KB

Admin.css 4KB

skin_blue.css 3KB

shThemeDefault.css 3KB

article.css 3KB

Manage.css 3KB

css.css 3KB

CssAdmin.css 3KB

style.css 3KB

text_a.css 3KB

public.css 3KB

BlueStyle.css 3KB

silverStyle.css 3KB

tab.css 3KB

classicStyle.css 3KB

style.css 2KB

icon2.css 2KB

admin.css 2KB

theme4.css 2KB

theme2.css 2KB

theme3.css 2KB

theme1.css 2KB

theme.css 2KB

Copy of theme.css 2KB

public.css 2KB

font.css 2KB

main.css 2KB

style_left.css 2KB

共 2000 条

<!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>无标题文档</title> <style type="text/css">  </style> <script> var highlightcolor='#c1ebff'; //此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:( var clickcolor='#51b2f6'; function changeto(){ source=event.srcElement; if (source.tagName=="TR"||source.tagName=="TABLE") return; while(source.tagName!="TD") source=source.parentElement; source=source.parentElement; cs = source.children; //alert(cs.length); if (cs[1].style.backgroundColor!=highlightcolor&&source.id!="nc"&&cs[1].style.backgroundColor!=clickcolor) for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=highlightcolor; } } function changeback(){ if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="nc") return if (event.toElement!=source&&cs[1].style.backgroundColor!=clickcolor) //source.style.backgroundColor=originalcolor for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=""; } } function clickto(){ source=event.srcElement; if (source.tagName=="TR"||source.tagName=="TABLE") return; while(source.tagName!="TD") source=source.parentElement; source=source.parentElement; cs = source.children; //alert(cs.length); if (cs[1].style.backgroundColor!=clickcolor&&source.id!="nc") for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=clickcolor; } else for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=""; } } </script> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="30" background="images/tab_05.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="12" height="30"><img src="images/tab_03.gif" width="12" height="30" /></td> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="46%" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="5%"><div align="center"><img src="images/tb.gif" width="16" height="16" /></div></td> <td width="95%" class="STYLE1"><span class="STYLE3">你当前的位置</span>：[业务中心]-[我的邮件]</td> </tr> </table></td> <td width="54%"><table border="0" align="right" cellpadding="0" cellspacing="0"> <tr> <td width="60"><table width="87%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="STYLE1"><div align="center"> <input type="checkbox" name="checkbox62" value="checkbox" /> </div></td> <td class="STYLE1"><div align="center">全选</div></td> </tr> </table></td> <td width="60"><table width="90%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="STYLE1"><div align="center"><img src="images/22.gif" width="14" height="14" /></div></td> <td class="STYLE1"><div align="center">新增</div></td> </tr> </table></td> <td width="60"><table width="90%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="STYLE1"><div align="center"><img src="images/33.gif" width="14" height="14" /></div></td> <td class="STYLE1"><div align="center">修改</div></td> </tr> </table></td> <td width="52"><table width="88%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="STYLE1"><div align="center"><img src="images/11.gif" width="14" height="14" /></div></td> <td class="STYLE1"><div align="center">删除</div></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> <td width="16"><img src="images/tab_07.gif" width="16" height="30" /></td> </tr> </table></td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="8" background="images/tab_12.gif"> </td> <td><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6" onmouseover="changeto()" onmouseout="changeback()"> <tr> <td width="3%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"> <input type="checkbox" name="checkbox" value="checkbox" /> </div></td> <td width="3%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">序号</span></div></td> <td width="12%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">接收号码</span></div></td> <td width="14%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">发送时间</span></div></td> <td width="18%" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">邮件地址</span></div></td> <td width="23%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">内容</span></div></td> <td width="15%" height="22" background="images/bg.gif" bgcolor="#FFFFFF" class="STYLE1"><div align="center">基本操作</div></td> </tr> <tr> <td height="20" bgcolor="#FFFFFF"><div align="center"> <input type="checkbox" name="checkbox2" value="checkbox" /> </div></td> <td height="20" bgcolor="#FFFFFF"><div align="center" class="STYLE1"> <div align="center">01</div> </div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">13813916585</span></div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">2007-11-16 15:00:20 </span></div></td> <td bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">tiezhu0902@163.com</span></div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">南京科技股份有限公司…</span></div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE4"><img src="images/edt.gif" width="16" height="16" />编辑   <img src="images/del.gif" width="16" height="16" />删除</span></div></td> </tr> <tr> <td height="20" bgcolor="#FFFFFF"><div align="center"> <input type="checkbox" name="checkbox3" value="checkbox" /> </div></td> <td height="20" bgcolor="#FFFFFF"><div align="center" class="STYLE1"> <div align="center">02</div> </div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">13813916585</span></div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">2007-11-16 15:00:20 </span></div></td> <td bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">tiezhu0902@163.com</span></div></td> <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">南京科技股份有限公司…</span></div></td> <td height="20" bgcolor="#FFFFFF"><div ali

评论收藏

内容反馈