原文地址:http://learn.jquery.com/about-jquery/how-jquery-works/

linkjQuery: 基础知识

这是一个基本的教程,旨在帮助您开始使用jQuery,如果你还没有设置一个测试页面,通过创建下面的HTML页面开始: 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Demo</title>
  6. </head>
  7. <body>
  8. <a href="http://jquery.com/">jQuery</a>
  9. <script src="jquery.js"></script>
  10. <script>
  11. // Your code goes here.
  12. </script>
  13. </body>
  14. </html>

<script>元素的src属性必须指向jQuery的副本。从jQuery的下载页面下载jQuery的副本然后将jquery.js文件和你的HTML文件存储在同一目录下。

 

文档就绪后启动代码

为了确保他们的代码在浏览器加载文档完成后运行,许多JavaScript程序员将他们的代码放在onload函数中: 
  1. window.onload = function() {
  2. alert( "welcome" );
  3. }

然而,直到所有图像(包括横幅广告)都加载完毕,代码才会运行。为了文件一准备好就开始操作代码,jQuery有一个声明被称为ready事件(Ready Event):

  1. $( document ).ready(function() {
  2. // Your code here.
  3. });

例如在ready事件(Ready Event)中,你可以添加一个单击处理程序的链接:

  1. $( document ).ready(function() {
  2. $( "a" ).click(function( event ) {
  3. alert( "Thanks for visiting!" );
  4. });
  5. });

保存你的HTML文件,然后在浏览器中重新加载测试页面。点击链接应该先出现一个警示弹出窗口,然后继续按照默认行为导航到 http://jquery.com。

对于点击和大多数其他事件,您可以通过在事件处理程序中调用event.preventDefault()来阻止默认行为: 
  1. $( document ).ready(function() {
  2. $( "a" ).click(function( event ) {
  3. alert( "As you can see, the link no longer took you to jquery.com" );
  4. event.preventDefault();
  5. });
  6. });

完整例子

下面的例子说明了上面讨论的点击处理的代码,直接嵌入在HTML<BODY>。需要注意的是在实践中,通常将你的代码放在单独的JS文件中并且加载到页面上<script>元素的src属性中。
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Demo</title>
  6. </head>
  7. <body>
  8. <a href="http://jquery.com/">jQuery</a>
  9. <script src="jquery.js"></script>
  10. <script>
  11. $( document ).ready(function() {
  12. $( "a" ).click(function( event ) {
  13. alert( "The link will no longer take you to jquery.com" );
  14. event.preventDefault();
  15. });
  16. });
  17. </script>
  18. </body>
  19. </html>

添加和删除一个HTML类

重要提示:您必须将剩下的jQuery的例子放在ready事件里面,这样当文档准备工作时你的代码会执行。
另一个常见任务是添加和删除一个类。
首先,在文档的<head>标签中添加一些样式信息,像这样:
  1. <style>
  2. a.test {
  3. font-weight: bold;
  4. }
  5. </style>

下一步,在脚本中添加 .addClass()声明: 

  1. <span style="font-size:10px;">$( "a" ).addClass( "test" );</span>

现在所有的<a>都是粗体的。

删掉现有的类,用.removeClass()
  1. <span style="font-size:10px;">$( "a" ).removeClass( "test" );</span>

特殊效果

jQuery也提供一些提供方便的效果,以帮助您使您的网站中脱颖而出。例如,如果您创建一个click处理函数:

  1. <span style="font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);"></span><pre code_snippet_id="220643" snippet_file_name="blog_20140306_10_1835179" name="code" class="javascript" style="color: rgb(51, 51, 51); line-height: 22.5px;">$( "a" ).click(function( event ) {
  2. event.preventDefault();
  3. $( this ).hide( "slow" );
  4. });</pre>
  5. <pre></pre>
  6. <pre></pre>
  7. <pre></pre>

当点击的时候这个链接缓慢的消失。


回调函数

与其他编程语言不同,JavaScript能让你的函数顺利通过在之后执行。一个回调是一个函数,它作为一个参数来传递给另一个函数,在它的父函数执行完成后执行该回调函数。
回调函数很特殊因为他们需要耐心等待直到他们的父函数执行完成。与此同时,浏览器可以执行其他函数或者做其他工作。
使用回调函数,很重要的一点是知道他们怎么传给他们的父函数的。
 

无参数回调

如果回调没有参数,你可以这样传: 
  1. $.get( "myhtmlpage.html", myCallBack );

当 $.get() 调用myhtmlpage.html,它会执行myCallBack()函数。

   注意:这里的第二和参数是一个简单的函数名(但不是作为字符串,没有括号)

有参数回调

执行带参数的回调函数可能会很棘手。

错误的: 
  1. $.get( "myhtmlpage.html", myCallBack( param1, param2 ) );

这段函数不会执行。

