JavaScript总结

1.js放置在body内部的底部

2.<script>书写js代码

3.prompt() 可输入弹出框

4.
变量
F12审查元素 ,console控制台，可以看报错情况

5.
var 声明变量

6.
变量的命名规则：

变量可以由数字、字母和下划线和$组成
变量不能以数字开始
变量不能是关键字或保留字
不能超出255个字符
区分大小写

7.
js是弱类型的语言，存储的数据类型有当前存储的值来决定

8.
变量的类型 typeof(变量）

9.
基本数据类型：

number数值类型，类似于数学中的1223，-123
  var a=-10.12;
string字符串类型，用引号包裹的都是字符串
 a='123';
boolean布尔类型，分true或者false
 a=true;
undefined未定义或者未赋值
  var b;
  console.log(typeof(b));
复杂数据类型 object
 var list=[100,100,true];
 console.log(typeof(list));

10
每一行js结束，必须加分号

11.
var a=-10.12;
相当于把-10.12的值赋值给a

12.
console.log(typeof(a));
console.log()在控制台打印
使用a，把a的值读取出来

13.
在js中单双引号用法一模一样

14.

变量类型的转换

一般通过表单获取的都是字符串
parseInt()把字符串转化为整数（截取字符串前面的数值，其余的自动忽略）、把小数转化为整数，如果不能转化，得到的是NaN
parseFloat()用法和parseInt()一模一样，只是可以转化为小数（有小数直接转化，没有小数，默认还是整数）

a=parseInt(a);
把a转化完赋值给a
强制转换或者隐式转换
数值类型+字符串=字符串
程序执行，从左到右
console.log(1+'2'+1+2);
得到字符串：1212

数值类型+布尔类型=数值类型 
true转化为1，false转化为0;
如 console.log(1+true);
得到2

布尔类型+字符串类型=字符串类型
如 console.log(true+'true');
得到truetrue

15.

++和--的用法

a++,先把a的值作为表达式的值，然后a的值加1
++a先把a的值加1，表达式的值是a
a--和--a同样的道理，只是减1
var a=1;
console.log(a++)
得到1
console.log(++a)
得到2

             //   a的值： 2    2   1      2       2       1
            var b=(a++)+a+(--a)+(++a)+a+(a--)
            //            1      2       1        2      2     2      
            console.log(b);
            console.log(a)

16.
运算符：

赋值运算符,
把a的值赋值给a：=   +=   -=    *=    /=
a=a+2;可简写为a+=2;

算法运算符：
+  -  *  /(除以） %（求余）余数有正负，正负有被除数决定
console.log(10/3）10是被除数 
得到3.3333....
  console.log(10%-3);
得到1
 console.log(-10%3);
得到-1
 console.log(-10%-3);
得到-1

关系运算符：
==   ===  !=   !==  >= <=  >  < 得到的都是布尔类型
==判断值是否相等，不考虑类型。===判断是否一模一样
console.log(1===1)
得到true
console.log(1!='1');
得到false
 console.log(1=='1');
得到true
 console.log(1==='1');
得到false

逻辑运算符：
&&与 ||或 ！取反
&&只要有一个为假，结果就为假  ||只要有一个为真，结果就为真，代码从左到右执行
  console.log(2&&3&&4&&0&&3)
得到0
console.log(0||0||4||4||3)
得到4

17.
代码分步执行，布尔类型和数值类型比较的时候，强制转换
a=800;
console.log(10<a<100)
得到true；说明是错的
应改为：console.log(10>a&&a<100);

18.
流程控制语句：

格式一、
if（条件）{
条件为真时，执行代码
}

格式二、
if（条件）{
条件为真时，执行
}else{
条件为假时，执行
}
如
if（age<18）{
alert('年龄太小了');
}else{
alert('上网吧');
}

格式三、
多条件判断
if语句有跳楼现象
if（条件1）{
条件1为真时，执行完该语句，直接跳出
若条件1为假，则判断条件2
}else if（条件2）{
条件2为真时，执行
}else if（条件3）{
条件3为真时，执行
}.....
else{
以上条件都不符合时，执行
}

19.
0是假，undefined是假，字符串都为真
如  if(1){
                console.log('hahah')
            }
得到hahah
 if(undefined){
                console.log('hahah')
            }
不执行hahah

20.
不同变量类型（如常量和变量之间），如果需要拼接，使用+
如 if(a<=36000){
                alert('您需要缴税'+a*0.03);
            }else if(a<=144000){
                var sum=36000*0.03+(a-36000)*0.1;
                alert('您需要缴税'+sum)
            }

21.
循环：

用来实现遍历的代码，有顺序
for（a初始化；b条件；c继续下去的条件/次数）{
循环体
}
第一步：执行a，初始化
第二步：判断是否符合b，如果符合，执行第三步，否则跳出循环
第三步：执行循环体，执行c，重复执行第二步
如 计算1-100的和
  var sum=0;
            for(var a=1;a<=100;a++){
                sum=sum+a;
                
            }
有行和列的，如九九乘法表
  for(var i=1;i<=9;i++){
                for(var j=1;j<=i;j++){
                    // i * j = i*j
                }
            }

22.
函数：

封装性，把重复的代码封装起来，一般这些代码具有特殊的用途
a.函数的定义，函数名字命名规则和变量名命名规则一样
function 函数名字（）{
函数体
}

b.函数的使用 ：

函数名字（）

23.
a.定义函数
function fn(){
console.log('zsh');
console.log('hfhd');
}
b.使用函数，相当于执行函数体的代码
fn();
fn();
得到
zsh
hfhd
zsh
hfhd

24.
有参函数

a.定义函数的时候的参数，称为形参，相当于声明变量
function fn(a){
console.log(a);
}
b.使用函数的时候的参数，称为实参，相当于给变量赋值
fn('sndf')；
fn(3);
得到sndf 3

25.
有返回值的函数

使用函数得到的就是return后面的内容
function fn(a,b){
return a+b;
}
var c=fn(1,2);
document.write(c);
得到3

26.
变量的作用域：

在js中声明的变量，只有函数的作用域
声明的变量的作用范围。向上寻找距离该变量最近的开始的函数的{变量的作用范围就是该{之内}}
  function fn(){  
                var a=10;
                console.log(a)
            }
           fn()
得到10

27.
注意问题：

1.
var b;
console.log(b);
不会出错，但打印出undefined
如果只有一条console.log(b);语句，会报错，b 没有定义
2.
变量会把声明提升到整个作用域的最前面，赋值还是在原来的位置
如
console.log(a);
var a=100;
不会出错，而是等价于
var a;
console.log(a);
a=100;
由于代码从上到下执行，所以得到
undefined
3.
全局变量和局部变量同时存在时，局部变量生效
如
var a=1;
function fn(){
console.log(a);
var a='hello';}
fn()
得到undefined
改为
      var a=1;
        function fn(){
            var a='hello'
            console.log(a);
           
            }
            fn();
得到hello
4.
没有声明的变量，作用域是赋值以后生效（不建议写）
5.
function fn(){
此处的代码，使用函数fn()的时候生效
a=100;
}
fn()如果没有此语句，则报错
console.log(a);
得到100

28.
dom元素的控制

 <button id="btn">按钮</button>
 <script>
数组存储的就是一组数据
var list=['a','b','c','d']双引号也可以
获取数据的某一个元素，数组名字[下标]，下标从0开始
console.log(list[2]);
得到c
数组长度，数组名字.length
console.log(list.length);
得到4
通过id名获取标签document.getElementById('id名')
var tag=document.getElementById('btn');
事件的结构，获取标签.on+事件类型（click)=function(){执行的代码}
tag.οnclick=function(){
修改内容，获取标签.innerHTML='修改的内容'
tag.innerHTML='点过了';
产生随机数 Math.random() 产生0-1之间的随机数，含0不含1
console.log(Math.random())；
定时器 setInterval(function(){每隔一段时间，执行代码}，时间ms)
定时器可以叠加

  setInterval(function(){
                    console.log(Math.random())
                    var n=parseInt(Math.random()*list.length);
                    tag.innerHTML=list[n];
                },1000)
     }
 </script>

获取标签

1.
id名相当于身份证，是唯一的，命名规则和类名一样
2.
通过id名获取标签，多个id，只能识别第一个
3.
获取标签的html(标签开始和结束中间的内容称为标签的html）如获取标签.innerHTML
4.
修改标签的html 获取标签.innerHTML='修改的值'，如tag.innerHTML='修改啦';
5.
例子：点击按钮以后，交换p和button的内容.

<button id="btn">你好</button>
<p id="txt">哈哈</p>
<script>
 var tag=document.getElementById('btn');
  var txt=document.getElementById('txt');
tag.onclick=function(){
var a=tag.innerHTML;//把tag的html获取出来，赋给a；
var b=txt.innerHTML;
tag.innerHTML=b;//修改tag的html
txt.innerHTML=a;
以上代码等价于
 var a=tag.innerHTML;
   tag.innerHTML=txt.innerHTML;
    txt.innerHTML=a;

6.
注意：通过标签名获取标签document.getElementsByTagName('标签名') 得到的是一个类数组
不能直接进行控制，即不能这样写tags.innerHTML='修改啦'，即使只有一个，也只能选择到具体的某一个，如 tags[i].innerHTML='修改啦'，数组[下标]
如
把<ul >
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
           
        </ul>
每一条都变成修改啦，则需要用到遍历，
var tags=document.getElementsByTagName('li');
for(var i=0(因为数组下标是从0开始的）;i<tags.length;i++){
tags[i].innerHTML='修改啦';//当i=0，tags[0]即第一个变为修改啦
}

同样道理的有
 // a.children选择a的子级 得到的是一个类数组，不能直接进行控制既是不能写成,，即使只有一个也不可以写成tags.style.color='red'；
如
 var box=document.getElementById('box');
var tags=box.children;
7.
获取标签的CSS

获取标签.style.css样式(css样式书写方式和之前一样，只是如果样式带有中横线，去掉中横线，中横线后的首字母大写）='值';
如
var btn=document.getElementById('btn');
tags.οnclick=function(){

this.style.color='red';//this代表用户当前操作的标签，一般用在事件的内部。可以用btn.style.color='red';
btn.stye.fontSize='100px';
8.
控制标签属性
修改属性 获取标签.setAttribute('属性','值')
获取属性 获取标签.getAttribute('属性')
9.
<标签 k="v" k="v"></标签>所有放置在标签后面的，都称为标签属性。
10.
例子：

<style>
div{
}
.box1{
color:red;
}
</style>
<body>
<div id="box"></div>
<img src="01.png" alt="" id="pic">
<script>
var box=document.getElementById('box');
var pic=document.getElementById('pic');
鼠标移入box发生的事件
box.onmouseenter=function(){
this.setAttribute('class','box1')//this可以改为box,class是指box1的属性是个类，box1是自定义的，不需要是标签的属性值,此语句是修改box的样式（即属性）
}
鼠标移出box的事件
box.onmouseleave=function()
{
alert(pic.getAttribute('src'))//移出提示图片，此语句是获取属性src.
}

11.
遍历标签，绑定点击事件
 for(var i=0;i<tags.length;i++){
                tags[i].οnclick=function(){
 this.style.color='red';
}
注意：点击的时候，for循环已经执行完毕，i的值是tags.length
所以不可以把this改为tags[i].style.color='red';this在事件中代表用户当前操作的标签。
14.
获取src属性
var src=this.getAttribute('src');
15.
因为body是唯一的，所以用document.body选择body标签

修改body的css样式
 document.body.style.background='url('+src+')';
16.
在js中，单引号和双引号的用法一模一样，单引号内部不能放单引号，只能放双引号，双引号内部只能是单引号。

17.
display:block;//显示标签的时候，看标签的性质。由于点击选项卡头部时，获取到显示的内容
18.
自定义标签属性
lis[i].setAttribute('ccq','i')
获取自定义属性
var index=this.getAttribute('ccq')

19.transform:translate(-50%,-50%);
translate如果移动是百分比，参照物是自身
20.
模板字符串用来常量和变量拼接，使用反引号包裹(英文状态下的1左边的键)，遇到变量用${},如 `常量${变量}常量`

如 document.body.style.background=`url(${src})`;

21.
可以通过on+事件类型 属性绑定事件（即<span οnclick="del(this)">x</span>），点击以后执行del方法内部的代码，this代表当前操作的标签
22.
b.parentNode.removeChild(b)删除b标签，a是b的父级
a.parentNode选择a的父级，得到的是唯一的。
23.
追加
a.appendChild(b)把b追加到a内部的后面

a.parentNode.insertBefore(b,a)//把b追加到a的同级之前
如wrap.insertBefore(tag,wrap.children[0]);
24.
控制表单元素的值
获取值 获取标签.value
修改值 获取标签.value='值'

25.
表格

1.合并边框
table{
border-collapse:collapse;
}
2.
table实现表格，tr实现一行的效果，td实现一列的效果
3.
类名可以相同。id名不可以
4.
checked选框选中
 <input type="checkbox" class="select">
5.
在全选中，类名一样
通过类名获取标签：
var tags=document.getElementsByClassName('select')
6.
在反选中，需要获取值取反以后重新赋值，才能达到反选的效果
如
fan.οnclick=function(){
for(var i=0;i<tags.length;i++){
 tags[i].checked= !tags[i].checked；
}
全不选,获取标签.checked=true选中，false不选中
btn.οnclick=function(){
box.checked=false;
}
6.

 社区方法

        属性控制（例子淡入淡出中可见）
            修改/新增  获取标签.属性(和标签中书写方式一样，除了class书写为className)='值'
            如tags[i].checked=false; tags[j].className='';tags[num].className='current';/
            获取属性的值   获取标签.属性
             alert(pic.src);
        通过id名获取标签  直接选中id即可(id名需要和变量名命名规则一样)
非社区方法：
 控制标签属性
    修改属性 获取标签.setAttribute('属性','值')
    tags[j].setAttribute('class','');tags[num].setAttribute('class','current');
    获取属性 获取标签.getAttribute('属性')
    alert(pic.getAttribute('src'))

7.
translateX设置百分比，参照物是当前标签的宽度
8.
ul的子级只能是li，li的父级只能是ul或者ol

9..
定义一个对象,用花括号括起来，，把事物的属性和行为提炼出来
var stu={
//k:v k代表的是属性，v代表的是值
name：'ccq',
age:12,
score:[80,90],
eat:function(){
alert('你吃饭了吗')
}
}

10.
克隆标签

var list=[{
title:'这是口红',
con:'299'
}]
for(var i=0;i<list.length;i++){
var tag=wrap.children[0].cloneNode(true);
if(i==0){
wrap.innerHTML='';
}
tag.children[0].innerHTML=list[i].title;
tag.children[1].innerHTML=list[i].con;

11.
a.cloneNode()克隆a标签，如果不带参数，不克隆内容，加true克隆内容
12.
console.log(encodeURI(box));    //只编码了中文
            console.log(encodeURIComponent(box));//特殊字符和中文编码了
 eval()把可执行的字符串转化为js
13.
 // 获取当前客户端日期
            var d=new Date();
14.

程序中的月份只有0-11月份

例子：计算当天离2021年10月1日还有多少天

 
var d=new Date();
var date = new Date(2021,9,1);
 var t=parseInt((date.getTime()-d.getTime())/ (24 * 3600 * 1000))//计算2021,10,1到今天的天数，通过毫秒进行计算，除以1000得到秒，除以60得到分，除以60得到时，除以24得到天

15.
  // 可以放置指定时间的毫秒数
 var m=new Date(110254671000)

.16.
星期几是getDay
计算110254671000的年-月-日 时-分-秒

var m=new Date(110254671000);
date.innerHTML=`${m.getFullYear()}-${m.getMonth()+1}-dd hh:mm:ss`;

17.
confirm确认框，点击确认返回true 否则false
           if(confirm('您确认关闭嘛')){
               alert('关闭窗口')
           }
18.
//history.go(1)指的是返回上一个页面,go(-1)下一个页面
<button οnclick="history.go(1)">history</button>
19.
点击按钮跳转页面
<a href="地址">按钮</a>
20.
使用isNaN()判断一个变量是否是NaN
var m=parseInt(txt.value);
if（isNaN(m)){
alert('请输入数值类型')
}
21..
跳转页面
<button οnclick="location.assign('跳转的页面地址')">assign</button>
替换页面，不能返回
<button οnclick="location.replace('替换的页面地址')">assign</button>
<button οnclick="location.reload('')">assign</button>
22.
<button οnclick="window.moveBy(20,20)">按钮</button>
23.
<button οnclick="window.open('地址','zshmiao','width=500,height=300,scrollbars=no,directories=no ')">打开窗口</button>

<!-- 第三个参数，限制新打开窗口的形态 ，只有宽和高有用 -->
24.
        // setTimeout(function(){},时间)  clearTimeout()单次定时器
         function fn(){
              setTimeout(function(){
                    console.log(111)
                 //  函数内部调用自身，函数的递归调用
                   fn()
               },1000)
          }
          fn()

总结：

获取标签

    通过id获取标签:

    通过类名获取标签:

    var box=document.getElementById('box');

    var tags=document.getElementsByTagName('li');

控制标签的html 

    获取标签的html 

    tag.innerHTML

    修改标签的html 

    tag.innerHTML='你好'

修改标签的css(样式)

tag.style.color='red';

btn.style.fontSize='100px';

document.body.style.background='url('+src+')';

控制标签的属性

    获取标签的属性

    tag.getAttribute('属性')

    修改标签的属性

    tag.setAttribute('属性','值')

社区方法：

tag.属性=‘值’

事件结构

获取标签.on+事件类型=function(){}

this

代表用户当前的操作。