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

<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. 图论基础之Dijkstra算法的初探

         图论,顾名思义就是有图有论.        图:由点"Vertex"和边"Edge "组成,且图分为有向图和无向图(本文讨论有向图),之前做毕业设计的 ...

  2. Vuejs——Vue生命周期，数据，手动挂载，指令，过滤器

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   原教程: http://cn.vuejs.org/guide/instance.html htt ...

  3. Hibernate框架 主配置文件（Hibernate.cfg.xml） 映射配置 说明

    Hibernate.cfg.xml 主配置文件中主要配置:数据库连接信息.其他参数.映射信息! 常用配置查看源码: hibernate-distribution-3.6.0.Final\project ...

  4. IT行业歧视40岁以上人群为找工作还要谎报年龄[转]

    IT行业歧视40岁以上人群为找工作还要谎报年龄(这样不好) http://www.aliyun.com/zixun/content/2_6_616161.html [赛迪网讯]4月5日消息,许多40多 ...

  5. 【SqlServer系列】开启Sqlserver远程访问

    1   概述 已发布[SqlServer系列]文章如下: [SqlServer系列]SQLSERVER安装教程 [SqlServer系列]数据库三大范式 [SqlServer系列]表单查询 [SqlS ...

  6. JS实现悬浮导航的制作--web前端

    思想:导航在这里只有两种状态,一种是初始状态.一种是固定布局状态.实现悬浮导航其实就是通过Javascript脚本语言控制导航的两种状态,主要是对两种状态成立条件的判断,明确了这些,实现起来就不会太难 ...

  7. ubuntu(linux)新装系统恢复备份后无法进入系统问题的解决

    1. 引子: 可以跳过直接看3.~5. 我们可能会遇到这样的状况,从ubuntu转到别的系统,兜兜转转又回到了ubuntu. 比如说: Fedora升级后一大堆BUG,与java有关的软件渲染都糟糕的 ...

  8. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

  9. DataReader To List

    用了一段时间的Dapper,感觉Dapper比Ado.net好的地方就是转换成实体,到处查资料,写了以下方法,直接可以用. using (var conn = new SqlConnection(&q ...

  10. ActiveMQ结合WebScoket应用例子以及介绍

    一.ActiveMQ的介绍? 1.JMS基础概念 JMS(java Message Service) 即使java消息服务,它提供标准的产生.发送.接收的接口简化企业应用开发,它支持两种消息通信模型: ...