jQuery的基本使用方法

最新推荐文章于 2024-08-14 17:48:26 发布

林照南

最新推荐文章于 2024-08-14 17:48:26 发布

阅读量1w

点赞数 3

分类专栏：笔记文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_52990325/article/details/126074107

版权

笔记专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了jQuery的基本使用，包括如何引入jQuery，设置样式的三种方式，选择器的应用，以及事件的绑定。jQuery是一个轻量级的JavaScript框架，旨在简化HTML文档操作、事件处理和Ajax交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：学习jQuery基础

前言

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何引入jQuery？

把 jQuery 添加到您的网页

如需使用 jQuery，您需要下载 jQuery 库（会在下面为您讲解），然后把它包含在希望使用的网页中。

1、jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的

<head>
	<script src="jquery.js"></script>
</head>

2、下载 jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

这两个版本都可以从 jQuery.com 下载。

提示：您可以把下载文件放到与页面相同的目录中，这样更方便使用。

3、替代方案

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

百度和微软的服务器都存有 jQuery 。

如需从百度或微软引用 jQuery，请使用以下代码之一：

<head>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
</head>

二、使用步骤(设置样式)

方式1.

代码如下（示例）：

window.onload = function() {} //不推荐

方式2.

代码如下（示例）：

$(document).ready(function() {}); //jQuery推荐的写法

方式3.

代码如下（示例）：

$(function() {
	$("#xxx").css({
		"color": 'red',
		"fontSize": '25px',
		"background": 'pink'
	});
});

三、选择器

基本过滤选择器.

代码如下（示例）：

<ul id="fruit">水果列表
	<li>苹果</li>
	<li>葡萄</li>
	<li>西瓜</li>
	<li class='good'>梨子</li>
	<li class='good'>哈密瓜</li>
	<li>香蕉</li>
</ul>

<script src="jquery-3.6.0.js"></script>
				
<script>	
	//设置 梨子 和 哈密瓜 的字体颜色为红色
	$("#fruit li.good").css('color', 'red');	
</script>

可见性选择器.

代码如下（示例）：

<ul id="fruit">水果列表
	<li>苹果</li>
	<li>葡萄</li>
	<li style="display: inline;">西瓜</li>
	<li style="display: inline;">梨子</li>
	<li>哈密瓜</li>
	<li style="display: none;">香蕉</li>
</ul>
				
<script src="jquery-3.6.0.js"></script>
				
<script>
	$("#fruit li:hidden").css('color', 'red');
	$("#fruit li:visible").css('color', 'pink');
</script>

四、事件

绑定事件.

代码如下（示例）：

<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>