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");}}); 相关推荐
hhanbj 2020-11-17
81427005 2020-11-11
nmgxzm00 2020-11-10
ifconfig 2020-10-14
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22