题外话:真得,俺折腾的不是jQuery,是寂寞!(忽见,锅碗瓢盆夹杂一堆不明物飞来……啊~哇~呀)
关注小博的童鞋朋友都知道,最近俺在疯狂得折腾jQuery,而且成果显著发文多多,也有用俺发出来的代码加到小站上的。独乐乐不如众乐乐,俺一人折腾不如一票人一起折腾。不过问题也随之出现了,有些小朋友不懂jQuery来着,而俺又是直接上代码来着,让他们看着代码兴叹怎么用呀!
好啦,这就把如何正确使用jQuery的方法步骤补上:
一、在header.php的head标签中加载jQuery库(非加不可):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
当然,如果你觉得你的主机比GG更稳定更速度,那放本地也行的!
二、添加利用这个库让元素动起来的代码(可理解为命令代码):
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
上面这段就是让首页文章列表左手边上的滑动按钮起作用的jQuery代码,那我们又该如何使用这个代码呢?有二个方法:
1.直接在header.php添加如下结构的代码:
<script type="text/javascript" > jQuery(document).ready(function($){ //注意要用这个把jQuery代码都包裹起来,不然里面的可都是无效的哦~ $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);}); //代码段二…… //代码段三…… }); </script>
2.推荐把方法1说的代码另存为.js文件:
jQuery(document).ready(function($){ $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);}); });
然后再在header.php的head标签中添加:
<script type="text/javascript" src="http://xxxooo.com/xxxooo.js"></script>
好了,回头看看也挺简单的吧?那以后俺可直接上jQuery代码咯!
相关推荐
《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何使用jQuery的各项技术,实现令人激动的网页效果。 《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的...
最后,讲义可能还会涉及性能优化技巧,例如减少DOM操作、利用事件委托、以及如何正确使用$(document).ready()和$(window).load()等,这些都是提高jQuery代码执行效率的关键。 总的来说,《李炎恢在线课堂jQuery讲义...
使用Dreamweaver jQuery代码提示插件,开发者可以更专注于设计和实现功能,而不是记忆API细节。同时,由于插件与Dreamweaver的无缝集成,使得开发环境保持一致,降低了学习曲线。 在下载和安装插件时,需要注意以下...
而"jQuery_api_for_dwcs5"是一个专门为Dreamweaver CS5设计的JQuery代码提示插件。这个绿色版的插件无需安装,只需将文件覆盖到相应目录,重新启动Dreamweaver即可启用。 jQuery是一个广泛使用的JavaScript库,它...
本文将深入探讨如何在Aptana Studio 3中配置JQuery代码提示,使你的开发过程更加顺畅。 #### 二、为何选择 Aptana Studio 3? Aptana Studio 3是一款基于Eclipse的集成开发环境(IDE),特别针对Web开发进行了优化。...
jQuery Dreamweaver代码提示插件是一款专为Adobe Dreamweaver设计的辅助工具,它极大地提升了在Dreamweaver中编写jQuery代码的效率和准确性。这款插件通过提供自动完成、代码提示和上下文帮助等功能,使得开发者在...
《jQuery在线答题考试系统代码详解》 在当前的互联网应用中,jQuery库因其简洁的语法和强大的功能,已经成为前端开发的热门选择。本项目“jQuery在线答题考试系统代码”就是一个典型的利用jQuery技术实现的交互式...
在"jQueryAlert"这个压缩包文件中,可能包含了一些示例代码,演示了如何使用jQuery来实现这些弹出功能。文件名暗示了它可能包括了用jQuery实现的alert对话框的代码示例。这些示例可能涵盖了以下内容: - 选择器的...
总结来说,"jQuery拼图相册代码"项目结合了HTML、CSS和JavaScript(主要使用jQuery库),实现了创新的图片展示效果。通过学习和理解这个项目,开发者可以掌握动态相册的实现技巧,包括图片处理、DOM操作、事件处理和...
在本文中,我们将深入探讨如何使用jQuery进行表单验证,主要基于给定的"jQuery表单验证实例代码"。jQuery库简化了JavaScript的DOM操作,使得表单验证变得更加容易和直观。以下是一些关于这个主题的关键知识点: 1. ...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧...
正确地编码和验证用户输入,以及使用安全的Ajax请求方法是必要的。 10. **调试与优化**:在开发过程中,jQuery提供的`$.fn.extend()`和`$.proxy()`等功能可以帮助组织代码和管理作用域。同时,使用开发者工具进行...
现在,你可以在GSP文件中或者单独的JavaScript文件中编写JQuery代码了。例如,实现一个简单的点击事件监听器: ```html <button id="myButton">Click me $('#myButton').click(function() { alert('Button ...
本资源"简洁的jQuery日历代码"提供了一种实现日历功能的方法,这对于网页开发中的日期选择或者日程管理是非常实用的。下面将详细介绍这个jQuery日历代码的核心知识点。 首先,jQuery日历的基本结构基于HTML、CSS和...
3. **编写jQuery代码**:接着,我们需要编写jQuery代码来监听按钮点击事件,并执行分享逻辑。这通常涉及到AJAX请求或者使用第三方分享API。例如,对于微信分享,我们可以这样做: ```javascript $('#share-button'...
实现jQuery代码着色高亮显示特效,通常会结合使用CSS样式和JavaScript插件。以下是一些常用的方法: 1. **使用JavaScript库**:例如`highlight.js`或`Prism.js`,它们内置了多种编程语言的语法高亮规则。在页面中...
4. `tests`目录:包含测试用例,帮助开发者验证代码的正确性和性能。 通过深入学习和分析这些源代码,开发者可以更好地理解和定制jQuery Mobile,以满足特定项目的需求。同时,这也是一种提升前端开发技能,特别是...
3. **执行jQuery代码**: - 在JavaScript上下文中,你可以使用`Context.evaluateString()`执行包含jQuery选择器和函数的代码,例如选取DOM元素、操作CSS样式、绑定事件等。 - 通过`Scriptable`接口,你可以将Java...
### 一些实用的jQuery代码片段 #### 1. 使用jQuery获取用户的IP地址 在Web开发中,有时我们需要知道用户所在的IP地址,以便进行一些特定的操作,例如地理定位、访问控制等。下面是一段使用jQuery来获取用户IP地址...