JavaScript

基本语法

行内 : 相当于JavaScript属性直接使用
内部 : 介意放在body后
外部 : <script src="js文件路径" type="text/javascript " charset="UTF-8"></script>

变量

不需要申明数据类型用 var 修饰符声明变量
声明并赋值或者先声明再赋值 var a = 10.5; 或者 var a; a=5;
同一个var 声明多个变量 var x = "你好",y = "hello";

数据类型

-数值运算浮点型可能不精确,不要使用浮点数进行判断
-类型转换 parseInt() 转整数 , parseFloat() 转小数, 变量.toString 转字符串, 变量.toFixed(小数点位数) 转 四舍五入, Number(待转数据) 转数字 , String(待转数据) 转字符串

数据运算

== 代表相等,=== 代表数据和类型都相等
1. ? : 代表三目运算 3 > 5 ? 3 : 5 如果成立为3 否则为5

控制语句

参考Java流程控制

数组

数组的定义
1. var arr = [值1, 值2, 值3…];
2. var arr = new Array(值1, 值2, 值3…);
3. var arr = new Array(长度);
数组长度可以任意修改 arr.length = 5;
数组取值: arr[下标], 可以设置值 arr[2] = 10;
数组下标可以任意数据类型,不一定要数字

数组遍历

for (var i = 0; i <arr.length ; i++) {console.log(arr[i]) }

foreach

    arr.forEach(function (ele,index){
 
        console.log(ele); //打印数组遍历 ele自定义
        console.log(index); //打印索引 index自定义
        console.log("==========");
  })

for…in

for (var key in arr) {
 
 console.log(arr[key]);
 console.log("==========");
 
    }

数组方法
1. 数组的添加 arr.push(添加元素); 添加元素到最后
2. unshift 添加元素到最前
3. pop 删除最后一项
4. shift 删除最后一项
5. reverse 翻转意思是倒着排列
6. join 数组转成字符串 arr.join('-') 括号里把数组逗号改-
7. indexof 数组元素索引 arr.indexof(数组元素) 查找素组元素对应的索引
8. slice 数组的截取,元数组不发生变化 arr.slice(索引开始号,索引结束号)
9. splice 剪接数组,原数组变化,可以实现前后删除效果 arr.splice(从第几个位置开始,截取的元素个数,后面还可添加元素)
10. concat 数组合并 arr.concat(arr1);

函数

function 函数名(有参或无参){}
函数的调用: 函数名();
函数表达式: var 变量名 = function(){}
构造函数 var 变量名 = new function()
函数的作用域:全局变量与局部变量

内置对象

String

cahrAt(idx) 返回指定位置处的字符
indexof(chr) 返回字符串的位置
subtr(m,n) 返回给定字符串从m位置开始,取n个字符,n省略,取到字符串末
substring(m,n) 返回给定字符串从m位置开始,到n位置结束,n省略,取到字符串末
toUpperCase() 转大写
tolowerCase() 转小写
length 属性,不是方法, 返回字符串的长度.

Math

Math.random() 随机数
Math.ceil() 向上取整,大于最大整数
Math.floor() 向小取整, 小于最小整数String

Date

获取日期:getFullyear(),getMonth(),getDate…
设置日期:setYear()…

对象

对象的创建

var 对象名 = {};

  var obj = {};
  obj.name = "江婷婷";
  obj.age = 32;
  console.log(obj);

var 对象名 = {键:值,键:值,键:值…}; 值的类型可以是函数,数组等
```
  var obj ={
     name:"王政",
     age:18
 }
  console.log(obj);
```
var 对象名 = new object();
var 对象名 = object.creat(null);
var 对象名 = object.create(参考对象);

对象的序列化和反序列化

对象的序列化:将对象转化为字符串

 var obj = {};
  obj.name = "江婷婷";
  obj.age = 32;
  console.log(obj);
 
  var str = JSON.stringify(obj);
  console.log(str);

对象的反序列化:将一个JSON字符串转换为对象

 
var obj2 = JSON.parse(str);
 
 console.log(obj2);

this

只能在函数内部使用
this指的是调用函数的那个对象
在函数中使用this属于全局调用,代表全局对象,通过windows对象来访问.

JS事件

常用事件

onload：当页面或图像加载完立即触发
onblur：元素失去焦点
onfocus：元素获得焦点
onclick：鼠标点击某个对象
onchange：用户改变域的内容
onmouseover：鼠标移动到某个元素上
onmouseout：鼠标从某个元素上离开
onkeyup：某个键盘的键被松开
onekeydown：某个键盘的键被按下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="loadwindow()">
 
</body>
<script type="text/javascript">
 function loadwindow(){
 
     console.log("加载...")
 }
 
</script>
 
</html>

事件流和事件模型

事件的顺序两种类型:事件捕获和事件冒泡

事件的处理程序

HTML事件处理程序

DOM 0事件处理程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button type="button" id="btn">DOM 0事件处理程序</button>
</body>
<script type="text/javascript">
 var btn = document.getElementById("btn")
 
