首页 > 程序开发 > web前端 > JavaScript >

Jquery学习(一)

2017-01-11

jQuery 是一个JavaScript库,是一个由JohnResig创建于2006年1月的开源项目。jQuery 凭借着简洁的语法和跨平台的兼容性,极大简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发ajax的操作。

目标:

•了解什么是jQuery

•使用jQuery的好处

•jQuery环境的配置

•编写简单的jQuery代码

jQuery 是一个JavaScript库,是一个由JohnResig创建于2006年1月的开源项目。jQuery 凭借着简洁的语法和跨平台的兼容性,极大简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发ajax的操作。

jQuery有以下优势:

(1)轻量级。jQuery非常轻巧,经过最好的压缩工具UglifyJS压缩之后,大小保持在30KB左右。

(2)强大的选择器。jQuery支持CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。

(3)出色的DOM操作的封装。jQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序时能够得心应手。

(4)可靠地事件处理机制。jQuery的事件处理机制吸收了JavaScript事件处理函数的精华,使jQuery在处理事件绑定的时候相当可靠。

(5)完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax时能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

(6)不污染顶级变量。jQuery只建立一个名为jQuery 的对象,所有的函数方法都在这个对象之下。

(7)出色的浏览器兼容性。jQuery几乎支持所有的主流浏览器,同时jQuery 还修复了一些浏览器之间的差异。

(8)链式操作方式。jQuery最具有特色的莫过于他的链式操作方式——即同时发生在同一个jQuery 对象的一组动作,可以直接连写而无需重复获取对象。

(9)隐式迭代。当用jQuery找到带有“.myClass”类的全部元素,然后隐藏他们时,无需循环遍历每一个返回的元素。相反,jQuery里的方法都被设计成自动操作对象集合,这使得大量的循环结构变得不再必要,从而大量的减少了代码量。

(10)行为层和结构层的分离。开发者可以使用jQuery选择器选中元素,然后直接给元素添加事件。这种将行为层和结构层完全分离的思想,可以使jQuery开发人员和HTML或者其他页面开发人员各司其职。同时,后期维护也非常方便。

(11)丰富的插件支持。jQuery的易扩张性,吸引了来自全球的开发者来编写jQuery 的扩展插件。目前已经有成百上千的官方插件支持,而且还不断地有新的插件面世。

配置jQuery环境:

jQuery不需要安装,只需将下载好的jQuery.js文件放到网站上的一个公共的位置,想要在某个页面使用jQuery时,只需要在相关的HTML文档中引入该库文件的位置即可。

在Visual Studio中,一般统一将jQuery.js文件放在目录scripts下。在编写的页面代码中的标签中引入jQuery.js后,就可以使用jQuery库了。程序如下:

<head>
<scriptsrc="scripts/jQuery.js"  type="text/javascript"></script>
</head>

学习基础$(document).ready()函数:

在编写一个jQuery代码时,必须以$(document).ready()开头,所有的jQuery代码都必须写在$(document).ready(){}里,格式如下:

$(document).ready(function(){
              //jQuery代码块
});

$(document).ready()括号中的所有代码都会提前执行,而不是在页面所有内容加载完毕之后才执行事件。它允许用户在第一眼看到元素时,就能立即看到元素产生的效果。

为了书写简单,可使用$(function(){......})来代替$(document).ready()函数,作为它的缩写形式,缩写方式如下:

$(function(){
                      //jQuery代码块
});
相关文章
最新文章
热点推荐