jQuery核心知识点

最新推荐文章于 2023-05-11 09:18:23 发布

我是小飞熊

最新推荐文章于 2023-05-11 09:18:23 发布

阅读量94

点赞数

分类专栏： AJAX

本文链接：https://blog.csdn.net/weixin_47542175/article/details/118437376

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery的基本概念、安装方法、语法结构，特别是选择器和事件处理，以及如何使用jQuery进行AJAX操作。jQuery简化了JavaScript编程，提供了方便的元素选择、操作和事件绑定功能，同时其AJAX功能使得动态网页更新变得轻松。通过实例代码展示了如何实现点击按钮隐藏段落和加载外部内容到页面中。

摘要由CSDN通过智能技术生成

文章目录

一、jQuery是什么

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。

jQuery 库可以通过一行简单的标记被添加到网页中。
Query 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

二、jQuery安装

如需使用 jQuery，需要下载 jQuery 库，然后把它包含在希望使用的网页中。
1、下载
有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
这两个版本都可以从 jQuery.com 下载。

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

2、引用
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

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

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。
微软服务器存有 jQuery 。以下是微软服务器的引用方法。

Microsoft CDN:

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

三、jQuery 语法

1、描述：
jQuery 语法是为 HTML 元素的选取编制的，可以对HTML元素执行某些操作。

2、基础语法：
$(selector).action()

3、语法含义：
$：定义 jQuery
(selector）：“查询”和“查找” HTML 元素
action() ：执行对元素的操作

四、jQuery选择器

1、描述：
jQuery选择器分为：元素选择器、属性选择器和CSS选择器，允许您通过标签名、属性名或内容对 HTML 元素进行选择；或改变HTML元素属性。

2、元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。

$(“p”) 选取<p> 元素。
$(“p.intro”) 选取所有 class=“intro” 的 <p> 元素。
$(“p#demo”) 选取所有 id=“demo” 的 <p> 元素。

3、属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。
$("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素。
$("[href!=’#’]") 选取所有带有 href 值不等于 “#” 的元素。
$("[href$=’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素。

4、CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：
$(“p”).css(“background-color”,“red”);

五、jQuery 事件

1、描述：
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
2、实例
通常会把 jQuery 代码放到部分的事件处理方法中：

<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>我是永恒的存在</h2>
<p>点按钮我会消失，不信你试试。</p>
<p>我也会一起消失，不信你试试。</p>
<button>试试就试试</button>
</body>

</html>

试试就试试：
在桌面新建一个test.html文件，编辑并复制上述内容，保存后用鼠标双击打开，试试看

在上面的例子中，当按钮的点击事件被触发时会调用一个函数：
$(“button”).click(function() {…some code… } )

该方法隐藏所有

元素：
$(“p”).hide();

3、函数绑定

$(document).ready(function)：将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)：触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)：触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)：触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)：触发或将函数绑定到被选元素的鼠标悬停事件

六、jQueryAJAX

1、什么是AJAX
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

2、jQueryAJAX
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。
不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

3、jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：
$(selector).load(URL,data,callback);

URL 参数是必需的，规定您希望加载的 URL。
data 参数是可选的，规定与请求一同发送的查询字符串键/值对集合。
callback 参数是可选的，load() 方法完成后所执行的函数名称。

创建示例文件：demo_test.txt

<h2>jQuery and AJAX 真的好奇妙!!!</h2>
<p id="p1">不信你试试.</p>

下面的例子会把文件 “demo_test.txt” 的内容加载到指定的<div> 元素中：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script>
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test").load("demo_test.txt");
  })
})
</script>
</head>

<body>

<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>

</body>
</html>