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


Posted in Javascript onJuly 28, 2017

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

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

Javascript 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
JS实现商品筛选功能
Aug 19 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
vue webpack实用技巧总结
Apr 24 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 #Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 #Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 #Javascript
Angular指令之restict匹配模式的详解
Jul 27 #Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 #Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 #Javascript
Angularjs的键盘事件的绑定
Jul 27 #Javascript
You might like
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
7个JS基础知识总结
2014/03/05 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
Python字符串格式化输出代码实例
2019/11/22 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
python实现KNN近邻算法
2020/12/30 Python
is_file和file_exists效率比较
2021/03/14 PHP
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
运动会通讯稿400字
2014/01/28 职场文书
党建示范点实施方案
2014/03/12 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
2014年除四害工作总结
2014/12/06 职场文书
小学教学工作总结2015
2015/05/13 职场文书