js基础02

外婆桥卖汤
180 阅读6分钟
js引用的两种方式
  • script
  • script src="" 注意：代码执行时是有先后顺序的,从上到下执行 ，在body上面的话无法获取到DOM元素,需要加一个window.onload意思是在代码执行完毕后执行函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // window.onload是在页面加载完成后执行
        window.onload=function(){
            var box=document.getElementById('box');
            console.log(box);
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>

closole控制台

console.log()

输出

console.dir()

详细输出

window弹窗

alert弹框

会把值转换为字符串

confirm

提示框，有取消与确认两个按钮，并且有返回值,点击确定就是true 取消就是false

var ac=confirm('aaaaa');
cosnoel.log(ac);
prompt

在confirm的基础上增加了信息输入框 返回值，如果点击确定，返回的就是输入的内容，如果没输入点击了确定就是空，如果点击取消就是null

        var ac={};
        console.log(alert(ac));//undefined
        console.log(confirm('准备好了吗'));//确认就是true  取消就是false 
        console.log(prompt('你是男孩还是女孩'));//输入且确认就是输入内容   取消 null  未输入确认为空

获取属性名对应的属性值，方法：

1.对象.属性名 2.对象['属性名'] 注意：数字的属性名不可以用obj.要用另一种,如果对象里面没有的属性，结果为undefined

对象

属性名：一般为数字或字符串 属性值：可以为任何数据类型

// 对象
// 属性名：一般为数字或字符串
// 属性值：可以为任何数据类型
var obj={name:'xiaowang',age:'28',100:'he'};
// 获取属性名对应的属性值，方法：
// 1.对象.属性名
// 2.对象['属性名']
// 注意：数字的属性名不可以用obj.要用另一种
console.log(obj.name);//xiaowang
console.log(obj['name']);//xiaowang
// console.log(obj.100); 会报错，数字的属性名不可以用obj.
console.log(obj[100]);//he

var name="aa";
console.log(obj[name]);//undefined

添加、更改与删除

// 更改,添加与删除
var obj={name:'xiaowang',age:'28',100:'he'};
obj.name='didi';//更改
obj.user='wowowo';//添加
obj.age=null;//删除 把值变为空
delete obj.age;//彻底删除
console.log(obj);

基本数据类型与引用数据类型的区别：背

一个是按值操作，一个是按空间地址操作

思考题:

  • 堆内存：
  1. 主要用来存放引用数据类型，
  2. 如果是对象，存的就是属性名和属性值，如果是函数，把函数当成字符串存起来
  • 栈内存：
  1. 供js代码运行
  2. 存基本数据类型的值
var a=12;
var b=a;
console.log(b);//12
var obj1={"name":"lili","age":12};
var obj2=obj1;
obj2.age=18;
console.log(obj1.age);//18

var obj={
    n:10,
    b:obj.n
};
console.log(obj.b);
// 报错  因为obj还没有存完，是undefined，然后undefined没有属性，所以报错
//TypeError: Cannot read property 'n' of undefined 
//n前面的obj为undefined

if判断

只要一个条件成立，下面就不执行了

//if语句
var ad=12;
//单个的一个if
if(ad>10){
    alert(1);
}

//if==> else if ==> else   else if可以有多个
if(ad<10){
    alert(1);
}else if(ad<20){
    alert(2);
}
else{
    alert(3);
}
//可以进行嵌套
if(ad>10){
	if(ad>5){
	    alert(1);
	}
}
判断符号 背
  • && 且，代表两边都要满足
  • || 或，代表两边满足一个就可以了

三元运算符 背

条件?条件成立执行的语句:条件不成立执行的语句，多条语句用()包起来，用,隔开 特殊情况，else里没有东西，也需要写:否则会有语法错误，可以用null /undefined /void 0来做占位符

var num=5
if(num>=5){
   num++;
   alert(2);
}else{
   num--
}
//改成三元运算符
num>=5?(num++,alert(2)):num--
//num>=5?num++:void 0; else里没有东西时
思考题
var num=12;
if(num>0){
   if(num<10){
     num++;
   }else{
     num--;
     console.log(num);
   }
}else{
    if(num==0){
       num++;
       num=num/10;
    }
};
//num>0?(num<10?num++:num--,console.log(num)):(num==0?(num++,num=num/10):null);

switch语句

每个case都要加break防止继续向下执行 case等于三个等号的绝对相等

var num=6;
if(num==5){
    num++;
}else if(num==6){
    num--;
}else {
    num=0;
}；
//改成switch语句

console.log(num);
switch(num){
    case 5:
        num++;
        break;
    case 6:
        num--;
        break;
    default:
        num=0;
}
== 与=== 的区别

==是比较，可以不用类型相等,如果数据类型不同，会先转换为相同类型再比较 ===是绝对比较，必须一模一样

逻辑运算符

&& 逻辑与
  • 左边为true执行右边,如true&true
  • 符号两侧都为true，结果为true，否则为false
& 换位与
  • 会先将符号两侧换算成二进制
  • 然后将二进制进行比对，个位比对个位，十位比对十位等等，位置上的值相同为1，否则为0
  • 比对完成后将结果换算成十进制
    1&2     
    //1的二进制是1 2的2进制是10
    //可以理解为01与10进行比较，个位比较1不等于0，所以结果的个位是0，十位0不等于1所以十位为0，最终的二进制结果为00，换成十进制也是0
    
    加深巩固
    3&10
    //转2进制 11 1010
    //二进制结果 0010
    //换算为十进制2
    //结果为2

|| 逻辑或

  • 左边成立不执行右边，左边不成立执行右边
  • 两个有任意一个成立就为true

| 按位或

  • 将两侧分别转换为二进制
  • 然后每个位相比较，只要上下两位其中有一个是1，那么结果的那个位数就是1
  • 最终将结果转换为10进制返回
    1&2
    //转二进制 1 10
    //个位 1比较0，1存在，结果个位为1
    //十位 0比较1，1存在，结果十位为1
    //二进制结果 11
    //换算十进制3

^ 按位异或

  • 将两侧转换为二进制
  • 按照位数进行比较(个位个位，十位十位等等),左右两位如果相同就位0，不同为1
  • 然后转换为10进制返回
    1^3
    //换算二进制 1 11
    //个位 1比1，相同，为0
    //十位 0比1，不同，为1
    //二进制结果10
    //换算十进制2

<< 按位左移

  • 将左侧转换为2进制
  • 然后给左侧加上右侧个数的0，也就是进位
  • 然后将进位后的二进制转换为10进制
    1<<2
    //左侧二进制为1 ，进位右侧个数，结果为100
    //换算为10进制,结果为4

>> 按位右位

  • 将左侧转换为二进制
  • 将左侧从后往前删去符号右边的位数
  • 然后转换为十进制返回(结果最小为0)
    1>>2
    //换算2进制  1
    //减去个位十位，发现不够减
    //那结果为0

~取反

ob001 代表1
~0b001 为-2

计算

3 & 1 === 1
3 & ~1 === 2

先将~1转换为2进制 01 然后取反，为10 那么11 & 10 结果为 10，所以结果为2

检测数据类型的几种方法 背

  1. typeof"值"
  • 特殊记忆：typeof"null"为"object"
  • ==返回值一定是字符串，是用""包裹的数据类型==
  • 无法细分对象数据类型中的数组等
  1. instanceof
  2. constructor
  3. Object.prototype.toString.call()

面试题

typeof[];//"object"
typeof typeof[];//"string"

js设置鼠标悬浮，鼠标离开

  • 悬浮:onmouseover
  • 离开:onmouseout
    Box.onmouseover=function(){
        // alert('鼠标悬浮');
        Box.style.color="red";
    }
    Box.onmouseout=function(){
        // alert('鼠标离开');
        Box.style.color="blue";
    }

js设置css样式

属性名.style.样式='样式属性'

Box.style.color="red";

js添加/获取文本 js添加/获取结构

innerText innerHTML innerText只能识别文字，innerHTML可以识别标签

    // console.log(Box.innerHTML);//"<h1>haha</h1>"
    // console.log(Box.innerText);//"haha"
    // Box.innerText="<h2>didi</h2>";
    // Box.innerText="<h2>didi</h2>";

JS点击事件

onclick 注意：this是当前点击事件

    Box.onclick=function(){
        console.log(this.style.color);
    }
avatar
文章
阅读
粉丝