初识jQuery

一、前言

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 CDNGoogle CDNMicrosoft CDNCDNJS CDNjsDelivr CDN百度 CDN新浪 CDN360 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).readywindow.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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