html层次选择器例题,详解强大的jQuery选择器之基本选择器、层次选择器

jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件,参考上篇:jQuery插件原来如此简单——jQuery插件的机制及实战)。正是jQuery强大的选择器功能,让它很容易上手,吸引了大批的开发者,本文就来介绍一下强大的jQuery选择器。

jQuery选择器类型

jQuery选择器主要分为四类:

1、基本选择器

2、层次选择器

3、过滤选择器

4、表单选择器

由于过滤选择器内容比较多,因此本文仅介绍前两种,下篇文章将介绍后两种。

一点准备工作

为了能让大家看到具体的效果,这里先创建一个示例页面,里面包含各种

和元素,然后用jQuery选择器来匹配元素并调整它们的样式。

示例页面代码:

Demo

div,span,p{

width:140px;

height:140px;

margin:5px;

background:#aaa;

border:#000 1px solid;

float:left;

font-size:17px;

}

div.mini{

width:55px;

height:55px;

background-color:#aaa;

font-size:12px;

}

div.hide{

display:none;

}

id为one,class为one的div

class为mini

id为two,class为one,title为test的div

class为mini,title为other
class为mini,title为test
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini
class为mini,title为tesst

style的display为none的div

class为hide的div

包含input的type为hidden的div

正在执行动画的span元素

基本选择器

基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。在网页中,每个id名称只能用一次,class允许重复使用。

基本选择器规则如下:

基本选择器

选 择 器

描 述

返 回

示 例

#id

根据给定的id匹配一个元素

单个元素

$("#test")选取 id 为 test 的元素

.class

根据给定的类名匹配元素

集合元素

$(".test")选取所有 class 为 test 的元素

element

根据给定的元素名匹配元素

集合元素

$("p")选取所有的

元素

*

匹配所有元素

集合元素

$("*")选取所有的元素

selector1,selector2,

...,selectorN

将每一个选择器匹配到的元

素合并后一起返回

集合元素

$("div,span,p.myClass")选取所有

和拥有class为 myClass 的

标签的一组元素在线演示 http://demo.jb51.net/js/2012/jquery_demo/jQuery基本选择器示例.html

层次选择器

如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素和兄弟元素等,那么层次选择器是一个非常好的选择。

层次选择器规则如下:

层次选择器

选 择 器

描 述

返 回

示 例

$("ancestor descendant")

选取ancestor元素里所有

descendant(后代)元素

集合元素

$("div span")选取

里的所

有的元素

$("parent>child")

选取parent元素下的child(子)元素

集合元素

$("div>span")选取

元素下

元素名是的子元素

$("prev+next")

选取紧接在prev元素后的next元素

集合元素

$(".one+div")选取class为one的

下一个

兄弟元素

$("prev~siblings")

选取prev元素之后的所有siblings元素

集合元素

$("#two~div")选取id为two的元素

后面所有

兄弟元素在线演示 http://demo.jb51.net/js/2012/jquery_demo/jQuery层次选择器示例.html

在层次选择器中,第1个和第2个比较常用,而后面两个因为在jQuery里可以用更加简单的方法代替,所以使用的机率相对较少。

可以用next()方法来代替$("prev+next")选择器,即$(".one+div")与$(".one").next("div")等效。

可以用nextAll()方法来代替$("prev~siblings")选择器,即$(".one~div")与$(".one").nextAll("div")等效。

小结

本文主要介绍了jQuery选择器中的基本选择器和层次选择器,并对每种类型的选择器给出了示例代码,希望能对大家有所帮助。本人也是jQuery的初学者,欢迎大家拍砖。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/533291.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cesium 经纬度绘制点_炫酷大屏地图自定义绘制(一)

现在数据中台的概念炒的火热,那在收集到数据后就要想办法去设计大屏,可视化展现。往往大屏都会涉及到地理位置的显示。对于常见的省市区,网上都已经提供了地理json数据,那对于需要定制化的我们要怎么处理呢?首先我们还…

关于python语言和人工智能下哪个说法不正确_“在资源管理器”窗口中,文件夹图标左侧有“...

【单选题】表示串行数据传输速率的指标为:___。【单选题】串行口工作在方式0时,其波特率:___。【简答题】发布混合碱含量的测定三个锥形瓶的滴定终点颜色【简答题】将自己做的三个锥形瓶的滴定终点颜色拍照发上来(三个瓶子并排摆在白色托盘中)【单选题】Guido van Rossum正式对…

html瞄点四大名著有图片,四大名著手抄报图片图和文字资料

四大名著之【三国演义】罗贯中(1330年一1400年之间),名本,号湖海散人,明代通俗小说家。他的籍贯一说是太原(今山西),一说是钱塘(今浙江杭州),不可确考。据传说,罗贯中曾充任过元末农民起义军张士诚的幕客&a…

shell181网格划分_ANSYS软件中SHELL181单元参数详解(1)

SHELL181单元说明SHELL181单元适合对薄的到具有一定厚度的壳体结构进行分析。它是一个4结点单元,每个结点具有6个自由度:x,y,z方向的位移自由度和绕X,Y,Z轴的转动自由度。(如果应用了薄膜选项的话,那该单元则只有移动自由度了)。简并三角形选…

怎样查询2021高考模拟成绩,2021年高三一模二模三模哪个成绩更接近高考成绩,看看网友是怎么评论...

2021年高三一模二模三模哪个成绩更接近高考成绩虽然大多数人认为一模的成绩最接近高考,基本定型了,但高考变幻莫测,成绩很有可能发生变化,成绩升降都是很难说的。高三一模之后成绩也没有定型,还有最后逆转的机会。高考…

lisp 标记形心_标记-整理算法

