jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中：<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
下面的例子演示了 jQuery 的 hide() 函数，隐藏了 HTML 文档中所有的 <p> 元素。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
jQuery 选择器
在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。
关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。
在 HTML DOM 术语中：
选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。
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初探最int实例材料"可能包含了从基础操作到高级技巧的实例，涵盖选择器应用、事件处理、动画制作、Ajax通信等多个方面。通过这些实例，初学者能够深入理解jQuery的工作原理，并逐渐掌握其用法。 总之，...
2. jQuery的初探：文件内容显示，作者刚开始接触jQuery，并尝试使用$.ajax方法来异步获取网页内容。这说明了jQuery库由于其易用性和强大的功能，在初学者中很受欢迎，尤其是在处理AJAX请求和DOM操作上。 3. 页面...
在本篇《jquery 源码初探，一步步实现自己的jquery（四）》中，我们将深入探讨jQuery库的核心概念，并尝试逐步构建一个简易版的jQuery，以帮助理解其内部机制。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作...
[Packt Publishing] jQuery 移动开发技术初探 (英文版) [Packt Publishing] jQuery Mobile First Look (E-Book) ☆ 出版信息：☆ [作者信息] Giulio Bai [出版机构] Packt Publishing [出版日期] 2011年06月23...
### 初探jQuery——表单应用范例 #### 一、引言 随着Web开发技术的不断进步，jQuery作为一种轻量级的JavaScript库，在前端开发领域占据着举足轻重的地位。它简化了许多复杂的DOM操作，并提供了丰富的插件支持，...
《jQuery Mobile初探》 **一、jQuery Mobile概述** jQuery Mobile是基于HTML5技术的开源框架，用于构建响应式移动Web应用。它提供了一套统一的设计模式和UI组件，使得开发者能够快速创建出美观且功能丰富的移动...
JQuery作为一款强大的JavaScript库，被广泛应用于网页的DOM操作、事件处理、动画效果、以及与服务器的数据交互等方面。本文探讨了如何使用JQuery构建一个将客户端和服务端分离的链接模型，并在这个模型中实现高效的...
**EasyUI初探** EasyUI 是一款基于 jQuery 的前端用户界面框架，专为开发者提供一套易于使用、功能强大的组件库，使得开发具有专业外观和交互性的 Web 应用变得简单。EasyUI 提供了诸如窗口、表格、下拉菜单、按钮...
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松...OK，下面就开始我们的初探之旅。jQuery EasyUI—Accordion 手风琴效果，大家应该很熟悉。 基本代码： 代码如下: <htm
《移动开发者必备工具：开源jqTouch初探》 在当今技术日新月异的时代，移动设备的普及催生了大量针对这些平台的应用程序开发需求。尤其是苹果的iPhone、iTouch和iPad，它们引领了移动设备的新潮流。然而，苹果官方...
加密网页数据获取初探 加密网页数据获取是一种非常复杂的技术难题，随着网络爬虫的飞速发展，网页加密技术也在不断发展，导致数据获取变得不再容易。本文主要研究了如何分析加密网页，如何抓住加密防范薄弱之处，以...
在使用Textillate之前，需要先确保已安装jQuery库。然后，你可以通过以下方式引入Textillate： ```html <!-- 引入jQuery --> <script src="https://code.jquery.com/jquery.min.js"></script> <!-- 引入Textillate...
《基于JQuery实现的井字游戏：初探交互式网页编程》 在IT行业中，网页交互性是提升用户体验的关键因素之一。"jogo_da_velha"项目，即"井字游戏"，是我利用jQuery库创建的首个交互式游戏，旨在展示如何通过HTML、CSS...
《Candy-Machine-Game:基于Jquery与Bootstrap构建的浏览器猜谜游戏初探》 在数字娱乐领域，游戏开发始终占据着重要地位，而HTML5的崛起为网页游戏提供了更为广阔的发展空间。本项目“Candy-Machine-Game”正是这样...
javascript提供了addEventListener和attachEvent两个方法来为DOM节点绑定事件，jquery作了进一步封装，提供了兼容各个浏览器的bind方法。现在来看，这种传统的事件绑定方式存在着以下不足： 1.可能需要绑定很多的...
在ApiCloud中开发H5版2048，首先需要创建一个项目，然后引入必要的前端库，如jQuery或其他轻量级框架，用于处理DOM操作和事件监听。接着，你需要设计一个数据结构来存储棋盘状态，通常是一个二维数组。游戏逻辑通过...
《jQuery Mobile与Django RESTful框架整合初探》 在当今的Web开发中，移动设备的普及使得开发者需要关注移动应用的开发。本篇文章将深入探讨如何利用jQuery Mobile和Django RESTful框架创建一个高效的移动应用程序...