JavaScript，jQuery
Posted arroa
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript，jQuery相关的知识，希望对你有一定的参考价值。
JavaScript是一门世界上最流行的脚本语言
1.1、引入JavaSciprt
1、内部标签：
<script></script>
2、外部引入：
<script src="abc.js"></script>
1.2、数据类型
【JavaScript区分大小写】
定义变量
var height = 175;
数值，文本，图形，音频，视频…..
js不区分小数和整数，Number
123 //整数123
123.1 // 浮点数123.1
1.123e3 //科学计数法
-99 //复数
NaN // not a number
Infinity //表示无限大
字符串：’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 去定义~
字符串
1、 使用 单引号，或者双引号包裹
2、转义字符
‘
3、多行字符串编写
var msg =
`hello
world`
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.haha
undefined
3、动态的删减属性，通过 delete 删除对象的属性
delete person.name
true
person
4、动态的添加，直接给新的属性添加值即可
person.sex = "man"
"man"
person
5、判断属性值是否在这个对象中！
‘age‘ in person
true
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....");
}
};
?
// 小明的原型 是 Student
xiaoming.__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)
undefined
window.innerHeight
258
window.innerWidth
919
window.outerHeight
994
window.outerWidth
919
Navigator （不建议使用）
Navigator ,封装了浏览器的信息
screen
代表屏幕尺寸
screen.width
1920 px
screen.height
1080 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
公式 ：$(选择器).事件(事件函数)
选择器器
//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
?
//jQuery css 中的选择器它全部都能用！
$(‘p‘).click(); //标签选择器
$(‘#id1‘).click(); //id选择器
$(‘.class1‘).click() //class选择器
事件
鼠标事件，键盘事件，其他事件
操作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");
}});
以上是关于JavaScript，jQuery的主要内容，如果未能解决你的问题，请参考以下文章