名称 用法 描述 子代选择器 $(“ul>li”) 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 后代选择器 $(“ul li”) 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等...跟CSS的选择器一模一样。...div>44 55 66 77 88 $(function () { //$("s1,s2")// 并集选择器 //$("s1 s2")// 后代选择器 //$...("s1>s2")// 子代选择器 //$("li.green") //$("s1s2") //交集选择器 //$("#father>p").css
在$("div + #test")中能取到p段落节点 则不能取到 6.属性选择器...: 把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"...这个和$("div a")不相同.后者表示div中的a标签,返回的是a标签对象,前者返回的是div标签对象 冒号限定结点选择器:$("mix:condition"):mix标签,并且满足限定条件....:选取单前节点的父节点 @:选取属性,这个在之前说过了(属性选择器) nodename:选取节点下的所有节点 jQuery中的应用: 根节点是很少用到的,常用的如下面的例子: $("div/p")相当于...,选择器来源):这个举例说明 $("input:radio",document.forms[0]):在文档的第一个表单中,搜索所有单选按钮 $("div",xml.responseXML):查询指定XML
在css中，选择器可以获取元素，为其添加css样式；但zepto框架与css选择器相比，它更加强大，因为zepto选择器为元素添加的是行为，行为的添加使得页面的交互更加丰富多彩。...子选择器选择的是元素的子代。...但在实现效果中仅仅背景变成pink了但字体颜色仍是默认的黑色，即找不到id为parent的元素里的p（子）元素，因为在上面的代码中p元素属于child元素的子元素，故找不到元素。...在这里可以看出子代选择器顾名思义，只能干涉子元素而对子元素以外的后代元素确实无能为力了。 3）相邻元素选择器 <!...相邻元素选择器选择的是元素之后的相邻对应元素。这里我们选择了id为d1的元素之后的p元素的背景变成pink，在实现的效果中可以看到只有p2变成了粉色。
HTML5学堂：上一篇 讲到CSS1.0~CSS3.0选择器的兼容问题等，CSS选择器的使用是特别广泛的，大家也会经常用到，而用到的选择器有哪些？...1.基础的选择器 选择器含义示例*通用元素选择器，匹配任何元素* { margin:0; padding:0; }E标签选择器，匹配所有使用E标签的元素p { font-size:2em; }.info...和E.infoclass选择器，匹配所有class属性中包含info的元素.info { background:#ff0; } p.info { background:#ff0; }#info和E#infoid...4.CSS 2.1 中的伪类 选择器含义示例E:first-child匹配父元素的第一个子元素p:first-child { font-style:italic; } input[type=text]:...:active匹配鼠标已经其上按下、还没有释放的E元素E:hover匹配鼠标悬停其上的E元素E:focus匹配获得当前焦点的E元素E:lang(c)匹配lang属性等于c的E元素 5.CSS 2.1中的伪元素
DOCTYPE html> 68-伪元素选择器 <style...background-color: pink; display: block; } div::after{ /*指定添加的子元素中存储的内容...-- 1.什么是伪元素选择器?...伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素 2.格式: 标签名称::before{ 属性名称:值; } 给指定标签的内容前面添加一个子元素
querySelector 、 querySelectorAll 外的其他选择器。...但在IE5678中 document.links是个类函数，而在Webkit和Molliza中是个HTMLCollection对象。...，Webkit和Molliza中是一个StyleSheetList类型对象（属于NodeList类型，想了解跟多NodeList和HTMLCollection可留意另一篇《JS魔法堂：那些困扰你的DOM...由于涉及的边幅过大，因此打算另开一篇《JS魔法堂：哈佬，css.js！》...我们可以通过后面的《JS魔法堂：隐式类型转换的背后》来一起探讨一下！
因为命名长，我们是不是可以用子代选择器来代替BEM命名？这样至少在HTML编写时，让HTML标签看起来美观一点。 3. 什么时候用BEM？...关于子选择器 子代选择器的方式是，通过组件的根节点的名称来选取子代元素。按照这个思路，分页按钮样式可以这么写： <!...BEM禁止使用子代选择器，以上是原因之一。子代选择器不好的地方还在于，如果层次关系过长，逻辑不清晰，非常不利于维护。...这样的样式文件只会越写越糟糕，可以说，当我们用子代选择器来定位元素时，这个样式文件就已经注定是要被翻来覆去的重构的了，甚至，每个来维护这个文件的人都会将其重构一遍。...子代选择器还会造成权重过大的问题，当我们要做响应式的时候，某个带样式的元素需要适配不同的屏幕，此时，我们还要不断的确认该元素之前的选择器写法！
通常设置id，往往与JS相关~ 兼容性 IE6+、Firefox、Chrome、Safari、Opera 标签名选择器 基本语法 X div { width: 960px; margin: auto;...兼容性 IE7+、Firefox、Chrome、Safari、Opera 子代选择器 基本语法 X > Y #h5course > p { color: red; } HTML5学堂的一些提醒： X Y...和X > Y之间的不同点是后者只选择直接子代。...选择符#h5course > p将只选择id为h5course的元素的直接子代p。它不匹配更深层的p元素。...它会选择，我们上面例子中更在ul后面的任何div元素。
"> //jquery:简单、粗暴 //jq和js的关系 //js是什么？...js是一门编程语言 //jq仅仅是基于js的一个库，jq可理解为就是开发js的一个工具。 //概念 //1. 为什么要学jquery ？...js库，说白了就是js文件，里面有一大堆的方法 //3. 使用jquery的步骤： 1. 引入jquery文件 2. 入口函数 功能实现 //4....//$的实质：function // console.log($ === jQuery); // $(function () { // // }); //选择器...//基本选择器 标签 类 id选择器 交集 并集 //层级选择器： 子代 后代 //过滤选择器： //:odd:奇数 even:偶数 :eq：指定下标 //
❝层次选择器 ❞ 选择器 别名 说明 版本 elemP elemC 后代选择器 元素的后代元素 1 elemP>elemC 子代选择器 元素的子代元素 2 elem1+elem2 相邻同胞选择器 元素相邻的同胞元素...2 :last-child 元素中为尾的元素 3 :only-child 父元素仅有该元素的元素 3 :nth-of-type(n) 标签中指定顺序索引的标签 3 :nth-last-of-type(...n) 标签中指定逆序索引的标签 3 :first-of-type 标签中为首的标签 3 :last-of-type 标签中为尾标签 3 :only-of-type 父元素仅有该标签的标签 3 ❝属性选择器...减少没有实质性使用的类名，例如很多层嵌套的标签，这些标签可能只使用到一个CSS属性，就没有必要建个类名来关联 使用选择器可完成很多曾经需要配合JS来完成的交互效果，既可减少代码量也可减少JS对DOM的操作...结语 「❤️关注+点赞+收藏+评论+转发❤️」，原创不易，鼓励笔者创作更好的文章 「关注公众号IQ前端，一个专注于CSS/JS开发技巧的前端公众号，更多前端小干货等着你喔」
DOCTYPE html> 属性选择器的使用 $(document).ready(function () { $("button").eq(0).click(function
在CSS（层叠样式表）中，选择器是一种强大的工具，允许开发者根据不同的条件选择HTML元素，并对其应用样式。掌握各种选择器是成为一名优秀的前端开发者的必备技能之一。...在本文中，我们将介绍CSS中一些常见的选择器，以及它们的用法和示例。 CSS中有多种常见的选择器，它们允许你根据不同的条件选择HTML元素，从而对其应用样式。...以下是一些常见的CSS选择器： 元素选择器（Element Selector）：通过元素的名称选择元素。...* { /* styles */ } 后代选择器（Descendant Selector）：选择元素的后代元素。...selector::pseudo-element { /* styles */ } 这些选择器可以单独使用，也可以组合使用，以满足不同的样式需求。
我的JQuery入门笔记，持续更新…… JQuery是一个封装了很多方法的js库 入口函数 写入口函数防止页面上的标签还没有被渲染出来，js代码就执行了 不同于js，JQuery可以有多个入口函数...// 两种写法 $(document).ready(function () { }); $(function () { }); 代码中的$其实和JQuery是等价的，是一个函数。...对象 dom对象和JQuery对象 dom对象：原生js选择器获取到的对象 只能调用dom方法或者属性，不能调用JQuery的属性或者方法 JQuery对象：利用JQuery选择器获取到的对象 只能调用...，没有分隔 $('div.class') 层级选择器 // 子代选择器 $('ul>li') // 后代选择器 $('ul li') 过滤选择器 可以从获取到的元素中过滤出索引号对应的元素 // 获取索引号为...)和$() // 无参数，获取到元素的所有内容 html() // 有参数，可以覆盖原有的内容 html("") // html()可以解析标签 // 使用$()函数创建元素，但是创建的元素只在内存中，
jQuery框架，简介，优势，安装，语法，jQuery选择器，id选择器，类选择器，标记选择器，属性选择器，位置选择器，后代选择器，子代选择器，选择器对象，选择器对象遍历，页面初始化，jQuery的dom.../js/jquery-xx.js"> $(document).ready(function(){...的所有li元素 子代选择器 $("parent>child") 匹配所有指定"parent"元素中指定"child"的直接子元素 $("#标签id值") // 原生 var div = document.getElementById...n的元素 $("selector.gt(n)") 匹配集合中索引值大于n的元素 $("selector:lt(n)") 匹配集合中索引值小于n的元素 $("选择器1 选择器2...")...$("#test li").css("border", "2px solid red"); 子代选择器 $("选择器1>选择器2>...")
使用: 注意: 如果 在body前面,应该使用 jQuery...选择器: 所有选择器 * 标签选择器 标签名 ID选择器 #id 类选择器 .className 群组选择器 .one,....后代选择器 .one .two 两个选择器使用空格隔开，表示可以获取当前元素的子代以及孙子代等等后代元素。...子代选择器 .one>.two 两个选择器使用>隔开，表示只能获取当前选中元素的子代元素。...之后所有子代选择器 .one~.two 两个选择器使用~隔开，表示可以获取当前元素之后的所有兄弟元素，只有所有兄弟元素要能符合.two。
选择器是 jQuery 最基础的东西，本文中列举的选择器基本上囊括了所有的 jQuery 选择器，也许各位通过这篇文章能够加深对 jQuery 选择器 的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写...4、内容选择器 :contains(text)：获取内容包含 text 文本的元素 :empty：获取内容为空的元素 :has(selector) ：获取内容包含指定选择器的元素 :parent ：获取内容不为空的元素...（特殊） 5、可见性选择器 :hidden：获取所有隐藏元素 :visible：获取所有可见元素 6、属性选择器 [attribute]：获取具有指定属性的元素 [attribute=value]：获取属性值等于...:input ：选取页面中的所有表单元素，包含 select 以及 textarea 元素 :text ：选取页面中的所有文本框 :password：选取所有的密码框 :radio ：选取所有的单选按钮...原创文章采用CC BY-NC-SA 4.0协议进行许可，转载请注明：转载自：jQuery中的9个选择器
元素选择器会选择选定的元素进行设置效果 1234 通配选择器 测试1 得到的就是以下样式： 备注：元素选择器无法实现差异化设置，例如上面的代码中...复合选择器可以在复杂结构中，快速而准确的选中元素。 交集选择器 作用：选中同时符合多个条件的元素。...结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。 子代选择器 子代选择器只能选择直接子代，即第一层子元素，不能选择更深层的子代。...（先写父，后写子） 语法：选择器1>选择器2>选择器3 { } 举例： /* div中的子代a元素 */ div>a { color: red;...} /* 类名为persons的元素中的子代a元素 */ .persons>a { color: red; } 子代选择器，最终选择的是子代
快快用起来 子代选择器 > 子代选择器也是使用多个选择器的组合来找到要控制的标签，不同的选择器之间使用大于号“>”分隔。...整体的原理与后代选择器类似，所不同的是，子代选择器仅仅选择到的是一代，而非所有后代。得到了IE7及IE7以上的各个主流浏览器的支持。...子代选择器基本语法 选择器名1 > 选择器名2 > … > 选择器名n { 属性名: 属性值; 属性名: 属性值; } 子代选择器的主要用途 起名字一直都是前端开发工程师的烦心事，子代选择器能够帮我们减少代码中的类名数量...子代选择器的应用场景 ?...，此时如果希望控制如上代码中第二级别的标签样式，只需要使用“.arc > h1”、“.arc > p”、“.arc > div”等选择器。
"> // 什么是DOM对象 $(function(){ // js对象，使用js方式获取到的元素就是js对象，Dom对象 // var clo = document.getElementById...对象 }); jq对象其实就是js对象的一个集合，伪数组，里面放着大量的js对象。...jquery选择器是jquery提供的一组方法，用来方便我们找页面中的元素，jquery选择器返回的是jquery对象。...id选择器 类选择器 标签选择器 并集选择器 $("#id, .green").css("color","red"); 交集选择器 $("li.green").css(); 层级选择器 子代选择器... // 获取3 子代元素 $(function(){ $("#father>p").css("backgroundColor", "red"); }); })
> 四 选择器和筛选器 4.1 选择器 4.1.1 基本选择器(4种 element(标签), *(全部), .... (4种) $(".outer div") 后代选择器 $(".outer>div") 子代选择器 $(".outer+div") 毗邻选择器...# 子代选择器 hello div1 uuuuuuu </div...4.1.6 选择器 children() //子代 find() //后代 next() //下一个标签 nextAll() //标签下面所有的 nextUntil("#xx") /...position // 相对于已经定位的父标签的偏移量 //给down增加一层测试position偏移量 js中增加 .donw_f {position: absolute;} <div class
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
