PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HTML5+CSS3教程 > 正文

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

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:今天为大家介绍一下HTML5的相关知识,今儿主要以新增的选择器为主题,为大家介绍。今天为大家介绍的选择器是querySelector()。我将用jQuery...
    今天为大家介绍一下HTML5的相关知识,今儿主要以新增的选择器为主题,为大家介绍。今天为大家介绍的选择器是querySelector()。我将用jQuery和JavaScript两种写法对比的方式为大家分享。希望能为大家在学习HTML5的道路上有所帮助。
    querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。小例子如下:
    1)获取标签
    JavaScript代码
    1. var body = document.querySelector('body');    
    2.     
    3.     body.style.background = "red";    
    4.     
    5.     alert(body)//[object HTMLDivElement]   

    jQuery代码
     

    1. var $body = $("body");    
    2.     
    3. $body.css({    
    4.     'background'"red"    
    5. });    
    6.     
    7. alert($body) //[object Object]   

    预览效果

      1、JavaScript
     

    1、JavaScript

     

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

     

      2、jQuery

     

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

     

    通过document类型调用querySelector()方法的时候,会在文档元素的范围内查找匹配的元素。而通过element类型调用querySelector()方法的时候,只会在该元素后代元素的范围内查找匹配元素。CSS选择符可以简单也可以复杂,示情况而定。如果传入了不被支持的选择符,querySelector()会报错。
      HTML5实战与剖析之CSS选择器——querySelector()就为大家介绍到这里了。考虑到HTML5这方面要花的经历比较大一些,里面的东西比较多,所以具体的小知识点会一篇一篇的介绍,所以每篇的篇幅不一定会很多。希望大家能够理解一下,这样做的好处就为了将来能够便于查找。感谢大家的支持与厚爱,更多有关HTML5的相关内容敬请关注梦龙小站关于HTML5实战与剖析的更新。
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-142-1800-1.html
    相关热词搜索:
    上一篇:第一页