JS - 基础篇（上）-阿里云开发者社区

JS - 基础篇（上）

2022-05-19 229

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JS - 基础篇（上）

CSS：border-top-right-radius="50%";

JS：borderTopRightRadius="50%";

JS分号处理：写javascript的时候，如果每条语句都独自写成一行，是不需要写分号的，但是下一行如果遇到上面提到的符号，javascript可能会与下一行合并解释。其中以“/”、“+”和“-”开头的语句在实现项目中比较少见，以“（”和“[”开头的则非常常见。如果在return、break、continue、throw等关键字后面换行，javascript会在换行处填补分号。

(function(){...})() // 自动执行

document.getElementById(...).οnclick=function(){...}

DOM Ready 和 DOM Load 区别：点击打开链接

var a=1

console.log(a,a,a,a,a,a,a,a)

Ps：支持多个变量输出。

控制台输出：

console.log('8888',8888) // 控制台输出，前黑(字符串)后紫(数值)
console.log('8888'+8888,8888) // 88888888 8888  前黑(字符串)后紫(数值)
console.log('8888'-888,8888) // 8000 8888  前紫(数值)后紫(数值)
// number number string defined boolean object
console.log(typeof(123),typeof(NaN),typeof('123'),typeof(c),typeof(1==1),typeof(null))

this 用法：

while(i<tab.length){
  tab[i].index=i // 给 tab[i] 加个属性名称为index，同时赋值为i
  tab[i].onclick=function(){
    var e=0
    while(e<tab.length){
      tab[e].style.color='#000'
      con[e].style.display='none'
      e++
    }         
    // 这里不能是 tab[i].style.color='red' 因为 while 一进来就运行了
    // 使 i==tab.length，所以这里必须要用 this 指针，指的就是【当前点击的tab[i]】
    this.style.color='red'
    con[this.index].style.display='block'
  }
  i++
}

setInterval(函数,毫秒)，clearInterval(变量)，setTimeout(函数,毫秒)，如：

1) setInterval(function(){...},1000)

2) function fun(){...}

setInterval(fun(),1000) // F，加括号是执行函数的意思，但 setInterval 本身就带有执行函数的功能

setInterval(fun,1000) // T

3) var timer = setInterval(fun,1000)

clearInterval(timer) // 清除定时器

4) setTimeout(function(){...},1000) // 过1s后才执行函数，而setInterval是每隔 N s，执行

Ps：在每次开始 setInterval 前，保险起见先清除下 clearInterval。

scrollWidth、clientWidth、offsetWidth 区别。点击打开链接
parseInt(...)、Math.random()

console.log(Math.random()) // [0,1)
console.log(parseInt(Math.random()*10)) // [0,9]
console.log(parseInt(Math.random()*21)) // [0,20]
console.log(parseInt(5+Math.random()*(21-5))) // [5,20]
// console.log(a+Math.random()*(b+1-a)) // [a,b]
console.log(parseInt("1234asd")) // 1234
console.log(parseInt("1234a56sd")) // 1234

JS 数组：

arr.push(); // 向数组的末尾添加一个或更多元素，并返回新的长度

arr.unshift(); // 数组的开头添加一个或更多元素，并返回新的长度

arr.pop(); // 删除并返回数组的最后一个元素

arr.shift(); // 删除并返回数组的第一个元素

arr.splice(); // 数组里面的增删修改

///

