选择器、属性及方法调用的配合使用：

<style>
            #a{
                width: 200px;
                height: 100px;
                background-color: red;
               
            }
            .b{
                width: 200px;
                height: 100px;
                background-color: green;
               
            }
            .div1{
                width: 200px;
                height: 100px;
                background-color:aqua;
            }
        </style>

    <body>
        <div id="a"></div>
        <div class="b" style="background-color: black;"></div>
        <div class="b" style="background-color: chartreuse;"></div>
        <div class="div1">精英教育</div>
        <input type="text" name="ipt1" />
        <input type="checkbox" name="ckb2" / disabled="disabled">
    </body>
   
    <script>
        //先选择元素在进行加效果
        //ID选择器(使用较高JS)
        var a = document.getElementById("a");
        //检测类型
        alert(typeof(document.getElementById("a")))
       
        a.style.backgroundColor="royalblue";
       
        a.innerHTML ="<span>hello<span>";
        a.innerText = "<span>hello<span>";
//        class选择器
        var b_class = document.getElementsByClassName("b");
        b_class[0].style.backgroundColor="red";
       
        var b_class = document.getElementsByClassName("b");
        b_class[1].style.backgroundColor="blueviolet";
//        标签选择器
        var b_b = document.getElementsByTagName("div");
        b_b[1].style.backgroundColor="yellow";
       
        var div_1 = document.getElementsByName("ipt1");
        div_1[0].value="文本框";
       
        var ckb2 = document.getElementsByName("ckb2")[0];
        ckb2.setAttribute("checked","");
    //移除属性
        ckb2.removeAttribute("disabled")
       
    //创造元素
     var a = document.createElement("a");
     a.setAttribute("href","http://www.baidu.com");
     a.innerText="百度一下";
     
     document.body.appendChild(a);
     document.body.removeChild(a);
     
    div1.appendChild(a);
   
       
    </script>

<body>
        <!--DOM   Document Object Model
        BOM   Bowers O M-->
        <div id="div1" class="div1"></div>
        <div class="div1"></div>
        <input type="text" name="ipt1" />
        <input type="checkbox" name="ckb1" disabled="disabled"/>
    </body>
</html>
<script>
//    alert('1111');
//    window.alert('123')
    var div1 = document.getElementById('div1');
    div1.style.backgroundColor = 'red';
//    div1.innerHTML = "<ul><li>123456</li></ul>";
    div1.innerText = "<ul><li>123456</li></ul>";
    
    
    var div1_class = document.getElementsByClassName('div1');
    div1_class[1].style.backgroundColor = "green";
    
    var div1_1 = document.getElementsByTagName('div');
    div1_1[1].style.backgroundColor = "blue";
    
//    jQuery
    var div1_2 = document.getElementsByName('ipt1');
    div1_2[0].value = '123';
    
    var ckb1 = document.getElementsByName('ckb1')[0];
//    ckb1.setAttribute("checked","checked");
    ckb1.removeAttribute('disabled');
    
    var a = document.createElement("a");
    a.setAttribute("href","http://www.baidu.com");
    a.innerText = "百度";
    
    document.body.appendChild(a);
    document.body.removeChild(a);
    
    div1.appendChild(a);
</script>

熟悉JS中的常用选择器及属性、方法的调用的更多相关文章

  1. JS中Object常用的一些属性和方法

    1⃣️属性 刚接触prototype.constructor.proto这三个玩意儿的时候,是不是有点儿傻傻分不清楚的感觉?下面来简单的说下... 举

  2. JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

    JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes     ...

  3. JS中Array数组的三大属性用法

    原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...

  4. JavaScript -- 时光流逝（四）：js中的 Math 对象的属性和方法

    JavaScript -- 知识点回顾篇(四):js中的 Math 对象的属性和方法 1. Math 对象的属性 (1) E :返回算术常量 e,即自然对数的底数(约等于2.718). (2) LN2 ...

  5. JS 中深拷贝的几种实现方法

    JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...

  6. JS中常见的几种继承方法

    1.原型链继承 // 1.原型链继承 /* 缺点:所有属性被共享,而且不能传递参数 */ function Person(name,age){ this.name = name this.age = ...

  7. js中判断数据类型的四种方法总结

    js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...

  8. js中style.display=""无效的解决方法

    本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...

  9. js中数组去重的几种方法

    js中数组去重的几种方法         1.遍历数组,一一比较,比较到相同的就删除后面的                 function unique(arr){                 ...

随机推荐

  1. Maven下从HDFS文件系统读取文件内容

    需要注意以下几点 1.所以的包都是org.apache.hadoop.XXX 2.三个配置文件要放到指定文件夹中等待文件系统读取(src/main/resources):core-site.xml h ...

  2. Mac之OS系统下搭建JavaEE环境 <一> 之JDK的安装配置

    这篇文章介绍了如何在Mac下搭建我们的JavaEE工作环境,对于初学者来说还是比较通俗易懂的. 一.JDK的安装及配置 1.首先我们到Oracle官网下JDK http://www.oracle.co ...

  3. memcache 细究（一）

    memcached是高性能的分布式的内存缓存服务器.由国外社区网站LIVEJOURNAL的开发团队开发. 使用目的: 通过缓存数据库查询结果,减少数据库的访问次数,以提高动态web应用的速度.提高可扩 ...

  4. layui中使用autocomplete.js

    前言 在网站找了一大圈都是问题没有答案,记录记录谨防踩坑 layui版本:layui-v1.0.9_rls a(https://github.com/devbridge/jQuery-Autocomp ...

  5. java.util.Arrays类

    前言:java.util.Arrays类的技术文档请查看Oracle官网 1.Arrays类常见方法: 本文参考资料:百度文库:Oracle官网:第三方中文技术文档

  6. JavaScript垃圾收集-标记清除和引用计数

    JavaScript具有自动垃圾收集机制,执行环境会负责管理代码执行过程中使用的内存. 垃圾收集机制原理:垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间), 周期性地执行这一操作:找出那些 ...

  7. SetConsoleScreenBufferSize 函数--设置控制台屏幕缓冲区大小

    SetConsoleScreenBufferSize函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms686044(v= ...

  8. 【Log4j】分包，分等级记录日志信息

    在开发中我们经常会将不同包下的日志信息在不同的地方输出,以便于以后出问题能够直接在对应的文件中找到对应的信息! 例如:在spring+SpringMVC+mybatis的框架中,我们经常会将sprin ...

  9. (转)SQL Server基础之存储过程（清晰使用）

    阅读目录 一:存储过程概述 二:存储过程分类 三:创建存储过程 1.创建无参存储过程 2.修改存储过程 3.删除存储过程 4.重命名存储过程 5.创建带参数的存储过程   简单来说,存储过程就是一条或 ...

  10. C++引用形参，函数返回多个值

    之前编代码有遇到过想让一个函数返回多个值的情况,low low的我不知道有什么办法,直接使用的全局变量将函数里的值传出去. 今天看书,<C++primer>第五版中文版第189页:使用引用 ...