Java开发初学者指南：如何正确引入JQuery

发表时间: 2021-08-05 17:39

1.JQuery入门

1.1 什么是jQuery

javascriptQuery(js库)

目前最流行的JavaScript函数库，对JavaScript进行了封装。

并不是一门新语言。将常用的、复杂的操作进行函数化封装，直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

由美国人John Resig在2006年推出，目前最新版本是v3.5.1。

宗旨：Write less，do more（写更少代码，做更多事情）

可去官网详细了解

1.2 jQuery有三个大版本：

1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.5.1

每个版本都对应着两个类型，压缩版和开发版

压缩版针对一些空白字符进行压缩以及部分标识符做了简化，从而减少了在网络传输的带宽，提高了传输效率，并且提高了网页加载的速度

开发版有助于我们在开发时期研究源码。

1.3 为什么学习jQuery

原生JS存在以下一些问题：

1. JS书写代码的时候结构比较的臃肿

2. JS获得元素对象的方式比较的单一

3. JS书写的代码浏览器的兼容性比较差

4. JS实现动画的效果比较的麻烦

首先通过代码演示使用原生JS和JQuery来设置div的宽度、高度以及背景。

先通过设置三个div，分别使用原生JS获取对应的div元素，代码如下所示:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JQuery入门</title><style>* {margin: 0;padding: 0;}div {width: 100px;height: 100px;border: 1px solid #000;}</style><script>// 通过原生JS来获取元素var div1 = document.getElementsByTagName("div")[0];var div2 = document.getElementsByClassName("div1")[0];var div3 = document.getElementById("div2");/*注意这样获取到元素的结果是 undefined,undefined,null 原因在于浏览器引擎在解析的时候从上往下解析，所以HTML DOM对象还没有加载就直接获取 解决办法: 需要在页面加载完成之后再来获取元素*/console.log(div1);console.log(div2);console.log(div3);window.onload = function () {var div1 = document.getElementsByTagName("div")[0];var div2 = document.getElementsByClassName("div1")[0]; Var div3 = document.getElementById("div2");console.log(div1);console.log(div2);console.log(div3);}</script></head><body><div></div><div class="div1"></div><div id="div2"></div></body></html>接下来我们采用JQuery的方式来获取元素，代码如下所示:<script src="js/jquery-1.12.4.js"></script>// 采用JQuery的方式来获取 $(function() {// 1. 引入JQuery，注意引入JQuery的书写位置必须要在使用JQuery代码之前引入// 2. 通过JQuery的方式获取元素var $div1 = $("div")[0];var $div2 = $(".div1")[0];var $div3 = $("#div2")[0];console.log($div1);console.log($div2);console.log($div3); });

最后我们分别来通过原生JS和JQuery来设置div的宽高和背景，代码如下所示:

div1.style.background = "red";div2.style.background = "green";div3.style.background = "blue";div3.style.width = "300px";div3.style.height = "300px";

JQuery设置样式:

// 采用JQuery的方式来获取$(function() {// 1. 引入JQuery，注意引入JQuery的书写位置必须要在使用JQuery代码之前引入// 2. 通过JQuery的方式获取元素var $div1 = $("div");var $div2 = $(".div1");var $div3 = $("#div2");console.log($div1);console.log($div2);console.log($div3);$div1.css({background: "red"})$div2.css({background: "green"}) $div3.css({width: "300px",height: "300px",background: "blue"})});

通过对比我们很容易发现JQuery相对JS来说，方便太多了，JS书写代码的时候结构比较的臃肿，JS获得元素对象的方式比较的单一，JS设置样式的时候比较繁琐，而JQuery则可以通过类似于CSS选择器的方式来获取元素，并且通过设置CSS样式的方式来实现JS样式的设置，代码非常简洁，除此之外JQuery还能够非常方便的处理动画以及处理我们开发中最为头疼的浏览器兼容问题。所以JQuery的学习非常有必要。

Java开发初学者指南：如何正确引入JQuery

热门阅读

推荐阅读