1.什么是JavaScript
1.概述
是一门世界上最流行的脚本语言
Java和 JavaScript
一个合格的后端人员 必须精通JavaScript
2.历史
ECMAScript是JavaScript的一个标准
最新那本已经到ES6版本
但是大部分浏览器只停留在ES5代码上
开发环境 线上环境 版本不同
2快速入门
2.1引入JavaScript
1.内部标签使用
<script>
alert("HelloWorld");
</script>
2.外部引入
abs.js
//....
test.html
<script src="js/js.js"></script>
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签内 写JavaScript-->
<!-- <script>-->
<!-- alert("HelloWorld");-->
<!-- </script>-->
<!-- 外部引入-->
<!-- script必须成对出现 -->
<script src="js/js.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<!--这里也可以存放-->
</body>
</html>
2.2基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JS严格区分大小写-->
<script>
//1. 定义变量 变量类型 变量名 =变量值
var score = 80;
var name = "林宏程";
//2.条件控制
if (score > 60 && score < 70) {
alert("60~70")
} else if (score >= 70) {
alert("70~100")
} else {
alert("other")
}
//console.log()在浏览器的控制台打印变量 System.out.println()
</script>
</head>
<body>
</body>
</html>
浏览器必须调试须知
2.3数据类型
数值 文本 图形 音频 视频…
变量
var la 命名方法和Java一样
number
JS不区分小数和整数 Number
123 //整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN// not a number
Infinity//表示无限大
String
‘abc’,“abc”
Boolean
true false
逻辑运算
&& 两个都为真 结果为真
|| 一个为真 结果为真
!取反
比较运算符(重要)
=赋值
==等于(类型不一样 值一样 也会判断为true)
===绝对等于(类型一样 值一样 结果为true)
这是一个JS的缺陷 坚持不要使用 ==
- 须知 NaN 这个与所有的数值都不相等 包括自己
- 只能通过isNaN(NaN)来判断这个数是不是NaN
浮点数的问题
console.log((1/3)===(1-2/3));//flase
尽量不要使用浮点数 存在精度问题
console.log(Math.abs(1/3-(1-2/3))<0.00001)//true
使用Math类型可以判断
null和undefined
- null 空
- undefined 未定义
数组
Java的数组需要相同类型的对象 JS中不需要这样
var array=[1,2,3,4,5,"hhh",null,true]
取数组下表 如果越界了 就会
undefined
对象
对象是大括号 数组是中括号
每个属性之间使用逗号隔开 最后一个不需要
//Person person= new Person(1,2,3,4,5);
var person={
name:"林宏程",
age:3,
tags:['js','java','web']
}
取对象的值
person.name
>'林宏程'
2.4严格检查模式
保证环境一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 必须写在第一行
// 必须写在第一行
// 必须写在第一行
'use strict';
//严格检查模式 'use strict';预防JavaScript的随意性导致一些问题
//全局变量
a=1;//此处就会报错
//ES6 let 局部变量建议使用let去定义
let b=0;
</script>
</head>
<body>
</body>
</html>
3.数据类型
3.1字符串
1.正常字符串我们使用单引号 或者 双引号包裹
2.注意转移字符 \
\'
\n 换行
\t 空格
\u4e2d /u#### Unicode字符
\x41 Asc11字符
3.多行字符串编写 ``
// 波浪号键 可以长字符
var msg=`你号
你是谁
忘记了
`
4.模板字符串
此处用的还是波浪线的字符串``
let name="林宏程";
let age=3;
let msg=`你好呀 ${name}`
console.log(msg)
5.字符串长度
console.log(str.length)
6.字符串的可变性 不可变
7.大小写转换
//这里是方法 不是属性
student.toUpperCase() 大写
student.tolowerCase() 小写
8.str.indexOf(‘t’)
锁定
9.str.substring(1)
str.substring(1) 从第一个字符串截取到最后一个字符串
str.substring(1,3)从第一个字符串截取到第3个字符串
3.2数组
Array可以包含任意的数据类型
var arr=[1,2,3,4,5]//通过下标取值和赋值
1.长度
arr.length
注意:假如给arr.length赋值 数组大小就会发生变化 如果赋值过小 元素就会丢失
2.indexOf
下标索引
字符串的"1"和数字1 是不一样的
3.slice()
可以截取Array的一部分 返回一个新数组 相当于String中的subString()
4.push pop
push 压入一个元素到尾部
pop 弹出尾部的一个元素
5.unshift() shitf()
unshift() 压入一个元素到头部
shitf() 弹出头部的一个元素
6.排序 sort()
arr=[2,3,1]
(3) [2, 3, 1]
arr.sort()
(3) [1, 2, 3]
7.元素反转
arr.sort()
(3) [1, 2, 3]
arr.reverse()
(3) [3, 2, 1]
8.concat()
注意 concat()没有修改数组 只是会返回一个新的数组
arr.concat([1,2,3])
(6) [3, 2, 1, 1, 2, 3]
arr
(3) [3, 2, 1]
9.连接符join
打印拼接数组 使用特定的字符串连接 也不会修改arr本身
arr.join('-')
"3-2-1"
arr
(3) [3, 2, 1]
10.多维数组
arr=[[1,2],[3,4],["5","6"]]
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) [3, 4]
2: (2) ["5", "6"]
length: 3
__proto__: Array(0)
数组:存储数据 如何存 如何取值 (方法都可以自己实现)
3.3对象
若干个键值对
格式:
var 对象名={
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//定义了一个person对象 他有
var person={
name:"林宏程",
age:3,
email:"1025993689@qq.com"
}
JavaScript中的所有键都是字符串 值是任意对象
1.对象赋值
person.name
>'林宏程'
2.使用一个不存在的对象属性 不会报错 undefined
person.haha
undefined
3.动态的删减属性
delete person.name
true
person
4.动态的添加
person.haha=haha
"哈哈"
person
5.判断属性值存在与否
`age` in person
true
//继承
'toString' in person
true
6.判断这一个属性是否是这个对象自身拥有的
person.hasOwnProperty("toString")
false
person.hasOwnProperty("age")
true
3.4流程控制
1.if判断
var age=3;
if (age>3){//第一个判断
alert('haha')
}else {//第二个判断
alert('xixi')
}
2.while循环 避免程序死循环
while(age<100){
age++;
console.log(age)
}
do {
age++;
console.log(age)
}while(age<100)
3.for循环
var age=3;
for (let i = 0; i < 100; i++) {
console.log(i)
}
4.forEach循环
let arr=[1,2,3,4,5];
arr.forEach(function (value) {
console.log(value)
})
3.5Map和Set
ES6的新特性~
Map:
"use strict";
// 学生的成绩 学生的名字
var map=new Map([["tom",100],["jack",90],["haha",80]]);
var name= map.get("tom");//通过key获得value
map.set("admin",123456);
map.delete("tom");
console.log(name);
Set: 无序不重复的集合
var set=new Set([3,1,1,1,1,1]);//Set可以去重复
set.delete(2)
set.add(1)
console.log(set.has(3))
3.6iterator迭代器
ES6新特性
遍历数组
"use strict";
var arr=[3,4,5];
for (var x of arr){
console.log(x)
}
遍历Map
var map=new Map([["tom",100],["jack",90],["haha",80]]);
for (var x of map){
console.log(x)
}
遍历Set
var set=new Set([3,1,1,1,1,1]);//Set可以去重复
for (var x of set){
console.log(x)
}
4.函数
4.1定义一个函数
定义方式一
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)//10
abs(-10)//10
参数问题 JavaScript可以传任意个参数 也可以不传参数
参数进来是否存在的问题 假设不存在参数 如何规避
"use strict"
function abs(x) {
if (typeof x!=='number'){
//手动抛出异常
throw 'not a number';
}
if (x >= 0) {
return x;
}
else
{
return -x;
}
}
arguments
arguments
是一个JS免费赠送的关键字
代表传递进来所有的参数 是一个数组
function abs(x) {
for (let argument of arguments) {
console.log(argument)
}
if (arguments.length>1){
arguments[1];
}
if (x >= 0) {
return x;
}
else
{
return -x;
}
}
问题 arguments会包含所有的参数 我们有时候想使用多余的参数来进行附加操作
rest
以前:
function aaa(a,b) {
console.log("a=>"+a);
console.log("b=>"+b);
if (arguments.length>2){
for (var i=2;i<arguments.length;i++){
}
}
}
ES6引用的新特性 获取了已经定义的参数之外的所有参数…
function aaa(a,b,...rest) {
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest参数只能写在最后面 必须用…标识.
4.2变量的作用域
JavaScript中 var定义变量实际上是有作用域的
假设在函数体重声明 则在函数体外不可以使用(非要想是想的话 后面必须学 闭包
)
"use strict"
function qj() {
var x=1;
x++;
}
x=x+1;//Uncaught ReferenceError x is not defined
如果两个函数使用的相同的变量名 只要在函数内部 就不会冲突
function qj(){
var x=1;
x=x+1;
}
function qj2(){
var x='a';
x=x+1;
}
内部函数可以访问外部函数的成员 反之则不行
function qj() {
var x = 1;
function qj2() {
var y = x + 1;//2
}
var z = y + 1;//Uncaught ReferenceError: z is not defined
}
假设 内部函数变量 和外部函数的变量 重名
function qj() {
var x = 1;
function qj2() {
var x = x + 1;
console.log(x);//1
}
console.log(x)//1
qj2();//1
}
在JavaScript中 函数查找变量从自身函数开始 由内向外查找
1提升变量的作用域
function qj() {
var x="x"+y;
console.log(x);
var y="y";
}
结果 y undefined
说明 JS执行引擎 自动提升了Y的声明 但是不会提升变量Y的赋值
function qj2() {
var y
var x="x"+y;
console.log(x);
y="y";
}
这个是在JavaScript简历之初就存在的特性 养成规范 声明放在开头 便于维护代码
function qj2() {
var y="y"
var x="x"+y;
console.log(x);
}
2全局函数
//全局变量
let x = 1;
function f() {
console.log(x)
}
f();
console.log(x);
全局对象 window
var x = 'xxx'
alert(x)
alert(window.x)//默认所有的全局变量都会自动绑定在window对象下
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;
alert(456)//456
JavaScript 实际上只有一个全局作用域(函数也可以视为变量)假设没有在函数作用范围内找到 就会向外查找 如果在全局作用域,报错 ReferenceError
3规范
由于我们所有的全局变量 都会绑定到我们的window 如果不同的JS文件 使用了相同的全局变量就会冲突 如何能减少冲突
var KuangApp={}
//定义全局变量
KuangApp.name='kuangshen'
KuangApp.add=function (a,b) {
return a+b
}
吧自己的代码全部放入自己定义的唯一空间名字中 降低全局命名冲突的问题~
JQuery
4局部作用域
"use strict"
function aaa() {
for (var i = 0; i <100 ; i++) {
console.log(i)
}
console.log(i+1)//i出了作用域 还可以使用
}
5let
ES6 let关键字 解决局部作用域冲突!
function aaa() {
for (let i = 0; i <100 ; i++) {
console.log(i)
}
console.log(i+1)//i is not defined
}
6常量 const
在ES6之前 怎么定义常量 只有用全部大写的字母命名的变量就是常量 建议不要修改这样的值
var PI='3.14'
console.log(PI)
PI='213'
console.log(PI)
</script>
在ES6引入了常量关键字
const PI='3.14'
console.log(PI)
PI='213'//Assignment to constant variable.
console.log(PI)
4.3方法
1.定义方法
方法就是把函数放在对象的里面 对象只有两个东西 属性和方法
var person={
name:'林宏程',
birth:1997,
//方法
age:function(){
//今年-出生的年
let now = new Date().getFullYear();
return now-this.birth;
}
}
//属性
person.name
//方法 一定要带()
person.age()
this
代表什么 拆开上面的代码看看
function getAge() {
//今年-出生的年
let now = new Date().getFullYear();
return now-this.birth;
}
var person={
name:'林宏程',
birth:1997,
//方法
age:getAge
}
//person.age() ok
//getAge() NaN window
this 是无法指向的 是默认执行调用它的对象
apply
指定一个函数指向的对象
function getAge() {
//今年-出生的年
let now = new Date().getFullYear();
return now-this.birth;
}
var person={
name:'林宏程',
birth:1997,
//方法
age:getAge
}
getAge().apply(person,[])//空参 指向了person这个对象 参数为空
5内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
1.Date
基本使用
let now =new Date();
now.getFullYear();//年
now.getMonth()//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一 1970.1.1 0:00:00到现在本机的毫秒时间
2.JSON
json是什么
早期 所有的数据传输使用XML文件
(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
在JavaScript中 一切皆为对象 任何JS支持的类型 都可以用JSON来表示
格式
- 对象都用{}
- 数组都用[]
- 所有的键值对 都使用key:value
JSON字符串和JS对象的转换
var user={
name:"lhc",
age:3,
sex:"男"
}
//对象转换成json字符串
var jsonUser=JSON.stringify(user)//{"name":"lhc","age":3,"sex":"男"}
//json 字符串转换成字符串
var obj=JSON.parse(jsonUser)//{name: "lhc", age: 3, sex: "男"}
JSON和JS对象的区别
var obj={a:'hello',b:'hellob'}
var json='{a:'hello',b:'hellob'}';
3Ajax
- 元素的JS写法 xhr异步请求
- jQuery封装好的 方法 #(#name).ajax("")
- axios 请求
6.面向对象
1.什么是面向对象
JavaScript Java c# …面向对象 JavaScript有些区别!
类:模板 ------>原型
对象:具体的实例
在JavaScript中 这个需要大家换一下思维方式
原型:
var user={
name:"lhc",
age:3,
sex:"男",
run:function () {
console.log(this.name+"run......")
}
}
var bird={
fly:function () {
console.log(this.name+"fly......")
}
}
var xiaoming={
name:"xiaoming"
}
xiaoming.__proto__=bird;//user和bird是小明的原型
2.Class继承
-
定义一个类 属性 方法
class Student{ constructor(name) { this.name=name; } hello(){ alert("hello") } }
-
继承
class Pupil extends Student{ constructor(name,grade) { super(name); this.grade=grade; } myGrade(){ alert("我是个小学生"); } }
本质还是对原型修改 但是写法对有Java基础的人更加友好
原型链
__ proto__
7操作BOM对象(重点)
浏览器介绍
JavaScript和浏览器的关系
JavaScript诞生就是为了能够让他在浏览器中运行
BOM:浏览器对象模型
- IE 6~11
- Chrome
- Safari
- FireFox(Linux)
- Opera (塞班系统)
三方
- QQ浏览器
- 360浏览器
1.window(重点)
window代表 浏览器窗口
windos.alert(1)
undefined
window.innerHeight
258
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919
2.Navigator
Navigator 封装浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36"
navigator.platform
"Win32"
大多数时候 不会使用Navigator 对象 因为会被人人修改
不建议用这些属性来判断和编写代码
3.screen
代表屏幕尺寸
screen.width
1920
screen.height
1080
4.location(重点)
location代表当前页面的URL信息
host: "www.bilibili.com"
href:"https://www.bilibili.com/video/BV1JJ41177di?p=19"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign(https://www.baidu.com)
5.document(文档内容 )
document代表当前的页面 HTML DOM文档树
document.title
"【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili"
document.title='xixi'
"xixi"
获取具体的文档数节点
<!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>
let dl = document.getElementById(`app`);
</script>
</body>
</html>
6.cookie
获取cookie
document.cookie
"finger=1571944565; _uuid=1B672423-A829-D31E-5237-19797765275A61078infoc; buvid3=79564B33-CA5C-4C1E-9779-DFE9ADCD3A38138386infoc; sid=biys0q9d; DedeUserID=830089; DedeUserID__ckMd5=f7db4c54651d390e; bili_jct=9ff089763c8989a865c30b6ede038bee; CURRENT_FNVAL=80; blackside_state=1; rpdid=|(u|JmklRR)Y0J'uY||~Rm~)Y; CURRENT_QUALITY=80; bp_video_offset_830089=439304880131946099; PVID=2"
劫持cookie的原理
www.taobao.com
<script src='aa.js'></script>
<!-- 恶意获取你的cookie 上传到它的服务器-->
服务器端可以设置 cookie: httpOnly
history
history 代表浏览器的历史记录
history.back()//后退
history.forward()//前进
8操作DOM对象(重点)
DOM: 文档对象模型
核心
浏览器网页就是个DOM树形结构
- 更新: 更新Dom节点
- 遍历dom节点 得到Dom节点
- 删除 删除一个Dom节点
- 添加:添加一个新的节点
要操作一个Dom节点 就必须要先获得这个Dom节点
获得dom节点
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father=document.getElementById('father');
let children=father.children;//获得父节点下所有子节点
// father.firstChild
// father.lastChild
这是元素代码 之后我们都尽量使用jQuery
1.更新节点
操作文本
id1.innerText='456'
修改文本的值
id1.innerHTML='<strong>123</strong>'
可以解析html文本标签
操作JS
id1.style.color='red'//使用字符串包裹
"red"
id1.style.fontSize='20px'//驼峰命名问题
"20px"
2.删除节点
删除节点的步骤 先删除父节点 再通过父节点删除自己
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father=document.getElementById('father');
father.removeChild('p1');//删除p1
//删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
// father.firstChild
// father.lastChild
注意 删除多个节点的时候 children节点是在时刻变化的 删除节点的时候一定要注意
3插入节点
我们获得了某Dom节点 假设这个dom是空的 我们通过innerHTML 但是这个DOM节点已经存在元素了 我们就不能这样干 会产生覆盖
追加操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="JavaSE">JavaSE</p>
<p id="JavaEE">JavaEE</p>
<p id="JavaME">JavaME</p>
</div>
<script>
let js = document.getElementById('js');
let list = document.getElementById('list');
list.appendChild(js)//追加到后面
</script>
</body>
</html>
效果
创建一个新的标签 实现插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="JavaSE">JavaSE</p>
<p id="JavaEE">JavaEE</p>
<p id="JavaME">JavaME</p>
</div>
<script>
let js = document.getElementById('js');//已经存在的节点
let list = document.getElementById('list');
//通过js创建一个新的节点
let newP = document.createElement('p');//创建一个p标签
newP.id='newP';
newP.innerText='hello';
list.appendChild(newP)//追加到div中
</script>
</body>
</html>
9操作表单
表单
form DOM树
- 文本框 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 input_text = document.getElementById("username");
let boy_radio = document.getElementById("boy");
let girl_radio = document.getElementById("girl");
//得到输入框的值
//修改输入框的值
input_text.value = '1111';
//对于单选框 多选框等等固定的值 只能取到当前的值 所以用下面
girl_radio.checked=true//操作选中的是 女 默认
</script>
</body>
</html>
提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名:</span><input type="text" id="username">
</p>
<!--多选框的值 就是定义好的value的值-->
<p>
<span>密码:</span><input type="text" id="password">
</p>
<input type="hidden" id="md5-password" name="md5pwd">
<!-- 绑定事件 onclick被点击-->
<button type="button" onclick="">提交</button>
<script>
function aaa(){
let uname = document.getElementById('username');
let pwd = document.getElementById('pwd');
let md5pwd = document.getElementById('md5-password');
md5pwd.value=md5(pwd.value)
//可以校验判断表单内容 true就是通过提交 false就是阻止提交
return true
}
</script>
</form>
</body>
</html>
10jQuery
JavaScript 和
jQuery 工具类 里面存在大量的JavaScript函数
1.获取 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>
</body>
</html>
测试
<!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>
<!--
公式:$(selector)
-->
<a href="" id="test-jquery">点我</a>
<script>
document.getElementById('id')
//选择器 就是css的选择器
$(
'#test-jquery'.click(
function () {
alert('hello')
}
)
)
</script>
</body>
</html>
2.选择器
公式:$(selector).action()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//原生js 选择器少 麻烦不好记
//标签
document.getElementsByTagName()
//id
document.getElementById()
//类
document.getElementsByClassName()
//jQuery css中的选择器全部都可以用
$('p').click()//标签选择器
$('#id1').click()//id选择器
$('.class1').click()//类选择器
</script>
</body>
</html>
3.事件
鼠标事件 键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<!--要求 获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标
</div>
<script>
//当网页元素加载完毕之后 响应事件
$(document).ready(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
})
</script>
</body>
</html>
4.操作DOM
节点文本操作
$('#test-ul li[name=python]').text();//选择text
$('#test-ul li[name=python]').text('111');//修改text
$('#test-ul').html();//选择html
$('#test-ul').html('<strong>123</strong>');//html修改
css的操作
$('#test-ul li[name=python]').css("color","red")
元素的显示和隐藏
$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()
本质是 display=none;
未来的ajax();
$(#form).ajax();
小技巧
- 如何巩固JS (看jQuery源码 看游戏)
- 巩固HTML CSS (扒网站 全部down下来 然后对应修改网站)