<!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. Python学习笔记(三)

    组合数据类型 5种内置的序列类型:bytearray,bytes,list,str,tuple 元组 元组:固定,有序,索引从0开始,分片,步距语法支持 不能替换或者删除其中的任意数据项,使用list ...

  2. Centos7 安装系统服务、开机自启动

    Centos7 安装系统服务 1 编写可执行程序 * 这里可以是任意编程语言(C.C++.Java.PHP.Python.Perl ...)编写的程序: 当前假设此程序的执行目录为: /myservi ...

  3. TortoiseGit功能介绍

    TortoiseGit功能介绍 使用方便 强大的提交对话框 每个项目设置 最小日志消息长度,以避免意外提交空日志消息 用于拼写检查的语言 与问题跟踪系统集成 有用的工具 有多种语言版本 Tortois ...

  4. python获取两个日期间的工作日

    import datetime # 计算两个日期之间的工作日数,非天数. class workDays(): def __init__(self, start_date, end_date, days ...

  5. Q - Girls and Boys

    来源poj1068 In the second year of the university somebody started a study on the romantic relations be ...

  6. Gym 101972

    F读错题wa了三个小时.自闭了,不然I题有可能能出的..已经想到组合数也敲完组合数板子了. A:这...**题吧,第一眼看的这个就秒了 #include<bits/stdc++.h> #d ...

  7. 阿里天池的新任务（简单）(KMP统计子串出现的次数)

    阿里“天池”竞赛平台近日推出了一个新的挑战任务:对于给定的一串 DNA 碱基序列 tt,判断它在另一个根据规则生成的 DNA 碱基序列 ss 中出现了多少次. 输出格式 输出一个整数,为 tt 在 s ...

  8. java第一次上机实验--验证码

    package javashiyan; import java.awt.Color; import java.awt.event.ActionEvent; import java.awt.event. ...

  9. Ubuntu下安装LNMP

    1.安装mysql sudo apt-get install mysql-server mysql-client 2.安装nginx sudo apt-get install nginx 安装完后重启 ...

  10. Spring AOP 随记

    本周经历各种面试失败后,最后一站张建飞老大的阿里,感觉有着这般年纪不该有的垃圾履历而忧伤中,不过还是要继续加油的,毕竟他说的好,都是经历,无愧初心. 所以为了更加深入理解Spring AOP我又翻起了 ...