浅谈JS中的常用选择器及属性、方法的调用

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

<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中的常用选择器及属性、方法的调用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 基于js对象,操作属性、方法详解

    一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很

  • js获取和设置属性的方法

    复制代码 代码如下: function square(num){    var total = num*num;//局部变量    return total;}var total = 50;//全局变量var number = square(20);alert(total);//结果为50 function square(num){    total = num*num;//全局变量    return total;}var total = 50;//全局变量var number = squar

  • js选择器全面解析

    原生JS选择器有getElementById.getElementsByName.getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四个选择器的用法. 1.getElementById(通过ID获取元素) 用法:document.getElementById("Id");Id为要获取的元素的id属性值. 2.getElementsByName(通过name属性获取元素) 用法:document.getElementsBy

  • 常见的原始JS选择器使用方法总结

    常见的getElementById,getElementsByName,getElementsByTagName.但外国人不满意这些API,于是搞出了getElementsByClassName,后来一点点又出现了jQuery选择器,这里只说原始js选择. 1.getElementById 这是最常用的选择器,通过id来定位: 例: var test=document.getElementById("test").value;//获取文档中id为test的元素的值,并赋值给test变脸

  • 浅谈JS中的常用选择器及属性、方法的调用

    选择器.属性及方法调用的配合使用: <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="

  • 浅谈js中的in-for循环

    浅谈js中的in-for循环 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> </hea

  • 浅谈js中的三种继承方式及其优缺点

    第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //子类 function man(){ this.feature = ['beard','strong']; } man.pr

  • 浅谈js中的this问题

    this this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上 this的最终指向的是那个调用它的对象(这里其实并不完全对,this的指向有时候会很微妙,得靠自己去慢慢体会) 只有方法在对象上,对象调用当前方法,指向当前对象 function fnThis(){ let user='js'; console.log(this.user)//undefined console.log(this)//global(window) } fnThis(); 这

  • 浅谈js中字符和数组一些基本算法题

    最近在刷 fcc的题,跟升级打怪一样,一关一关的过,还挺吸引我的.今天抽时间把 Basic Algorithm Scritping  这部分题做了,根据一些提示,还是比较简单的.有些题的处理方式 方法,我想值得借鉴.比如在项目中有时候要处理一个字符,如果想不到一些相关的方法,还挺费事的,所以,在此记录下来,如果以后遇到一些字符或者数组处理,可以来翻翻这篇文章,希望以此得到一些提示而不是去翻文档. 看到此博文的博友,有更好更简单的代码或者好的想法,请留言交流(我一直觉得只有学习别人的优秀代码才能进

  • 浅谈JS中的三种字符串连接方式及其性能比较

    工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方法,这里将它们一一列出顺便也对它们的性能做个具体的比较. 第一种方法 用连接符"+"把要连接的字符串连起来: str="a"; str+="b"; 毫无疑问,这种方法是最便捷快速的,如果只连接100个以下的字符串建议用这种方法最方便. 第二种方法 以数组作为中介用 join 连接字符串: var arr=new Array(); arr.push(a);

  • 浅谈js中function的参数默认值

    func(string1,url,flag,icon),然后在另一个asp中调用它func(a,b),那flag和icon的值是什么,怎么定义默认值?谢谢! --默认值应该是 undefined 在函数内预设数可以用 arguments[i] i就是你参数的位置 第一个为0 所以要设定 flag 的默认值 则可以这么写 function func(string1,url,flag,icon){ if(!arguments[2]) flag = "123"; if(!arguments[

  • 浅谈JS中逗号运算符的用法

    注意: 一.由于目前正在功读JavaScript技术,所以这里拿JavaScript为例.你可以自己在PHP中试试. 二.JavaScript语法比较复杂,因此拿JavaScript做举例. 最近重新阅读JavaScript权威指南这本书,应该说很认真的阅读,于是便想把所学的东西多记录下来.后 面本人将逐步写上更多关于本书的文章. 本文的理论知识来自于JavaScript权威指南,我这里做一下整理,或者说叫笔记. 如果你的基础够好的话,完全理解不成问题,但是如果读得有些郁闷的话,可以加我的QQ:

  • 浅谈js中test()函数在正则中的使用

    test() 方法用于检测一个字符串是否匹配某个模式. 返回一个 Boolean 值,它指出在被查找的字符串中是否匹配给出的正则表达式. regexp.test(str) 参数 regexp 必选项.包含正则表达式模式或可用标志的正则表达式对象. str    必选项.要在其上测试查找的字符串. 说明 test 方法检查字符串是否与给出的正则表达式模式相匹配,如果是则返回 true,否则就返回 false. 每个正则表达式都有一个 lastIndex 属性,用于记录上一次匹配结束的位置. var

  • 浅谈js中的引用和复制(传值和传址)

    好像一般很少人讲到js中的引用和复制,不过弄清楚这个概念可以帮助理解很多东西 先讲一下很基础的东西,看看js中几种数据类型分别传的什么 引用:对象.数组.函数 复制:数字.布尔 字符串单独说明,因为它的特殊性,无法确定是传递引用还是复制数值(因为字符串的值是没法改变的,所以纠结这个问题也是没意义的)但是用于比较的时候显然是属于传值比较(稍后具体说比较的事) 下面讲一下在使用中的具体体现 最普通的使用就是赋值了 var a = 1; var b = a; //赋的是a的复制值 b ++; aler

随机推荐