<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js新增选择器</title>
</head>
<body>
<h3>标题2</h3>
    <h2>标题1</h2>
    
    <ul id="u1">
        <li >列表项1</li>
        <li class="ll">列表项</li>
        <li class="bb">列表项</li>
        <li class="ll">列表项</li>
        <li class="ll">
            <p>u1里面的段落</p>
        </li>
    </ul>
<ul id="u2">
<li>列表项1</li>
<li class="bb">列表项2</li>
<li class="bb">列表项3</li>
<li class="bb">列表项4</li>
<li >列表项ls</li>
</ul>
<script>
    function myfun1(){
// document.querySelector("li").style.backgroundColor="red";
// document.querySelector("#u2").style.backgroundColor="red";
document.querySelector(".ll").style.backgroundColor="blue";
document.querySelector(".bb").style.backgroundColor="red";
    }
    function myfun2(){
document.querySelector("#u2>li+li+li").style.backgroundColor="green";
document.querySelector("#u1 li p").style.backgroundColor="green";
    }
        function myfun3(){

document.querySelector("h2,h3").style.backgroundColor="green";
    }
function myfun4(){
var x=document.querySelectorAll("#u2 .bb");
x[1].style.backgroundColor="orange";
// alert(x.length);
for (var i = 0; i < x.length; i++) {
    x[i].style.backgroundColor="green";
}
    }

function myfun5(){
var u1=document.getElementById('u1');
// var arr=document.querySelectorAll("#u1>li");
var arr=u1.getElementsByTagName('li');
alert(arr.length);
var newli=document.createElement("li");
u1.appendChild(newli);
newli.innerHTML="新增加的项目";
alert(arr.length);
    }

function myfun6(){
var x=document.getElementsByClassName("bb");
for (var i = 0; i < x.length; i++) {
    x[i].style.backgroundColor="green";
}
    }

myfun6();
</script>
</body>
</html>

html5 javascript 新增加的高级选择器更精准更实用的更多相关文章

  1. Karmada v1.3：更优雅 更精准 更高效

    摘要:最新发布的1.3版本中,Karmada重新设计了应用跨集群故障迁移功能,实现了基于污点的故障驱逐机制,并提供平滑的故障迁移过程,可以有效保障服务迁移过程的连续性(不断服). 本文分享自华为云社区 ...

  2. HTML5中新增加的结构元素、网页元素和全局属性

    HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...

  3. HTML5中新增加Input 的种类

    查询文本框 <input type="search"> 数字文本框 any 代表不设置 <input type="number" max=&q ...

  4. HTML5每日一练之input新增加的六种时间类型应用

    今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...

  5. JQuery_高级选择器

    在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...

  6. css3新增加的选择器

    css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...

  7. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  8. HTML语义化：HTML5的新标签及IE5.5~9的部分兼容方案

    一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...

  9. 学习HTML5之新特性标签一览（详细）

    HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi.... so --->支持css3强大的选择器和动画以及javascript的新的函数 先来 ...

随机推荐

  1. [tomcat启动报错]registered the JDBC driver [com.alibaba.druid.proxy.DruidDriver] but failed to unregister it when the web application was stopped

    环境:一个tomcat ,一个工程配置了多数据源,在启动的时候报如下错误: SEVERE: The web application [/qdp-resource-job] registered the ...

  2. OSI 协议

  3. Idea2018旗舰版破解方法

    完整请参考 https://www.jianshu.com/p/3c87487e7121 1.在hosts文件里添加一行: 0.0.0.0 account.jetbrains.com 2.在Activ ...

  4. Angularjs 学习笔记

    Angularjs 表单验证:https://www.w3xue.com/jsjq/angularjs/angularjs-validation.html https://www.cnblogs.co ...

  5. python利用opencv合成模糊图像

    之前需要评估图像质量来筛选成像质量不错的图片,去除由于对焦,运动等造成的模糊图像,所以在构建数据集的时候考虑用opencv对清晰的图片进行处理获得模糊的图片从而进行训练. 1) 运动模糊图像 一般来说 ...

  6. Inside The C++ Object Model(五)

    ============================================================================5-0. 一般而言,class 的data me ...

  7. 133、 Android 自动化测试（转载）

    Android 自动化测试--要点概括http://blog.csdn.net/vshuang/article/details/40595233 A/B测试与灰度发布http://blog.csdn. ...

  8. python 运行环境

    Python 是一种半编译半解释型运行环境.首先,它会在模块 "载入" 时将源码编译成字节码 (ByteCode).而后,这些字节码会被虚拟机在一个 "巨大" ...

  9. Linux ReviewBoard安装与配置

    目录 0. 引言 1. 安装步骤 2. 配置站点 2.1 创建数据库 2.2 开始安装 2.3 修改文件访问权限 2.4 Web服务器配置 2.5 修改django相关配置 正文 回到顶部 0. 引言 ...

  10. css 背景图片虚化效果

    转载地址:http://blog.csdn.net/ohehehou/article/details/51975539 需求:一个div设置了background: url,现在需要使图片背景模糊,d ...