今天为大家介绍一下html5的相关知识，今儿主要以新增的选择器为主题，为大家介绍。今天为大家介绍的选择器是queryselector()。我将用jquery和javascript两种写法对比的方式为大家分享。希望能为大家在学习html5的道路上有所帮助。
querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。小例子如下：
1)获取标签
JavaScript代码
立即学习“前端免费学习笔记（深入）”；
var body = document.querySelector('body');
body.style.background = "red";
alert(body)//[object HTMLpElement]jQuery代码
var $body = $("body");
$body.css({
'background': "red"
});
alert($body) //[object Object]预览效果
1、JavaScript
2、jQuery
2)获取ID
HTML代码
<p id="box1" class="box">梦龙小站</p> <section id="box2" class="box">梦龙小站</section>
JavaScript代码
var box1 = document.querySelector('#box1');
box1.innerHTML = "这是box1";
alert(box1)//[object HTMLpElement]jQuery代码
var $box1 = $("#box1");
$box1.html("这是用jQuery实现的");
alert($box1) //[object Object]预览效果
1、JavaScript
2、jQuery
通过document类型调用querySelector()方法的时候，会在文档元素的范围内查找匹配的元素。而通过element类型调用querySelector()方法的时候，只会在该元素后代元素的范围内查找匹配元素。CSS选择符可以简单也可以复杂，示情况而定。如果传入了不被支持的选择符，querySelector()会报错。
HTML5实战与剖析之CSS选择器——querySelector()就为大家介绍到这里了。考虑到HTML5这方面要花的经历比较大一些，里面的东西比较多，所以具体的小知识点会一篇一篇的介绍，所以每篇的篇幅不一定会很多。希望大家能够理解一下，这样做的好处就为了将来能够便于查找。感谢大家的支持与厚爱，更多有关HTML5的相关内容敬请关注梦龙小站关于HTML5实战与剖析的更新。
以上就是的内容，更多相关内容请关注PHP中文网（www.php.cn）！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
442
收藏
