JavaScript，jQuery

1、 JavaScript

JavaScript是一门世界上最流行的脚本语言

1.1、引入JavaSciprt

1、内部标签：

<script></script>

2、外部引入：

<script src="abc.js"></script>

1.2、数据类型

【JavaScript区分大小写】

定义变量var height = 175;

数值，文本，图形，音频，视频…..

js不区分小数和整数，Number

123 //整数123123.1 // 浮点数123.11.123e3 //科学计数法-99    //复数NaN    // not  a  numberInfinity //表示无限大

字符串：’sad‘ “abc”

布尔值：true ， false

逻辑运算

&&   同或?||   异或 !    取反

比较运算符

===  等于（类型不一样，值一样，也为true）【JS的缺陷，不要使用  == 比较】===   绝对等于(类型一样，值一样，结果true)

浮点数：

console.log((1/3) === (1-2/3))

尽量避免使用浮点数进行运算，存在精度问题！

Math.abs(1/3-(1-2/3))<0.00000001

null 和 undefined

null 空
undefined 未定义

数组【数值可以不是相同类型的对象】【为保证代码的可读性，尽量使用 []】

var arr = [1,a,‘hello‘,true,null];new Array(1,a,‘hello‘,true,nul);

数组下标越界:undefined

对象

对象是大括号，数组是中括号~~

【属性之间使用逗号隔开，最后一个不需要添加】

var person = {    name: "zhang san",    age: 21,    sex: ‘男‘}

‘use strict‘; 严格检查模式，预防JavaScript的随意性导致产生的一些问题必须写在JavaScript的第一行！局部变量建议都使用 let 去定义~

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        ‘use strict‘;    </script></head><body></body></html>

字符串

1、使用单引号，或者双引号包裹

2、转义字符 \

\‘ \n\t

3、多行字符串编写

var msg =     `helloworld`

4、字符串长度

str.length

6、字符串不可变

7、大小写转换

student.toUpperCase()student.toLowerCase()

8、student.indexOf(‘t‘)

9、substring

student.substring(1) student.substring(1,3)

数组

Array可以包含任意的数据类型【通过下标取值和赋值】

var arr = [1,2,3,4,5,6] ; arr[0]arr[0] = 1

1、长度

arr.length

给 arr.length 赋值，数组大小就会发生变化，赋值过小，元素会丢失

2、indexOf，通过元素获得下标索引

arr.indexOf(2)1

字符串的 “1” 和数字 1 是不同的

3、slice（） 截取Array的一部分，返回一个新数组，类似于String中的 substring

4、push()，pop() 尾部

push： 压入到尾部pop： 弹出尾部的一个元素

5、unshift() , shift() 头部

unshift： 压入到头部shift： 弹出头部的一个元素

6、排序 sort()

(3) ["B", "C", "A"]arr.sort()(3) ["A", "B", "C"]

7、元素反转 reverse()

(3) ["A", "B", "C"]arr.reverse()(3) ["C", "B", "A"]

8、concat（）

(3) ["C", "B", "A"]arr.concat([1,2,3])(6) ["C", "B", "A", 1, 2, 3]arr(3) ["C", "B", "A"]

注意： concat（）并没有修改数组，只是会返回一个新的数组

9、连接符 join

打印拼接数组，使用特定的字符串连接

(3) ["C", "B", "A"]arr.join(‘-‘)"C-B-A"

10、多维数组

arr = [[1,2],[3,4],["5","6"]];arr[1][1]4

对象

var 对象名 = {    属性名： 属性值,    属性名： 属性值,    属性名： 属性值}?var person = {    name: "zhangsan",    age: 21}

JavaScript中的所有的键都是字符串，值是任意对象！

1、对象赋值

person.name = "lisi"

2、使用一个不存在的对象属性，不会报错！ undefined

person.hahaundefined

3、动态的删减属性，通过 delete 删除对象的属性

delete person.nametrueperson

4、动态的添加，直接给新的属性添加值即可

person.sex = "man""man"person

5、判断属性值是否在这个对象中！

‘age‘ in persontrue

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.hasOwnProperty(‘age‘)true

Map 和 Set[ES6 的新特性]

Map：

var map = new Map([[‘zhangsan‘,90],[‘lisi‘,80]]);var name = map.get(‘lisi‘);  map.delete("tom");

Set：无序不重复的集合

set.add(2); //添加！set.delete(1);  //删除！console.log(set.has(3));  //是否包含某个元素！

