如何使用JQuery进行网站开发？

JQuery是较早一代的前端开发的利器， 极大地简化了 JavaScript 编程。就目前而言也是大多数网站使用的工具，就轻量型网站开发选择JQuery可以帮助我们快速实现网站的开发工作。本篇文章主要介绍如何使用JQuery进行简单的网站开发。

如何引入JQuery?

jquery就是通过JS的方式来操作界面的DOM，极大的简化我们操作DOM的复杂度。所以，应用方式也是一样的，代码示例如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

不同的是，我们可以根据jquery的来源分为两种类型：

1、本地jquery引入

这种方式就是将jquery的文件放在本地（或者说服务器地址），我们通过地址访问jquery，这种方式的引用优势是三方库可控性大大加强，jquery由我们自己保管维护。

<script src="//domain/jquery/3.4.1/jquery.min.js"></script>

2、CDN引入

CDN可以将一个地方的资源文件分布在不同的网络位置，极大的加快我们的访问速度，节省加载时间，这里介绍几个常用的Jquery免费CDN地址。

• jQuery官网

jquery官方给我们提供了各个版本的jquery CDN地址，但由于外网环境，我们这边可能还是下载比较慢，可以考虑做英文站，海外服务器的时候使用。参考地址可以访问：https://releases.jquery.com/。使用示例如下：

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

• 微软CDN

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js"></script>

• CDNjs

CDNjs是用于专门提供前端CDN服务使用，但同样也是国外的CDN服务，大家慎重选择。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

除了jquery，cdnjs中也可以引用其他公用库的CDN服务。

• jsDeliver

jsDeliver是目前用的比较多的一个CDN服务，虽然服务商是国外的，但是并不太影响国内的使用（目前看来），和上方的CDNjs一样的，它本身也是一个CDN服务提供商，我们也可以使用它来代理请求我们其他需要使用的前端库，大家可以访问地址：https://www.jsdelivr.com/，搜索需要的npm库，jquery使用如下：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js"></script>

• 新浪CDN

新浪CDN可以通过http://lib.sinaapp.com/?path=/jquery 来查找你需要的具体版本Jquery，新浪提供了jquery各个版本的压缩版和未压缩版，可以自己选择使用，使用代码如下：

<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>

另注：现有网上说的百度 Jquery CDN已经不可使用了，所以这里不列出来了。

3、版本选择

这里采用网上已有的一个方案进行选择，分属电脑端和手机端选择不同的jquery版本。选择建议如下：

• 电脑端：为了兼容IE8，建议使用jquery 1.9版本，因为1.9之后jquery就宣布不再兼容IE浏览器了，若无IE兼容要求，可以直接使用jquery最新版本。

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

• 手机端：建议使用jquery最新版本，新版本的jquery对于性能和使用方式上都有很大的改善。

如何使用JQuery?

jquery引入和会在window下挂载一个$和JQuery对象，我们通过如下几个方面了解JQuery使用：

1、进入加载

// 等同于onload函数
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 
 

// 等同于ready函数
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

2、jquery选择器

jquery最神奇和令人惊叹的就是jquery可以通过选择器快速选择html元素和操作：

//筛选ul中li的一个
$("ul li:first").css("color", "#ff0000");
//筛选ul中li的下标值为2的
$("ul li:eq(2)").css("color", "blue");
//筛选ul中li中下标值为奇数的
$("ol li:odd").css("color", "skyblue");
//筛选ul中li中下标值为偶数的
$("ol li:even").css("color", "pink");

3、事件绑定

通过jquery我们可以快速绑定键盘和鼠标事件，示例代码如下：

<script>
	var node = document.getElementById("xxx");
	$(node).css("color","red");//把原生的节点对象，转换成了jQuery对象
		
	//传统方式
	node.onclick = function() {}
	
	//法一：事件名(函数)  即事件名作为 方法名来用
	$("#btn").click(function() {console.log("点击了我");});
	$("#btn").mouseover(function() {console.log("over");});
	$("#btn").mouseout(function() {console.log("out")});
		
	//法二：bind('事件名', 函数)绑定
	$("#btn").bind('click', function() {console.log("点击");});
	$("#btn").bind('mouseover', function() {console.log("鼠标上来...")});
	$("#btn").bind('mouseout', function() {console.log("鼠标出去...")});
			
</script>