`
axl234
  • 浏览: 268831 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML5--JS API-新的选择器

    博客分类:
  • css
 
阅读更多

新的选择器
document.querySelector("selector");
selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回null;
支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+


document.querySelectorAll("selector");
selector:根据CSS选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组;
支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+


document.getElementsByClassName("selector");
selector:根据类选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组;
支持: Chrome 4.0+, FireFox 3.0+, Safari 3.2+, Opera 10.1+, IE 8+

案例如下:
HTML结构如下:

复制代码
 1 <div class="content">  
 2 <ul>    
 3 <li>实例</li>
 4     
 5 <li class="exp">实例</li>
 6     
 7 <li class="exp">实例</li>
 8     
 9 <li class="exp">实例</li>
10     
11 <li>实例</li>
12 
13   </ul>
14 
15 </div>
复制代码

 

 1、如果想要获得第一个li元素,我们只需要:
document.querySelector(".content ul li");


2、如果想要获得所有li元素,我们只需要:
document.querySelectorAll(".content ul li");


3、如果想要获得所有class为w3c的li元素,我们只需要:
document.getElementsByClassName("w3c");

 

分享到:
评论

相关推荐

    jquery-1.5.js及其API下载

    jQuery 1.5.js是一个高效且功能丰富的JavaScript库,其API设计简洁易用,极大地提升了开发效率。无论你是初学者还是经验丰富的开发者,理解并掌握jQuery 1.5.js的API都将对你的Web开发工作带来极大的便利。通过实践...

    包含 dagre-d3.js d3.js 最新版 亲测可用

    D3.js提供了丰富的选择器、转换和过渡效果,可以用来创建复杂的、响应式的可视化应用。这个库支持SVG、Canvas和HTML,兼容现代浏览器,包括IE9及更高版本。 在压缩包中,"d3.min.js"和"d3.v5.min.js"分别是D3.js的...

    JQuery-esqyUI中文-1.2.5API.CHM

    `jquery1.7.2中文API修正版.chm` 提供了关于jQuery 1.7.2版本的中文文档,包括选择器、DOM操作、事件处理、效果和Ajax等内容,是理解jQuery操作网页元素的关键。 **jQuery EasyUI框架** jQuery EasyUI 将jQuery的...

    oss-h5-upload-js-directs.zip

    这种方式常用于Web应用,如图片分享网站、云存储服务、在线编辑器等,用户可以直接在浏览器中选择文件并上传,无需跳转到其他页面或者借助服务器作为中介。 总的来说,"oss-h5-upload-js-directs.zip"提供的资源...

    前端CSS-JS-jQuery的API-js库2个版本

    例如,CSS3引入了新的选择器(如`:hover`、`:nth-child()`)、过渡(transitions)和动画(animations),极大地增强了网页的动态效果。 JavaScript(JS)是网页开发的核心语言,它使网页具有交互性。`3c_js.chm`...

    jQuery-1.4.3.js和jQuery-API

    - **选择器API**:`.find()`, `.children()`, `.parent()`, `.siblings()`, `.next()`, `.prev()`等用于选取元素。 - **事件API**:`.on()`, `.off()`, `.trigger()`, `.bind()`, `.unbind()`, `.hover()`等用于...

    常用web开发手册css2/css3/jquery-api/javascript api/dom/html/j2ee-api/dhtml

    CSS3进一步扩展了这些功能,引入了更多选择器、边框和背景的高级效果、过渡和动画、多列布局、媒体查询等,使网页适应不同设备,实现响应式设计。 **jQuery API** jQuery是一个流行的JavaScript库,简化了DOM操作、...

    jQuery-1.8.1.js jQuery-1.8.0 API

    2. **选择器(Selectors)**:详细列出所有可用的选择器,以及它们如何与 CSS 选择器对应。 3. **DOM 操作(Traversing)**:包括获取元素集合、遍历 DOM 树、添加/删除元素等方法。 4. **属性(Attributes)**:...

    jQuery-1.8.1.js+jQuery-1.8.1-min.js+jQuery api 1.8 中文版.chm

    1. **选择器**:jQuery 提供了丰富的CSS选择器,如 ID选择器 (#id),类选择器 (.class) 和元素选择器 (element),使得选取DOM元素变得简单。 2. **DOM操作**:jQuery提供了一系列方法用于创建、修改和操作DOM元素,...

    dhtml-html-css-javascript-dom帮助文档(.chm)五合一

    3. **CSS**:涵盖选择器、盒模型、布局方式(如流式布局、网格布局、Flexbox和Grid)、响应式设计等,用于美化和布局网页。 4. **JavaScript**:涉及变量、数据类型、函数、面向对象编程、DOM操作、AJAX等核心概念...

    jquery-1.4.2.js和jquery-1.4.2-vsdoc.js

    - **选择器**:jQuery的核心之一就是高效的选择器,如ID选择器(`#id`)、类选择器(`.class`)、元素选择器(`tag`)等,使开发者能快速定位DOM元素。 - **DOM操作**:jQuery提供了简便的DOM操作方法,如`append()`、`...

    基于angular.js的WUI-DatePicker日期选择器插件

    而WUI-DatePicker是一款基于Angular.js开发的日期选择器插件,专为提高用户体验而设计,提供了多种选择模式,包括年月日、年月、时分、时分秒等,甚至可以选择至今的日期范围。在本文中,我们将深入探讨这款插件的...

    API中文版集合包括.net-ajax-php-javascript-html-css-jquery-mysql- - - -

    CSS3引入了更多的选择器、动画和过渡效果,增强了网页的视觉表现力。 8. **MySQL**:MySQL是一个流行的开源关系型数据库管理系统,常用于Web应用的数据存储。其API,如PHP的MySQLi或PDO_MySQL,提供了与数据库交互...

    Node.js-slate为您的API生成漂亮的静态文档

    Node.js 是一种基于 Chrome V8 引擎的 JavaScript 运行环境,它让开发者能够在服务器端使用 JavaScript 进行编程,极大地推动了全栈开发的流行。在 Node.js 开发过程中,API 文档的编写是必不可少的一环,因为它有助...

    HTML5技术开发的超酷颜色选择器

    在这个项目中,“HTML5技术开发的超酷颜色选择器”利用了HTML5的新特性,创建了一个既实用又美观的颜色选取工具。下面将详细介绍这个颜色选择器涉及到的关键知识点。 1. **Canvas API** - HTML5的Canvas是用于在...

    jquery1.7 API/jquery-1.7.1.min.js/jquery-1.7.1.js

    `jquery1.7_20111204.chm`是jQuery 1.7 API的离线帮助文件,包含了所有1.7版本的函数、方法、选择器和事件的详细说明。这个CHM文件是Windows系统的帮助文件格式,用户可以通过它快速查找和学习jQuery的相关功能。 ...

    一个vue的html5富文本编辑器插件vue-html5-editor-master.zip

    Vue.js HTML5富文本编辑器插件:vue-html5-editor Vue.js,作为一个轻量级且功能强大的前端框架,已经成为现代Web开发中的热门选择。它以其响应式数据绑定和组件化设计,使得构建用户界面变得更为高效。在这个场景...

    hibernate -API,jquery-API,mysql等的驱动包

    jQuery的API包括选择器(用于选取DOM元素)、效果(如淡入淡出、滑动等)、事件处理和Ajax方法,极大地提高了JavaScript的开发效率。 3. MySQL驱动包:MySQL是一个广泛使用的开源关系型数据库管理系统。在Java开发...

    JQuery最新js包(jquery-2.1.1.js)

    1. **选择器**: jQuery通过类似CSS的语法,使得选取HTML元素变得简单。例如,`$("#myID")`用于选取ID为"myID"的元素,`$(".myClass")`则可以选取所有class为"myClass"的元素。 2. **DOM操作**: jQuery提供了一套...

    html实现js文件md5

    可以使用`&lt;input type="file"&gt;`标签创建一个文件选择器,用户可以通过这个选择器选择需要计算MD5的文件。 2. **引入JavaScript库**:在HTML页面中,通过`&lt;script&gt;`标签引入jQuery.js和spark-md5.js。jQuery库可以...

Global site tag (gtag.js) - Google Analytics