js - 简书

JavaScript

页面的动态效果（轮播图）以及用户的数据交互

js是一门基于对象和事件驱动的脚本语音，解决页面动态效果和用户数据交互的问题

js和html嵌入方式

分别为：行内式，script标签嵌入式，外部引用

行内式

行内式
onclik 表示点击事件
alert 弹窗

<body>
<!--
行内式
onclik 表示点击事件
alert 弹窗
-->
<input type="button" value="我是按钮" onclick="alert('芜湖')">
</body>

嵌入式

在script标签中编写js代码

每句结束都要加；

 <title>嵌入式</title>
    <script>
        alert("我是弹框");
    </script>
</head>
<body>
</body>

外部引入式

src=""引入js文件

外部引入，script中不可再写代码

    <title>外部引入式</title>
    <!--    外部引入式
        src=""引入js文件
        不可再在script标签中写代码-->
    <script src="js.js"></script>
</head>
<body>
</body>
</html>

语法格式和输出语句

一条js语句后使用分号结尾
注释：//单行注释 /**/多行注释
输出语句:
- alret(‘要展示的内容’) 弹框
- console.log（‘要输出的内容’）控制台输出
- document.write（‘要输出的内容’）向页面输出内容

js的组成

ECMAScript、DOM、BOM 三部分组成。

ECMAScript : (核心内容) 变量、分支、循环、函数...

DOM : 可以操作HTML页面（元素的增删改查）

BOM: 控制浏览器的行为。

ECMAScript核心内容

变量

var name=‘zs’

var name='张三',age='18';

内容.log 加tab 补全

<title>变量</title>
<script>
    //定义变量
    var name="张三";
    alert(name);
    //内容.log 加tab 补全
    console.log(name);
//    定义多个变量
    var name='张三',age='18';
    console.log(name, age);
</script>

标识符

使用数字字母和下划线$组成
不能使用数字开头
严格区分大小写
不能使用关键字
使用小驼峰命名法
- var myName=‘值’

基本数据类型

字符串类型 string 使用“”或者‘’
number 数据类型（整型，浮点型）
boolean 布尔类型 true false
object 对象类型
- var b={
  a:true,
  age:18,
  height:1.80
  }
null（空）占位，赋值后用typeof返回object，意思是这个对象为空
- 类似于python none
function函数类型
- function func(){}
typeof 查看数据类型
- typeof a
undefind 变量没定义或者定义没赋值一般是没定义

<title>数据类型</title>
<script>
    //字符串类型
    var name='zs',gender='男';
    console.log(name, gender);
    //typeof 变量  查看数据类型
    console.log(typeof name);
//    number类型(整型和浮点型)
   var age=18,height=1.80;
    console.log(age,height);
    console.log(typeof age,typeof height);
//    boolean布尔类型
    var a=true;
    console.log(a);
    console.log(typeof a);
//    object 对象类型
   var b={
       a:true,
       age:18,
       height:1.80
    }
    console.log(b);
    console.log(typeof b);
//    null 类型
    var b=null
    console.log(typeof b);
//    function类型
    function func(){}
    console.log(typeof func);
//    typeof 查看数据类型
//    undefind 变量没定义或者定义没赋值一般是没定义
</script>

数据类型的转换

将给定的值转换为字符串 string（）

//转化为字符串
var num=String(123);
console.log(num, typeof num);
var numstr=123+'';
console.log(numstr, typeof numstr);

将给定的值转化为数字
- Number（）
  - 解析全部
- parseInt（）
  - 从左到右解析成整数，碰到非整数就停止
- parseFloat（）
  - 从左到右解析成小数，碰到非整数就停止

<title>数据类型转化</title>
<script>
//    转化为数字
    var num=Number('123');
    //123
    console.log(num, typeof num);
    var num=Number('');
    //0
    console.log(num, typeof num);
    var num=Number('aaa');
    //NoN
    console.log(num, typeof num);
    var num=Number(true);
    //true=1，false=0
    console.log(num, typeof num);
    //parseInt 解析成整数 遇到非整数就停
    var num=parseInt("1z2.1a");
    console.log(num, typeof num);
    //parseFloat 解析成小数 遇到非小数就停
    var num=parseFloat('12.a1');
    console.log(num, typeof num);
</script>

将内容转化为布尔值 Boolean（）

//    转化为布尔值 Boolean（）
//    字符串转化为布尔 非空为真
    var b=Boolean('');
    //false
    console.log(b, typeof b);
    //数字转化为布尔  大于0的都是真
    var b=Boolean(0.1);
    console.log(b, typeof b);

运算符

算数运算符

a++，先赋值后自加

++a，先自加后赋值

--同理

<title>运算符</title>
<script>
    var a=1;
    b=a++;
    console.log(b);1
</script>

字符串拼接
- 任何数据类型和字符串拼接都会变成字符串
赋值运算符
- = 就是赋值运算符
- +=，-=，*=，/=,%=
比较运算符
- <,<=,>,>=,==,===,!=,!==
逻辑运算符
- &，&&，|，||，！

