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

<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. mysql启动关闭的批处理，感觉很好用在其他论坛帖子上找到的，感谢分享

    最近用mysql的时间比较多,每次都在计算机管理工具下面去启动,感觉很麻烦,于是搜索了下果然有前辈已经做出了这些东西,今天收藏整理,mysql启动关闭的批处理感觉很好用在其他论坛帖子上找到的,感谢互联 ...

  2. webpack以及loader 加载命令

    module.exports={ entry:'./main/main.js', output:{ path:'./build', filename:'bundle.js' }, module:{ l ...

  3. MyBatis基础

    一.大配置 <?xml version="1.0" encoding="UTF-8" ?> <!--文档类型,头文件--> <!D ...

  4. 快速学习springMVC框架原理

    一.通过导图的方法快速去理解springmvc的原理 二.架构流程. 1. 用户发送请求至前端控制器DispatcherServlet 2. DispatcherServlet收到请求调用Handle ...

  5. Chrome浏览器扩展开发系列之十八：扩展的软件国际化chrome.i18n API

    i18n是internationalization 的简写,这里将讨论软件国际化的问题.熟悉软件国际化的朋友应该知道,软件国际化要求,页面中所有用户可见的字符串都必须置于资源属性文件中.资源属性文件中 ...

  6. LinkedList源码浅析（jdk1.8）

    LinkedList由双向链表实现的集合,因此可以从头或尾部双向循环遍历. LinkedList的操作都是对双向链表的操作,理解双向链表的数据结构就很容易理解LinkedList的实现. 双向链表由带 ...

  7. java设计模式 01 开山篇

    一. 设计模式概述 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. ...

  8. Vulkan Tutorial 29 Loading models

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 应用程序现在已经可以渲染纹理3D模型,但是 vertice ...

  9. java.util.Arrays类

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

  10. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...