HTML5实战与剖析之CSS选择器——querySelector()
程序员文章站
2022-05-28 11:44:50
今天为大家介绍一下html5的相关知识,今儿主要以新增的选择器为主题,为大家介绍。今天为大家介绍的选择器是queryselector()。我将用jquery和javascript两种写法对比的...
今天为大家介绍一下html5的相关知识,今儿主要以新增的选择器为主题,为大家介绍。今天为大家介绍的选择器是queryselector()。我将用jquery和javascript两种写法对比的方式为大家分享。希望能为大家在学习html5的道路上有所帮助。
queryselector()方法接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。小例子如下:
1)获取标签
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
vcigp">
2、jquery
2)获取id
html代码
梦龙小站
梦龙小站
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实战与剖析的更新。
推荐阅读
-
HTML5实战与剖析之CSS选择器——querySelectorAll()
-
HTML5实战与剖析之CSS选择器——querySelector()
-
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
-
HTML5实战与剖析之原生拖拽(一拖拽历史概述)
-
HTML5实战与剖析之跨文档消息传递(iframe传递信息)
-
HTML5实战与剖析之表单那些事儿
-
HTML5实战与剖析之焦点管理(activeElement和hasFocus)
-
HTML5实战与剖析之媒体元素(2、媒体元素的属性)
-
HTML5实战与剖析之离线应用
-
HTML5实战与剖析之Web存储机制(Web Storage)