jQuery基本原理

最新推荐文章于 2024-07-22 08:55:10 发布

weixin_33755557

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量85

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/gao0516/blog/157051

版权

2019独角兽企业重金招聘Python工程师标准>>>

       jQuery的重点放在从HTML页面里面获取元素并对其操作。jQuery把确保代码能跨越所有主要浏览器以一致的方式工作，摆在了高优先级的位置。许多更为困难的javascript问题，比如在执行页面操作之前必须等待页面加载完毕之类的问题，已经被悄悄地解决了。
       1.jQuery包装器
       为了使设计和内容分离而把CSS引入Web技术的时候，需要以某种方式，从外部样式表中引用页面元素组。开发出来的方法就是选择器——基于元素的特性或元素在HTML文档中的位置，简明的表现元素。
       jQuery利用同样的选择器，不仅支持目前CSS中使用的常见选择器，还支持尚未被大多数浏览器完全实现的更强大的选择器。收集一组元素，可以使用如下简单的语法：
         $(selector)
或者：
         jQuery(selector)
      例如为了获取嵌套在<p>元素内的一组链接，我们使用如下语句： $("p a")
      $()函数（jQuery()函数的别名）返回特别的JavaScript对象，它包含着与选择器相匹配的DOM元素的数组。该对象拥有大量预定义的有用方法，能够作用于该数组。
       用编程的话来说，这种构造称为包装器（wrapper）。因为它用扩展功能来对匹配的元素进行包装。我们使用术语jQuery包装器或者包装集，来指能够在其上用jQuery定义的方法去操作的、匹配元素的集合。
       假定我们想让带有CSS类 notLongForThisWorld的所有<div> 元素呈现淡出效果。jQuery语句如下所示：
       $("div.notLongForThisWorld").fadeOut();
       经常作为jQuery命令引用的许多这类方法的显著特征是：当完成了一个操作时（比如淡出操作），它们返回一组相同的元素，提供给下一个操作。例如，假定除了让元素呈现淡出效果之外，还想添加新的CSS类removed到每一个元素。编写如下代码： $("div.notLongForThisWorld").fadeOut().addClass("removed");
       这写jQuery链可以无限延续。任由jQuery链无限制地延续下去的话，你会发现包含长达几十个命令的例子并不罕见。因为每个函数都作用在于最初的选择器想匹配的全部元素之上，所以没有必要循环遍历元素数组。所有的这一些，jQuery已经在后台帮我们完成。
       即使选中的对象组被表现为非常复杂的JavaScript对象，如果有必要也可以假定它是典型的元素数组。因此以下两个语句产生相同的结果：
       $("#someElement").html("I have added some text to en element");

或者
     $("#someElement")[0].innerHTML = "I have added some text to en element";
     因为使用了ID选择器，所以只有一个元素与选择器想匹配。第一个示例使用jQuery的html()方法，将DOM元素的内容用某些HTML标记去替换。第二个示例使用jQuery获取元素数组，用数组下标0去选择第一个元素，然后使用通常的JavaScript方式来替代该元素的内容。
      如果想用能匹配多个元素的选择器来获取同样的结果，那么以下两个代码片段产生一致的效果：
      $("div.fillMeIn").html(" I hava added some text to a group of nodes ");
或者

