jQuery基础

最新推荐文章于 2026-01-05 12:22:51 发布

原创最新推荐文章于 2026-01-05 12:22:51 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript

jQuery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了jQuery的基本概念、如何引入库文件、语法特点、选择器的使用、事件处理等内容，并提供了示例代码。

1.什么是jQuery？
jQuery 是一个 JavaScript 库，jQuery 极大地简化了 JavaScript 编程。
jQuery 库包含以下特性：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
向您的页面添加 jQuery 库
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数：

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

2.jQuery下载或替代方案
（1）有两个版本的 jQuery 可供下载：jQuery下载
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
（2）如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它
Google CDN：

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

Microsoft CDN:

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

3.jQuery 语法
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例：

示例
$(this).hide() // 隐藏当前元素
$("p").hide() // 隐藏所有段落
$(".test").hide() // 隐藏所有 class="test" 的所有元素
$("#test").hide() //隐藏所有 id="test" 的元素

文档就绪函数:

$(document).ready(function(){
--- jQuery functions go here ----

});

4.jQuery 选择器
选择器允许您对元素组或单个元素进行操作.
（1）jQuery 元素选择器
- jQuery 使用 CSS 选择器来选取 HTML 元素。
- $(“p”) 选取

元素。
- $(“p.intro”) 选取所有 class=”intro” 的

元素。
- $(“p#demo”) 选取所有 id=”demo” 的

元素。
（2）jQuery 属性选择器
- jQuery 使用 XPath 表达式来选择带有给定属性的元素。
- $(“[href]”) 选取所有带有 href 属性的元素。 -$ (“[href=’#’]”) 选取所有带有 href 值等于 “#” 的元素。
- $(“[href!=’#’]”) 选取所有带有 href 值不等于 “#” 的元素。 -$ ("[href$=’.jpg’]”) 选取所有 href 值以 “.jpg” 结尾的元素。
（3）jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

$("p").css("background-color","red");

5.jQuery 事件
（1）jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>

（2）单独文件中的函数
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

（3）jQuery 名称冲突
jQuery 使用 $符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用$ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。