首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML5中类jQuery选择器querySelector的使用

简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器...用法 两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法。...querySelector 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素。...关于转义 我们知道反斜杠是用来转义用的,比如在字符串里我们想表示空字符就使用'\b',换行'\n'。...理解这点后,可以来看一个更有趣的例子了。比如我们要选择类名里面含反斜杠的元素。是的,我们需要一共使用四个反斜杠!才能正常工作。 ?

3.4K70

HTML5选择器

CSS选择器回顾 ID选择器 类名选择器:多类(.class1.class2)不被ie6支持 标签(元素)选择器 组合(后代)选择器 通配符选择器 直接子元素选择器 >:ie6不支持 相邻兄弟选择器 +...:ie6不支持 属性选择器 伪元素选择器 伪类选择器 CSS新增选择器 通用兄弟(关联)选择器:~,选择后面的所有的子元素 属性选择器(新增的): E[attr~="value"]:指定属性名,并且具有属性值..."value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn); 注意:IE6不支持所有的属性选择器 :nth选择器 :first-child 选择某个元素的第一个子元素...,从这个元素的最后一个子元素开始算; 其实这种使用和:nth-child使用是一样的,也可以使用:nth-child的那些表达式和使用方法,唯一不同的是这种指定了元素的类型而以。...:empty 选择的元素里面没有任何内容 :not 否定选择器 UI元素状态伪类 我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类,这些主要是针对于HTML