var a=[1,2], c=[7,8]
var b=[11,'string',function(){return [1,2,'str',3]},[1,[2,3],4],{}] // int、String、function、[]、object
console.log(b)
console.log('b.len=='+b.length+'\n',b)
b[0]='str12'
console.log('b[3][1][1]=='+b[3][1][1]) // 3
console.log('b[2]()[2]=='+b[2]()[2]) // str
console.log(a.push('3','std'),a) // a.push() 返回 push 后数组.length
console.log(a.unshift(5,6),a) // a.unshift() 返回 unshift 后数组.length
console.log(a.pop(),a) // a.pop() 返回 pop 元素（在尾部）
console.log(a.shift(),a) // a.shift() 返回 shift 元素（在头部）
console.log(a.concat(c)) // a 不会被覆盖
console.log(a.reverse()) // a 会被覆盖
console.log(a.push(2),a.unshift(2),a)
console.log(a.indexOf(2)) // 取最先相等的那个元素下标
var m=[0,1,2,3,4,5,6]
// console.log(m.splice(a,b)) // a>=0, 从下标a开始，切掉b个元素（a也算进去）; a<0, 从末尾开始数（-a）个开始，切掉b个元素（-a也算进去）；并返回被切掉的元素
// console.log(m.splice(a)) // 从下标a开始，切掉后面所有的元素; -a 同理可得
console.log(m.splice(2,3,"replace",888),m) // "replace",888 替换被切掉的元素
var d='我们在学习前端课程'
console.log(d.length,d[4]) // 字符串也有长度和下标值

JS 对象：

var Object={name:'张三',age:18,height:185,zy:'计算机专业',arr:[1,2,3,5],f:function(){return {a:'111',b:[777,{cc:'haha',dd:[1,2,'获取的']},666]}}}//对象里有属性，属性后面跟值
Object.index='123'
console.log(Object.f().b[1].dd[2])
console.log(Object)

Ps：οnclick="这里不一定是函数，只要是执行的东西即可"

JS中“==”与“===”区别：

i、"==" 用于比较判断两者相等，在比较的时候可以转自动换数据类型。

ii、"===" 用于严格比较判断两者严格相等，严格比较，不会进行自动转换，要求进行比较的操作数必须类型一致，不一致时返回false。

iii、"==" 只要求值相等；"===" 要求值和类型都相等。

random() 函数取值范围：[0.0,1.0)。

在JavaScript中，两个整数进行除（/）运算，其结果要么整数（正好整除），要么浮点数（整除不了）。

JS中null、undefined区别：点击打开链接

typeof(NaN) // number 类型

$(this)和this关键字在jQuery中有何区别？

答：$(this)返回一个jQuery对象,你可以对它调用多个jQuery方法。而This代表当前元素,它是JavaScript关键词中的一个,表示上下文中的当前DOM元素。你不能对它调用jQuery方法,知道它被$()函数包裹,例如$(this)。

JS 输出

- window.alert（）警告框

- document.write（）写到HTML文档中

- innerHTML 写到HTML元素

- console.log（）写到浏览器的控制台

a、window.api：“window” 可以省略。

JS 数据类型

- 字符串（String）

- 数字（Number）

- 布尔（Boolean）

- 数组（Array）

- 空（Null）

- 未定义（Undefined）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js数据类型</title>
</head>
<body>
  <script type="text/javascript">
    /**
     * 字符串 (String)
     * 数字 (Number)
     * 布尔 (Boolean)
     * 数组 (Array)
     * 对象 (Object)
     * 空 (Null)
     * 未定义 (Undefined)
     */
    // var可以声明各种类型
    var x;               // x 为 undefined
    var y = 5;           // y 为数字
    var z = "John";      // z 为字符串
    // 字符串
    var carname="Volvo XC60";
    var carname='Volvo XC60';
    // 数字
    var x1=34.00;      //使用小数点来写
    var x2=34;         //不使用小数点来写
    // 布尔
    var x=true;
    var y=false;
    // 数组
    var cars=new Array();
    cars[0]="Saab";
    cars[1]="Volvo";
    var cars=new Array("Saab","Volvo","BMW");
    var cars=["Saab","Volvo","BMW"]; // 推荐
    // JavaScript 对象 键值对
    var person={
      firstname:"John", 
      lastname:"Doe", 
      id:5566
    };
    console.log(person.firstname)
    console.log(person["firstname"])
    // Undefined 和 Null
    // Undefined 这个值表示变量不含有值。
    // 可以通过将变量的值设置为 null 来清空变量
    var persons;
    var car="Volvo";
    car=null
  </script>
</body>
</html>