jQuery介绍与常见选择器的使用
jQuery简介
jQuery是继Prototype之后又一个优秀的JavaScript库,是一个由John Resig创建与2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI、插件和jQuery Mobile 等开发人员以及推广和网站设计、维护人员。
jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM树、处理事件、执行动画和开发AJAX的操作。其独特而优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之,无论是网页设计师、后台开发者、业务爱好者还是项目管理者,也无论是JavaScript初学者还是JavaScript高手,都有足够多的理由去学习jQuery。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery优势
jQuery强调的理念是写得少,做得多(write less,do more)。jQuery独特的选择器、链式操作、事件处理机制和封装完善的AJAX都是其他JavaScript库望尘莫及的。概括起来,jQuery有以下优势:
1.轻量级(那些说jQuery臃肿的,自己定制库的大神就当我没说)。相对于其他库来说jQuery非常轻巧,采用UglifyJS压缩后,目前最新版压缩后大小在85KB左右(随着版本的不同这个数字可能不一样)。
(题外话:为了使jQuery变得轻巧,jQuery一直在寻求最好的压缩工具,所以jQuery的压缩工具也一直在变化,从最早采用Dean Edward编写的Packer,到后来使用Google Compiler进行压缩,最后到目前使用UglifyJS进行压缩。)
2.强大的选择器。jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器。由于jQuery支持选择器这一特性,因此有一定CSS经验的开发人员可以很容易的切入到jQuery的学习中来。
3.出色的DOM操作的封装。jQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序的时候能够得心应手。通过jQuery可以轻松地完成各种原本非常复杂的操作,让 JavaScript 新手也能写出出色的程序。
4.可靠的事件处理机制。jQuery的事件处理机制吸收了JavaScript专家Dean Edward编写的事件处理函数的精华,使得jQuery在处理事件绑定的时候相当可靠。在预留退路(graceful degradation)、循序渐进以及非***式(Unobtrusive)编程思想方面,jQuery也做得非常不错。
5.完善的AJAX。jQuery将所有的AJAX操作封装到一个函数$.ajax()里,使得开发者处理AJAX的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
6.不污染顶级变量。jQuery只建立一个名为jQuery的对象,其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权,绝对不会污染其他的对象。该特性使jQuery可以与其他JavaScript库共存,在项目中放心的引用而不需要考虑到后期可能的冲突。
7.出色的浏览器兼容性。作为一个流行的JavaScript库,浏览器的兼容性是必须具备的条件之一。jQuery能够在IE6.0+、FF3.6+、Safari5.0+、Opera和Chrome等浏览器下正常运行。jQuery同时修复了一些浏览器之间的差异,使开发者不必在开展项目前建立浏览器兼容库。
8.链式操作方式。jQuery中最具有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作,可以直接连写而无需重复获取对象。这一特点是jQuery的代码无比优雅。
9.隐式迭代。当用jQuery找到带有“.myClass”类的全部元素,然后隐藏它们时,无需循环遍历每一个返回的元素。相反,jQuery里的方法都被设计成自动操作对象集合,而不是单独的对象,这使得大量的循环结构变得不再必要,从而大幅减少代码量。
10.行为层与结构层的分离。开发者可以使用jQuery选择器选中元素,然后直接给元素添加事件。这种将行为层与结构层完全分离的思想,可以使jQuery开发人员和HTML或其他页面开发人员各司其职,摆脱过去开发冲突或个人单干的开发模式。同时,后期维护也非常方便,不需要再HTML代码中寻找某些函数和重复修复HTML代码。
11.丰富的插件支持。jQuery的易扩展性,吸引了来自全球的开发者来编写jQuery的扩展插件。目前已经有成百上千的官方插件支持,而且还不断有新插件面世。
12.完善的文档。jQuery的文档非常丰富,不管是英文文档还是中文文档。
13.开源。jQuery是一个开源的产品,任何人都可以自由地使用并提出改进意见。
注:以上转自《锋利的jQuery》一书
配置jQuery环境
jQuery的环境配置很简单,只需要到官网下载一个.js文件放到工程里就可以了。 官网下载地址:https://jquery.com/download/
图中的Download the compressed, production jQuery 3.2.1是最小化版,代码经过压缩的,一般用于生产环境。 Download the uncompressed, development jQuery 3.2.1则是未压缩版,代码未经过压缩,可供阅读,一般用于开发环境。
下载完成:
打开压缩版的jQuery可以发现,除了注释外,代码中几乎没有空格和换行,这附带在生产环境中可以节省资源:
未压缩版的jQuery代码是正常的格式,在开发时遇到一些特殊的问题就可以参考源码寻找解决方法:
注意:虽然有压缩和未压缩的两种版本,但是两个版本除了在代码压缩之外并没有任何区别,压缩版并没有删减jQuery的功能,未压缩版也没有增加什么功能。
选择一个版本的jQuery,导入工程中,我选择的是min版:
然后在HTML文件中引入jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<body>
</body>
</html>
使用如下语句测试jQuery是否能够正常使用:
<script>
function test(){
alert('Hello jQuery');
}
$(document).ready(test());
</script>
使用浏览器访问该页面,弹出如下对话框则代表没问题:
使用jQuery的选择器
在开始使用jQuery之前,首先应该明确一点,在jQuery库中,就是jQuery的一个简写形式,例如("#foo") 等价于 jQuery("#foo"),.ajax和jQuery.ajax是等价的。如果没有特别的说明,程序中的符号都是jQuery的一个简写形式。既然是简写形式,那么我们来看看jQuery在源码中是怎么定义的:
// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
},
//......以下代码省略......
从以上源码可以看到,jQuery是通过函数表达式定义的,所以它是一个函数(function)对象。
知道jQuery是怎么定义的,那么再来看看$这个别名是怎么定义的,顺便再看看jQuery是如何防止变量冲突的,这段代码是jQuery源码的最后一段:
//......以上代码省略......
var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
// 以上两个私有变量映射了 window 的 jQuery 和 $ 两个对象,以防止变量被强行覆盖
// 这是防止变量冲突,用来释放变量控制权的一个重要函数,deep是一个可选的布尔参数,用以决定移交 $ 引用的同时是否移交 jQuery 对象本身。一旦 noConflict 方法被调用,则通过 _jQuery, _$, jQuery, $ 四者之间的差异,来决定控制权的移交方式。
jQuery.noConflict = function( deep ) {
// 默认处理 $
if ( window.$ === jQuery ) {
window.$ = _$;
}
// 当deep设置为 true 的话,_jQuery 覆盖 window.jQuery,此时 $ 和 jQuery 都将失效。
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
// 无论如何都会返回jQuery对象给jQuery.noConflict
return jQuery;
};
// Expose jQuery and $ identifiers, even in AMD
// (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
// noGlobal函数没被调用就把jQuery对象给window中的 jQuery 和 $
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}
return jQuery;
} );
在使用jQuery时,通过$( )来包装、简化操作,这个括号中可以传递选择器的名称,也可以传递DOM对象。传递DOM对象的话,就是直接包装传递过去的DOM对象。传递选择器的名称则包装的是使用这个选择器的DOM对象。不管传递什么,包装后生成的都是jQuery对象,jQuery对象不能调用DOM对象的方法或属性,例如innerHTML、checked等。jQuery对象只能调用自己的方法,例如html、attr等。而且我们得知道,在DOM树中的每一个节点或者说标签,都是一个对象。
以下演示几个常用的选择器: 1.标签选择器。传入标签的名称,就可以控制所有符合该名称的标签,示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
<script>
$("p").html('hello'); // 给所有的p标签都写入hello
</script>
</html>
运行结果:
hello hello hello hello hello
2.类选择器。传入css中定义的类选择器名称,就可以控制包含该选择器的所有标签,示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<style>
.test{
}
</style>
<body>
<p class="test" ></p>
<p class="test"></p>
<p class="test"></p>
<p></p>
<p></p>
</body>
<script>
$(".test").html('hello'); // 给包含该类选择器的标签都写入hello
</script>
</html>
运行结果:
hello hello hello
3.id选择器。传入标签的id值,然后在值的前面加上 # (与css中的选择器命名一样)即可,无论css中是否有定义该id选择器都可以这么使用,示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<style>
</style>
<body>
<p id='test' ></p>
<p id='test1' ></p>
<p id='test2' ></p>
</body>
<script>
// 给包含该id的标签都写入hello
$("#test").html('hello');
$("#test1").html('hello1');
$("#test2").html('hello2');
</script>
</html>
运行结果:
hello hello1 hello2
属性选择器,同样的和CSS里的使用方式是一样的: p[title] p标记中只要有titile属性即可 p[title='1'] 只要写类title属性并且等于 1 p[title*='1'] 只要属性中包含1即可 p[title^='1'] 只要属性开头是1即可 p[title$=1] 只要属性结尾是1即可
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<body>
<pre title="test" ></pre>
<p title="test2" ></p>
<p title="10086" ></p>
<p title="001" ></p>
<p title="100" ></p>
</body>
<script>
$("pre[title]").html('hello');
$("p[title='test2']").html('hello1');
$("p[title*='86']").html('hello2');
$("p[title^='0']").html('hello3');
$("p[title$='0']").html('hello4');
</script>
</html>
运行结果:
hello hello1 hello2 hello3 hello4
以上只是演示的了一些常见的选择器使用方式,其他的选择器使用方式可以参考以下jQuery的中文文档: https://www.jquery123.com/
简单的事件注册:
通过选择器搜索出来的对象包装后是jQuery对象,所以不能使用DOM中的事件注册方式,需要使用jQuery对象的事件注册方式。示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<body>
<button class="test" >Hi</button>
</body>
<script>
// 当对象被点击,就会执行function里面的代码,这和onclick事件一样
$(".test").click(function(){
alert('hello');
});
</script>
</html>
- Spark调优系列之序列化方式调优
- Spark源码系列之foreach和foreachPartition的区别
- kafka源码系列之mysql数据增量同步到kafka
- Hbase源码系列之BufferedMutator的Demo和源码解析
- Kafka源码系列之0.10版本的Producer源码解析及性能点讲解
- Spark源码系列之spark2.2的StructuredStreaming使用及源码介绍
- Hbase源码系列之scan源码解析及调优
- spark源码系列之内部通讯的三种机制
- Hbase源码系列之regionserver应答数据请求服务设计
- 大数据基础系列之kafkaConsumer010+的多样demo及注意事项
- 大数据基础系列之kafka011生产者缓存超时,幂等性和事务实现
- 大数据基础系列之提交spark应用及依赖管理
- 大数据集群安全系列之kafka使用SSL加密认证
- 基于zookeeper leader选举方式一
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】 原创
- Linux(Ubuntu 18.04)上安装Anaconda步骤详解
- php web环境和命令行环境下查找php.ini的位置
- PHP大文件分块上传功能实例详解
- Linux 命令行通配符及转义符的实现
- Python爬虫抓取指定网页图片代码实例
- PHP变量作用域(全局变量&局部变量)&global&static关键字用法实例分析
- CentOS 7 安装Chrome浏览器的方法
- PHP高级编程之消息队列原理与实现方法详解
- thinkphp5.1框架模板布局与模板继承用法分析
- Linux内核设备驱动之内存管理笔记整理
- Matplotlib 绘制饼图解决文字重叠的方法
- Yii 实现数据加密和解密的示例代码
- 3分钟看懂Python后端必须知道的Django的信号机制
- Hadoop 2.X新特性回收站功能的讲解