jquery 选择器 E > F

最新推荐文章于 2025-07-08 15:51:16 发布
最新推荐文章于 2025-07-08 15:51:16 发布 · 180 阅读 · 0
文章标签：

#F# #jQuery #CSS #HTML #ViewUI

本文介绍了一个具体的jQuery选择器案例，展示了如何使用E>F选择器来定位特定元素。通过实例代码，解释了如何仅选取作为直接子元素的第一个F元素，并对其应用样式。

E > F

匹配所有的F元素，其中F元素必须为E元素的子元素，且是子元素集合中的第一个。返回匹配的结果集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#main > *").css("border", "3px double red");
  });
  </script>
  <style>
  body { font-size:14px; }
  span#main { display:block; background:yellow; height:110px; }
  button { display:block; float:left; margin:2px; 
           font-size:14px; }
  div { width:90px; height:90px; margin:5px; float:left;
        background:#bbf; font-weight:bold; }
  div.mini { width:30px; height:30px; background:green; }
  </style>
</head>
<body>
  <span id="main">
    <div></div>
    <button>Child</button>
    <div class="mini"></div>
    <div>
      <div class="mini"></div>
      <div class="mini"></div>
    </div>
    <div><button>Grand</button></div>
    <div><span>A Span <em>in</em> child</span></div>
    <span>A Span in main</span>
  </span>
</body>
</html>

 

$("#main > *").css("border", "3px double red");

将匹配span元素中的子元素，并且必须为子元素集合中的第一个元素，以下为匹配的元素（紫色）

<div></div>
<button>Child</button>
<div class="mini"></div>
 <div>
      <div class="mini"></div>
      <div class="mini"></div>
</div>
<div>

     <button>Grand</button>

</div>
<div>

    <span>A Span <em>in</em> child</span>

</div>
<span>A Span in main</span>

HTML-jQuery选择器
南劲竹的博客
09-16 1458
jQuery选择器 jQuery选择器类似于CSS选择器，用来选取网页中的元素 示例:$("h3").css("background","#09F");      1.获取并设置网页中所有&lt;h3&gt;元素的背景      2.“h3”为选择器语法，必须放在$()中      3.$(“h3”)返回jQuery对象      4..css()是为jQuery对象设置样式的方法 ...
JQuery——选择器作业
weixin_44502548的博客
09-24 1008
一、省市级连 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function sel(){ var province=document.getElementById("province").value; var city=document.getElementById("cit
jquery 选择器 E + F
KAXU
12-18 171
E + F 匹配所有的F元素，其中F元素为E元素的下一个元素（紧贴在E元素后的），且仅仅为下一个元素集合中的第一个。返回匹配集合 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;h...
jquery 选择器 E F
KAXU
12-12 233
ancestor descendant 匹配所有的descendant 元素，其中descendant元素必须是ancestor 的子元素。返回匹配的结果集 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose...
通用兄弟元素选择器 E ~ F
xyjikl
07-07 787
版本：CSS3   继承性：无 语法： E ~ F ： {attribute} 说明： 匹配E元素之后的F元素 兼容性： 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×)I
CSS3 E:nth-child、E>F、E~F、E+F以及属性选择器
DevOps海洋的渔夫@专栏
03-04 2139
仅供学习，转载请注明出处 CSS3新增选择器 1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素 <style type="text/css"> .list div:nth-child(2){ background-color:red; } </style> ....
CSS选择符-----关系选择符
anqi771129的博客
12-10 790
包含选择符（E F） 选择所有被E元素包含的F元素 与 子选择符(E>F) 不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子... <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&gt...
关于jquery的多个选择器的使用示例
10-26
jQuery支持多种CSS选择器，包括ID选择器（#id）、类选择器（.class）、元素选择器（tagname）等，以及组合选择器，如：交集选择器（E F，表示同时匹配E和F的元素）、并集选择器（E,F，表示匹配E或F的元素）和后代...
2、jQuery选择器表达式详解
night的博客
06-10 52
本文详细介绍了jQuery选择器表达式的各种类型和用法，包括CSS选择器、后代选择器、子元素选择器、表单选择器、自定义选择器以及属性选择器等。同时探讨了如何优化选择器表达式以提高性能，并提供了实际应用示例。通过掌握这些选择器，开发者可以更高效地编写jQuery代码，提升开发效率和用户体验。
7、jQuery选择器过滤器全解析
www00的博客
07-08 42
本文深入解析了 jQuery 中各种选择器过滤器的使用方法和技巧。涵盖了位置过滤器、子元素过滤器、表单过滤器、内容过滤器以及其他实用过滤器，详细说明了它们的用法、区别和实际应用场景。同时，还提供了实践建议、常见问题解决方法以及使用流程示例，帮助开发者高效利用 jQuery 过滤器提升网页开发效率。
CSS选择符详解之关系选择符篇
weixin_30315723的博客
10-19 197
原文：http://www.chinaz.com/web/2012/1017/278553.shtml 相信大家都对CSS选择符都不陌生，选择符包含：元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符。在众多的选择符中，可以让我们根据自己的需要更加灵活性的选择合适的选择符来对样式进行编写，达到最大的质量和效率。 今天就为大家介绍下选择符中的关系选择符，“关系”这可是一等一的大事...
CSS3知识点总结1
xsc2022的博客
03-15 308
一、后代选择器（Ｅ Ｆ） 前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，中间用空格隔开 .demo li {color: blue;} 二.子元素选择器(E>F） 子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而已 ul > li {background: green;color: yellow;} 三、相邻兄弟元素选择器(E + F) EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素...
html定位方式的选择,CssSelector定位详解
weixin_35188854的博客
06-03 698
目前针对一些常规定位方式有: By.id、By.name、By.LinkTest(针对 标签 )、By.ClassName 针对不太好定位的，比如:没有 id、name、class 的定位方式，或者说 id、name、class 的value 值显示重复，不太方便一下写出定位方式，这样可以考虑下其它定位方式。以下主要介绍 cssSelector 如何解决id 、 name 、 class 的 va...
常用选择器
趙尒七
03-03 203
选择器的优先级： 权重越大，越优先执行谁的样式。 * 没有权重 标签 ：1 类：10 id：100 1. 伪类选择器： E.hover{} 鼠标移动上去 产生的效果 2.后代选择器：（包含孙子+儿子） E F { } 挑选E作为父元素里的所有F标签 3.子代选择器：（选择直接子代，不包含孙子） E&gt;F { } 选择E作为父...
css selector简介
tenfyguo的技术专栏
08-01 1万+
一.Tag selector标签selecor ,也可以称为类型selector，它将对HTML页面中所有的该类型有效。h1 {    font-family:Arial,sans-serif;    color:#CCCCFF;}表示所有h1标签都适用该CSS的rule，当然为了缩短代码，适用相同的rule的多个HTML Tag可以用逗号分隔开进行统一的修饰。如DIV,H1 {}二.Class Selector类选择器和HTML中的class相结合，应用到所有声明了该class的标签中。类选择器必须要
selenium：css_selector定位详解
三丰的博客
11-03 5155
selenium：css_selector定位详解 selenium：css_selector定位详解（css selector和xpath的比较） 来源：https://www.cnblogs.com/haifeima/p/10138154.html 目录 selenium使用css selector和xpath的比较 selenium提供的定位方式（常用） 推荐的定位方式的优先级 针对css selector和xpath的优先级做一个简单的说明 定位元素的注意事项（划重点
linux shell 文件比较、字符串比较、算数等常用指令
热门推荐
一只没有脚的鸟
10-19 3万+
一、文件比较运算符 1. e filename 如果 filename存在，则为真 如： [ -e /var/log/syslog ] 2. -d filename 如果 filename为目录，则为真 如： [ -d /tmp/mydir ] 3. -f filename 如果 filename为常规文件，则为真 如： [ -f /usr/bin/grep ] 4. -L fil
CSS选择器Selector或选择符学习笔记
qq_29545781的博客
09-17 956
1. CSS选择符学习方法及用途 根据CSS参考手册学习CSS选择符，建议采用分类进行学习总结。 CSS参考手册在线：http://css.doyoe.com/ CSS选择符一方便用于CSS编程，另一方面在爬虫中使用较多。 注：爬虫中选择某个特定标签，可以根据正则表达式、BeautifulSoup、CSS选择器、xpath等方法获取，其中CSS选择器使用也是比较多的。 2. CSS选
TSIA 022.1—2021 工业互联网标识解析顶级节点服务能力成熟度第1部分：模型.pdf
最新发布
11-27
TSIA 022.1—2021 工业互联网标识解析顶级节点服务能力成熟度第1部分：模型
jQuery选择器详解与实战应用
jQuery选择器学习笔记是一份适合初学者的教程，详细介绍了如何使用jQuery进行网页元素的选择和操作。该笔记涵盖了丰富的CSS选择器及其在jQuery中的应用，包括： 1. CSS选择器： - 标签选择器: 选择文档中具有指定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值