iterator[es6 新特性]

遍历数组

//通过for of /  for  in 下标var arr = [3,4,5]for (var x of arr){    console.log(x)}

遍历map

var map = new Map([[‘zhangsan‘,90],[‘lisi‘,80]]);for (let x of map){    console.log(x)}

遍历set

var set = new Set([5,6,7]);for (let x of set) {    console.log(x)}

函数

定义函数

定义方式一

绝对值函数

function abs(x){    if(x>=0){        return x;    }else{        return -x;    }}

一旦执行到 return 代表函数结束，返回结果！

如果没有执行 return ，函数执行完也会返回结果，结果就是 undefined

定义方式二

var abs = function(x){    if(x>=0){        return x;    }else{        return -x;    }}

function(x){ …. } 这是一个匿名函数。但是可以把结果赋值给 abs ，通过abs 就可以调用函数！

方式一和方式二等价！

调用函数

abs(10)

4.2、变量的作用域

在javascript中， var 定义变量实际是有作用域的。

在函数体中声明，则在函数体外不可以使用

function abs() {    var x = 1;    x = x + 1;}?x = x + 2;

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function abs() {    var x = 1;    x = x + 1;}?function abs1() {    var x = ‘A‘;    x = x + 1;}

内部函数可以访问外部函数的成员，反之则不行

假设在JavaScript 中函数查找变量从自身函数开始~，由 ‘’内‘’ 向 ‘’外‘’ 查找 . 假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

全局函数

x = 1;?function f() {    console.log(x);}f();console.log(x);

全局对象 window

var x = ‘xxx‘;alert(x);alert(window.x);

alert() 这个函数本身也是一个 window 变量；

var x = ‘xxx‘;?window.alert(x);?var old_alert = window.alert;?//old_alert(x);?window.alert = function () {?};// 发现 alert() 失效了window.alert(123);?//恢复window.alert =  old_alert;window.alert(456);?

Javascript 实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错 RefrenceError

局部作用域 let

