jQuery 简介 选择器

1.jQuery简介

    随着Web开发技术的发展，以及用户对应用体验的要求日益提高，当我们要开发一个Web应用时，不仅仅只是要考虑其功能是否足够完备，更重要的是要考虑如何才能提高用户的体验满意度。这是理性的回归，也是Web开发技术发展的必然趋势，而jQuery恰恰是满足这一理性需求的坚实利刃。

    jQuery是JavaScript库中的优秀一员，代码高效、兼容性强等特点使得它近年来风靡全球，越来越多的开发者痴迷其中。jQuery发布于2006年，它易于使用、功能强大、展现优雅、兼容性极佳,迅速赢得了Web开发者的钟爱，不断地吸引着全球开发者社区的技术爱好者、精英和专家们加入其阵营。这也使得它在众多的JavaScript框架中脱颖而出，几近成为Web开发领域的事实标准。如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系。它的主旨是：以更少的代码，实现更多的功能（Write less，do more).

    jQuery的基本功能:

    1)访问和操作DOM元素

    使用jQuery库，可以很方便地获取和修改页面中的某元素，无论是删除、移动还是复制某元素，jQuery都提供了一整套方便、快捷的方法，既减少了代码的编写，又大大提高了用户对页面的体验度；

    2)控制页面样式

    通过引入jQuery，程序开发人员可以很便捷地控制页面的CSS文件。浏览器对页面文件的兼容性，一直以来都是页面开发者最为头痛的事，而使用jQuery操作页面的样式却可以很好地兼容各种浏览器。

    3)对页面事件的处理

    引入jQuery库后，可以使页面的表现层与功能开发分离，开发者更多地专注于程序的逻辑与功效；页面设计者侧重于页面的优化与用户体验。然后，通过事件绑定机制，可以很轻松地实现二者的结合。

   4)大量插件在页面中的运用

     在引入jQuery库后，还可以使用大量的插件来完善页面的功能和效果，如表单插件、UI插件，这些插件的使用极大地丰富了页的展示效果，使原来使用JavaScript代码遥不可及的功能通过插件的引入而轻松地实现。

   5)与Ajax技术的完美结合

    Ajax的异步读取服务器数据的方法，极大地方便了程序的开发，加深了用户的页面体验度；而引入jQuery库后，不仅完善了原有的功能，而且减少了代码的书写，通过其内部对象或函数，加上几行代码就可以实现复杂的功能。

    $(document).ready(function(){

                    //程序段        

     });

    该段代码类似于传统的JavaScript代码：
    window.οnlοad=function(){

               //程序段

    }
    虽然上述两段代码在功能上可以互换，但它们之间又有许多区别：
    1)执行时间不同：

    $(document).ready在页面框架下载完毕后就执行；而window.onload必须在页面全部加载完毕（包含图片下载）后才能执行。很明显，前者的执行效率高于后者。  

    2)执行数量不同：

    $(document).ready可以重复写多个，并且每次执行结果不同；而window.onload尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出。  $(document).ready(function(){})可以简写成$(function(){})，因此与下面的代码是等价的。

    $(document).ready(function(){
              //程序段           

    });
    等价于
    $(function(){
              //程序段           

    });

2.jQuery选择器

     jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对 DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。

    与传统的JavaScript获取页面元素和编写事务相比，jQuery选择器具有明显的优势，具体表现在以下两个方面：
    1)代码更简单。 

    由于在jQuery库中，封装了大量可以通过选择器直接调用的方法或函数，使编写代码更加简单轻松，简单几行代码就可以实现较为复杂的功能。

    2)完善的检测机制。

    在传统的JavaScript代码中，给页面中某元素设置事务时必须先找到该元素，然后赋予相应的属性或事件；如果该元素在页面中不存在或被前面代码所删除，那么浏览器将提示运行出错信息，影响后续代码的执行。在jQuery选择器定位页面元素时，无需考虑所定位的元素在页面中是否存在，即使该元素不存在该元素，浏览器也不提示出错信息，极大地方便了代码的执行效率。

    根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中又可分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种;

    1)基本选择器是jQuery中使用最频繁的选择器，它由元素Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找，其详细说明如表2-1所示。

    2)层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，其详细说明如表2-3所示

    3)过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（:）开头；简单过滤选择器是过滤选择器中使用最广泛的一种，其详细说明如表2-5所示

    4)内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位，其详细说明如表2-7所示

    5)可见性过滤选择器根据元素是否可见的特征获取元素，其详细的说明如表2-9所示

    6)属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、以“]”号结束。其详细的说明如表2-11所示

    7)在页面开发过程中，常常遇到突出指定某行的需求。虽然使用基本过滤选择器:eq(index)可实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。其详细的说明如表2-13所示

    8)表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素，如enabled、disabled、checked、selected属性。

    9)无论是提交还是传递数据，表单在页面中的作用是显而易见的。通过表单进行数据的提交或处理，在前端页面开发中占据重要地位。因此，为了使用户能更加方便地、高效地使用表单，在jQuery选择器中引入表单选择器，该选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象。其详细的说明如表2-17所示