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

<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. 极致精简的webservice例子

    看了网上好多关于webservice的例子,基本上对初学者来说都是模棱两可云里雾里,现在,我将网上关于webservice的讲解提炼出来,通过一个最简单使用并且方便的例子,告诉大家什么是webserv ...

  2. Sublime Text 3 注册码

    最近觉得Sublime Text3比Notepad++好使,可惜需要购买,于是网上搜了一下,屌丝的福音啊: Sublime Text Build 3065 License key复制如下三个任意一个正 ...

  3. 怎样禁止手机app 中页面有时候会把数字当做电话号码，从而自动进行打电话功能

    想要禁止这种功能,只需要给头不加一个meta标签就可以了, <meta name="format-detection" content="telephone=no& ...

  4. 学会git玩转github,结尾有惊喜！有惊喜！有惊喜！

    一.什么是Github Github是全球最大的社交编程及代码托管网站(https://github.com/). Github可以托管各种git库,并提供一个web界面(用户名.github.io/ ...

  5. Chrome浏览器扩展开发系列之十六：扩展中可用的Chrome浏览器API

    除了Chrome浏览器支持的chrome.* API之外,Chrome浏览器扩展还可以使用Chrome浏览器为Web页面或Chrome app提供的APIs.对于Chrome浏览器2支持的API,还可 ...

  6. Servlet中 End event threw exception，错误404 的解决方法

    End event threw exception    SEVERE: End event threw exceptionjava.lang.reflect.InvocationTargetExce ...

  7. JavaScript实现淡入淡出

    <!DOCTYPE html> <html> <head> <title>css动画</title> </head> <b ...

  8. 是什么优化让 .NET Core 性能飙升？

    .NET Core(开放源代码,跨平台,x-copy可部署等)有许多令人兴奋的方面,其中最值得称赞的就是其性能了. 感谢所有社区开发人员对.NET Core做出的贡献,其中的许多改进也将在接下来的几个 ...

  9. Java8学习(3)- Lambda 表达式

    猪脚:以下内容参考<Java 8 in Action> 本次学习内容: Lambda 基本模式 环绕执行模式 函数式接口,类型推断 方法引用 Lambda 复合 上一篇Java8学习(2) ...

  10. 回味Python2.7——笔记3

    一.错误和异常 1.异常处理 >>> while True: ... try: ... x = int(raw_input("Please enter a number: ...