JQuery介绍-组团学

一、jQuery简介

概述

jQuery是一套简洁、快速、灵活的JavaScript脚本库，它是由John Resig于2006年底创建的，他帮助人们简化了JavaScript代码。由于jQuery简便易用，文档非常丰富，已被大量的开发人员使用
使用Jquery可以极大地提高编写JavaScript代码的效率，让书写出来的代码更加简洁健壮。同时网络上丰富的jQuery插件也让开发人员的工作变得更为轻松，让项目的开发效率有了质的提升
jQuery不但为开发人员提供了灵活的开发环境，并且它是开源的，在其背后有很强大的社区和程序爱好者的支持

特点

代码精致小巧

jQuery是一个轻量级的JavaScript脚本库，其代码非常小巧，最新本版的jQuery库文件压缩之后只有几十K。在网络盛行的今天，提高网站用户的体验性显的尤为重要，小巧的jQuery完全可以做到这一点
强大的功能函数

过去在写JavaScript代码时，如果没有良好的基础，很难写出复杂的JavaScript代码。JavaScript是不可编译的语言，在复杂的程序结构中调试错误是一件非常痛苦的事情，大大降低了开发效率。使用jQuery的功能函数，能够帮助开发人员快速地实现各种功能,而且会让代码优雅简洁，结构清晰
跨浏览器

关于JavaScript代码的浏览器兼容问题一直是Web开发人员的噩梦，经常是页面在IE浏览器下运行正常，但在Firefox下却不兼容，这就需要开发人员在一个功能上针对不同的浏览器编写不同的脚本代码，这无疑是一件非常痛苦的事情。jQuery成功的将开发人员从这个噩梦中解脱出来，jQuery具有良好的兼容性，它兼容各大主流浏览器，支持的浏览器包括 IE 6.0+, Firefox 1.5+, Safari 2.0+, Opera 9.0+
链式的语法风格

jQuery可以对元素的一组操作进行统一的处理，不需要重新获取对象。也就是说可以基于一个对象进行一组操作，这种方式精简了代码量，减小了页面体积，有助于浏览器快速加载页面，提高用户的体验性
插件丰富

除了jQuery本身带有的一些特效外，可以通过插件实现更多的功能，如表单验证、拖放效果、Tab导航条、表格排序、树型菜单以及图像特效等。网上的jQuery插件很多，可以直接下载下来使用，并且插件是将JavaScript代码和HTML代码完全分离，便于维护

下载

官网：http://www.jquery.com

生产版与开发版区别：功能完全相同，只不过生产版进行了压缩，使文件变得更小，并且踢出了一些不必要的调试打印

二、第一个jQuery程序

说明：将jQuery库下载到本地计算机后，还需要在项目中配置jQuery库。即将下载后的文件放置到项目的指定文件夹中，通常放在js文件夹中，然后在需要应用jQuery的页面中使用下面的语句，将其引用到文件中

注意：引用jQuery的<script>标签，必须放在所有的自定义脚本文件的<script>之前，否则在自定义的脚本代码中找不到jQuery脚本库

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        
        <script type="text/javascript">
            //实现在页面载入完毕后，弹出一下提示对话框
            $(document).ready(function(){
                alert("sunck is a good man");
            })
            // window.onload = function(){
            //     alert("--------1");
            // }
            // window.onload = function(){
            //     alert("--------2");
            // }
            alert("****");
        </script>
	</body>
</html>

$(document).ready()与window.load()区别：

window.load()方法是在页面所有的内容都载入完毕后才会执行的，例如图片、横幅等。而$(document).ready()方法则是在DOM元素载入就绪后执行
在一个页面中可以放置多个$(document).ready()方法，而window.load()方法在页面上只允许放置一个（常规情况）
这两个方法可以同时在页面中执行，两者并不矛盾。不过，通过上述描述我们可以知道，$(document).ready()方法比window.load()方法载入速度更快

三、jQuery对象和DOM对象

准备页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="box" style="width: 100px;height: 100px;background-color: red"></div>
	</body>
</html>

DOM对象

var jsDiv = document.getElementById("box");
console.log(jsDiv);

jQuery对象
- 通常在变量前加上$
- jQuery对象就是通过jQuery包装DOM对象后产生的对象
- jQuery对象是独有的，可以使用jQuery里的方法
- 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里面的方法
```
var $jqDiv = $("#box");
console.log($jqDiv);
```

jQuery对象和DOM对象的相互转换

jQuery对象转换成DOM对象

var jsDiv2 = $jqDiv[0];
var jsDiv3 = $jqDiv.get(0);
console.log(jsDiv2);
console.log(jsDiv3);

DOM对象转换成jQuery对象

var $jqDiv2 = $(jsDiv);
console.log($jqDiv2);