浅谈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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
求得div 下 img的src地址的js代码
Feb 28 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
jquery等待效果示例
May 01 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
js实现不重复导入的方法
Mar 02 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
JavaScript实现队列结构过程
Dec 06 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新手上路(三)
2006/10/09 PHP
mysq GBKl乱码
2006/11/28 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
JQuery for与each性能比较分析
2013/05/14 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
vue写一个组件
2018/04/09 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
django下创建多个app并设置urls方法
2020/08/02 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
教你怎样写好自我评价
2013/10/05 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis