HTML5实战与剖析之CSS选择器——querySelector()

  今天为大家介绍一下HTML5的相关知识,今儿主要以新增的选择器为主题,为大家介绍。今天为大家介绍的选择器是querySelector()。我将用jQuery和JavaScript两种写法对比的方式为大家分享。希望能为大家在学习HTML5的道路上有所帮助。

  querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。小例子如下:


  1)获取标签


  JavaScript代码

 

var body = document.querySelector(‘body‘);

	body.style.background = "red";

	alert(body)//[object HTMLDivElement]


  jQuery代码


var $body = $("body");

$body.css({
	‘background‘: "red"
});

alert($body) //[object Object]

  预览效果


  1、JavaScript




  2、jQuery




  2)获取ID


  HTML代码


<div id="box1" class="box">梦龙小站</div>
<section id="box2" class="box">梦龙小站</section>

  JavaScript代码


var box1 = document.querySelector(‘#box1‘);

	box1.innerHTML = "这是box1";

	alert(box1)//[object HTMLDivElement]

  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实战与剖析的更新。


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。