JavaScript
- 内部标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert("你好!!!!")
</script>
</head>
<body>
</body>
</html>
- 在js文件中写,html导入即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="index.js"></script>
</head>
<body>
</body>
</html>
<script>
const num = "aj";
if (num < 11) {
alert("小于11!!!");
} else if (num == 10) {
alert("等于10!!!");
} else {
alert("其他");
}
console.log("这是一个最好的时代,\n科技的发展给予了每个人创造价值的可能性;\n这也是一个最充满想象的时代,\n每一位心怀梦想的人,终会奔向星辰大海。\n百度与你们一起仰望星辰大海,携手共筑未来!\n");
console.log("%c嘻嘻","color:red");
</script>
let person = {
name : "lx",
age : 18
}
//使用严格检查模式,预防JavaScript的随意性会产生的一些问题
//前提是idea支持ES6语法
<script>
//放在第一行!!
'use strict';
</script>
<script>
//Array数组可以包含任意对象的数据类型
let arr = [1,2,3,null,5,6];
//循环数组(number是索引)
for (let number in arr) {
console.log(arr[number])
}
//数组foreach循环
arr.forEach(value => {
console.log(value)
})
//数组长度
console.log(arr.length);
//获取指定值在元素中的索引
console.log(arr.indexOf(5));
//slice截取数组是生成了一个新的数组
//截取数组,从下标2开始截止到尾
console.log(arr.slice(2));
//截取数组,从下标1开始,截止到下标3(前包后不包)
console.log(arr.slice(1,4));
//往数组最后面放入一个数据
arr.push(88);
console.log(arr)
//将数组中最后一个数据弹出
arr.pop();
console.log(arr);
//往数组最前面放入一个数据
arr.unshift(66);
console.log(arr);
//将数组中第一个数据弹出
arr.shift();
console.log(arr);
//concat将一个新的数组拼接到另一个数组(会生成一个新的数组)
console.log(arr.concat([66, 77, 88]));
//数组排序
console.log(arr.sort());
//数组反转
console.log(arr.reverse());
//打印拼接数组,可以使数组用指定的字符串连接
console.log(arr.join("*"));
//多维数组
let arr2 = [[1,1],[2,2],[3,3]];
console.log(arr2);
</script>
<script>
//使用严格检查模式,预防JavaScript的随意性会产生的一些问题
//前提是idea支持ES6语法
'use strict';
//建议使用let定义局部变量
let i = 1;
let person = {
name :"lx",
age:1,
hobbys:[1,2,3,true,null,'str']
}
//对象新增属性
person.height = 180;
person["sex"] = '男'
//删除对象属性
delete person.hobbys;
delete person["sex"];
//判断一个属性是否在对象中,属性需要双引号扩起来,js中key都是字符串类型,value可以是任意类型
console.log("name" in person);
console.log(person);
</script>
<script>
'use strict';
//ES6新特性map和set
//map中key不重复
let maps = new Map([["lx",99],["hwq",100]]);
//根据key获取map中对应的值
maps.get('hwq');
//map中新增或修改key、value
maps.set("hei",100);
//map中删除指定key
maps.delete('hei');
//set无序不重复集合
let sets = new Set([1,2,3,3,3,4,"hwq",'ha']);
//判断一个元素是否处于set集合中
sets.has(1);
//Set中新增元素
sets.add("lx");
//删除Set集合中指定元素
sets.delete('ha');
//遍历数组:1:for in获得的是索引 2:for of可以直接获取到值
//不建议使用for in,有bug存在
// let arr = [1,2,3];
// arr.name = 6;
// for (let arrKey in arr) {
// console.log(arrKey);
// }
// 上面结果会输出0,1,2,name。
//通过for of遍历map集合
for (let map of maps) {
console.log(map);
}
//通过for of遍历set集合
for (let s of sets) {
console.log(s);
}
</script>
<script>
//定义函数
//第一种
function appendStr(val) {
console.log(val + '-----');
}
//第二种
var appendStr1 = function (val) {
console.log(val + '********');
}
//这样传多个参数也不会报错,那么怎么获取这些多余的参数呢
appendStr(1, 2, 3, 4, 5, 6, 7);
// arguments可以获取到所有的参数,进行附加操作的判断
function appendStr(val) {
console.log(arguments);
if (arguments.length > 1) {
let value = arguments[1];
//todo
}
}
//但是arguments包含了我们需要用到的参数,只想获取多余的参数可以用 ...rest来获取,...rest必须放到参数最后面
function appendStr(val, ...rest) {
for (let restElement of rest) {
//打印出除了val本身外,其他附带的参数
console.log(restElement);
}
console.log(val + '-----');
}
</script>
定义在函数范围内,只能生效于函数内,函数外使用会报错
<script>
function a(){
var num = 1;
}
console.log(num);
</script>
//Uncaught ReferenceError: num is not defined
如果多个函数中使用了相同名字的变量,之间互不影响
<script>
function a(){
var num = 1;
console.log(num);
}
function b(){
var num = 1;
console.log(num);
}
a();//输出1
b();//输出1
</script>
内部函数可以调用外部函数的变量,但是外部函数不能调用内部函数变量
<script>
function a() {
var num = 1;
function b() {
num1 = num + 1;
}
var num2 = num1 + 1;
}
a();
</script>
//Uncaught ReferenceError: num1 is not defined
假设内部和外部变量名称重复
<script>
function a() {
var val = '外';
function b() {
var val = '内';
console.log(val);
}
b();
console.log(val);
}
a();
//输出内、外
</script>
//js函数变量从自身查找是,会按照由内向外进行查找,如果内部变量和外部变量相同,则内部变量会屏蔽外部变量
养成规范
所有的变量定义都要放在函数头部,不要乱放,便于代码维护
function a(){
var x = 1,
y = 1,
z,a,b,c;//undefined
}
定义全局变量
<script>
'use strict';
var x = 1;//x为全局变量,定义在函数外边的即是全局变量
function f() {
console.log(x);
}
</script>
定义的全局变量,默认都会绑定到
window
对象下
<script>
'use strict';
var lx = 1;
function f() {
console.log(lx);
}
f();//输出1
console.log(window.lx);//输出1
</script>
绑定到window下是不安全的,极有可能出现重名的现象(一般自定义对象,减少重名的可能)
<script>
'use strict';
//定义唯一全局变量
var person = {};
person.name = 'lx';
person.age = function calcAge(a, b) {
return a + b;
}
//将自己代码全部放到自己定义的唯一空间名字中,降低全局冲突的问题
</script>
局部作用域(let) 尽量使用let定义局部变量,因为var定义的变量出了方法还能用,会有问题
<script>
'use strict';
function xunhuan(){
for (var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i+1);//问题 var定义的变量出了循环还可以用
}
xunhuan();
</script>
ES6引入
const
常量关键字
const PI = '3.14';//const定义的变量为只读常量,不可被修改
方法定义在对象里没有问题
<script>
'use strict';
let person = {
name:'lx',
birthday:2000,
age: function (){
return new Date().getFullYear() - this.birthday;
}
}
//调用对象属性
person.name
输出--》 'lx'
//调用对象方法,必须带括号()
person.age()
输出--》 23
</script>
方法单独拿出来写,this无法指向,默认指向的是调用他的那个对象
<script>
function getAge(){
return new Date().getFullYear() - this.birthday;
}
let person = {
name:'lx',
birthday:2000,
age: getAge
}
//age是个方法,所以调用也需要带括号
person.age()
输出--》 23
//直接调用方法也需要带括号
getAge()
输出--》 NaN//this无法指向,会出现NaN
</script>
使用apply解决this无法指向问题
getAge.apply(person,[]);//通过apply将this指向person对象,参数为空。 所有的方法都会有apply这个方法
<script>
'use strict';
let time = new Date();
//获取年
time.getFullYear();
//获取月
time.getMonth(); //0~11 换成中国月份需要 + 1
//获取日
time.getDate();
//获取时
time.getHours();
//获取分
time.getMinutes();
//获取秒
time.getSeconds();
//获取星期几
time.getDay();
//获取时间戳
time.getTime();
//获得本地时间
console.log(new Date().toLocaleString());
//时间戳转日期
console.log(new Date(1702865004928));
</script>
<script>
let user = {
name:"lx",
age:23
}
//将对象转为JSON字符串 输出{"name":"lx","age":23}
console.log(JSON.stringify(user));
//将JSON字符串转为对象
console.log(JSON.parse('{"name": "lx", "age": 23}'));
</script>
<script>
let user = {
name:"father",
age:3,
run: function (name) {
console.log(name + "在跑!!");
}
};
let lx = {
name: "lx"
};
//指定lx的原型为user对象,拥有其属性和方法
lx._proto_ = user;
console.log(lx._proto_.run("hwq"));
console.log(lx._proto_.age);
console.log(lx._proto_.name);
</script>
class是
ES6
引入的
引入之前写法
function Person(name){
this.name = name;
}
Person.prototype.hello = function (){
alert("hello")
}
Person.prototype.hello()
引入之后写法
<script>
//ES6引入class之后定义一个类、属性、方法
class Person{
//有参构造
constructor(name) {
this.name = name;
alert("My Name Is : " + name);
}
hello(){
alert("hello")
}
}
let xm = new Person("小明");
xm.name;
xm.hello();
//子类继承父类,构造器中必须有super()方法
class BigPerson extends Person{
constructor(typeName) {
super(typeName);
this.typeName = typeName;
}
whoIsMe(){
alert("我是一个"+this.typeName);
}
}
let xh = new BigPerson("大人");
xh.typeName;
xh.whoIsMe();
xh.hello();
</script>
window 代表浏览器窗口
window.alert(1)//弹窗
window.innerHeight//浏览器内部高度
window.innerWidth//浏览器内部宽度
window.outerHeight//浏览器外部高度(整个浏览器高度)
window.outerWidth//浏览器外部宽度
screen 屏幕
screen.height
screen.width
location 定位,代表当前页面url信息
location.host//主机
location.reload()//刷新页面,重新加载
location.assign("xxx.com")//设置当前页面跳转新的地址
document 代表当前页面,DOM文档书
document.title//获取当前页面的标题
document.title = "heihei"//修改当前页面标题
document.cookie//获取当前页面cookie,防止劫持cookie,服务器端可以设置 cookie:httpOnly
document.getElementById("en")//根据id名称获取当前页面中具体的文档树节点
document.getElementsByTagName("p")//根据标签获取当前页面中具体的文档树节点
document.getElementsByClassName("en")//根据class名称获取当前页面中具体的文档树节点
history 浏览器历史记录
history.back()//浏览器回退页面
history.forward()//浏览器前进页面
浏览器的网页就是一个DOM树形结构
获得DOM节点
<body>
<div id="app">
<h1>标题</h1>
<p id = "p1">1</p>
<p class="p2">2</p>
</div>
<script>
let app = document.getElementById("app");
let h1 = document.getElementsByTagName("h1");
let p1 = document.getElementById("p1");
let p2 = document.getElementsByClassName("p2");
console.log(app.children);//获得父节点下所有子节点
</script>
</body>
更新DOM节点
let a = document.getElementById("app")
a.innerText = '123456' //修改文本的值
a.innerHTML = '<h1>haha</h1>'//可以解析HTML标签
a.style.color = 'red'//改变字体颜色,属性都用 = 字符串包裹
a.style.fontSize = '100px'// - 需要转成驼峰命名
删除DOM节点
DOM节点不能自己删除自己,需要找到父节点,再通过父节点删除子节点
<body>
<div id="father">
<h1>标题</h1>
<p id = "p1">1</p>
<p class="p2">2</p>
</div>
</body>
<script>
// 删除dom对象
// 1.获取要删除的节点
let delTarget = document.getElementById("p1");
// 2.获取该节点的父元素
let fa = delTarget.parentElement;
// 3.删除
fa.removeChild(delTarget);
//删除是动态的过程,删除多个节点的时候,children是时刻变化的,下面这样删除会报错
//Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
</script>
插入节点
上面说到的更新DOM节点,如果节点中是空的,我们可以通过innerText、innerHTML来更新,但是如果里面有值的话,就不能在往里面inner了,会把原来的所有元素全部覆盖掉,所有要用到插入
已经存在的节点,可以通过appendChild将元素追加到另一个元素中
<body>
<p id = "js">Java Script</p>
<div id="list">
<p id="se">Java SE</p>
<p id="ee">Java EE</p>
<p id="me">Java ME</p>
</div>
</body>
<script>
let js = document.getElementById("js");
let list = document.getElementById("list");
//将js节点插入到list中最后一位
list.appendChild(js);
</script>
如果节点不存在,可以通过createElement创建节点
<body>
<p id = "js">Java Script</p>
<div id="list">
<p id="se">Java SE</p>
<p id="ee">Java EE</p>
<p id="me">Java ME</p>
</div>
</body>
<script>
//元素不存在,则创建节点
let newEle = document.createElement('h1');
// newEle.id = "newEle";//和下方代码效果一样,通常使用下面的
newEle.setAttribute("id","newEle");
newEle.innerText = "Hello,LX";
//上面三步执行完,相当于手写了html代码 <h1 id = "newEle"> Hello,LX </h1>
list.appendChild(newEle);
</script>
插入指定节点前面
<body>
<div id="list">
<p id="se">Java SE</p>
<p id="ee">Java EE</p>
<p id="me">Java ME</p>
</div>
</body>
<script>
let list = document.getElementById("list");
//元素不存在,创建节点
let newEle = document.createElement('h1');
newEle.setAttribute("id","newEle");
newEle.innerText = "Hello,LX";
//目标节点
let me = document.getElementById("me");
//插入到指定元素前面,insertBefore,第一个参数为新的节点,第二个是要往哪个节点前插入的目标节点
list.insertBefore(newEle,me);
</script>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return newCheck()">
<p>
<label for="uname">用户名:</label>
<input type="text" placeholder="请输入用户名" id="uname" name="uname">
</p>
<p>
<label for="pwd">密码:</label>
<input type="password" placeholder="请输入密码" id="pwd">
</p>
<input type="hidden" id="jmpwd" name="password">
<input type="submit" value="登录">
<!-- <button type="submit">提交</button>-->
</form>
</body>
<script>
function encryptPassword(password) {
return window.btoa((encodeURIComponent(password)));
}
function oldCheck() {
let uname = document.getElementById("uname");
let pwd = document.getElementById("pwd");
//这种方式虽然前端密码加密了,但是提交的瞬间密码框黑点会瞬间多出好几个
pwd.value = encryptPassword(pwd.value)
return true;
}
function newCheck() {
let uname = document.getElementById("uname");
let pwd = document.getElementById("pwd");
let jmpwd = document.getElementById("jmpwd");
//将隐藏的密码框赋值name传输过去,页面上显示的密码框name去掉,这样请求抓包看不到这个参数,并且还是正常数量的黑点,用户体验较好,安全性较高
jmpwd.value = encryptPassword(pwd.value);
return true;//返回true通过提交,返回false不提交
}
</script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
<a href="" id="a">点我</a>
</body>
<script>
$('#a').click(function (){
alert("hello,jquery");
});
//公式
// $(选择器).action(function (){});
//jquery学习网站
//https://jquery.cuishifeng.cn/
</script>
<!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>
div{
width: 500px;
height:500px;
border:1px pink solid;
}
</style>
</head>
<body>
鼠标位置:<span id="mouseLocation"></span>
<div>
鼠标移入进来试试
</div>
</body>
<script>
//当网页加载完成后触发事件
$(function (){
$("div").mousemove(function (location) {
$("#mouseLocation").text('x坐标 :' + location.pageX + ', y坐标 :' + location.pageY);
})
})
</script>
</html>