浅谈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 相关文章推荐
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
window.location.hash 属性使用说明
Mar 20 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
简单的jQuery入门指引
Jul 28 Javascript
简单谈谈json跨域
Mar 13 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
python3之微信文章爬虫实例讲解
2017/07/12 Python
python生成excel的实例代码
2017/11/08 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
儿科护理实习自我鉴定
2013/09/19 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书