流程控制语句

分支语句（判断语句）

单分支
- if（判断）{执行语句}
双分支
- if（判断）{执行语句}else{执行语句}
多分支
- if（判断）{执行语句}else if（判断）{执行语句}else{执行语句}
switch case
- switch（变量）{
  
  case1（值）：
  
  default：
  
  }

循环语句

for循环
- for in循环，遍历出来的是索引
- 普通for循环
  - for （var i =值；i<100;i++）{}
- for 死循环
  - for （var i=值；True;i++）{}
while循环
- 普通while循环
  - var i=1；
    
    while（i<10）{
    
    循环体‘；
    
    i++；
    
    }
- 死循环
嵌套循环

函数

函数的作用：提高代码的重用率

函数格式

返回值

function f(a,b=10) {
    var c=a+b;
    return c;
}
f(1);
document.write(f(1));

匿名函数

    匿名函数
    var g=function () {
        document.write('我是匿名函数')
    }
    g()

自运行函数

//自运行函数
(function () {
    alert('我是自运行函数')
})();

js定义对象

第一种（new object）

var person=new Object();
person.name='zs';
person.age=18;
person.eat=function () {
        alert('今天吃啥')
};
person.eat();

第二种（多用）（字典）

var personObj={
    name:'zs',
    age:18,
    eat:function () {
            alert('今晚吃啥')
    }
};
personObj.eat();

第三种（方法）

function Person() {
    this.name='zs';
    this.age=18;
    this.ect=function () {
            alert('今晚吃啥')
    }
};
var person=new Person();
person.eat()

this关键词

谁调用，this就是哪个对象同python中的seif

dom

获取节点，对html的任意节点进行操作

document object model 文档对象模型

DOM : 可以操作HTML页面（元素的增删改查）

获取元素的方法

getElementById（）

通过id属性来获取元素

// var div=document.getElementById('i1');
// console.log(div);

getElementsByClassName

通过class属性来获取元素返回数组

var div=document.getElementsByClassName('c1');
console.log(div);//数组
console.log(div[1]);//通过索引获取具体的某一对象

getElementsByName

通过name属性获取元素返回数组

通过name属性
     var name=document.getElementsByName('us')
     console.log(name);//数组

getElementsByTagName

通过标签名称获取元素返回数组

通过标签名称
       var a=document.getElementsByTagName('div')
       console.log(a);//数组

设置样式

var div=document.getElementById('i1');
div.style.color='red';
div.style.backgroundColor='blue';

var lis=document.getElementsByTagName('li');
for (var i=0;i<lis.length;i++){
    if (i%2==0){
        lis[i].style.color='red'
    }else {
        lis[i].style.color='blue'
    }
}

属性操作

是否有具体属性 hasAttribute（‘属性’）
是否有属性 hasAttributes（）
设置元素属性 setAttribute（“属性“，‘内容’）
获取元素属性 getAttribute（“属性”）
删除元素属性 removeAttribute（”属性“）

var div=document.getElementById('i1');
//是否有具体属性
   var a=div.hasAttribute('class');
   console.log(a);
   //是否有属性
   var b=div.hasAttributes();
   console.log(b);
   //除了通过id查询，其他返回都是数组5
   var span=document.getElementsByTagName('span')[0]
   var c=span.hasAttribute('id')
   console.log(c);
//    设置元素属性
    var m=document.getElementById('k1');
    m.setAttribute('class','k1');
//    获取属性
    var m=document.getElementById('k1');
    var q=m.getAttribute('class');
    console.log(q);
    //    删除属性
    var n=document.getElementById('k2');
    n.removeAttribute('style')

文本操作

设置文本内容（会清空原有内容）

innerHTML 设置文本同时解析标签
innerText 只能设置纯文本

    var div=document.getElementById('d1')
//    innerHTML 设置文本同时解析标签
    div.innerHTML='<p style="color: orange">用户名输入错误</p>'
//    innerText 只能设置纯文本
    var div=document.getElementById('d2')
    div.innerText='<p style="color: orange">用户名输入错误</p>'

元素操作

元素中添加内容标签 createElement创建标签
克隆

//元素中添加内容标签
    //获取div
    var div=document.getElementById('d1');
    //创建p标签
    var p=document.createElement('p');
    //创建标签文本
    var t=document.createTextNode('我是p');
    //文本添加到p标签中（拼接）
    p.appendChild(t);
    //p标签添加到div中（拼接）
    div.appendChild(p);
//    插入文本框(应用场景：注册页面提示语言)
    var div=document.getElementById('d2');
     var input=document.createElement('input');
     input.setAttribute('type','password');
     div.appendChild(input);
//     (应用场景：注册页面提示语言)
//    克隆
    var div2=document.getElementById('d3');
    var div3=div.cloneNode(true);//克隆div
    div2.appendChild(div3)

事件（重点）

onclick 点击事件（重点）

<script>
    // var btn=document.getElementById('btn');
    // btn.onclick=function () {
    //         alert('我是点击事件')
    // }
    var btn1=document.getElementById('btn1');
    var jy=document.getElementById('jy');
    btn1.onclick=function () {
        var div=document.getElementById('div')
        var a=jy.cloneNode(true);
        div.appendChild(a)
    }
</script>

失去焦点事件 onblur（重点）

 设置失去焦点事件
    var username=document.getElementById('username');
    username.onblur=function () {
            var span=document.getElementById('span');
            span.innerText='用户名太受欢迎了';

获取焦点事件 onfocus（重点）

//设置获取焦点事件
username.onfocus=function () {
        var span=document.getElementById('span');
        span.innerText='';
}

键盘事件
- onkeydown

<script>
//获取div对象，设置定位大小颜色
    var d1=document.getElementById('d1');
    d1.setAttribute('class','c1');
// 对整个页面添加onkeydowm事件
    document.onkeydown=function (event) {
    //    w 87向上 a 65:左 s 83：下 d 68:右
    //    offsetTop 当前元素距离顶部的距离
    //    offsetLeft当前元素距离最左的距离
        if (d1.offsetTop>=0&&d1.offsetLeft>=0 ){
            //    逻辑判断
            switch (event.keyCode) {
                case 87:
                    if (d1.offsetTop!=0){
                        d1.style.top=d1.offsetTop-10+"px"
                    };
                    console.log('上');break;
                case 65:if (d1.offsetLeft!=0){
                    d1.style.left=d1.offsetLeft-10+"px"
                    };
                    console.log('左');break;
                case 83:d1.style.top=d1.offsetTop+10+"px";
                    console.log('下');break;
                case 68:d1.style.left=d1.offsetLeft+10+"px"
                    console.log('右');break;
            }
        }
    }

</script>

内置对象

定时器（重点）
- setInterval（func（），time）开启
- clearInterval()关闭

<script>
    var d1=document.getElementById('d1');
    var btn=document.getElementById('btn');
    var btn1=document.getElementById('btn1');
    btn1.onclick=function () {
        var interval=setInterval(function () {
            d1.style.top=d1.offsetTop+10+'px'
        },1000);
        btn.onclick=function () {
            clearInterval(interval)
        }
    };


</script>

延时器
- setTimeout（func（），time）设置
- clearTimeout() 清除

<script>
    var div=document.getElementById('d1');
    var a=setTimeout(function () {
            div.innerHTML='<p style="color: orange">我是p标签</p>'
    },2000);
    var btn=document.getElementById('btn');
    btn.onclick=function () {
            clearTimeout(a)
    }
</script>

日期 date

<script>
    //时间
    var d=new Date();//data数据
    console.log(d);
    console.log(d.getFullYear());
    console.log(d.getMonth()+1);月份少一个月
    console.log(d.getDate());
    console.log(d.getHours());
    console.log(d.getMinutes());
    console.log(d.getSeconds());
    console.log(d.getTime());
</script>

数组

 var arr=new Array('a',true,1);
    // 取值靠索引
    var a=[1,2,3]
//    常用方法 数组.length  获得数组长度
//    数组添加
    a.push('你好')//末尾添加
    a.push('nihao1');//开头添加
//    数组删除
    a.pop() //末尾删除
    a.shift()//开头删除
    a.splice(1,2,"a",'b','b')//1表示索引位置2表示两个值，abc为新增内容
</script>

数学对象

<script>
    //四舍五入
    Math.round(3.8)
//    向上取整
    Math.ceil(3.1)
//    向下取整
    Math.floor(3.1)
//    最大值
    Math.max(1,2)
//    最小值
     Math.min(1,2)
//    随机数
     Math.random()//0~1小数
    Math.random()*10//0~10小数
</script>

正则表达式
- // 1. 创建对象的方式
  // var reg = new RegExp('a');
  // var str1 = 'bac';
  // var b = reg.test(str1);// 测试 str1中是否包含正则表达式中的字符。
  // console.log(b);
  // 2. 第二种创建方式
  // var reg = /a/;
  // var b = reg.test('bc');
  // console.log(b);// false
  // 3.语法
  // 转义字符 \d、\w
  // var reg = /\d/;// \d 代表的是0-9范围的数字
  // var b = reg.test('abc231s');// 有即可。
  // console.log(b);
  // var reg = /\w/; // \w 数字、字母、下划线。
  // var b = reg.test('!@# $Q'); // console.log(b); // 元字符 .、*、+、?、^、$ []、{}
  // . 除了换行符外匹配任意字符
  // var reg = /./;
  // var b = reg.test('!@#'); // \n 换行。
  // console.log(b);
  // var reg = /z/;// z z字符出现0次或者多次。
  // var b = reg.test('azzzzz');//true
  // console.log(b);
window。onload=function（）{}

js