jquery学习

最新推荐文章于 2025-08-06 16:42:26 发布

weixin_30478923

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量38

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tiger4066/p/4761785.html

本文介绍如何下载及使用jQuery库，包括将其添加到网页的方法、通过CDN引用的方式、使用文档就绪函数的原因，以及多种选择器的用法示例。

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

1、下载jQuery，并放在网站文件夹。

2、把 jQuery 添加到您的网页

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

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

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

请注意，<script> 标签应该位于页面的 <head> 部分。

提示：您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？

在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

替代方案

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

谷歌和微软的服务器都存有 jQuery 。

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

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

许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

3.文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。

隐藏自身代码示例：

jQuery 语法实例

$(this).hide()

演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide()

演示 jQuery hide() 函数，隐藏 id="test" 的元素。

$("p").hide()

演示 jQuery hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()

演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

4,jQuery 选择器

jQuery 元素选择器

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

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

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

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

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

下面的例子把所有 p 元素的背景颜色更改为红色：

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

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

jquery学习

替代方案

4,jQuery 选择器

jQuery 元素选择器

jQuery 属性选择器

jQuery CSS 选择器

更多的选择器实例