btn.onclick = function (){
    console.log("DOM 0事件处理程序")
 
}
</script>
</html>

DOM2级事件处理程序
1. addEventListener():增加事件- 参数1 事件名,参数2 处理事件的函数,参数3 事件冒泡(false)或捕获(true)
2. removeEventListener(): 移除事件- 参数1 事件名,参数2 处理事件的函数,参数3 事件冒泡(false)或捕获(true)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button type="button" id="btn">DOM 0事件处理程序</button>
</body>
<script type="text/javascript">
 var btn = document.getElementById("btn")
 
btn.addEventListener('click',function (){
     console.log("DOM 2级事件")
 });
 btn.addEventListener('click',fn);
 function fn(){
     console.log("按钮被点击了")
 }
</script>
</html>

BOM对象

系统对话框:弹窗设置
打开窗口: Windows.open();
关闭窗口: window.close();

时间函数

setTimeout():在指定的毫秒数后调用函数或计算表达式,返回一个唯一的标识; 也可以通过返回的标识clearTimeout(id):来清除指定函数的执行

var id = setTimeout(function,times);
      参数1:执行的函数
      参数2:时间,单位毫秒

  setTimeout(function (){
        console.log("10秒后执行的程序...");
    },10000)

setInterval():在指定的毫秒数后循环调用函数或计算表达式

history对象

history对象的属性:lengt,返回浏览历史列表中的URL数量
history对象的方法
1. back()
2. forward()
3. go(跳转的步数)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
</head>
<body>
<a href="https://www.baidu.com/">百度页</a>
<button type="button" onclick="window.history.back()">前进 </button>
<button type="button" onclick="window.history.forward()">后退</button>
<button type="button" onclick="window.history.go(2)">前进2步</button>
 
</body>
<script type="text/javascript ">
 
    console.log(window.history.length);
 
</script>
 
</html>

location对象

location对象的属性 href:设置或返回完整的URL
location对象的方法:
1. reload():重新加载当前的文档,相当于刷新
2. replace():用新的文档替换当前的文档

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
</head>
<body>
 
<button type="button" onclick="test()">跳转 </button>
<button type="button" onclick="test1()">替换 </button>
 
</body>
<script type="text/javascript ">
 
    var url = window.location.href;
    // 获取当前访问的URL
    function test(){
        // 设置跳转的url
        window.location.href = "https://www.baidu.com/";
 
    }
    function test1(){
        // 设置替换的url
        window.location.replace("https://www.qq.com/")  ;
 
    }
 
</script>
 
</html>

Dom 对象

节点

文档节点:document整个文档
元素节点:HTML的元素 <div>,<a>,<img>等
属性节点:元素的属性如id,href,class等
文本节点:自己的内容
注释节点:<!– – >

获取节点

getElementById():根据id获取Dom对象
getElementsByTagName():根据标签名获取Dom对象数组
getElementsByClassName():根据样式名获取Dom对象数组
getElementsByName():根据name属性获取Dom对象数组,常用于多选获取值

href="javascript:void(0)":伪协议,表示不执行跳转,执行指定点击事件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
</head>
<body>
 
<a href="javascript:void(0)" onclick="ByTagName()">测试</a>
 
<a href="javascript:void(0)" onclick="ByTagName()">测试2 </a>
 
</body>
<script type="text/javascript ">
 
    function ByTagName(){
       let p = document.getElementsByTagName("a")
 
        console.log(p[0]);
    }
 
</script>
 
</html>

创建节点

createElement():创建一个新的节点,需要传入节点的标签名称,返回创建的元素对象
createTextNode():创建一个文本节点,可以传入文本内容
innerHTMl:也能达到创建节点的效果,直接添加到指定位置了

插入节点

write():将任意的字符串插入到文档中
appendChild():向元素中添加新的字节点,作为最后一个字节点
insert(Before):向指定的已有的节点之前插入新的节点newltem:要插入的节点exsitingltem:参考节点需要参考父节点

间接查找节点

childNodes: 返回元素的一个子节点的数组
firstChild:返回元素的第一个字节点
lastChild:返回元素的最后一个子节点
nextSibing:返回元素的下一个兄弟节点
parentNode:返回元素的父节点
previousSibing:返回元素的上一个兄弟节点

删除节点

removeChild(): 从元素中移除子节点

表单

获取表单

document.表单名称
document.getElementByld(表单 id)
document.forms[表单名称]
document.forms[索引]

获取表单的元素

通过id获取:document.getElementByld(元素 id)
通过form.名称形式获取:myform.元素名称
通过name获取:document.getElementsByname(name属性值)[索引]
通过tagName 数组:document.getElementsByTagName('input')[索引]

获取单选按钮

获取单选按钮组:document.getElementsByName("name属性值")
遍历每个单选按钮,并查看单选按钮元素的checked属性
1. 选中状态:checked = 'checked',checked,checked = true
2. 未选中状态:checked =false 或未设置

获取下拉框

待定

提交表单

待定

表单校验

待定

目录