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框架创建一个高效的移动应用程序...