提示：学习jQuery基础
文章目录
前言
jQuery系统定制开发是一个快速、简洁的JavaScript框架，是继Prototype系统定制开发之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery系统定制开发设计的宗旨是“write Less，Do More”，系统定制开发即倡导写更少的代码，系统定制开发做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
提示：以下是本篇文章正文内容，下面案例可供参考
一、如何？
- 把 jQuery 添加到您的网页
如需使用 jQuery，您需要下载 jQuery 库（会在下面为您讲解），然后把它包含在希望使用的网页中。
1、jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的
<head> <script src="jquery.js"></script></head>- 1
- 2
- 3
2、下载 jQuery
有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。Development version - 用于测试和开发（未压缩，是可读的代码）- 1
- 2
这两个版本都可以从 jQuery.com 下载。
提示：您可以把下载文件放到与页面相同的目录中，这样更方便使用。
3、替代方案
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。
百度和微软的服务器都存有 jQuery 。
如需从百度或微软引用 jQuery，请使用以下代码之一：
<head> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script></head>- 1
- 2
- 3
二、使用步骤(设置样式)
方式1.
代码如下（示例）：
window.onload = function() {} //不推荐- 1
方式2.
代码如下（示例）：
$(document).ready(function() {}); //jQuery推荐的写法- 1
方式3.
代码如下（示例）：
$(function() { $("#xxx").css({ "color": 'red', "fontSize": '25px', "background": 'pink' });});- 1
- 2
- 3
- 4
- 5
- 6
- 7
三、选择器
基本过滤选择器.
代码如下（示例）：
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
可见性选择器.
代码如下（示例）：
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
四、事件
绑定事件.
代码如下（示例）：
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
总结
以上就是jQuery的基础，本文仅仅简单介绍了jQuery的基本使用。