1.4K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML|css选择器模型

    解决方案 选择器模型就是将一些形式对象装在一个CSS模型中,我们在使用这些对象时就可以直接通过写模型的名称就可以将其带入进网页改变其格式。对特定的元素的样式进行定义。...id选择器:①id选择器可以为标有特定id的HTML元素指定特定的样 式。 ②Id选择器以“#”来定义 ? 图3.1 首先在css文件中新建一个文档,在里面写上你要的形式。....“#”后面的为名称 c.所定义的样式要用{} ? 图3.2 ? 图3.3 ? 图3.4 d.在你所需要使用样式的地方插入id=“名称(尽量英文)” ? 图3.5 ?...图3.6 类选择器:以一个点号来显示 用点号来定义 后加名称 用{}来写样式 ? 图3.7 在你所需要使用样式的地方插入class=“名称(尽量英文)” ? ?...图3.8 还有另外一种简单的方法就是直接使用 ? ? 图3.9 结语 掌握这些选择器的格式,有很多注意事项。格式不能写错不然运行不出来,命名尽量不要用中文或数字,标签该对齐的要对齐。

    1.4K10

    HTML中关于选择器的介绍

    HTML中关于选择器的介绍今天分享一些关于HTML中选择器,以及对应的使用方法,很多人学习了CSS就想着对自己的网页进行样式渲染:这是没有用CSS进行样式渲染的网页:图片但是样子实在让人提不起兴趣;undefined...只需要经过CSS简单的渲染(小编实力有限只进行了一点的CSS操作),然后网页的样式就可以变成这样图片在使用CSS时始终绕不过的话题就是选择器: 选择器有以下几个: 元素选择器undefined`p...; 元素选择器,使用时对对应的元素进行修改,代码中有多个相同元素可以一次性全部进行修改,但有时也会酿成大错(多个样式叠加在一起无法体现出来); 属性选择器,属性选择器就是在标签内部使用style将需要修改的样式编写进去...; 交集选择器,同时满足两个或者多个不同类型的选择器进行相应的修改; 后代选择器,在使用时需要用空格隔开,在父标签下的子标签,是对子标签进行样式的修改;HTML中几种常用(小编自己认为)的选择器介绍到这...,这些选择器需要大家多使用并且理解才可以熟练运用,感谢大家的阅览,文中有错误或是需要补充的地方还希望大佬能指出来。

    6010

    第87天:HTML5中新选择器querySelector的使用

    一、HTML5新选择器 1、document.querySelector("selector"); selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回null; 支持: Chrome...FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+ 2、document.querySelectorAll("selector"); selector:根据CSS选择器返回所有匹配到的元素数组...FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+ 3、document.getElementsByClassName("selector"); selector:根据类选择器返回所有匹配到的元素数组...4.0+, FireFox 3.0+, Safari 3.2+, Opera 10.1+, IE 8+ 4、注意: document.querySelector(selector);//返回第一个满足选择器条件的元素...html5就是将经常需要的操作又包装一层 实例: 1    2      3 实例 4      5 <li class=

    96730

    HTML&CSS03_CSS选择器定义

    想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。...现在大家工作了,也会遇到一些前端设计的问题或相关的事情,这时你们能第一时间来到这里,想到曾经我们在一起共同学习过、努力过、拼搏过,我依然觉得很欣慰。...所以当我的朋友们真正需要我的时候,我还在这里等着你,我在这里为你们准备了前端设计基础知识的成套视频(试听版)。无论你是第一次无基础学习,还是有基础来复习复习,也或是想我了来看看我,嘻嘻。...大家多多分享我的公众号,把知识分享给更多想了解前端设计的朋友们 时刻提醒自己:不抱怨,多实践,终达成功彼岸! 我的座右铭:不能领跑也绝不放弃!

    83470

    HTML&CSS04_选择器优先级

    想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。...现在大家工作了,也会遇到一些前端设计的问题或相关的事情,这时你们能第一时间来到这里,想到曾经我们在一起共同学习过、努力过、拼搏过,我依然觉得很欣慰。...所以当我的朋友们真正需要我的时候,我还在这里等着你,我在这里为你们准备了前端设计基础知识的成套视频(试听版)。无论你是第一次无基础学习,还是有基础来复习复习,也或是想我了来看看我,嘻嘻。...大家多多分享我的公众号,把知识分享给更多想了解前端设计的朋友们 时刻提醒自己:不抱怨,多实践,终达成功彼岸! 我的座右铭:不能领跑也绝不放弃!

    81770

    【CSS】CSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )

    id " 选择 指定的 某一个 标签 , 使用 ID 选择器 步骤如下 : 首先 , 在 HTML 中 设置 标签的 ID ; 标签内容 然后 , 在 CSS 样式中使用...ID 选择器 ; #name { color: blue; font-size:20px; } 在一个 HTML 页面中 , 标签的 ID 是唯一的 , 不允许重复 ; *...* ID 选择器 与 类选择器 的使用方法基本一致 ;** 在开发时 , ID 选择器 不推荐使用 , 使用频率不高 , 推荐使用 类选择器 ; 2、代码示例 代码示例 : HTML 所有页面标签的文本设置成了 黑色 ; 运行效果 : 三、CSS 选择器使用注意事项 ---- CSS 选择器使用注意事项 : 尽量不使用 ID 选择器 ; 尽量不使用 通配符选择器 ; 使用标签选择器时 , 尽量不对 无意义的标签 进行选择

    2.7K10

    【HTML】HTML5 元素布局的使用

    HTML 标签 定义和用法 可定义文档中的分区或节(division/section)。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。...如果用 id 或 class 来标记 ,那么该标签的作用会变得更加有效。 用法 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 固有的唯一格式表现。...可以通过 的 class 或 id 应用额外的样式。 不必为每一个 都加上类或 id,虽然这样做也有一定的好处。...可以对同一个 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。...这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

    4K20

    利用Java正则表达式提取HTML中的链接

    提取HTML中的链接是一种常见的需求,可以通过正则表达式来实现。在Java中,可以使用java.util.regex包提供的正则表达式相关类来完成这个任务。 首先,让我们了解一下HTML链接的特点。...HTML_LINK_REGEX是用于匹配链接的正则表达式,它使用了一系列的模式来匹配标签和href属性的值。...最后,在main方法中,我们定义了一个示例的HTML字符串,并调用extractLinks方法来提取其中的链接并打印输出。 需要注意的是,正则表达式只能应对简单的HTML情况。...如果你遇到了复杂的HTML结构或包含各种特殊情况的链接,建议使用专业的HTML解析库,如Jsoup,来提取链接。 总结起来,使用Java的正则表达式可以轻松地提取HTML中的链接。...请注意,在处理实际的HTML内容时,可能会遇到各种边界情况和特殊情况,因此建议使用专业的HTML解析库来处理更复杂的HTML内容。

    24610
    领券