Jquery系列（一）基础知识

最新推荐文章于 2022-08-26 20:12:20 发布

IT四王子

最新推荐文章于 2022-08-26 20:12:20 发布

阅读量607

点赞数 1

分类专栏： jquery知识库

本文链接：https://blog.csdn.net/liming363873117/article/details/51735814

版权

jquery知识库专栏收录该内容

4 篇文章 0 订阅

订阅专栏

引言：

我一直觉得jQuery就是JavaScript的后辈，并发扬光大了JavaScript。

概述：

jQuery是继Prototype之后又一个优秀的JavaScript库，它是轻量级的JS库，兼容CSS3，还兼容各种浏览器（IE6.0+、FF1.5+、Safari2.0+、Opera9.0+）。jQuery使用户能够更加方便地处理HTML、events，实现动画效果，并且方便为网站提供Ajax交互。jQuery能够快速、简洁地处理HTML文档、控制事件、操作DOM、给页面添加动画和Ajax效果。

内容：

本部分内容一共分为：jQuery特点、代码编写、以及对象三部分组成。

一 jQuery特点：

1 开发理念：write less，do more 即“写的少、做的多”。

2 具体特点：

（1）轻量级：jQuery库文件代码量非常轻巧，经过压缩后，大小保持在30KB左右。

（2）功能强大的选择器：jQuery支持CSS中几乎所有的选择器，以及jQuery中特有的高级而复杂的选择器。同时，jQuery还可以加入插件使其支持XPath选择器，也允许开发者编写自己的选择器。

（3）对DOM操作进行封装：jQuery中封装了大量的DOM操作。

（4）完善的Ajax的封装：jQuery中将Ajax操作封装到一个函数中，似的开发者无须关心XMLHttpRequest对象的创建和使用等问题，可以专心地编写业务逻辑代码。

（5）广泛的浏览器兼容性：能够在IE6.0+、FF1.5+、Safari2.0+、Opera9.0+和Chrome等主流浏览器中正常执行。jQuery同时修复了一些浏览器之间的差异，使得开发者不必担心程序的适用性。

（6）链式代码方式：对于发生在同一个jQuery对象上的一组动作，可以直接链写而无需重复获取对象。

（7）逻辑代码与表示代码分离：使用jQuery选择器可以直接为元素添加事件，从而将js代码和HTML代码完全分离，便于代码的维护和修改。

（8）丰富的插件：jQuery的扩展性好，支持插件功能。

二代码编写：

1 库文件分类：

（1）Production（产品版）：经过工具压缩，库文件较小，主要用于实际项目的部署；

（2）Development（开发版）：完整无压缩，主要用来进行测试和开发。

2 配置jQuery开发环境：jQuery不需要安装，只要把下载的jQuery.js文件放到网站中的公共部分，只需在想要使用的HTML页面中引入该库文件的位置即可。例如：

<span style="font-size:18px;"><head>
     <script src="jQuery.js"  type="text/javascript"></script>
</head></span>

3 jQuery代码编写：jQuery代码是完全符合JavaScript语法规则，需要注意的是，在jQuery库中$是jQuery的一个简写形式，如$.ajax和jQuery.ajax是完全等价的。

三 jQuery对象：

1 jQuery对象简介：jQuery对象通过jQuery包装DOM对象后产生的对象，由jQuery所独有，可以直接调用对象中的方法，例如HTML代码获取id为liming的元素，传统的写法：document.getElementById("liming").innerHTML;

jQuery的写法：$("#liming").html();

2 jQuery对象与DOM对象的相互转换：在jQuery中无法使用DOM对象的任何方法，同样DOM对象也不能使用jQuery对象的任何方法，因此相互转换是必要的。

（1）jQuery对象转化为DOM对象：jQuery提供了俩种将一个jQuery对象转化为DOM对象的方法，一是[index]，另一个是 get（index）。因为jQuery对象实际是一种类似数组的对象，因此可以通过下标获得相应的DOM对象，代码如下

var $foo = $("#foo");      //jQuery对象
var foo = $foo[0];           //DOM对象
alert  (foo.checked)        //使用DOM对象

另外一种方法是通过jQuery对象的get（index）方法得到相应的DOM对象，代码如下：

var $foo = $("#foo");
var  foo = $foo.get(0);
alert  (foo.checked);

（2）DOM对象转化为jQuery对象：对于DOM对象，只需要使用$()把DOM对象包装起来，就可以获得一个jQuery对象，转化完成得到的jQuery对象，可以使用jQuery中的任何方法。示例如下：

var foo = document.getElementById("foo");
var $foo = $(foo);

总结：

jQuery虽然在JavaScript的基础上发展起来，但是灵活功能强大赋予了它很好的而发展前途。不能说哪一种技术更好，只能说哪一种技术在哪一种需求下更合适。

IT四王子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
28
评论
Jquery系列（一）基础知识

引言：我一直觉得jQuery就是JavaScript的后辈，并发扬光大了JavaScript。概述： jQuery是继Prototype之后又一个优秀的JavaScript库，它是轻量级的JS库，兼容CSS3，还兼容各种浏览器（IE6.0+、FF1.5+、Safari2.0+、Opera9.0+）。jQuery使用户能够更加
复制链接

扫一扫