学习JavaScript第一周的小结

Posted 2020-09-04 前端八宝粥

致敬javascript的作者：布兰登·艾克

 

知识点：

0.JS的写法

　　遇到 - 的，去掉减号然后把减号后面的字母大写。

　　例如，css里面的 margin-top，在JS里面要写成：marginTop。

href:"javascript:;"   

　　a标签没有内容可写的时候可以用这个空的js语句。

js三步走：

　　1.window.onload=function(){};

　　2.var获取元素

　　3.加事件

 

1.事件（或称属性）

　　window.onload  页面加载完成

　　onclick

　　onmouseover

　　onmouseout

　　onfocus  获得焦点

　　onblur    失去焦点

2.获取元素

　　document.getElementById();

　　document.getElementsByTagName();  通过标签名获取一组元素

　　document.getElementsByClassName();

　　var aLi=oUl.children 选取所有子级

　　document.getElementsByTagName(‘‘)[0];

　　获取一组元素的时候要写下标（从0开始），用下标指定第几个元素

　　一个元素用oBtn,一组元素用aBtn

3.流程控制语句（就是判断）

　　第一种 if            if里面的条件只有真和假。可以通过真假判断哪个走if哪个走else。判断真假的标准在第12条。

　　if (条件) {

　　　　语句1}

　　　else{

　　　　语句2}

　　　　}；

 

　　第一种的加强版

　　if (条件1) {

　　　　语句1}

　　　else if(条件2){

　　　　语句2}

　　　}else{

　　　　语句3

　　　}；

 

　　第二种：switch+case

　　switch(变量){

　　　　case‘条件‘;

　　　　　　语句1；

　　　　　　break；

　　　　default:

　　　　　　语句；

　　　　　　break;

　　　　}

4.循环

　　4.1 whil循环　　不确定次数的循环

　　　　(1)初始化   i=0

　　　　(2)条件      i<6

　　　　(3)语句　　alert（i）

　　　　(4)自增　　i=i++。如果不加自增会陷入死循环，死循环会消耗性能。

　　　　

　　　　var i=0;

　　　　while(i<6){

　　　　　　alert(i);

　　　　　　 i++;

　　　　　　} 

　　4.2 for循环　　有固定次数的循环

　　　　for(var i=0; i<6; i++){

　　　　　　alert(1);

　　　　　　}

5.class是js里面唯一特殊的东西，要写成className

6.  字符串    ‘12‘+5=125

　　　　　　带引号的都是字符串 ‘ ‘    " "

　　数组的两种写法

　　　　　　var arr=[1,2,3,4];

　　　　　　var Array(1,2,3,4);

　　innerhtml

　　　　　　改变HTML元素内容

7.数据类型

　　检测数据类型 : typeof

　　基本类型

　　　　string 字符串

　　　　number 数字

　　　　boolean 布尔值

　　　　undefined 未定义

　　复合类型

　　　　object 对象

　　function 函数

显式数据类型转换/强制类型转换

为什么要转

　　比如一些数字，可能被识别成字符串，转成数字方便使用

　　　　parseInt 整数

　　　　parseFloat 整数、小数/浮点数

　　　　Number 严格的数字

NaN 非数字（只是一个标识）

　　　　属于数字类型 自己不等于自己

隐式类型转换

　　　　-减 *乘 /除 %模。+需要用显式类型转换，否则会被识别成连接符。

8.运算符

　　+ - * / %

　　+= -= *= /= %=

比较运算符

　　< > <= >=

　　!=   ==

　　===    !==

逻辑运算符

　　! 非 取反

　　&& 与 并且

　　|| 或 或者

 

9.随机数    Math.random(); 0-1之间     1永远不会出现

　　function rnd(n,m){

　　return parseInt(Math.random()*(m-n)+n);

　　}

10.函数的两种形式

　　命名函数

　　　　function show(){                定义

            }

　　　　show();                             调用

　　调用方式：function show(a,b){      定义一个show函数

　　　　　　　　　　alert(a-b);

　　　　　　　　　　}

　　　　　　　　show(12,5);　　　　　调用这个函数，给它赋值让其执行

　　匿名函数

　　　　obj=function (){};             调用

　　　　function

 11.return ：返回值   return 12;    -> show();

　　　　阻止后面的程序

 12.判断真假的标准

　　真-true

　　　　非零数字 非空字符串 非空对象

　　假-false

　　　　数字零 空字符串  undefined（未定义）    null（空对象）       NaN

13.字符串操作

　　(1）str.indexOf(‘字符‘) 

　　　　查第一次出现的字符的下标，如果没查到则返回值-1

　　　　例：var str=‘dioauognosufoeiufosngvmlasisfji‘;

　　　　　　alert(str.indexOf(‘a‘));

　　(2)str.charAt(数字)

　　　　查某个下标对应的字符，如果下标超出了字符串长度则返回空

　　　　例：var str=‘aojfsngosajfoijfoe‘;

　　　　　　alert(str.charAt(100));　　　　

　　(3)str.lastIndexOf(‘字符‘);

　　　　返回最后一次出现该字符对应的下标

　　　　例：var srt=‘kafiajfoiaijefonvozjf‘;

　　　　　　alert(str.lastIndexOf(‘v‘));

　　(4)str.substring(起始位置,结束位置);

　　　　切一段，包含包括起始，不包括结束。（如果只写一个值，从开始位置一直切到最后）

　　　　例：var srt=‘diaufoueQQOIJLljfoiv‘;

　　　　　　var str2=str.substring(4);

　　　　　　alert(str2);

　　(5)str.toUpperCase();   转大写     str.toLowerCase();  转小写

　　　　例：var str=‘abc‘;

　　　　　　var str2=str.toUpperCase();

　　　　　　alert(srt2);　　　　　　

　　(6)str.split(‘‘);     转数组

　　　　例：var str=‘abcd‘;

　　　　　　var arr=str.split(‘‘);

　　　　　　alert(arr);

　　　　　　屏显a,b,c,d

14.数组操作

　　(1)

　　(2)

　　(3)

　　(4)

　　(5)

　　(6)

　　(7)

　　(8)

15.时间对象

　　var oDate=new Date(); 日期对象

 

　　var y=oDate.getFullYear(); 　　 年

　　var m=oDate.getMonth()+1; 　 月

　　var d=oDate.getDate(); 　　　  日

　　var day=oDate.getDay(); 　　 星期

 

　　var H=oDate.getHours(); 　　 时

　　var M=oDate.getMinutes(); 　 分

　　var S=oDate.getSeconds(); 　 秒

　　var MS=oDate.getMilliseconds() ;　　毫秒

练习：

1.变宽，变高，变色，向左移动300，恢复正常，显示/隐藏,改变div
2.1号店 导航top
3.一号店购物车（点击事件）
4.搜索框点击以后文字消失
5.百度登录（加透明层）

美丽说所有效果
自动播放选项卡
倒计时
苏宁倒计时