var elements = $("div.fillMeIn");
      for(int i=0;i<elements.length;i++){
        elements[i].innerHTML = " I hava added some text to a group of nodes ";
}

     随着事情愈发复杂，利用jQuery的可链接性，可以持续减少为获得你所求结果的必需代码的行数。除此之外，jQuery 不仅支持你所认识和喜爱的选择器，还支持更高级的选择器——作为CSS规范的一部分而定义，甚至支持某些自定义选择器。
      以下是几个事例：
      $("p:even") 该选择器选择所有偶数的<p>元素
      $("tr:nth-child(1)") 该选择器选择每个表格的第一行
      $("body>div") 该选择器选择作为<body> 直接子节点的<div>
      $("a[href$=pdf]") 该选择器选择指向pdf文件的链接。
      $("body>div:has(a)") 该选择器选择作为<body> 直接子节点的包含<a> 的<div>
      选择DOM元素进行操作是页面中常见的需求，但还有些必须做的事情并不涉及DOM元素。

      2.使用工具函数
      包装元素以便于操作是jQuery的$()函数最常见的用途之一，但那并不是分派给它的唯一职责。它的另外一个职责是作为几个通用的实用工具函数的命名空间前缀。因为以选择器作为参数去调用$()而创建的jQuery包装器，已经赋予了页面作者如此强大的威力，所以对大多数页面作者来说，很少需要实用工具函数提供的服务。实用工具函数的表示法看起来似乎有点怪异。例如，删除字符串前后空格的实用工具函数，其调用方法如下所示：
      $.trim(someString);
      如果你觉得前缀$.怪异，就记住$是JavaScript里的标识符。利用标识符jQuery（而不是别名$）去调用同样的函数，看起来似乎熟悉一些：
       jQuery.trim(someString);
      注：尽管在jQuery文档中这些方法被称作实用工具函数，但确切无疑的是它们实际上是函数$()的方法。

       3.文档就绪处理程序
     当我们接受不唐突的JavaScript的时候，行为从结构里分离出来了，因此执行对页面元素的操作是在创建页面元素的文档标记之外。为达到这个目的，在执行操作之前，要以某种方式等待，直到页面的DOM元素完全加载。
      传统上，window示例的onload处理程序被用于上述目的，就是在整个页面完全加载之后执行语句。该语法通常类似于：

window.onload = function(){
   $("table tr:nth-child(even)").addClass("even");
};

      这样就能在文档完整的加载之后，执行“斑马条纹”代码，不幸的是，浏览器延迟执行onload代码，不仅仅是在构建DOM元素之后，也是在所有图像和其他外部资源完整地加载并且页面在浏览器窗口显示完毕之后。结果是访问者会经历从看到页面时刻到onload脚本执行时刻之间的延迟。
      更糟糕的是，如果图像或其他资源要花好一段时间去加载，访问者在页面丰富的行为变得可用之前，就不得不等待图像加载完毕。这就让整个“不唐突的JavaScript” 运动，在很多真实的生活场景下不战而败。
      更好的解决办法就是，只要等到文档结构被完整地解析，同时浏览器已经把HTML转换成DOM树形结构的时候，就立刻执行脚本使丰富的行为生效。以跨浏览器方式来实现这一点稍显困难，然而jQuery提供了简单的方式：一旦DOM树（不是外部图像资源）加载完毕，就去激活代码执行。定义这样的代码的正式语法如下所示：

$(document).ready(function (){
   $("table tr:nth-child(even)").addClass("even");
});

首先，用$()即jQuery()函数来包装文档实例，然后调用ready()方法，给其传递一个函数。当文档为操作准备就绪的时候，就去执行该函数。
称之为正式语法是有道理的，因为用的频繁的多的简写形势如下所示:

$(function (){
  $("table tr:nth-child(even)").addClass("even");
});

通过传递函数给$()，我们命令浏览器在执行代码前必须等待，知道DOM加载完毕（但仅仅是DOM）。更好的是，可以在同一个HTML文档中多次使用此技巧，并且浏览器按照函数在页面中定义的先后顺序，一一执行指定的函数。与此不同，window的onload机制只接受一个函数。如果我们利用的任何第三方代码已经出于其自身目的而采用了onload机制，此限制就会导致难以查找的bug。

      4.创建DOM元素
      到目前为止可以看出，jQuery的作者使得$()函数足够通用以便履行许多职责，从而避免把一堆全局性的名称引入JavaScript命名空间。
      通过给$()函数传递包含HTML标记的字符串，可以即时创建相应的DOM元素。但创建无实体的DOM元素不是那么有用。通常，通过这种调用而创建元素层次结构之后，接着利用jQuery 的一个DOM 操作函数对其进行操作。

     5.扩展jQuery
     在页面中我们将发现自己一次又一次使用jQuery包装器所提供的大量有用函数。但没有哪一个库能够预料所有人的需求。甚至可以这么说，没有哪一个库应该设法将每个人需要的东西都预先准备好。这样做可能导致一堆大而笨重的、包含很少用到的功能的代码，这只会把事情搞砸。
      jQuery库的作者认识到这一点，因此努力标识大多数页面作者需要的功能，在核心库里仅仅纳入了那些需求。与此同时，jQuery库的作者认识到页面作者拥有各自不同的需求，因此从设计上就特意使得jQuery易于用附加功能来进行扩展。
      扩展jQuery更简单，通过扩展jQuery，可以利用它提供的强大功能，特别是在元素选择方面。

转载于:https://my.oschina.net/gao0516/blog/157051