胖蔡说技术
随便扯扯

如何使用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>

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » 如何使用JQuery进行网站开发?
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