js

JavaScript

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

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

js和html嵌入方式

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

行内式

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

嵌入式

在script标签中编写js代码

每句结束都要加；

 嵌入式

外部引入式

src=""引入js文件

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

    外部引入式

语法格式和输出语句

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

js的组成

ECMAScript、DOM、BOM 三部分组成。

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

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

BOM: 控制浏览器的行为。

ECMAScript核心内容

变量

var name=‘zs’

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

内容.log 加tab 补全

变量

标识符

使用数字字母和下划线$组成
不能使用数字开头
严格区分大小写
不能使用关键字
使用小驼峰命名法
- 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 变量没定义或者定义没赋值一般是没定义

数据类型

数据类型的转换

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

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

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

数据类型转化

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

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

运算符

算数运算符

a++，先赋值后自加

++a，先自加后赋值

--同理

运算符

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

流程控制语句

分支语句（判断语句）

单分支
- 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


属性操作

是否有具体属性 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='用户名输入错误'
//    innerText 只能设置纯文本
    var div=document.getElementById('d2')
    div.innerText='用户名输入错误'

 

元素操作

元素中添加内容标签 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 点击事件（重点）




失去焦点事件 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
 



内置对象

定时器（重点）

setInterval（func（），time）开启
clearInterval()关闭
 




延时器

setTimeout（func（），time）设置
clearTimeout() 清除
 




日期 date




数组

 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为新增内容



数学对象




正则表达式

// 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('!@# []、{}
 // . 除了换行符外匹配任意字符
 // 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