JavaScript 和 jQuery 学习笔记
JavaScript
什么是JavaScript？
JavaScript是一门世界上最流行的脚本语言。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
快速入门
引入JavaScript
<script>
alert('hello,world')
script>
<script src="js/qj.js">script>
//console.log(score); 在浏览器的控制台打印变量 相当于System.out.println();
严格检查模式strict
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
'use strict'
//Uncaught ReferenceError: j is not defined
// j = 1;
//全局变量
// var i = 1;
//局部变量
let i = 1;
script>
head>
<body>
body>
html>
数据结构
字符串
- 正常字符串使用 单引号，或者双引号包裹
- 注意转义字符 \
\'
\n
\t
\u4e2d \u#### unicode字符
\x41 Ascll字符
- 多行字符串编写
let msg = `
hello
nihao
zyy
`
函数
for…of 与 for…in
for…of
let map = new Map([['张三',100],['李四',90],['王五',80]]);
for (let i of map) {
console.log(i);
}
for…in
let arr = [1,2,3,4,5,6,7];
for(let num in arr) {
console.log(arr[num])
}
for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name。所以for in更适合遍历对象，不要使用for in遍历数组。
局部作用域
'use strict';
function foo() {
var sum = 0;
for (let i=0; i<100; i++) {
sum += i;
}
// SyntaxError:
i += 1;
}
方法
var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
var y = new Date().getFullYear();
return y - this.birth;
}
};
xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年调用是25,明年调用就变成26了
在js中可以控制this指向
function getAge() {
let now = new Date().getFullYear();
return now - this.birth;
};
let zyy = {
name: '张三',
birth: 1993,
age: getAge
};
//zyy.age() 可以调用
//getAge() NaN
//getAge.apply(zyy, []);//this 指向了zyy,参数为空
Date()
let now = new Date();//Sun May 30 2021 21:45:07 GMT+0800 (中国标准时间)
now.getFullYear();//年 2021
now.getMonth();//月 0-11
now.getDate();//日
now.getDay();//星期几 0-6 0：星期天
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一 1970 1.1 00:00:00 毫秒数
console.log(new Date(1622382307167));//时间戳转为时间
JSON
格式：
- 对象都用{}
- 数据都用[]
- 所有的键值对都是用key:value
let user = {
name: "zyy",
age: 18,
sex: "男"
}
//对象转化为json字符串 "{\"name\":\"zyy\",\"age\":18,\"sex\":\"男\"}"
let jsonUser = JSON.stringify(user)
//json字符串转化为对象 参数为json字符串
let obj = JSON.parse('{\"name\":\"zyy\",\"age\":18,\"sex\":\"男\"}');
obj 和 json 的区别
let obj = {a:'a',b:'b'};
let json = {"a":"a","b":"b"};
面向对象编程
类：模板
对象：具体的实例
JavaScript这个需要换一下思维方式
面向对象原型继承
let student = {
run: function () {
console.log(this.name + "run...");
}
}
let xiaoming = {
name: "小明"
}
let bird = {
fly: function () {
console.log(this.name + "fly...");
}
}
//小明的原型是student
xiaoming.__proto__ = student;
面向对象class继承
class继承
function student(name) {
this.name = name;
}
//给student新增一个方法
student.prototype.hello = function () {
alert('hello');
}
class关键字，是es6引入的
定义一个类：属性，方法
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
let xiaoming = new Student("xiaoming");
操作BOM对象（重点）
浏览器介绍
JavaScript 和 浏览器关系？
JavaScript 诞生就是为了能够让他在浏览器中运行！
BOM：浏览器对象模型
window
window 代表 浏览器窗口
window.alert(1)
undefined
window.innerHeight
936
window.innerWidth
150
window.outerHeight
1056
screen
screen.width
977
screen.height
834
location
location 代表当前页面的 url 信息
host: "www.baidu.com"
href: "https://www.baidu.com/?tn=40039514_2_oem_dg"
protocol: "https:"
reload: ƒ reload() // 刷新网页
//设置新的地址
location.assign('https://blog.csdn.net/zhayuyao')
document
document 代表当前的页面，HTML DOM 文档树
document.title
"百度一下，你就知道"
document.title='zyy'
"zyy"
获取具体的文档树节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl id="app">
<dt>java</dt>
<dd>javase</dd>
<dd>javaee</dd>
</dl>
<script>
var dl = document.getElementById('app')
</script>
</body>
</html>
获得DOM节点（重点）
核心
浏览器网页就是一个Dom树型结构
- 更新：更新 Dom 节点
- 遍历 dom 节点：得到DOM节点
- 删除：删除一个DOM节点
- 添加：添加一个新的DOM节点
要操作一个DOM节点，就必须要先获取这个DOM节点。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="father">
<h1>标题1h1>
<p id="p1">p1p>
<p class="p2">p2p>
div>
<script>
//对应css选择器
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
let childrens = father.children;//获取父节点下的所有子节点
let children0 = father.children[0];
// father.firstChild
// father.lastChild
script>
body>
html>
更新DOM节点
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="id1">
div>
<script>
let id1 = document.getElementById("id1");
id1.innerText = 'abc'
script>
body>
html>
操作文本
- id1.innerText='123’修改文本的值
- id1.innerHTML=‘234’ 可以解析html文本标签
操作css
id1.style.color='red' //属性使用字符串包裹
"red"
id1.style.fontSize='50px' //下划线转驼峰命名
"50px"
id1.style.padding='1em'
"1em"
删除 DOM 节点
删除节点的步骤：先获取父节点，再通过父节点删除自己
father.removeChild(p1)
<p id="p1">p1</p>
插入节点
插入节点
我们获得了某个DOM节点，假设这个DOM是空的，我们通过innerHTML就可以增加一个元素，但是这个DOM节点已经存在元素了，我们就不能这么干了！会产生覆盖。
追加
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<p id="js">javascriptp>
<div id="list">
<p id="se">sep>
<p id="ee">eep>
<p id="me">mep>
div>
<script>
let js = document.getElementById('js');
let list = document.getElementById('list');
list.appendChild(js);//追加
script>
body>
html>
获得和设置表单的值
- 文本框 text
- 下拉框 select
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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="woman" id="girl">女
</p>
</form>
<script>
let userName = document.getElementById('userName');
let boy = document.getElementById('boy');
let girl = document.getElementById('girl');
//得到输入框的值
let v = userName.value;
//修改输入框的值
userName.value = 'zyy';
//对于单选框,多选框等等固定的值，boy.value只能取到当前的值
let c = boy.checked;//查看返回的结果，是否为true,如果为true,则被选中
girl.checked = true;//赋值
</script>
</body>
</html>
jQuery
JavaScript
jQuery库，里面存在大量的JavaScript函数
获取 jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<!--$(selector).action();-->
<a href="" id="test-jquery">点我</a>
<script>
document.getElementById('id');
$('#test-jquery').click(function () {
alert('jquery');
})
</script>
</body>
</html>
jQuery
<script>
//原生js,选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器 都能用
$('p').click() //标签选择器
$('#id1').click() //id选择器
$('.class1').click() //class选择器
$(selector).action()
script>
事件
鼠标事件，键盘事件…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid aqua;
}
</style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<div>
<script>
//当网页元素加载完毕之后，响应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX+',y'+e.pageY)
})
});
</script>
</div>
</body>
</html>
节点文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
$('#test-ul li[name=python]').text();//获取值
$('#test-ul li[name=python]').text('123');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('123 ');//设置值
</script>
</body>
</html>