javascript 第二天---数据类型

代码的执行顺序

  1. 如果js代码写在内容之前比如 <script>document.getElementById("box").onclick = function(){alert(456); }</script> <div id="box">123</div> 就会报错出现

cannot et property onclik of null

意思是不能找到元素。

  1. 浏览器的执行顺序是从上到下,js如果出现在元素之前,浏览器是先读取js代码,元素还未被解析,所以js代码要写在元素后面,即</body>的后面
  2. 如果一定要把js代码写在元素之前,那么必须等到整个资源(src引入的资源/js资源href引入的css资源 整个文档)加载完毕 执行代码即可
<script>
    window.onload = function(){
        document.grtElementById("box").onclick = function(){
            alert(123);
        }
    }
</script>

诡异的alert

  1. 当alert放在div的上方 开启窗口时,div不加载 点击确定 加载 刷新 消失
  2. 当alert放在div的下方 开启窗口时,div不加载 点击确定 加载 刷新 消失

在chrome的64版本以上 包括360 QQ浏览器的最新版本,alert不会激活所在的选项卡 火狐浏览器没问题

console.log

  1. 控制台输出 进行调试,可以写js代码

数值类型 通过console里的typeof

cosole.log(typeof num);

  1. 数值型 num 包括小数和整数 在js当中小数运算是不精确的 我们不能用作判断
  2. 字符串 string 字符串用""包裹 字符串之间不能换行 会出现invalid or unexpected token表示标点符号错误,多了换行符。``反引号包裹可以换行
  3. 布尔值 boolean true/false
  4. function function 没有名字的函数为匿名函数,不能单独使用,可以var命名,也可以function abc(){} 有名字的函数称为具名函数,使用abc();函数名加()就算abc()出现在定义的函数之前也可以执行
  5. 对象 object 简单的写法为{},实际上是空的一个对象使用new得到的,new Object
var obj = {};
var obj = new Object;
console.log(typeof obj);

6.数组(array) object 数组中可以存放任何数据类型,支持换行书写,简单写法【数据,数据,数据】,实际上是new Array

var arr = [];
alert(arr);

结果弹窗什么都没有

  1. null 是一个object 表示再找对象但是没找到对象,拿到一个null
  2. undefined undefined 声明了但是没有定义给值var u;u= 123;

保留字/关键词

typeof true false Object new null undefined class var alert

操做标签的合法属性

比如id class title href src

如何获取合法属性

获取元素之后直接使用点语法var title = document.getElementById("box").title;

如何修改合法属性

获取元素之后用等号赋值修改已有属性

直接修改document.getElementById("box").title="nnnn" 如果想要获取类名class,需要用className

<div id="box" class="kkk"></div>
<script>
    var oBox = document.getElementById("box");
    oBox.onclick = function(){
    oBox.className = "mybox"
}
</script>

需要注意的是最好一开始就通过id获取到该元素并使用变量,以免之后改变了id值,再使用document.getElementById("box").id="box1" document.getElementById("box").className找不到该元素

添加合法属性

等号赋值相当于有则改之无则加勉 document.getElementById("box").title="hello";

操作自定义属性

<div id="stu" name="lisi" age="20" height="180">李四</div>

除了id可以获得元素,其他的拿不到

判断是否存在某个自定义属性

hasAttribute("想要查找的属性名字") 结果是true falseconsole.log(oStu.hasAttribute("name"))

获取属性

getAttribute("")

<script>
    var oStu = document.getElementById("stu");
    var myAttr = oStu.getAttribute("age");
    console.log(myAttr);
    
</script>

设置自定义属性

setAttribute("") 如果没有设置该属性,就会新增该属性,如果有就会覆盖oStu.setAttribute("age","20");

删除自定义属性

removeAttribute("") oStu.removeAttribute("age"); 如果删的时候没有找到,那么就算了

dataset

<div id="stu" data-name="lisi" data-of-birth="1992">lisi</div>
<script>
    stu.getAttribute("data-name"); 因为id是唯一的,所以可以直接这样写,但不规范
    
    var lisi = document.getElementById("box");
       console.log(lisi.dataset.name);
       console.log(lisi.dataset.ofBirth);//去掉连字符,驼峰命名
       //同样可以获取date-name,需要注意的是自定义属性前面加data-
       lisi.dataset.age = "20";//添加自定义属性
</script>
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