jQuery（一）基本概念

最新推荐文章于 2024-08-08 19:50:45 发布

原创最新推荐文章于 2024-08-08 19:50:45 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

jQuery/JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文对比了使用JavaScript与jQuery进行Web开发的优缺点，强调了jQuery如何通过提供更多元素查找方法、简化伪数组遍历、解决兼容性问题、简化动画实现及减少代码冗余，使Web开发变得更高效、简单。

使用 javascript 开发过程中，有许多的缺点：

1. 查找元素的方法太少，麻烦。
2. 遍历伪数组很麻烦，通常要嵌套一大堆的 for 循环。
3. 有兼容性问题。
4. 想要实现简单的动画效果，也很麻烦
5. 代码冗余。

jQuery 优点总结：

1. 查找元素的方法多种多样，非常灵活
2. 拥有隐式迭代特性，因此不再需要手写 for 循环了。
3. 完全没有兼容性问题。
4. 实现动画非常简单，而且功能更加的强大。
5. 代码简单、粗暴。

什么是jQuery?

jQuery 的官网 http://jquery.com/
jQuery 就是一个 js 库，使用 jQuery 的话，会比使用 JavaScript 更简单。

js 库：把一些常用到的方法写到一个单独的 js 文件，使用的时候直接去引用这 js 文件就可以了。

我们知道了，jQuery 其实就是一个 js 文件，里面封装了一大堆的方法方便我们的开发，因此我们学习 jQuery ，其实就是学习 jQuery 这个 js 文件中封装的一大堆方法。

jQuery的版本

官网下载地址：http://jquery.com/download/
jQuery 版本有很多，分为 1.x 2.x 3.x

大版本分类：

1.x 版本：能够兼容 IE678 浏览器
2.x 版本：不兼容 IE678 浏览器
1.x 和 2.x 版本 jquery 都不再更新版本了，现在只更新 3.x 版本。

3.x版本：不兼容 IE678 ，更加的精简（在国内不流行，因为国内使用 jQuery 的主要目的就是兼容 IE678）

关于压缩版和未压缩版

jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

jQuery 的入口函数

使用jQuery的三个步骤：

1. 引入 jQuery 文件
2. 入口函数
3. 功能实现

关于 jQuery 的入口函数：

//第一种写法
$(document).ready(function() {
	
});
//第二种写法
$(function() {
	
});

还有一种 jQuery 的入口函数是这样的

(function ($) {
    $(document).ready(function () {
         if ($('.article_list').length > 0) {
            
        }
    });
    
    $.validateCheckbox = function (result) {
        
    }
    
})(jQuery);

jQuery入口函数与js入口函数的对比

1.	JavaScript 的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2.	jQuery 的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

jQuery 对象与 DOM 对象的区别

1. DOM对象：使用 JavaScript 中的方法获取页面中的元素返回的对象就是 dom 对象。
2. jQuery 对象：jquery 对象就是使用 jquery 的方法获取页面中的元素返回的对象就是 jQuery 对象。
3. jQuery 对象其实就是 DOM 对象的包装集（包装了 DOM 对象的集合（伪数组））
4. DOM对象与jQuery对象的方法不能混用。

DOM 对象转换成 jQuery 对象：【联想记忆：花钱】

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象：

var $li = $(“li”);
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)