JavaScript
文章目录
1、格式
- 行内写法
<script>
//注释
</script>
-
外部导入
<script src="JS文件路径"></script>
-
<!-- type不用显式定义,默认也是JavaScript script标签需要成对出现 --> <script type="text/javascript"> </script>
-
2、数据类型
-
变量定义
//在ES6中推荐使用let定义局部变量 var 变量名 = 变量值; let 变量名 = 变量值;
-
基本数据类型
-
number
:数值型,不区分整数和小数。NaN //not a number Infinity //表示无限大
-
字符型
:“字符”,‘字符’ -
布尔值
:true,false -
比较运算符
:== //等于:类型不同,值相同,会判定为true,"1" 和 1会判定为true === //绝对等于:类型相同,值相同,才会判定为true
-
数组
:JS数组不需要数组中的数据为相同类型//保证代码的可读性,尽量使用[] var arr = [1,2,3,4,5,'hello',null,true]; //第二种定义方法 new Array(1,2,3,4,5,'hello');
-
对象
:对象使用大括号表示/* 对应于Java中的 Person person = new Person(); 大括号中的采用键值对的方式创建属性并赋值 类同于Java中在类中定义完属性之后,在创建对象的时候给属性赋值 */ var person = { name: "tian", age: 1, sex: "男" }
-
-
须知:
- NaN === NaN,这个与所有的数值都不相等,包括自己。
- 只能通过isNaN(NaN)来判断这个数是否是NaN。
2.1、严格检查模式
- 前提Idea需要设置支持ES6语法,在设置中进行设置。
"use strict"
:严格检查模式,预防JS随意性导致的一些问题。- 该语句必须写在JS的第一行
<script>
"use strict"
//在ES6标准中局部变量推荐使用let
let i = 1;
</script>
2.2、字符串
-
基本字符串使用
''
或者""
包裹 -
多行字符串编写:使用**``**进行包裹
//tab 上面 esc下面 var msg =` hello world 你好呀 nihao `
-
模板字符串:可以对字符串进行拼接
//模板字符串, 要使用 ` `进行包裹,用 ${} 进行取值 let name = "tian"; let msg = `你好, ${name}`;
-
字符串的可变性,不可变。
- 对已经定义好的字符串不可再进行修改
-
大小写转换
let student = "abcdDDDFG"; //注意,这里是方法,不是属性了 student.toUpperCase(); student.toLowerCase();
-
字符串截取
student.substring(1) //从第一个字符串截取到最后一个字符串 student.substring(1,3) //[1,3)
-
索引:显示该字符在字符串中第一次出现的位置
student.indexof('a')
2.3、数组
-
定义:
let arr = [1,2,3,4,5,6];//通过下标取值和赋值
-
长度:
arr.length
- 假如给arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失。
-
indexOf:通过元素获得下标索引
arr.indexOf(2) 1
- 字符串的"1"和数字 1 是不同的
-
slice():截取Array的一部分,返回的一个新数组,类似于String中substring
-
push()、pop():在尾部加入和取出数据
//push:压入到尾部 //pop:弹出尾部的一个元素
-
unshift()、shift():在头部加入和取出数据
//unshift:压入到头部 //shift:弹出头部的一个元素
-
排序:sort()
["B","C","A"] arr.sort(); ["A","B","C"]
-
反转:reverse()
["A","B","C"] arr.reverse(); ["C","B","A"]
-
数组拼接:concat()
["B","C","A"] arr.concat([1,2,3]); ["B","C","A",1,2,3]
- 注意:concat()不会修改原数组,会返回一个新的数组。
-
连接符:join
["A","B","C"] arr.join("-"); "A-B-C"
-
多维数组
let arr = [[1,12,2], ["a",1,1],["2",1,"a"]];
2.4、对象
-
定义:
var 对象名 = { 属性名:属性值, 属性名:属性值, 属性名:属性值 } //定义了一个person对象,它有四个属性 var person = { name:"Tom", age:3, email:"123456798@QQ.com", score:66 }
- 多个属性之间用逗号隔开,最后一个属性不加逗号。
- JavaScript中的所有的键都是字符串,值是任意对象。
- 使用一个不存在的对象属性,不会报错!undefined。
-
删除属性:delete
delete person.name
-
添加属性:直接给新属性添加值
person.sex = "男";
-
判断属性值是否在这个对象中
`age` in person //true `toString` in peroson //true,继承
-
判断一个属性是否是这个对象自身拥有的 hasOwnProperty()。
person.hasOwnProperty('toString') //false person.hasOwnProperty('age') //true
2.5、iterator
ES6新特性
使用Iterator遍历数组、Map和Set集合
-
遍历集合
let arr = [1,2,3,5,4,6] for (let x for arr) { console.log(x); }
-
遍历Map
let map = new Map([["c",12],["h",84],["t",48]]); for (let x for map) { console.log(x); }
-
遍历Set
let set = new Set([1,2,57,8]); for (let x for set) { console.log(x); }
3、函数
- 函数定义
方式一
function test() {
}
方式二:匿名函数
let test2 = function() {
}
-
手动抛出异常,typeof:判断变量的类型
let test2 = function(x) { //手动抛出异常 typeof:判断变量的类型 if (typeof x !== "number") { throw "not a number"; } if (x >= 0) { return x; } else { return -x; } }
-
arguments
- arguments是JS中的一个关键字,它包含传递进来的所有参数,是一个数组。
function test(a, b) { console.log("a:" + a); console.log("b:" + b); for (let i = 0; i < arguments.length; i++) { console.log(arguments[i]); } }
- 问题:arguments包含所有的参数,我们有时候只想使用多余的参数来进行附加操作。
-
rest:ES6新特性
...rest
:固定写法,用于接收参数,只能写在最后面。
function test2(a, b, ...rest) { console.log("a:" + a); console.log("b:" + b); console.log(rest); }
-
方法
- 方法定义:方法就是将函数放在对象中,在对象中只有两个:属性和方法。
let tian = { name: "cht", birth: 2000, //方法:方法就是将函数放在对象中 age: function () { //获取当前的日期 let now = new Date().getFullYear(); return now - this.birth; } }
4、面向对象编程
在JavaScript中:
- 类:模板
- 对象:具体实例
原型
-
定义:每一个javascript对象(除null外)创建的时候,都会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型中“继承”属性。
- 在JavaScript中每一个对象最终都会关联Object对象,也就是说Object是所有对象的原型(跟Java中相同,Object是所有类的父类)。
- 在JavaScript中,每个函数对象都有一个prototype属性,这个属性指向函数的原型对象。普通对象不存在这个属性
- 通过prototype属性与原型进行关联
-
__proto__
:每个对象都会有这个属性,这个属性会指向该对象的原型__proto__
与prototype
__proto__
是实例指向原型的属性prototype
是对象或者构造函数指向原型的属性- 所有对象(不包括Object.prototype)有
__proto__
属性,函数对象有prototype
属性; - 生成对象时,对象的
__proto__
属性指向当前函数的prototype
属性。
class继承
-
定义一个类:class关键字是在ES6中新引入的
//定义一个学生类,ES6新增 class Student{ //构造器 constructor(name) { this.name = name; } //定义方法 f() { alert("hello"); } }
-
继承:extends
/继承 class Student1 extends Student{ constructor(name,grade) { super(name); this.grade = grade; } //自定义方法 f1() { alert("hh"; } }
5、操作BOM对象
BOM:浏览器对象模型(Browser Object Model)
window
代表浏览器窗口
//弹窗
window.alert(1);
//内窗口高度
window.innerHeight;
//内窗口宽度
window.innerWidth;
//外窗口高度
window.ouetrHeight;
//外窗口宽度
window.outerWidth;
screen
代表屏幕尺寸
screen.width;
screen.height;
location
代表当前页面的URL信息
6、操作DOM对象
DOM:文档对象模型(Document Object Model)
浏览器网页就是一个DOM树形结构
- 更新:更新Dom节点
- 遍历Dom节点:得到Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
操作DOM节点
-
获得DOM节点
<div id='father'> <h1>标题一</h1> <p id="p1">p1</p> <p class="p2">p1</p> </div>
- 操作:要将script块写在body中,不然又得值可能获取不到
<!-- 获得三个节点,对应CSS的选择器 --> <script> //标签选择器,通过标签获得节点 let h1 = document.getElementsByTagName('h1'); //id选择器 let p1 = document.getElementById('p1'); //类选择器 let p2 = document.getElementsByClassName('p2'); let father = document.getElementById('father'); //获取父节点下的所有子节点 let children = father.children; </script>
-
更新DOM节点
<div id="id1"> </div>
- 操作
<script> let id1 = document.getElementById('id1'); //修改节点文本的值 id1.innerText = "123456"; //解析HTML文本标签 id1.innerHTML = '<strong>123</strong>' //修改样式,操作CSS id1.style.color = 'red'; id1.style.fontSize = '20px'; </script>
-
删除DOM节点
<div id='father'> <h1>标题一</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div>
- 操作
<script> //删除节点:先获取父节点,在删除自己 let p1 = document.getElementById('p1'); //获取父节点 let father = p1.parentElement; father.removeChild(p1); </script>
-
插入DOM节点
<p id="java">Java</p> <div id="list"> <p id="se">JavaSE</p> <p id="ee">JavaEE</p> <p id="me">JavaME</p> </div>
- 移动节点:将id为java的节点移动到div中,已存在的节点。
//将id为java的标签移动到div中,已存在的节点 let js = document.getElementById('java'); let list = document.getElementById('list'); //追加一个节点到原节点后面 list.append(js);
- 创建新节点
//通过JS创建一个新的节点 let newP = document.createElement('p'); //创建一个p标签 //给新节点配置属性 newP.id = 'newP'; newP.innerText = 'hello'; //追加新的节点 list.append(newP);
- 创建一个标签节点
//创建一个标签节点 let scriptElement = document.createElement('script'); //对属性进行赋值,通过该方式可以对任意值进行赋值 scriptElement.setAttribute("type", "text/javascript"); list.append(scriptElement);
- 修改body节点
//创建一个style标签 let styleElement = document.createElement("style"); //创建一个空style标签 styleElement.setAttribute('type', 'text/css'); //设置标签的属性 styleElement.innerHTML = 'body{background-color: green}'; //设置标签的内容 //追加新的节点 document.getElementsByTagName('head')[0].appendChild(styleElement); //添加节点
7、操作表单
- 文本框----text
- 下拉框----select
- 单选框----radio
- 多选框----checkbox
- 隐藏域----hidden
- 密码框----password
- …
操作表单
-
获得要提交的信息
<form action="post"> <p> <span>用户名:</span> <input type="text" id="username"> </p> <p> <span>性别:</span> <input type="radio" id="boy" name="sex" value="男"> 男 <input type="radio" id="girl" name="sex" value="女"> 女 </p> </form>
- 操作
<script> let text = document.getElementById('username'); //获取输入框的值: text.value //修改输入框的值 text.value = 'user'; //获取复选框的值 let boy = document.getElementById('boy'); let girl = document.getElementById('girl'); //被选中则返回true boy.checked </script>
-
提交表单
<!-- 表单绑定提交事件 onsubmit = 绑定一个提交检测函数 将这个结果返回给表单,使用onsubmit接收:οnclick="return chick()" --> <form action="https://www.baidu.com/" method="post" onclick="return chick()"> <p> <span>用户名:</span> <input type="text" id="username" name="username"> </p> <p> <span>密码:</span> <input type="password" id="input-password"> </p> <input type="hidden" id="md5-password" name="password"> <button type="submit">提交<\/button> </form>
- 导入MD5加密工具类
<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>
- 具体操作
<script> function chick() { let uName = document.getElementById('username'); let pwd = document.getElementById('input-password'); let md5pwd = document.getElementById('md5-password'); //使用MD5加密 md5pwd.value = md5(pwd.value); //可以校验表单提交的内容,true为通过,false为不通过 return true; } </script>
8、jQuery
jQuery库,里面存在大量的JavaScript函数。
公式:$(选择器).action(事件函数)
<a href="" id="test">点击</a>
<script>
//jQuery公式:$(选择器).action
//选择器就是css选择器
$('#test').click(function () {
alert('hello jQuery');
})
</script>
-
选择器
- id选择器:
$('#id')
- class选择器:
$('.class')
- 标签选择器:
$('标签名')
- *选择器:
$('*')
- id选择器:
-
事件
mouse:<span id="mouseMove"></span> <div id="divMove"> 鼠标移动 </div> <script> //当网页元素加载完毕之后响应事件 /* $(document).ready(function () { }); */ //简化之后 $(function () { //参数e中包含了从mousemove事件中获取的鼠标坐标 $('#divMove').mousemove(function (e) { $('#mouseMove').text('X:' + e.pageX + 'Y:' + e.pageY); }); }); </script>
-
操作DOM
<ul id="test_ul"> <li class="Java">Java</li> <li name="JavaScript">JavaScript</li> </ul> <script> //获取第二个li标签的值,通过属性选择器获取标签 $('#test_ul li[name=JavaScript]').text(); //修改值 // $('#test_ul li[name=JavaScript]').text('JS'); //操作CSS $('#test_ul li[name=JavaScript]').css('color', 'red'); </script>