失败的原因是代码会立即执行myCallBack(参数1,参数2),然后将myCallBack()的返回值作为第二个参数传给为$.get()方法。我们实际上想传送函数myCallBack()而不是myCallBack(参数1,参数2)的返回值(这可能是也可能不是一个函数)。因此,如何传送myCallBack()包括它的参数?
正确的:
推迟执行myCallBack()与它的参数,你可以使用一个匿名函数来包装。注意,这里使用的function(){。匿名函数只做了一件事情:调用myCallBack(),用参数1和参数2的值。 
  1. $.get( "myhtmlpage.html", function() {
  2. myCallBack( param1, param2 );
  3. });

当$.get()方法完成获取网页myhtmlpage.html,它会执行匿名函数,这个匿名函数会执行myCallBack(参数1,参数2)。

jQuery 的运行机制(How jQuery Works)的更多相关文章

  1. jQuery 插件运行机制和 $冲突解决

    1.jQuery.fn.extend(object) 基本插件假设我们要创建一个插件,使一组元素中的文本变为绿色.我们要做的就是添加一个名为greenify的函数, $.fn 将像其他任何jquery ...

  2. jQuery的内部运行机制和原理

    jQuery的优点: jQuery是一个非常优秀的JavaScript库,与Prototype,YUI,Mootools等众多的Js类库相比,它剑走偏锋,从Web开发实用的角度出发,抛除了其它Lib中 ...

  3. jquery.validate 验证机制

    jquery.validate 验证机制 金刚 juqery juqery.validate 在开发系统时,使用了jquery.validate.js 这个验证插件,来校验数据合法性 重点 验证是以i ...

  4. 深入理解jQuery的Event机制

    jQuery的Event模块非常强大.其功能远远比原生事件监听器强大许多,对同一个元素的监听只用一个eventListener,内部则是一个强大的观察者,根据匹配事件类型触发相应回调.jQuery不仅 ...

  5. 使用反射机制实现jQuery调用ashx类中的指定方法

    使用反射机制实现jQuery调用ashx类中的指定方法   近期用asp.net做个小网站,但又不喜欢使用asp.net的服务器端控件,经过一番思量后确定前端采用原始的html.后台采用Linq to ...

  6. jquery 使用整理机制

    短路表达式 与 多重短路表达式 短路表达式这个应该人所皆知了.在 jQuery 中,大量的使用了短路表达式与多重短路表达式. 短路表达式:作为"&&"和" ...

  7. jQuery的事件机制和其他知识

    jQuery 设置宽度和高度 宽度操作: $(selector).height(); //不带参数表示获取高度 $(selector).height(200); //带参数表示设置高度   宽度操作: ...

  8. jquery的插件机制

    jQuery的内核; (function( window, undefined ) { //这就是jQuery的原型 var jQuery = function( selector, context ...

  9. 深入理解JavaScript运行机制

    深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...

随机推荐

  1. Mac下MySQL的卸载

    先停止所有mysql有关进程. 打开控制台一次复制下列所有内容: sudo rm /usr/local/mysql sudo rm -rf /usr/local/mysql* sudo rm -rf ...

  2. node的“宏任务(macro-task)”和“微任务(micro-task)”机制

    macrotask 和 microtask 表示异步任务的两种分类.在挂起任务时,JS 引擎会将所有任务按照类别分到这两个队列中,首先在 macrotask 的队列(这个队列也被叫做 task que ...

  3. soj1090.Highways

    1090. Highways Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description The island nation of ...

  4. 连接mysql提示Establishing SSL connection without server's identity verification is not recommended错误

    Establishing SSL connection without server's identity verification is not recommended. According to ...

  5. iOS6下实现滑动返回

    [转载请注明出处] 之前在看iOS7滑动返回时,发现了一个iOS6 SDK下的第三方实现,今天偶然间发现了作者在其博客上对该实现的一些心得,读来深觉之前的思考太过肤浅,许多实际的问题没有考虑到.帖子链 ...

  6. 20155303 2016-2017-2 《Java程序设计》第十周学习总结

    20155303 2016-2017-2 <Java程序设计>第十周学习总结 目录 学习内容总结 网络编程 数据库 教材学习中的问题和解决过程 代码调试中的问题和解决过程 代码托管 上周考 ...

  7. oracle数据类型表

    set SERVEROUTPUT ON declare v_char ); v_varchar2 ); begin v_char:='java'; v_varchar2:='java'; DBMS_O ...

  8. mysql中使用日期加减时无法识别年-月格式数据的问题,%Y-%m"这种格式数据

    最新做报表统计的时候处理按月统计部分时发现,虽然使用 DATE_FORMAT( time, '%Y-%m' ) 函数可以将日期格式转成年-月,但是如果是参数是年-月格式,即"2018-10& ...

  9. mysqli链接数据库示例代码

    $mysqli = new mysqli("localhost", "数据库用户名", "数据库密码", "数据库名称" ...

  10. linux文件管理 -> vim编辑总结

    vi和vim命令是linux中强大的文本编辑器, 由于Linux系统一切皆文件,而配置一个服务就是在修改其配置文件的参数.vim编辑器是运维工程师必须掌握的一个工具, 没有它很多工作都无法完成.vim ...