zoukankan      html  css  js  c++  java

  • jQuery 的运行机制（How jQuery Works）

    原文地址：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.    
    12.     // Your code goes here.  
    13.    
    14.     </script>  
    15. </body>  
    16. </html>  
    <script>元素的src属性必须指向jQuery的副本。从jQuery的下载页面下载jQuery的副本然后将jquery.js文件和你的HTML文件存储在同一目录下。
     

    文档就绪后启动代码

    为了确保他们的代码在浏览器加载文档完成后运行，许多JavaScript程序员将他们的代码放在onload函数中： 
    1. window.onload = function() {  
    2.    
    3.     alert( "welcome" );  
    4.    
    5. }  
    然而，直到所有图像（包括横幅广告）都加载完毕，代码才会运行。为了文件一准备好就开始操作代码，jQuery有一个声明被称为ready事件（Ready Event）： 
    1. $( document ).ready(function() {  
    2.    
    3.     // Your code here.  
    4.    
    5. });  
    例如在ready事件（Ready Event）中，你可以添加一个单击处理程序的链接： 
    1. $( document ).ready(function() {  
    2.    
    3.     $( "a" ).click(function( event ) {  
    4.    
    5.         alert( "Thanks for visiting!" );  
    6.    
    7.     });  
    8.    
    9. });  

    保存你的HTML文件，然后在浏览器中重新加载测试页面。点击链接应该先出现一个警示弹出窗口，然后继续按照默认行为导航到 http://jquery.com。
    对于点击和大多数其他事件，您可以通过在事件处理程序中调用event.preventDefault()来阻止默认行为： 
    1. $( document ).ready(function() {  
    2.    
    3.     $( "a" ).click(function( event ) {  
    4.    
    5.         alert( "As you can see, the link no longer took you to jquery.com" );  
    6.    
    7.         event.preventDefault();  
    8.    
    9.     });  
    10.    
    11. });  

    完整例子

    下面的例子说明了上面讨论的点击处理的代码，直接嵌入在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.    
    12.     $( document ).ready(function() {  
    13.         $( "a" ).click(function( event ) {  
    14.             alert( "The link will no longer take you to jquery.com" );  
    15.             event.preventDefault();  
    16.         });  
    17.     });  
    18.    
    19.     </script>  
    20. </body>  
    21. </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.    
    3.     event.preventDefault();  
    4.    
    5.     $( this ).hide( "slow" );  
    6.    
    7. });</pre>  
    8. <pre></pre>  
    9. <pre></pre>  
    10. <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.    
    3.     myCallBack( param1, param2 );  
    4.    
    5. });  

    当$.get（）方法完成获取网页myhtmlpage.html，它会执行匿名函数，这个匿名函数会执行myCallBack（参数1，参数2）。
  • 相关阅读:
    CDH5.13 集成Kerberos配置
    使用bash脚本删除文件最后几行
    yolov3模型微调(fine-tune)备忘
    ubuntu 18.04 rsync 命令使用 服务端配置
    python 子包调用 跨目录调用
    [转]命令行界面 (CLI)、终端 (Terminal)、Shell、TTY的联系与区别
    bash shell 判断变量是否在列表中
    TensorFlow 图像分类模型 inception_resnet_v2 模型导出、冻结与使用
    numpy 数组集合运算及下标操作
    Win10 Service'MongoDB Server' failed to start. Verify that you have sufficient privileges to start system services【简记】
  • 原文地址：https://www.cnblogs.com/web100/p/jquery-work.html
Copyright © 2011-2022 走看看