`
lvailing
  • 浏览: 9690 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

jQuery 初探

阅读更多

 

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,菜鸟学习实战,JQuery初探最int实例材料,0基础

    "JQuery初探最int实例材料"可能包含了从基础操作到高级技巧的实例,涵盖选择器应用、事件处理、动画制作、Ajax通信等多个方面。通过这些实例,初学者能够深入理解jQuery的工作原理,并逐渐掌握其用法。 总之,...

    使用IE6看老赵的博客 jQuery初探

    2. jQuery的初探:文件内容显示,作者刚开始接触jQuery,并尝试使用$.ajax方法来异步获取网页内容。这说明了jQuery库由于其易用性和强大的功能,在初学者中很受欢迎,尤其是在处理AJAX请求和DOM操作上。 3. 页面...

    jquery 源码初探,一步步实现自己的jquery(四)

    在本篇《jquery 源码初探,一步步实现自己的jquery(四)》中,我们将深入探讨jQuery库的核心概念,并尝试逐步构建一个简易版的jQuery,以帮助理解其内部机制。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作...

    [jQuery] jQuery 移动开发技术初探 (英文版)

    [Packt Publishing] jQuery 移动开发技术初探 (英文版) [Packt Publishing] jQuery Mobile First Look (E-Book) ☆ 出版信息:☆ [作者信息] Giulio Bai [出版机构] Packt Publishing [出版日期] 2011年06月23...

    初探jquery——表单应用范例

    ### 初探jQuery——表单应用范例 #### 一、引言 随着Web开发技术的不断进步,jQuery作为一种轻量级的JavaScript库,在前端开发领域占据着举足轻重的地位。它简化了许多复杂的DOM操作,并提供了丰富的插件支持,...

    jQuery Mobile First Look

    《jQuery Mobile初探》 **一、jQuery Mobile概述** jQuery Mobile是基于HTML5技术的开源框架,用于构建响应式移动Web应用。它提供了一套统一的设计模式和UI组件,使得开发者能够快速创建出美观且功能丰富的移动...

    JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探

    JQuery作为一款强大的JavaScript库,被广泛应用于网页的DOM操作、事件处理、动画效果、以及与服务器的数据交互等方面。本文探讨了如何使用JQuery构建一个将客户端和服务端分离的链接模型,并在这个模型中实现高效的...

    easyUI初探

    **EasyUI初探** EasyUI 是一款基于 jQuery 的前端用户界面框架,专为开发者提供一套易于使用、功能强大的组件库,使得开发具有专业外观和交互性的 Web 应用变得简单。EasyUI 提供了诸如窗口、表格、下拉菜单、按钮...

    初试jQuery EasyUI 使用介绍

    jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松...OK,下面就开始我们的初探之旅。jQuery EasyUI—Accordion 手风琴效果,大家应该很熟悉。 基本代码: 代码如下: &lt;htm

    移动开发者必备工具:开源jqTouch初探

    《移动开发者必备工具:开源jqTouch初探》 在当今技术日新月异的时代,移动设备的普及催生了大量针对这些平台的应用程序开发需求。尤其是苹果的iPhone、iTouch和iPad,它们引领了移动设备的新潮流。然而,苹果官方...

    加密网页数据获取初探.pdf

    加密网页数据获取初探 加密网页数据获取是一种非常复杂的技术难题,随着网络爬虫的飞速发展,网页加密技术也在不断发展,导致数据获取变得不再容易。本文主要研究了如何分析加密网页,如何抓住加密防范薄弱之处,以...

    textillate动画初探

    在使用Textillate之前,需要先确保已安装jQuery库。然后,你可以通过以下方式引入Textillate: ```html &lt;!-- 引入jQuery --&gt; &lt;script src="https://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt; &lt;!-- 引入Textillate...

    jogo_da_velha:Meu primeiro Jogo utilizando JQuery

    《基于JQuery实现的井字游戏:初探交互式网页编程》 在IT行业中,网页交互性是提升用户体验的关键因素之一。"jogo_da_velha"项目,即"井字游戏",是我利用jQuery库创建的首个交互式游戏,旨在展示如何通过HTML、CSS...

    Candy-Machine-Game:使用Jquery和Bootstrap制作的猜谜游戏,可在浏览器中运行。 当前只有界面,很快就可以播放

    《Candy-Machine-Game:基于Jquery与Bootstrap构建的浏览器猜谜游戏初探》 在数字娱乐领域,游戏开发始终占据着重要地位,而HTML5的崛起为网页游戏提供了更为广阔的发展空间。本项目“Candy-Machine-Game”正是这样...

    javascript中的事件代理初探

    javascript提供了addEventListener和attachEvent两个方法来为DOM节点绑定事件,jquery作了进一步封装,提供了兼容各个浏览器的bind方法。现在来看,这种传统的事件绑定方式存在着以下不足: 1.可能需要绑定很多的...

    ApiCloud 2048 H5版源码

    在ApiCloud中开发H5版2048,首先需要创建一个项目,然后引入必要的前端库,如jQuery或其他轻量级框架,用于处理DOM操作和事件监听。接着,你需要设计一个数据结构来存储棋盘状态,通常是一个二维数组。游戏逻辑通过...

    Treasure_Island

    《jQuery Mobile与Django RESTful框架整合初探》 在当今的Web开发中,移动设备的普及使得开发者需要关注移动应用的开发。本篇文章将深入探讨如何利用jQuery Mobile和Django RESTful框架创建一个高效的移动应用程序...

Global site tag (gtag.js) - Google Analytics