定义该算法分为标记和整理两个阶段,标记阶段会遍历并标记活动对象,整理阶段通过数次搜索堆来重新装填活动对象,它们聚集到了堆的一端。lisp2算法forwarding指针表示活动对象的目标地址过程概要初始状态标记结束后整理结束后整理阶段伪代码com…

js遍历json数组给html td赋值,JS实现给json数组动态赋值的方法示例

关注微信公众号JS实现给json数组动态赋值的方法示例转载 更新时间:2017年07月04日 10:19:00 作者:小魏的马仔这篇文章主要介绍了JS实现给json数组动态赋值的方法,结合实例形式分析了javascript针对json数组的遍历、赋值等常用操作技巧,需要的朋友可以…

甘肃民族师范学院计算机科学系,甘肃民族师范学院计算机科学与技术专业2016年在甘肃理科高考录取最低分数线...

类似问题答案衡阳师范学院计算机科学与技术专业2016年在甘肃理科高考录取最低分数线学校 地 区 专业 年份 批次 类型 分数 衡阳师范学院 甘肃 计算机科学与技术 2016 二批 理科 448 学校 地 区 专业 年份 批次 类型 分数 衡阳师范学院 甘肃 计算机科学与技术 2016 二批 理科 44…

python面试题百度云下载_分享三道Python经典面试题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼验证邮箱格式验证邮箱的格式,不同语言的实现大同小异,通过正则表达式是最快捷的匹配方式,但对于不熟悉正则的同学看着一长串匹配符还是比较头痛的,其实也没那么恐怖。熟悉python 中正…

计算机科学与技术专业实习招聘,中科院研究生院招聘GIS或计算机专业实习生

中科院研究生院招聘GIS或计算机专业实习生由于项目需要,中科院研究生院特招聘GIS或计算机方向实习生,具体要求如下:项目名称:油气田WebGIS系统招聘人数:1人(目前已有1人)主要工作是根据油气田生产需要,实现WebGIS支持下…

r语言regexpr函数_R语言学习笔记-文本挖掘之字符处理(1)

在挖掘分析的过程当中对字符串的处理是极为重要的,且出现也较为频繁,R语言作为当前最为流行的开源数据分析和可视化平台,虽然文本的处理并不是它的强项, 但是R语言还是包含大量的字符串操作工具,本章着重整理了部分常用字符处理函…

html div如何列对其,CSS:自适应N列布局如何解决两端对齐

关于每行N列的这种布局,存在一个两端对齐的问题,因为每一列都会存在一个margin-left或者margin-right,导致最后一个超出父元素的边界。通过一番努力,终于解决了这个遗留很久的问题,废话不多说,先看做完之后…

v380智能快配连接不上怎么办_Win7系统电脑设置连接远程桌面的操作方法

Win7系统电脑远程桌面无法连接怎么办?Win7怎么设置连接远程桌面?请看下文具体操作步骤。一般情况下,对Win7的远程连接只需要5步即可完成远程连接的设置:1)查询并记录远程计算机的IP,开始——运行——输入cmd&#xff0…

计算机专业买win,新买的电脑是win10系统,有的人却费尽心思重装成win7,为什么呢...

简单地说,现在的新电脑几乎都是最新的windows系统,而厂商通常预装的是windows10家庭版,虽说没有多强的功能,但也能够满足我们日常使用的需求。重要的是预装的win10系统是正版的!但不难发现,即便是正版的win…

wireshark网卡权限_网络分析系列之六_Wireshark安装

Wireshark对常见操作系统都支持安装,包括Windows系统、Mac OS X以及基于Linux的系统。你可以在Wireshark的官方网站上,查找所有 Wireshark支持安装的操作系统列表,以及系统版本和硬件要求信息。Wireshark安装系统支持和要求截止Wireshark版本…

c# 替换html注释,C# 替换div标签

C# 替换div标签0fillm2013.11.06浏览24次分享举报estyle"BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; WIDTH: 300px; HEIGHT: 200px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid"iddivMediaPlayer>codebase,http://download.ma…

使用物理硬盘_硬盘坏道的几种非专业修复方法介绍

在使用计算机的过程中,我们最担心的就是硬盘出现故障,因为一旦硬盘出现故障就意味着我们的数据受到了严重的威胁。在诸多的硬盘故障中,硬盘坏道是最常见也是最让人头疼的故障之一了。硬盘坏道介绍:引起坏道的原因很多,…

应理解计算机专业的学科特点,职业高中计算机专业测验试题编写的策略初探.doc...

职业高中计算机专业测验试题编写的策略初探职业高中计算机专业测验试题编写的策略初探摘 要 教学检测既是检验教学成败的重要工具,又是改进其教学工作,提高教学质量的保证;计算机专业教学检测的内容、难度、实施程序等都必须根据计算机专业教学目的、要求及其内容来制定;计算机…

jenkins vue 打包特别慢_从零开始 使用VUE开发桌面客户端

Electron 是一个非常强大的工具,它可以用来构建跨平台的桌面应用,编写一次到处运行。知乎视频​www.zhihu.com0. 准备工作安装好nodejs在终端中输入 node -v 看到版本号即为成功node -v # 输出 v14.11.0安装一个IDE,推荐使用vscode安装cnpm 包…

html input 上标,javascript – 文本类型的输入字段中的上标

插件怎么样:$.fn.superScript function() {var chars −()0123456789AaᴂɐɑɒBbcɕDdEeƎəɛɜɜfGgɡɣhHɦIiɪɨᵻɩjJʝɟKklLʟᶅɭMmɱNnɴɲɳŋOoɔᴖᴗɵȢPpɸrRɹɻʁsʂʃTtƫUuᴜᴝʉɥɯɰʊvVʋʌwWxyzʐʑʒꝯᴥβγδθφχнნʕⵡ,sup ⁺⁻…