初识jQuery

2024年4月9日 134次阅读 来源: Bizhong

一、前言

jQuery 是继 prototype 之后又一个优秀的 JavaScript 库，顾名思议，也就是 JavaScript 和查询（Query），即是辅助 JavaScript 开发的库。它是轻量级的 JS 库 ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。

jQuery 是由美国人 John Resig 于 2006 年创建的一个开源项目，随着被人们熟知，越来越多的程序高手加入其中，完善并壮大其项目内容，如今已发展成为集 JavaScript、CSS、DOM、Ajax 于一体的强大框架体系。它的主旨是：已更少的代码，实现更多的功能（Write less, do more）。

二、jQuery基本功能

2.1 访问和操作DOM元素

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

2.2 控制页面样式

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

2.3 对页面事件的处理

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

2.4 大量插件在页面中的运用

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

2.5 与Ajax技术的完美结合

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

三、引入jQuery库方法

由于 jQuery 是一个完整的 JavaScript 文件库，因此，搭建 jQuery 开发环境十分简单，无须安装任何文件，只需要先在 jQuery 官方网站下载 最新的文件库，然后将该文件库引入页面中的 <head> 元素间即可。

<script src="js/jquery-2.1.4.min.js"></script>

如果不希望下载并存放 jQuery 类库，那么也可以使用 CDN （全称：Content Delivery Network，内容分发网络）加载它，加速你的网站 。例如：jQuery CDN、Google CDN、Microsoft CDN、CDNJS CDN、jsDelivr CDN、百度 CDN、新浪 CDN、360 CDN 等等。

jQuery CDN 加载 jQuery：

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

百度 CDN 加载 jQury：

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

四、版本介绍

jQuery 有两个版本：jQuery 1.x 和 jQuery 2.x。

jQuery 1.x 对 IE6，7，8 还支持，而 jQuery 2.x 不再对 IE8 或更早的浏览器支持。

了解更多：Download jQuery | jQuery

五、jQuery API

我们可以在 jQuery API Documentation 中查看一些预先定义的函数，深入了解并掌握其用法。英文看不懂的同学可以翻译一下或者直接访问一些 jQuery API 中文网站。例如：jQuery API 中文文档 — jQuery 中文网

六、jQuery程序的代码风格

6.1 “$”美元符的使用

在 jQuery 程序中，使用最多的莫过于“$”美元符了，无论是页面元素的选择、功能函数的前缀，都必须使用该符号，可以说它是 jQuery 程序的标志。

6.2 事件操作链接式写法

在编写页面某元素事件时，jQuery 程序可以使用链接式的方式编写该元素的所有事件。例如：

<script>
        $(document).ready(function(){
            $("#button").click(function(){
                $("#content").show().html("您好，欢迎来到jQuery世界！").append('<a href="#">开始学习</a>');
            });
        });
</script>

七、jQuery注意点

7.1 $(document).ready 和 window.onload 的区别

7.1.1 执行时间不同

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

7.1.2 执行数量不同

$(document).ready 可以重复写多个，并且每次执行结果不同；而 window.onload 尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出。

7.1.3 $(document).ready 可简写

$(document).ready(function(){}) 可以简写成 $(function(){})。另外，“$”可以写成“jQuery”。因此，ready() 方法有四种写法。

$(document).ready(function(){//第一种写法
    //代码部分
});
$(function(){//第二种写法
    //代码部分
});
jQuery(document).ready(function(){//第三种写法
    //代码部分
});
jQuery(function(){//第四种写法
    //代码部分
});

7.2 jQuery选择器

jQuery 选择器可谓之强大无比。jQuery 选择器分为基本选择器、层次选择器、过滤选择器、表单选择器。而过滤选择器又可分为简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。

7.3 jQuery操作DOM

DOM（Document Object Model，文档对象模型）为文档提供了一种结构化表示方法，通过该方法可以改变文档的内容和展示形式。在实际运用中，DOM 更像是桥梁，通过它可以实现跨平台、跨语言的标准访问。在 jQuery 中可以操作或控制 DOM 中的各种元素或对象。

