HTML + CSS + JavaScript
目录
1 HTML
HTML 文件基本结构
HTML 开发工具
HTML 常见标签
标题标签:h1 - h6
段落标签:p
换行标签:br
图片标签:img
超链接标签:a
表格标签
表单标签
form 标签
input 标签
select 标签
textarea 标签
无语意标签:div & span
综合练习
2. CSS
选择器
标签选择器
class 选择器
id 选择器
通用选择器
复合选择器
引入方式
常用 CSS
color
font-size
border
width、height
padding
margin
3. JavaScript
引入方式
基本语法
变量
数据类型
运算符
JavaScript 对象
数组
函数
对象
jQuery
引入依赖
jQuery 语法
jQuery 选择器
jQuery 事件
操作元素
综合案例
总结
1 HTML
- 浏览器右键都有个查看源代码功能,里面就是 html,html 是超文本标记语言
- 超文本比文本能表示更多的内容,记事本是文本,word 属于超文本,除了编辑文本还能设置格式
- 标记语言指由标签构成的语言,标签写说明是如何显示的
学习目标
- 认识常见标签
- 后序不认识标签通过网络能认识(解决问题的能力)
标签
- 标签名放 <> 中
- html 标签大多是成对出现的,有开始标签和结束标签,中间是内容
- 少数标签只有开始标签,称为 “单标签”
- 标签就是提前预设了一定格式
比如下方代码
这个代码并不规范,但浏览器能运行成功,是因为浏览器具有非常强的鲁棒性
HTML 文件基本结构
<html><head><title>第⼀个⻚⾯</title></head><body>hello world</body>
</html>
- html 标签是整个 html 文件的根标签
- head 标签中写页面属性
- body 标签中写页面显示的内容
- title 标签中写页面标题
- head 和 body 是html 的子标签,html 是head 和 body 的父标签
- title 是 head 的子标签,head 是title 的父标签
- head 好和 body 之间是兄弟关系
查找页面元素
HTML 开发工具
- 可以 idea,也可以使用记事本,常使用 Visual Studio Code (简称 “VS Code” )
- 在储存文件中双击访问 html,不建议在开发工具里面访问
VS Code 使用
- 首先建立一个文件,在 VS Code 里面打开文件,新建一个 html 可以进行编辑
- “!+ 回车” 会自动生成预设代码
<!DOCTYPE html> //声明 html 代码
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
HTML 常见标签
html 每个标签都有它的样式
标题标签:h1 - h6
有六个,从 h1 - h6,数字越大,则字体越小
<h6>hello</h6>
h1 - h6 提前预设了字体大小、加粗、换行
段落标签:p
html 中任何内容都要通过代码实现,比如空格、换行,代码加空格、换行是不会实现的
<p>这是⼀个段落</p>
<p>这是⼀个段落</p>
<p>这是⼀个段落</p>
p 标签不会首行缩进,需要用到 css
换行标签:br
- br 标签不像 p 标签那样带有很大空隙,段落标签换行比换行标签换行要宽阔一些
- br 是一个单标签(不需要结束标签), <br/> 是规范写法,不建议写成 <br>
这是⼀个br标签<br/>
图片标签:img
img 标签必须带有 src 属性,表示图片路径,例:<img src="dog.jpg">
src 标签的属性,一个标签可以有多个属性,后面跟路径,可以是相对路径,也可以是绝对路径,网络路径
- 相对路径:以 html 位置为基准,找到图片位置,与 html 同级直接写或者./;在当前目录下一级,兄弟目录一级一级写;在当前目录上一级则../
- 绝对路径:一个完整的磁盘路径或者网络路径
<!-- 相对路径 -->
<img src="hzw.jpg">
<!-- 网络路径 -->
<img src="https://cssl.dtstatic.com/uploads/blog/202408/01/
B8SxBB2DSlnDML3.thumb.1000_0.jpg">
<!-- 绝对路径 -->
<img src="C:/Users/PC/OneDrive/图片/图1/787b850d9ad4e72dafebe4db28f3e70a3e112513.jpg">
【注释 ctrl + /】
图片设置大小
<img src="../dog.jpg" width="200px" height="200px" border="5px">
- width / height:控制宽度高度,一般宽和高设置一个就可以了,图片会等比例缩放,如果全部设置图片可能变形
- border:边框,参数是宽度的像素,一般使用 css 来设定
- px 是一个长度单位,通常前端用的长度单位是 px(像素)、em,数字越大越长
注意
- 属性可以有多个,不能写在标签之前
- 属性之间用空格分割,可以是多个空格,也可以是换行
- 属性之间不分先后顺序
- 属性使用 “键值对” 的格式来表示
遇到不认识的标签
当遇到不认识的标签,在搜索词前面加上 html,搜索其它东西也是,例如 Java、spring
超链接标签:a
- 属性 href:必须具备,表示点击后会跳转到哪个页面
- 属性 target:打开方式,默认是 _self 在当前自己页面跳转,如果是 _blank 则用新的标签页打开
<a href="https://www.baidu.com/" target="_self">百度页面</a>
表格标签
生成表格快捷方式
table 标签:表示整个表格
tr 标签:行
td 标签:列
- table 包含 tr,tr 包含 td
- 表格标签有一些属性,可以用于设置大小边框,但一般使用 css 方式设置,这些属性都要放入 table 标签中
- align 是表格相对于周边元素的对齐方式,例 align="center",不是内部元素对齐方式
- border 表示边框
- cellpadding:内容距离边框的距离,默认 1 像素
- cellspacing:单元格之间的距离,默认为 2 像素
- width / height:设置尺寸
- 注意,这几个属性,vscode 都提示不出来
<table border="1px" align="center" cellpadding="20" cellspacing="0">><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>10</td></tr><tr><td>李四</td><td>女</td><td>11</td></tr></table></body>
</html>
表单标签
表单是让用户输入信息的重要途径,如登录界面用户需要输入信息进行登录
表单分为两个部分
- 表单域:包含表单元素的区域,重点是 form 标签
- 表单控件:输入框,提交按钮等,重点是 input 标签
form 标签
<form action="test.html">... [form 的内容]
</form>
描述了要把数据按照什么方式,提交到哪个界面中
关于 form 需要结合后端代码来进一步理解,后面再详细研究
input 标签
各种输入控件,如单行文本框、按钮、单选框、复选框
type 属性必须有,取值种类很多,如 button(普通按钮)、text(文本框)
可以使用快捷键,input: 后直接输入类型
一些常用类型:
1. 普通按钮
<input type="button" value="我是个按钮">
2. 文本框
<input type="text">
文本框也可以提前写一些信息
<input type="text" placeholder="请输入昵称">
3. 单选按钮
<input type="radio" name="" id="">
没有 name 和 id,当出现多个单选按钮无法选中单个
name 用于标记同一组单选
<input type="radio" name="gender" id="">男<br/>
<input type="radio" name="gender" id="">女<br/>
暂时不考虑 id
4. 复选框
<input type="checkbox" name="运动" id="">篮球
<input type="checkbox" name="运动" id="">乒乓球
<input type="checkbox" name="运动" id="">跑步
5. 密码框
<input type="password" name="" id="">
看不到输入内容
6. 提交按钮
- 搭配 form 标签一起使用,提交按钮必须放到 form 标签内,点击后会尝试给服务器发送请求
- 只会提交 form 标签括着的
<body><form action="hello.html"><input type="button" value="我是一个按钮"><br/><input type="text" placeholder="请输入昵称"><br/><input type="radio" name="gender">男<br/><input type="radio" name="gender">女<br/><input type="checkbox">篮球<input type="checkbox">乒乓球<input type="checkbox">跑步<br/><input type="password" name="" id=""><input type="submit" value="提交"></form>
</body>
点击提交当前页面就会跳转到 hell.html 页面,加入属性 target="_blank" 会打开新的标签页
<form action="hello.html" target="_blank">
- 此时提交上去 URL 的 ?后面并未看到提交的参数,因为提交信息需要用到 name、id、value 赋值
- “ ?” 后面是查询字符串,多个 key、value 组成
- key:表单的 name 值
- value:对应表单输入的值
<body><form action="hello.html" target="_blank"><input type="button" value="我是一个按钮"><br/><input type="text" placeholder="请输入昵称" name="userName"><br/><input type="radio" name="gender" value="1">男<br/><input type="radio" name="gender" value="2">女<br/><input type="checkbox">篮球<input type="checkbox">乒乓球<input type="checkbox">跑步<br/><input type="password" name="password"><input type="submit" value="提交"></form>
</body>
</html>
select 标签
【下拉菜单】
option 中定义 select 表示默认选中
<select><option>北京</option><option selected="selected">上海</option>
</select>
textarea 标签
【文本域】
<textarea rows="3" cols="100"></textarea>
- 文本域是多行的,可以放大缩小,文本框是单行的,不可以放大缩小
- 文本域中的内容是默认内容,空格也会有影响,rows 和 cols 一般使用 css 修改并不直接使用
<textarea rows="3" cols="100">123 456
</textarea>
<textarea rows="3" cols="100">123 456</textarea>
无语意标签:div & span
- div 标签是 division 的缩写,含义是分割,span 标签含义是跨度,div 会自动进行换行,span 不会
- div 和 span 是为了后面样式美化和网页布局
- div 独占一行是一个大盒子,span 不独占一行是一个小盒子
<div>我是一个div</div>
<div>我是一个div</div><span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
综合练习
用户注册界面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>用户注册</h1><table><tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr></table><div><input type="button" value="注册"><span>已有账号?</span><a href="#">登录</a></div>
</body>
</html>
# 作为占位符
2. CSS
css 能够对网页元素进行美化,一般放在 style 标签,head 里,因为网页从上往下加载,放在后面容易样式未加载出来
css 修饰前后
选择器
选择元素,对哪个或者哪些元素进行修饰 【就近选择,从上往下加载】
<style>span{color: red;}
</style>
- 选择器 span{}
- 修饰 color: red
- 基础选择器包括标签选择器、class 选择器、id 选择器
标签选择器
html 标签,如 span,div
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {color: green;}
class 选择器
对元素进行分类,通过 class 来标识类名,“.” 为类选择器标识
/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {font-size: 32px;}
id 选择器
对元素进行起名,通过 id 来标识,id 不能重复,“#” 为 id 选择器标识
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {color: red;}
通用选择器
也叫通配符选择器,“*” 为通用选择器标识,表示选择所有元素
/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {color: red;}
复合选择器
由多个单选择器组成,选择器之间使用空格隔开
/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {color: blue;}
引入方式
css 有 3 种引入方式
常用 CSS
color
颜色
颜色表示:
- 英文单词,如 blue、red
- rjb(三色符),如(255,0,0),每一个数字都是 2 个字节,即 0-255
- 十六进制表示法(通过 # 表示,rjb 中数字用十六进制表示,每两位表示一个),如 #ff00ff
- 还可以表示透明度,加入第四位则表示透明度,如 #56f90552、rgba(86,249,5,0.322),1 的时候表示不透明,0 的时候就不显示了,为完全透明
font-size
设置字体大小,chrome 浏览器默认字体大小是 16px,不同浏览器显示的可能不一样,因此需要通配符进行默认设置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font32{font-size: 50px;color: blue;}</style>
</head>
<body><div class="font32">我是一个div</div><div>我是一个div</div><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>
</body>
</html>
通过 class 来标识则需要加上 “.”
border
边框是一个复合属性,可以同时设置多个样式,不分先后顺序
.text1{border: 1px solid purple;}
以上属性对应边框粗细,边框样式,边框颜色
也可以分开来设置
.text1{border-color: red;border-width: 2px;border-style: solid;}
width、height
只有块级元素可以设置宽度高度(如快递只计算外包箱宽度高度而不是里面东西)
- 独占一行的叫块级元素,不能独占一行叫行内元素
- 常见块级元素:h1-h6,p,div 等
- 常见行内元素:a span
.text1{font-size: 32px;border-color: red;border-width: 5px;border-style: solid;width: 500px;height: 200px;}
padding
内边距,设置内容和边框之间的距离
- padding margin 是一个复合样式,顺序上右下左,写一个上下左右一样,写两个左和右一样,上和下一样,写三个下改为第三个,左右一样,如果只想调一个,可以分开设置
- padding-top
- padding-bottom
- padding-left
- padding-right
margin
外边距,设置元素和元素之间距离
- margin 是一个复合样式,顺序上右下左,写一个上下左右一样,写两个左和右一样,上和下一样,写三个下改为第三个,左右一样,如果只想调一个,可以分开设置
- margin-top
- margin-bottom
- margin-left
- margin-right
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font32{font-size: 50px;color: blue;}.text1{font-size: 32px;border-color: red;border-width: 5px;border-style: solid;width: 500px;height: 200px;}</style>
</head>
<body><div class="font32">我是一个div</div><div class="text1">我是一个div</div><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>
</body>
</html>
【内外边距是一个相对概念,如果是对于 html,那么此时内边距就是原来外边距】
3. JavaScript
JavaScript 简称 JS,是一个脚本语言,与 Java 无关,带有 Java 名是由于 Java 热度高,一般定义在 script 标签,body 里,因为用户进来以后不会立马点击页面互动,1 秒加载很够用了
- HTML:表示页面上有哪些元素
- CSS:页面 上元素样式、布局
- JavaScript:页面元素交互
引入方式
行内样式
<input type="button" value="点我⼀下" onclick="alert('haha')">
onclick 标签为鼠标点击
内部样式
<script>alert("你好");
</script>
alert 标签为弹框
基本语法
JavaScript 是一个动态弱语言类型,Java 是一个强语言类型
变量
创建变量(变量定义/变量初始化/变量声明),JS 申明变量有 3 种方式
【注意】
1. JavaScript 是一们动态弱语言类型语言
① 变量可以存放不同类型的值(动态)
var name = xiatian;
var age = 10;
② 随着程序的运行,变量的类型可能会发生改变(弱变量)
var a = 10; // 数字
a = "hehe"; // 字符串
观察 a 的类型,通过打印日志的方式
使用 typeof 可以返回数据类型变量
<script>var a = 10;console.log(typeof a);a = "nihao";console.log(typeof a);
</script>
运行然后按 F12 看控制台
也就是第一次是 number 类型,随后变成了 string 类型,说明类型并不固定
【补充】
学习 html 看页面源代码(右键检查/F12)里面的 Elements
学习 JavaScript 看页面源代码(右键检查/F12)里面的 Console(控制台)
类似于 idea 中的日志
2. 变量命名规则
- 组成字符可以是任何字母、数字、下划线(_)或者美元符号($)
- 数字不能开头
- 建议使用驼峰命名
- + 表示字符串拼接,也就是把两个字符串首尾相接变成一个字符串
- \n 表示换行
和 Java 类似
数据类型
分为原始类型和引用类型
<script>var a = 10;console.log("a:"+(typeof a));//numbervar b = 'hello';console.log("b:"+(typeof b));//stringvar c = true;console.log("c:"+(typeof c));//booleanvar d;console.log("d:"+(typeof d));//undefinedvar e = null;console.log("e:"+(typeof e));//null
</script>
对应的打印结果
运算符
JavaScript 运算符和 Java 用法基本相同
<script>var age = 20;var age1 = "20";var age2 = 20;console.log(age == age1);//true, ⽐较值console.log(age === age1);//false, 类型不⼀样console.log(age == age2);//true, 值和类型都⼀样
</script>
1
JavaScript 对象
数组
JS 数组当中元素并不要求是同一类型
1. 数组定义
创建数组有两种方式
方式 1:使用 new 关键词创建
// Array 的 A 要⼤写
var arr = new Array();
方式 2:使用字面量方式创建(常用)
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"
2. 数组操作(读增改删)
<script>arr = [1, 2, 'haha', false , 456];//读取数组console.log(arr[0]); //1//添加数组元素arr[5] = "add"console.log(arr[5]);//addconsole.log(arr.length);//6, 获取数组的⻓度//修改数组元素arr[5] = "update"console.log(arr[5]);//update//删除数组元素arr.splice(4,2);// 第⼀个参数表⽰从下标为4的位置开始删除. 第⼆个参数表⽰要删除几个元素console.log(arr[5]);//undefined 元素已经删除, 如果元素不存在, 结果为undefinedconsole.log(arr.length);//4, 获取数组的⻓度
</script>
【如果下标超出范围读取元素,则结果为 undefined】
可以隔空赋值
arr = [1, 2, 'haha', false , 456];
arr[100] = 1;
console.log(arr);
当数组下标变成其它进行赋值时数组长度不变
arr = [1, 2, 'haha', false , 456];
arr["h"] = 1;
console.log(arr["h"]);
函数
函数定义(声明)
function add(x,y){console.log(x+y);
}
console.log(typeof add);
函数可以赋值给一个变量
var a = function add(x,y){console.log(x+y);
}
console.log(typeof a);
函数调用
function add(x,y){console.log(x+y);
}
add(1,2);
var a = function add(x,y){console.log(x+y);
}
a(1,2);
var a = function(x,y){console.log(x+y);
}
a(1,2);
//匿名函数
var a = function(x,y){console.log(x+y);
}
a(1,2);
上述函数参数传一个数字的时候
var a = function(x,y){console.log(x+y);
}
a(1);//NaN ,1 和一个 undefined 相加得到的不是一个数字
上述函数参数传一个字符串的时候
var a = function(x,y){console.log(x+y);
}
a("nihao");//nihaoundefined ,字符串相加拼接在一起
上述函数参数多传的时候只取前两个
【实参和形参之间个数可以不匹配,但实际开发一般要求要匹配】
对象
Java 对象一定是基于类创建的,JavaScript 可以没有类只有对象
1. 使用 {} 创建对象
var a = {}; // 创建了⼀个空的对象
var student = {name: '蔡徐坤',height: 175,weight: 170,sayHello: function() {console.log("hello");}
};
获取对象属性
//使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
//使⽤ [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
添加属性(Java 中只能添加类里面有的属性,而 JavaScript 添加属性不需要类里面有)
student.age = 18;
student["gender"] = "男";
【属性要加引号】
2. 使用 new Object 创建对象
var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {console.log("hello");
}
3. 使用构造方法创建函数
function 构造函数名(形参) {this.属性 = 值;this.⽅法 = function...
}
var obj = new 构造函数名(实参);
- 在构造函数内部使用 this 关键字来表示当前正在构建的对象
- 构造函数的函数名首字母一般大写
- 构造函数的函数名可以是名词
- 构造函数不需要 return
- 创建对象的时候必须使用 new 关键字
实例
function Cat(name, type, sound) {this.name = name;this.type = type;this.miao = function () {console.log(sound); // 别忘了作⽤域的链式访问规则}
}
var mimi = new Cat('咪咪', '中华⽥园喵', '喵');
var xiaohei = new Cat('⼩⿊', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '⾦渐层', '咕噜噜');
console.log(mimi);
mimi.miao(); // 调用方法记得加()
补充:作用域的链式访问规则
假设有如下代码
function outer() {var outerVar = '我是外部变量';function inner() {console.log(outerVar); // 试图访问外部变量}inner();
}
outer(); // 输出: 我是外部变量
在这个例子中,当 inner 函数尝试访问 outerVar 时,它实际上是通过 outer 函数的作用域来查找 outerVar 的,因为 inner 函数是在 outer 函数的作用域内部定义的,所以它的作用域链会指向 outer 函数的作用域,这就是作用域的工作方式
jQuery
快速简洁且功能丰富的 JavaScript 框架
引入依赖
使用 jQuery 前要引入对应的库
在使用 jQuery CDN 时,只需要在 HTML 文档中加入如下代码
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
其中 src 属性指明 jQuery 库所在的 URL ,这个 URL 是 CDN(内容分发网络服务商)服务提供商为 jQuery 库提供一个统一资源定位符,也可以使用其他公司提供的 CDN 地址
如需其它版本可在官网下载, 参考地址:https://releases.jquery.com/
选择其它版本
jQuery 官方共提供了 4 种类型 jQuery 库
- uncompressed:非压缩版本(易读,但文件较大,传输速度慢)
- minified:压缩版(不易读,文件小,性能高,开发中推荐)
- slim:精简瘦身版,没有 Ajax 和一些特效
- slim minified:slim 的压缩版
也可以从其他 CND 上下载引用 jQuery
1 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
地址:https://www.bootcdn.cn/jquery/
【开发时建议把 jQuery 库下载到本地放入当前项目,引入外部地址会有外部地址不能访问风险】
【复制链接打开右键另存到自己当前项目下 js 文件夹就可以存到本地了】
jQuery 语法
示例:给按钮添加了 click 事件,点击后元素消失
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="test">点我看看</button><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script>$(document).ready(function(){$("#test").click(function(){$(this).hide();});})</script>
</body>
</html>
$(selector).action
- $() 是 jQuery 提供的一个全局函数,用于选择和操作 HTML 元素
- selecter 是选择器(对应上面案例中 "#test" ),用来查询和查找 HTML 元素
- action 是操作(对应上面案例中 .click ),执行对元素的操作
$(document).ready(function(){// jQuery functions go here
});
- jQuery 代码通常写在 document read 函数中
- document 表示整个文档对象,一个页面就是一个文档对象
简洁写法
$(function(){$("#test").click(function(){$(this).hide();});
});
也可以直接写,但不建议这样写
$("#test").click(function(){$(this).hide();
});
jQuery 选择器
- jQuery 选择器基于已经存在的 CSS 选择器,还有一些自定义的选择器
- jQuery 当中所有选择器都以 $ 开头:$()
jQuery 事件
- JS 要构造动态的界面,就需要感知到用户的行为
- 用户对于页面的一些操作(点击,选择,修改等)都会在浏览器中产生一个事件,被 JS 获取到,从而进行更复杂的交互操作
事件由三部分组成
- 事件源:哪个元素触发
- 事件类型:是点击、选中还是修改等
- 事件处理程序:进一步如何处理,往往是一个回调函数
常见的事件有
更多事件参考 jQuery 事件参考手册:https://www.w3school.com.cn/jquery/jquery_ref_events.asp
操作元素
1. 获取/设置元素内容
三个简单获取元素内容的 jQuery 方法
获取元素内容
<div id="test"><span>你好</span></div>
<input type="text" value="hello"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>$(document).ready(function () {var html = $("#test").html();console.log("html内容为:"+html);var text = $("#test").text();console.log("⽂本内容为:"+text);var inputVal = $("input").val();console.log(inputVal);});
</script>
设置元素属性
<div id="test"><span>你好</span></div>
<input type="text" value="hello"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>$("#test").text("<h1>你好</h1>");
</script>
<div id="test"><span>你好</span></div>
<input type="text" value="hello"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>$("#test").html("<h1>你好</h1>");
</script>
<div id="test"><span>你好</span></div>
<input type="text" value="hello"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>$(":input").val("Java");
</script>
2. 获取/设置元素属性
jQuery attr() 方法用于获取/设置属性值,() 里只有属性是获取,既有属性又有值是赋值
<p><a href="https://www.bitejiuyeke.com/index" id="bite">bit</a></p><img src="hzw.jpg" width="200px"/>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>//获取元素的属性var a = $("p a").attr("href");console.log(a);//设置元素属性$("p a").attr("href","http://www.baidu.com");$(img").attr("width","500px");
</script>
3. 获取/设置 CSS 属性
css() 方法获取或设置被选元素一个或多个样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="font-size: 36px">我是⼀个⽂本</div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script>var fontSize = $("div").css("font-size");console.log(fontSize);$("div").css("font-size","20px");$("div").css("color","red"); </script>
</body>
</html>
4. 添加元素
添加 HTML 元素
- append():在被选元素的结尾插入内容
- prepend():在被选元素的开头插入内容
- after():在被选元素之后插入内容
- before():在被选元素之前插入内容
未加入 li 标签定义列表
<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>$("ol").append("append");$("ol").prepend("append");
</script>
加入 li 标签定义列表
$("ol").append("<li>append</li>");
$("ol").prepend("<li>append</li>");
<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>$("ol").append("append");$("ol").prepend("append");$("img").before("图⽚前插⼊");$("img").after("图⽚后插⼊");
</script>
【按住 Ctrl 键点击图片链接可以知道图片是否存在】
5. 删除元素
删除元素和内容一般使用以下两种 jQuery 方法
- remove():删除被选元素(及其子元素)
- empty():删除被选元素的子元素
<body><div id="div1">我是⼀个div</div><button id="remove">删除 div 元素</button><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol> <button id="empty">清空o1子元素</button><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script>$("#remove").click(function(){$("#div1").remove();})$("#empty").click(function(){$("ol").empty();})</script>
</body>
【id 认为在一个页面内是唯一的,动作区分通常加 id,样式通常加 class】
综合案例
1. 猜数字
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button type="button" id="reset">重新开始一局游戏</button><br>请输入要猜的数字:<input type="text" id="number"><button type="button" id="guess">猜</button></br><br>已经猜的次数:<span id="count">0</span><br/><br>结果:<span id="result"></span><br/><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script>$(function() {//随机生成 1-100 的数字var guessNumber = Math.floor(Math.random() * 100) + 1;console.log(guessNumber);//Math.random() 生成[0,100),+1后生成[1,101)//Math.floor(x) x表示数字,返回小于或等于数字 x 的最大整数 (向下取整)var count = 0;$("#guess").click(function() {count++;$("#count").text(count);var userGuess = $("#number").val();if(userGuess == guessNumber) {$("#result").text("猜对了");$("#result").css("color","gray");} else if(userGuess < guessNumber) {$("#result").text("猜小了");$("#result").css("color","blue");} else {$("#result").text("猜大了");$("#result").css("color","red");}})$("#reset").click(function() {guessNumber = Math.floor(Math.random() * 100) + 1;console.log(guessNumber);count = 0;$("#number").val("");$("#count").text(count);$("#result").text("");})})</script>
</body>
</html>
2. 表白墙
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body><div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"><!-- <div>A 对 B 说: hello</div> --></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>function submit(){//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from== '' || to == '' || say == '') {return;}//2. 构造节点var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";console.log(divE);//3. 把节点添加到页面上 $(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");}</script>
</body></html>
总结
- HTML 是一种超文本标记语言,主要用于页面内容显示和排版,主要学习标签
- CSS 主要用于页面元素美化,重点学习 CSS 选择器的使用
- JavaScript 是一个脚本语言,和 Java 没关系,jQuery 是一个 JavaScript 框架
- 如果需要更漂亮的样式展示和页面效果, HTML 需要搭配 CSS 和 JavaScript 来使用