jquery特效 | 易学教程

可控制导航下拉方向的jQuery下拉菜单代码

阅读更多关于可控制导航下拉方向的jQuery下拉菜单代码

效果： http://hovertree.com/texiao/nav/1/ 代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可控制导航下拉方向的jQuery下拉菜单代码 - 何问起</title> <base target="_blank" /> <style> .nav * { margin: 0; padding: 0; list-style: none; } .nav { width: 700px; height: 30px; line-height: 30px; margin: 2px auto; } .nav li a { color: #fff; text-decoration: none; display: block; float: left; height: 30px; line-height: 30px; padding: 0px 15px; font-size: 12px; background: #636871; } .nav li a:hover { background: #4b505a; } .nav li { float: left; position: relative;

jQuery带控制按钮向上和向下滚动文本列表

阅读更多关于 jQuery带控制按钮向上和向下滚动文本列表

效果： http://hovertree.com/texiao/jquery/64/ 效果图如下：代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery带按钮向上滚动向下滚动代码 - 何问起</title><base target="_blank" /> <link href="http://hovertree.com/texiao/jquery/64/css/myScroll.css" rel="stylesheet" type="text/css" /> <script src="http://down.hovertree.com/jquery/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="http://hovertree.com/texiao/jquery/64/js/jq_scroll.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("

你不需要jQuery(二)

阅读更多关于你不需要jQuery(二)

完全没有否定jQuery的意思，jQuery是一个神奇的、非常有用的工具，可以节省我们大量的时间。但是，有些时候，我们只需要jQuery的一个小功能，来完成一个小任务，完全没有必要加载整个jQuery程序库。下面是一些用简单JavaScript实现jQuery功能特征的代码汇总。当然，这个汇总并不完全，你最好还是看一下《你不需要jQuery(一) 》查找搜索(选择器) 按ID查找: $('#foo') document.getElementById('foo') 按class名搜索: $('.bar') document.getElementsByClassName('bar') 按标记名搜索: $('span') document.getElementsByTagName('span') 按子元素搜索: $('#foo span') document.getElementById('foo').getElementsByTagName('span') 搜索特殊元素: $('html') document.documentElement $('head') document.head $('body') document.body 元素属性操作获取/设置HTML: $('#foo').html() document.getElementById('foo')

jQuery基础【1】

阅读更多关于 jQuery基础【1】

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性：　　•HTML 元素选取　　　　　 •HTML 元素操作　　•CSS 操作　　　　　　　 •HTML 事件函数　　•JavaScript 特效和动画　　•HTML DOM 遍历和修改　　•AJAX　　　　　　　　　　•Utilities 1.向页面添加jQuery 库 1 <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script> 2 <%--使用 Google 的 CDN--%> 3 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs 4 /jquery/1.4.4/jquery.min.js"></script> 5 <%--使用 Microsoft 的 CDN--%> 6 <script type=

我的收藏

阅读更多关于我的收藏

平时收藏了一些好的站点，在些谢谢那些作者： Bookmarks 书签栏书签工具栏综合看雪安全论坛 - www.pediy.com 蓝色理想经典论坛-前端开发 UI设计 web编程 w3school 在线教程 DIV+CSS教程_DIV+CSS布局_十天学会div+css_web标准化——标准之路禅意花园学习编程 | Codecademy 51CTO.COM - 技术成就梦想 - 中国领先的IT技术网站后代选择器和子选择器的区别！！！ - Knuth_档案 - 博客园详细解读DIV+CSS定位 CSS/DIV网页设计视频教程目录 - CSS,Javascript,jQuery,视频教程 - Web网页设计开发制作技巧，前沿视频教室 CSS论坛 - DIVCSS5 前端练习系列60-ie绝对定位点击的问题 | <前端开发> CSS3-HTML5之家中文CSS3,HTML5教程网站让IE也支持box-shadow | Web前端开发 – 专注于网站前端设计与Web用户体验 W3CPlus | css3教程-css3实例-css3动画 | 记述前端那些事——引领Web前沿 22款给力的HTML5和CSS3帮助工具前端集锦工具 | 前端开发网(W3Cfuns.com)! RD1012: 不同浏览器内 'line-height' 样式设置会影响不同行内替换元素的显示高度 -

jQuery帮助文档

阅读更多关于 jQuery帮助文档

jQuery 库 - 特性基础 jQuery 实例 jQuery 是一个 JavaScript 函数库。下面的例子演示了 jQuery 的 hide jQuery 库包含以下特性：实例 HTML 元素选取 <html> HTML 元素操作 <head> CSS 操作 <script type="text/java HTML 事件函数 <script type="text/javascr JavaScript 特效和动画 $(document).ready(function HTML DOM 遍历和修改 $("button").click(function AJAX $("p").hide(); Utilities }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p <p>This is another paragra <button type="button">Clic </body> </html> jQuery 语法 jQuery 语法是为 HTML 元素的选取编制，可以对元素执行某些操作。基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

阅读更多关于 jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 如何使用 Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾，也就是 </body> 前: 1 2 < script type = "text/javascript" src = "jquery.js" ></ script > < script type = "text/javascript" src = "jquery.lazyload.js" ></ script > 你必须改变图片的标签。图像的地址必须放在 data-original 属性上。给懒加载图像一个特定的class（例如:lazy）。这样你可以很容易地进行图像插件捆绑。代码如下： 1 < img class = "lazy" alt = "" width = "640" height = "480" data-original = "img/example.jpg" /> 1 2 3 $( function () { $

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

阅读更多关于 jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器请求负担. Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾，也就是 </body> 前: Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾，也就是 </body> 前: 1 2 < script type = "text/javascript" src = "jquery.js" ></ script > < script type = "text/javascript" src = "jquery.lazyload.js" ></ script > 你必须改变图片的标签。图像的地址必须放在 data-original 属性上。给懒加载图像一个特定的class（例如:lazy）。这样你可以很容易地进行图像插件捆绑。代码如下： 1 < img class = "lazy" alt = "" width = "640" height = "480" data

JQuery原理介绍及学习方法

阅读更多关于 JQuery原理介绍及学习方法

前言对于JQuery，想必大家都很熟悉。目前，很多web项目，在实施的过程中，考虑到各浏览器原生JS API的兼容性，大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发。JQuery上手简单，也很容易学，即使是刚接触JQuery的开发人员，借助JQuery手册，也很快能在项目中使用开发。虽然JQuery相对简单，但要全面掌握，且快速灵活的使用它也并不那么容易，它提供了很多方法，包含了网页开发的各个知识面，所以要全面掌握这些知识点，个人认为还是需要对jquery有深入的理解，对这些知识点做分类整理记忆，这样你才能面对一些JQuery代码的时候不会感到迷惑，才会知道采用何种方式实现某个特效是最佳实践，才能快速的采用JQuery来进行项目开发。简单模拟JQuery JQuery里的代码是出了名的刁钻，里面的奇技淫巧太多太多，如果你想通过源码来学习JQuery，没有一定的功底是很难做到的。所以下面写一个非常简单的库来模拟JQuery，方便大家理解。总体代码 (function(window) { var doc = window.document; // -------------代码段二 ------------------ var JQuery = function(selector) { return new JClass(selector); } //