7.4 遍历元素

在 DOM 元素操作中，有时需要对同一标记的全部元素进行统一操作。在传统的 JavaScript 中，先获取元素的总长度，然后，以 for 循环语句，递减总长度，访问其中的某个，代码相对复杂；而在 jQuery 中，可以直接使用 each() 方法实现元素的遍历。

其语法格式如下：each(callback)

其中，参数 callback 是一个 function 函数，该函数还可以接受一个形参 index，此形参为遍历元素的序号（从 0 开始）；如果需要访问元素中的属性，可以借助形参 index，配合 this 关键字来实现元素属性的设置或获取。

7.5 jQuery事件

众所周知，页面在加载时，会触发 load 事件。当用户单击某个按钮时，触发该按钮 click 事件，通过种种事件实现各项功能或执行某项操作。严格来说，事件在触发后被分为两个阶段，一个是捕获，另一个是冒泡。遗憾的是大多数浏览器并不都支持捕获阶段，jQuery 也不支持。因此在事件触发后，往往执行冒泡过程。

7.5.1 阻止冒泡过程

事件在执行的过程中存在冒泡现象。而在实际需要中，我们并不希望事件的冒泡现象发生，比如单击按钮就执行单一的单击事件，并不触发其他外围的事件。

在 jQuery 中，可以通过 stopPropagation() 方法来阻止事件的冒泡过程或者通过语句 return false; 停止事件的冒泡过程。

7.5.2 绑定事件

jQuery 有四种事件绑定方式，分别是 bind() 方法、live() 方法、delegate() 方法和 on() 方法。建议使用 on() 方法绑定。

① bind() 方法

为每个匹配元素的特定事件绑定事件处理函数。其语法格式为：bind(type,[data],fn)

例如：

$("a").bind("click",function(){alert("OK");});
② live() 方法

给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的。其语法格式为：live(type,[data],fn)

例如：

$("a").live("click",function(){alert("OK");});
③ delegate() 方法

指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。其语法格式为：delegate(selector,[type],[data],fn)

例如：

$("#main").delegate("a","click",function(){alert("OK");})
④ on() 方法

在选择元素上绑定一个或多个事件的事件处理函数。其语法格式为：on(events,[selector],[data],fn)

例如：

$("#main").on("click","a",function(){alert("OK");})

差别：

  • bind() 方法是直接绑定在元素上；

  • live() 方法则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到 document DOM 节点上。和 bind() 方法的优势是支持动态数据；

  • delegate() 方法则是更精确的小范围使用事件代理，性能优于 live() 方法；

  • on() 方法则是最新的 1.9 版本整合了之前的三种方式的新事件绑定机制。

7.6 jQuery动画方法

  • show() 与 hide() 方法，元素以动画效果实现显示与隐藏。可以同时改变元素的多个属性，如宽度、高度、透明度；

  • toggle() 方法，可以替代 show() 和与 hide() 两个方法，因此，其改变的元素属性也与 show() 与 hide() 方法一样；

  • fadeIn() 与 fadeOut() 方法，元素以动画的效果淡入与淡出，仅改变元素的透明度；

  • fadeTo() 方法，元素按照指定的透明度进行渐进式调整，从而达到一种动画效果，该方法改变的是元素的透明度，宽度和高度都不发生变化；

  • slideUp() 和 slideDown() 方法，元素以“卷窗帘”的动画效果显示与隐藏，仅改变元素的透明度，其他属性不发生变化；

  • slideToggle() 方法，可以替代 slideUp() 和 slideDown() 两个方法，改变的元素也与 slideUp() 和 slideDown() 方法一样；

  • animate() 方法，自定义元素的动画效果，可以实现改变上述方法中全部属性的功能。同时，还可以用动画的效果，改变其他的元素属性，该方法是上述方法的核心。

    原文作者：Bizhong
    原文地址: https://segmentfault.com/a/1190000004694340
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