function aaa() {    for (var i = 0; i < 100; i++) {        console.log(i)    }    console.log(i+1); //问题？ i 出了这个作用域还可以使用}

ES6 let 关键字，解决局部作用域冲突问题！

function aaa() {    for (let i = 0; i < 100; i++) {        console.log(i)    }    console.log(i+1); //Uncaught ReferenceError: i is not defined}

建议大家都是用 let 去定义局部作用域的变量；

常量 const

在ES6 之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值

var PI = ‘3.14‘;?console.log(PI);PI = ‘213‘; console.log(PI);

在 ES6 引入了常量关键字 const

const PI = ‘3.14‘; console.log(PI);PI = ‘123‘; // TypeError: Assignment to constant variable.console.log(PI);

方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var kuangshen = {    name: ‘zhangsan‘,    bitrh:100,    // 方法    age: function () {        // 今年 - 出生的年        var now = new Date().getFullYear();        return now-this.bitrh;    }}//属性kuangshen.name//方法,一定要带  ()kuangshen.age()

5、内部对象

标椎对象

typeof 123"number"typeof ‘123‘"string"typeof true"boolean"typeof NaN"number"typeof []"object"typeof {}"object"typeof Math.abs"function"typeof undefined"undefined"

5.1、Date

基本使用

var now = new Date(); //Sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)now.getFullYear(); //年now.getMonth(); // 月   0~11  代表月now.getDate(); // 日now.getDay(); // 星期几now.getHours(); // 时now.getMinutes(); // 分now.getSeconds(); // 秒?now.getTime(); // 时间戳 全世界统一 1970 1.1 0:00:00  毫秒数?console.log(new Date(1578106175991)) //时间戳转为时间?

转换

now = new Date(1578106175991)Sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)now.toLocaleString // 注意，调用是一个方式，不是一个属性！ƒ toLocaleString() { [native code] }now.toLocaleString()  "2020/1/4 上午10:49:35"now.toGMTString()"Sat, 04 Jan 2020 02:49:35 GMT"

面向对象编程

原型对象

javascript、Java、c#。。。。面向对象；javascript有些区别！

类: 模板原型对象
对象: 具体的实例

原型：

var Student = {    name: "zhangsan",    age: 21,    run: function () {        console.log(this.name + " run....");    }};??var xiaoming = {    name: "xiaoming"};?//原型对象xiaoming.__proto__ = Student;??var Bird = {    fly: function () {        console.log(this.name + " fly....");    }};?// 小明的原型 是 Studentxiaoming.__proto__ = Bird;

function Student(name) {    this.name = name;}?// 给student新增一个方法Student.prototype.hello = function () {    alert(‘Hello‘)};

class 继承

class关键字，是在ES6引入的

1、定义一个类，属性，方法

// 定义一个学生的类class Student{?    constructor(name){        this.name = name;    }?    hello(){        alert(‘hello‘)    }?}?var xiaoming = new Student("xiaoming");var xiaohong = new Student("xiaohong");xiaoming.hello()

2、继承

<script>?    //ES6 之后=============    // 定义一个学生的类    class Student{?        constructor(name){            this.name = name;        }?        hello(){            alert(‘hello‘)        }    }?class XiaoStudent extends Student{    constructor(name,grade){        super(name);        this.grade = grade;    }?    myGrade(){        alert(‘我是一名小学生‘)    }?}?var xiaoming = new Student("xiaoming");var xiaohong = new XiaoStudent("xiaohong",1);??</script>

7、操作BOM对象（重点）

JavaScript 为了能够让他在浏览器中运行！

BOM : 浏览器对象模型

IE 6~11
Chrome
Safari
FireFox

三方

QQ浏览器
360浏览器

window 代表浏览器窗口

window.alert(1)undefinedwindow.innerHeight258window.innerWidth919window.outerHeight994window.outerWidth919

Navigator （不建议使用）

Navigator ,封装了浏览器的信息

screen

代表屏幕尺寸

screen.width1920 pxscreen.height1080 px

location （重要）

location 代表当前页面的URL信息

host:"www.baidu.com"href:"https://www.baidu.com/"protocol:"https:"reload:ƒ reload() // 刷新网页

document （内容； DOM）

document 代表当前的页面， HTML DOM文档树

document.title"百度一下，你就知道"

获取具体的文档树节点

<dl id="app">    <dt>Java</dt>    <dd>JavaSE</dd>    <dd>JavaEE</dd></dl>?<script>    var dl = document.getElementById(‘app‘);</script>=

获取 cookie

document.cookie

history （不建议使用）

history 代表浏览器的历史记录

history.back() //后退history.forward() //前进

8、操作DOM对象（重点）

核心

浏览器网页就是一个Dom 树形结构！

更新：更新Dom节点
遍历dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

获得dom节点

//对应 css 选择器var h1 = document.getElementsByTagName(‘h1‘);var p1 = document.getElementById(‘p1‘);var p2 = document.getElementsByClassName(‘p2‘);var father = document.getElementById(‘father‘);?var childrens = father.children[index]; //获取父节点下的所有子节点// father.firstChild// father.lastChild

更新节点

<div id="id1">?</div>?<script>    var id1 = document.getElementById(‘id1‘);</script>

操作文本

id1.innerText=‘456‘ 修改文本的值
id1.innerHTML=‘<strong>123</strong>‘ 可以解析HTML文本标签

操作css

id1.style.color = ‘yellow‘; // 属性使用 字符串 包裹id1.style.fontSize=‘20px‘; // - 转 驼峰命名问题id1.style.padding = ‘2em‘

删除节点

删除节点的步骤：先获取父节点，在通过父节点删除自己

<div id="father">    <h1>标题一</h1>    <p id="p1">p1</p>    <p class="p2">p2</p></div><script>   var self = document.getElementById(‘p1‘);   var father =  p1.parentElement;   father.removeChild(self)        // 删除是一个动态的过程；    father.removeChild(father.children[0])    father.removeChild(father.children[1])    father.removeChild(father.children[2])</script>?

注意：删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意!

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是这个DOM 节点已经存在元素了，我们就不能这么干了！会产生覆盖

追加

<p id="js">JavaScript</p><div id="list">    <p id="se">JavaSE</p>    <p id="ee">JavaEE</p>    <p id="me">JavaME</p></div>?<script>    var js = document.getElementById(‘js‘);    var list = document.getElementById(‘list‘);    list.appendChild(js);// 追加到后面</script>

创建一个新的标签，实现插入

<script>?    var js = document.getElementById(‘js‘); //已经存在的节点    var list = document.getElementById(‘list‘);    //通过JS 创建一个新的节点    var newP = document.createElement(‘p‘);// 创建一个p标签    newP.id = ‘newP‘;    newP.innerText = ‘Hello,Kuangshen‘;    // 创建一个标签节点    var myScript = document.createElement(‘script‘);    myScript.setAttribute(‘type‘,‘text/javascript‘);        // 可以创建一个Style标签    var myStyle= document.createElement(‘style‘); //创建了一个空style标签     myStyle.setAttribute(‘type‘,‘text/css‘);    myStyle.innerHTML = ‘body{background-color: chartreuse;}‘; //设置标签内容?    document.getElementsByTagName(‘head‘)[0].appendChild(myStyle)?</script>

insertBefore

var ee = document.getElementById(‘ee‘);var js = document.getElementById(‘js‘);var list = document.getElementById(‘list‘);// 要包含的节点.insertBefore(newNode,targetNode)list.insertBefore(js,ee);

9、操作表单（验证）

表单是什么 form DOM 树

文本框 text
下拉框 < select >
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…….

表单的目的：提交信息

获得要提交的信息

?<form action="post">    <p>        <span>用户名：</span> <input type="text" id="username">    </p>?    <!--多选框的值，就是定义好的value -->    <p>        <span>性别：</span>        <input type="radio" name="sex" value="man" id="boy"> 男        <input type="radio" name="sex" value="women" id="girl"> 女    </p>?</form>?<script>    var input_text = document.getElementById(‘username‘);    var boy_radio = document.getElementById(‘boy‘);    var girl_radio = document.getElementById(‘girl‘);?    // 得到输入框的值    input_text.value    // 修改输入框的值    input_text.value = ‘123‘??    // 对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值    boy_radio.checked; //查看返回的结果，是否为true，如果为true，则被选中~    girl_radio.checked = true; //赋值?</script>

提交表单。md5 加密密码，表单优化

?<!--表单绑定提交事件onsubmit= 绑定一个提交检测的函数， true， false将这个结果返回给表单，使用 onsubmit 接收！onsubmit="return aaa()"--><form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">    <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">?    <!--绑定事件 onclick 被点击-->    <button type="submit">提交</button></form>??<script>    function aaa() {        alert(1);        var uname = document.getElementById(‘username‘);        var pwd = document.getElementById(‘input-password‘);        var md5pwd = document.getElementById(‘md5-password‘);?        md5pwd.value = md5(pwd.value);        // 可以校验判断表单内容，true就是通过提交，false，阻止提交        return true;    }</script>?

10、jQuery

JavaScript

jQuery库，里面存在大量的Javascript函数

获取jQuery

公式：$(选择器).事件(事件函数)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->    <script src="lib/jquery-3.4.1.js"></script></head><body>?<a href="" id="test-jquery">点我</a>?<script>?    $(‘#test-jquery‘).click(function () {        alert(‘hello,jQuery‘);    })?</script>?</body></html>

选择器器

   //原生js，选择器少，麻烦不好记    //标签    document.getElementsByTagName();    //id    document.getElementById();    //类    document.getElementsByClassName();?    //jQuery  css 中的选择器它全部都能用！    $(‘p‘).click(); //标签选择器    $(‘#id1‘).click(); //id选择器    $(‘.class1‘).click() //class选择器

事件

鼠标事件，键盘事件，其他事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="lib/jquery-3.4.1.js"></script>    <style>        #divMove{            width: 500px;            height: 500px;            border: 1px solid red;        }    </style></head><body>?<!--要求：获取鼠标当前的一个坐标-->mouse ：<span id="mouseMove"></span><div id="divMove">在这里移动鼠标试试</div>?<script>    //当网页元素加载完毕之后，响应事件    $(function () {        $(‘#divMove‘).mousemove(function (e) {            $(‘#mouseMove‘).text(‘x:‘+e.pageX + ‘y:‘+e.pageY)        })    });</script>??</body></html>

操作DOM

节点文本操作

$(‘#test-ul li[name=python]‘).text(); //获得值$(‘#test-ul li[name=python]‘).text(‘设置值‘); //设置值$(‘#test-ul‘).html(); //获得值$(‘#test-ul‘).html(‘<strong>123</strong>‘); //设置值

css的操作

$(‘#test-ul li[name=python]‘).css({"color","red"})

元素的显示和隐藏：本质 display ： none；

$(‘#test-ul li[name=python]‘).show()$(‘#test-ul li[name=python]‘).hide()

未来ajax（）；

$(‘#from‘).ajax()?$.ajax({ url: "test.html", context: document.body, success: function(){    $(this).addClass("done");}});