JavaScript基础
关于MD5 或者JQuery的使用问题
1. 去官网下载相应的版本，然后引入自己的项目中
2.直接在百度上搜 CDN JQuery(https://www.jq22.com/cdn/)或者 CDN MD5 (https://www.bootcdn.cn/blueimp-md5/)都可以获得一个链接，直接在项目中引用也行
1.快速入门
1.1.引入JavaScript
-
内部标签
<script> //...... </script> -
外部引入
<script src="js文件路径"></script>
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- script标签内，写JavaScript代码-->
<!-- <script>-->
<!-- alert("Hello world");-->
<!-- </script>-->
<!--外部引入-->
<script src="js/qj.js"></script>
</head>
<body>
</body>
</html>
alert("hello word");
1.2. 基本语法入门
<script>
// 1.定义变量 变量类型 变量名 = 变量值；
var score = 71;
// 2.条件控制
if(score>60 && score<70){
alert("60~70");
}else if(score>70 && score<80){
alert("70~80");
}else{
alert("other");
}
// console.log(score) 打印变量
</script>
1.3.数据类型
数字，图片，文本，视频，音频…
变量
var a = 1;
var _a = 2;
var $a = 3;
不能以数字开头
Number
js不区分整数和小数
123//整数
123.23//浮点数
1.2e3//科学计数法
-99//负数
NaN//not a Number
Infinity//表示无限大
字符串
‘abc’ “abc”
布尔值
true false
逻辑运算符
&& //两个都为真，结果才为true
|| //一个为真，结果便为true
！ // 真为假 ， 假为真
比较运算符
= //赋值运算符
== //等于（类型不一样，值一样，也会判定为true）
=== //绝对等于（类型一样，值一样，才会判定为true）
尽量不要在JavaScript中使用==
须知：
- NaN==NaN，结果为false，这个与所有数值都不相等，包括他自己
- 可以使用isNaN（NaN）来判断这个数是不是NaN
- 浮点数问题
console.log((1-2/3)==1/3)
结果为false,因为精度问题，所以避免使用浮点数进行比较
null和undefined
null:空
undefined:未定义
数组
java的数组必须使一组数据类型相同的元素的集合，而JavaScript没有该要求
var num = [1,2,3,a,null,true];
取数组下标，如果越界了就会报： undefined
对象
对象是大括号，数组是中括号
每个属性以逗号隔开，最后一个属性不加逗号
var a = {
name:"qingjiang",
age:18,
sex:1};
去对象的值
a.name
1.4.严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--前提：IDEA需要设置支持ES6语法
‘use strict’：严格检查模式，预防JavaS的随意性
必须卸载JavaScript的第一行
局部变量建议使用了let去定义
-->
<script>
'use strict';
//局部变量
let num = 1;
</script>
</head>
<body>
</body>
</html>
2.数据类型
2.1.字符串
- 正常字符串我们使用单引号或双引号包裹
- 转义字符
\' \n \t \u4e2d \u#### Unicode字符 \x41 Ascil字符 - 多行字符串编写
// `在tab键上面，esc键下面 let name = ` 你好 world hello` - 模块字符串
let name = "qinjiang"; let age = 8; let msg1 = `你好呀,${age}岁的${name}` - 字符串长度
str.length - 字符串的可变性：不可变
- 大小写转换
//注意，这里是方法，不是属性 name.toUpperCase() name.toLowerCase() - name.indexOf(“j”) ,指明单个字符的下标
- substring
name.substring(1); //从第一个字符截取到最后一个字符 name.substring(1,4)；//从第一个字符截取到第四个字符，但不包含第四个字符
2.2. 数组
Array可以包含任意类型的数据元素
- 长度
注意：加入给ary.length的赋值，数组大小 就会发生变化，如果赋值太小，元素就会丢失。ary.length
- indexOf():通过元素获得下标索引
字符串的"1"和数字 1 是不同的ary.indexOf(1) 0 - slice(). 截取Array的一部分。 类似于String中的substrinng()。
ary = [1,2,3,4,"a","b"] Array(6) [ 1, 2, 3, 4, "a", "b" ] ary.slice(1) Array(5) [ 2, 3, 4, "a", "b" ] ary.slice(2,4) Array [ 3, 4 ] - pop() , push() .在尾部操作
ary = [1,2,3,4,"a","b"] ary.pop() "b" ary.push("b") 6 ary Array(6) [ 1, 2, 3, 4, "a", "b" ] - unshift() , shift() .在首部操作
ary.unshift(9)//在首部添加元素 7 ary Array(7) [ 9, 1, 2, 3, 4, "a", "b" ] ary.shift()//弹出首部第一个元素 9 - 排序sort()
ary = ["C","B","A"] Array(3) [ "C", "B", "A" ] ary.sort() Array(3) [ "A", "B", "C" ] - 元素反转reverse()
ary.reverse() Array(3) [ "C", "B", "A" ] - concat()
注意：concat并不会修改原数组，只是会返回一个新数组ary.concat(1,2,3) Array(6) [ "C", "B", "A", 1, 2, 3 ] ary Array(3) [ "C", "B", "A" ] - 连接字符join()
ary.join("-") "C-B-A" - 多维数组
ary = [[1,2],["a","b"],[3,4]] ary[1][1] "b"
2.3.对象
若干键值对
var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值，
.....
}
//定义一个Person对象
var Person = {
name:"qinjiang",
age:8,
email:"123@a",
hobby:"code"
}
最后一个属性不加逗号
JavaScript中所有的键都是字符串，值是任意对象！
- 对象赋值
Person.name = "hl" "hl" Person Object { name: "hl", age: 8, email: "123@a", hobby: "code" } - 使用一个不存在的属性，不会报错
Person.haha undefined - 动态的删减属性。使用delete
delete Person.name true Person Object { age: 8, email: "123@a", hobby: "code" } - 动态的增加属性，直接给新的属性添加值即可
Person.haha = "haha" "haha" Person Object { age: 8, email: "123@a", hobby: "code", haha: "haha" } - 判断一个属性是否在对象中 xxx in xxx
"age" in Person true //“toString” 是父类的 继承 "toString" in Person true - 判断一个属性是否为对象自身所拥有的 hasOwnProperty()
Person.hasOwnProperty("toString") false Person.hasOwnProperty("age") true
2.4 流程控制
if判断
let age = 8;
if(age < 3){
console.log("kuwa");
}else if(age>3&&age<5){
console.log("haha");
}else{
console.log("haoba");
}
while循环 ， 避免程序死循环
while(age<100){
age = age + 1;
console.log(age)
}
for 循环
for(let i = 0;i < 100;i++){
console.log(i);
}
forEach 循环:
具体细节
var a = [1,2,3,4,5,6,7,8,9,0]
a.forEach(function(value){
console.log(value)
})
for…in循环：
var a = [1,2,3,4,5,6,7,8,9,0]
//num 为索引
for(num in a){
console.log(a[num])
}
2.5. Map和Set
ES6的新特性
Map
let map = new Map([["tom",100],["Jack",90],["haha",80]]);
let name = map.get("tom");//通过key获得value值
map.set("admin",1122);//通过set添加新的键值对
map.delete("tom");//删除
Set : 无序不重复的集合
let set = new Set([2,1,1,1]);//set可以去重
set.add(3);//添加
set.delete(1);//删除
console.log(set.has(3));
2.6. 使用iterator来遍历迭代Map和Set
//遍历数组
var arr = [1,2,3];
for(var x of arr){
console.log(x)
}
//遍历Map
let map = new Map([["tom",100],["Jack",90],["hah",80]]);
for(let x of map){
console.log(x)
}
//遍历Set
let set = new Set([3,4,5]);
for(let x of set){
console.log(x)
}
3.函数
3.1.定义函数
绝对值函数
function abs(x){
if(x >= 0){
return x;
}else{
return -x;
}
}
一旦执行到return，代表函数结束，返回结果
如果没有执行return，函数执行完也会返回结果，结果为undefined
rest关键字，获取除了以定义的参数外的所有参数
function aaa(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest参数只能写在最后面，用…rest标识
3.2.变量的作用域
全局对象Window
var x = 'a';
alert(x);
window.alert(x);
alert()本身也是个window的变量
规范
由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，会冲突—>如何减少冲突？
//唯一全局变量
var KuangApp = {};
//定义全局变量
KuangApp.name = "kuangshen";
KuangApp.add = function (a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间中，降低全局命名冲突的问题
局部作用域let
function aaa(){
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//问题？i出了作用域还可以使用
}
ES6 let关键字，解决局部作用域冲突的问题！
function aaa(){
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//Uncaught ReferenceError: i is not defined
}
建议使用let去定义局部作用域的变量
常量 const
在ES6之前，怎么定义常量：约定用全部大写字母命名的变量就是常量，建议不要修改这样的值，在ES6后引入常量关键字const
3.3 方法
定义方法
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
var kuangshen = {
name:'qingjiang',
birth:2000,
age:function(){
//今年-出生年
var now = new Date().getFullYear();
return now-this.birth;
}
//属性
kuangshen.name
//方法，一定要带（）
kuangshen.age()
this.代表什么？拆开上面的代码看看~
function getAge(){
//今年-出生年月
var now = new Date().getFullYear();
return now-this.birth;
}
var kuangshen = {
name: 'qingjiang',
birth: 2000,
age: getAge
}
//kuangshen.age() 结果ok
//getAge() 结果this is undefined 单独调用getAge()，使用的是window对象
apply
在js中可以控制this指向！
getAge.apply(kuangshen,[])//this.指向了kuangshen,参数为空
4. 内部对象
标准对象
typeof 123
"number"
typeof "123"
"string"
typeof []
"object"
typeof {}
"object"
typeof NaN
"number"
typeof undefined
"undefined"
typeof true
"boolean"
typeof Math.abs()
"number"
typeof Math.abs
"function"
4.1 Date
基本使用
var now = new Date();//Date Fri Apr 16 2021 22:09:56 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime()//时间戳 全世界统一 从1970年1.1 0:00 起到目前的毫秒数
转换
console.log(new Date(1618582363039))//时间戳转换为时间
now.toLocaleString()//转换为本地时间
"2021/4/16 下午10:12:43"
now.toGMTString()//转换为标准时间
"Fri, 16 Apr 2021 14:12:43 GMT"
4.2 JSON
json是什么
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript一切皆对象，任何js 支持的类型都可以用JSON来表示
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对都是用 key:value
JSON字符串和JS对象的转换
var use = {
name:"qingjiang",
age:8,
sex:"男"
}
//对象转化为JSON字符串
var jsonUse = JSON.stringify(use);
//json 字符串转换为js对象 参数为字符串
var obj = JSON.parse('{"name":"qingjiang","age":8,"sex":"男"}')
JSON和JS对象的区别
var obj = {a:"hello",b:"hellob"}
var json = '{a:"hello",b:"hellob"}'//JSON是字符串
5.面向对象编程
5.1. 什么是面向对象
JavaScript，java…面向对象，
- 类：模板
- 对象：具体的实例
原型（相当于java中的父类）
var person = {
name:"qingjiang",
age:3,
run:function(){
console.log(this.name+"running..........")
}
}
var xiaoming = {
name:"xiaoming"
}
//原型对象，相当于父类
xiaoming.__proto__ = person;
class继承
在ES6后引入
1.定义一个类，属性，方法
//定义一个学生类
class Student{
constructor(name){
this.name = name;
}
hello(){
alert("hello");
}
}
var xiaoMing = new Student("xiaoMing");
xiaoMing.hello();
2.继承
//定义一个学生类
class Student{
constructor(name){
this.name = name;
}
hello(){
alert("hello");
}
}
//继承
class xiaoStudent extends Student{
constructor(name,grade){
super(name);
this.grade = grade;
}
myGrade(){
alert("I am a xiaoStudent!")
}
}
var xiaoHong = new xiaoStudent("xiaoHong",1);
6.操作BOM对象（重点）
浏览器介绍
JavaScript 和浏览器关系？
JavaScript诞生就是为了能够让他在浏览器中运行！
BOM：浏览器对象模型
- IE
- Chrome
- Safari
- FireFox
window(重要)
window 代表浏览器窗口：
window.alert(1)
undefined
window.innerHeight
109
window.innerWidth
868
window.outerHeight
628
window.outerWidth
880
screen
代表屏幕尺寸
screen.width
1280px
screen.height
720px
location（重要）
location代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/index.php?tn=monline_3_dg"
protocol: "https:"
reload: function reload() //刷新网页
//设置新的地址
location.assign('http://www.eclipse.org/pdt/help/html/javascript.htm')
document
document 代表当前的页面，HTML DOM文档树
document.title
"百度一下，你就知道"
document.title='狂神说'
"狂神说"
获取具体的文档树节点
<d1 id="app">
<dt>Java</dt>
<dt>Python</dt>
<dt>C++</dt>
</d1>
<script>
var d1 = document.getElementById('app');
</script>
获取cookie
document.cookie
history
history 代表浏览器的历史记录
history.back() //后退
history.forward() //前进
7. 操作DOM对象（重点）
核心
浏览器网页就是一个DOM树形结构
- 更新：更新DOM节点
- 遍历DOM节点：得到DOM节点
- 删除：删除一个DOM节点
- 添加：添加一个新的节点
要操作一个DOM节点，就必须要先获得这个DOM节点
获得DOM节点
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children;//获取父节点下的所有子节点
father.firstChild;
father.lastChild;
这是原生代码，之后我们尽量使用JQuery();
更新节点
<div id="id1">
</div>
<sscript>
var id1 = document.getElementById('id1');
</sscript>
操作文本
- id1.innerText=‘123’ 修改文本的值
- id1.innerHTML 可以解析HTML文本标签
操作js
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;
//移除p1
father.removeChild(p1)
</script>
插入节点
我们获得了某个DOM节点，假设这个dom节点是空的，我们通过innerHTML 就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这样做，会产生覆盖
追加append()
<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.append(js);//把js加入到list中
</script>
insertBefore
var js = document.getElementById('js');
var ee = document.getElementById('ee');
var list = document.getElementById('list');
list.insertBefore(js,ee);//在ee前面插入js
8.操作表单
表单是什么 form DOM树
- 文本框 text
- 下拉框
- 单选框 radio
- 多选框 CheckBox
- 隐藏域 hidden
- 密码框 password
- …
表单的目的：提交信息
获得要提交的信息
<form action="" method="post">
<span>用户名:
<input type="text" id="username">
</span>
</form>
<script>
var input_text = document.getElementById('username');
//得到输入框的值
input_text.value
//修改输入框的值
input_text.value = '234'
</script>
提交表单 ;md5加密密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//记住该地址，使用md5加密时可直接使用
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="" method="post">
<div>
<span>用户名:
<input type="text" id="username">
</span>
</div>
<div>
<span>密码：
<input type="password" id="password">
</span>
</div>
<!--绑定事件 onclick 被点击-->
<button type="button" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
var user = document.getElementById('username');
var pass = document.getElementById('password');
console.log(user.value);
console.log(pass.value);
//md5加密算法
pass.value = md5(pass.value);
console.log(pass.value);//加密后的结果
}
</script>
</body>
</html>
上述做法有弊端，提交表单时密码会自动变长，这样人们就知道你使用的是这种方法加密的了，
改进方法：
<!--
表单绑定提交事件
onsubmit= 绑定一个提交检测的函数：true false
将这个结果返回给表单，使用onsubmit接受
-->
<form action="" method="post" onsubmit="return aaa()">
<div>
<span>用户名:
<input type="text" id="username" name="username">
</span>
</div>
<div>
<span>密码：
<input type="password" id="password">
</span>
</div>
<input type="hidden" id="password_md5" name="password">
<button type="button">提交</button>
</form>
<script>
function aaa(){
var user = document.getElementById('username');
var pass = document.getElementById('password');
var pass_md5 = document.getElementById('password_md5');
pass_md5.value = md5(pass.value);
return true;
}
</script>
可参考HTML表单验证
9.jQuery
jQuery库里面存在大量的JavaScript函数
获取jQery
1.官网下载，再导入项目引用
2.使用cdn在线引入
初始jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<!--jQuery公式：$(selector).action()-->
<a href="" id="test_jQuery">点我</a>
<script>
$('#test_jQuery').click(function (){
alert('hello');
})
</script>
</body>
</html>
选择器
//js原生选择器
document.getElementsByTagName('p');//标签选择器
document.getElementById('id');//id选择器
document.getElementsByClassName('class');//类选择器
//jQuery css中的选择器他都能用
$('p').click();//标签
$('#id').click();//id
$('.class').click();//class
文档工具站：jQuery文档
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#divMouse{
width:300px;
height:300px;
border:1px solid red;
}
</style>
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="divMouse">
<span>在这里移动试试</span>
</div>
<script>
//当网页加载完毕后响应事件
//未简化写法
//$(document).ready(function(){
//$('#divMouse').mousemove(function(e){
//$('#mouseMove').text('x:'+e.pageX+' '+'y:'+e.pageY)
//})
//})
//简化写法
$(function(){
$('#divMouse').mousemove(function (e){//切记别忘了选择器要用字符串包裹
$('#mouseMove').text('x:'+e.pageX +' '+ 'y:'+e.pageY)
})
})
</script>
</body>
</html>
扫一扫
845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
