HTML + CSS + JavaScript

发布于:2025-07-10 ⋅ 阅读:(19) ⋅ 点赞:(0)

目录

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,数字越大,则字体越小

< h1 >hello</ h1 >
< h2 >hello</ h2 >
< h3 >hello</ h3 >
< h4 >hello</ h4 >
< h5 >hello</ h5 >

<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));//number
    var b = 'hello';
    console.log("b:"+(typeof b));//string
    var c = true;
    console.log("c:"+(typeof c));//boolean
    var d;
    console.log("d:"+(typeof d));//undefined
    var 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]);//add
    console.log(arr.length);//6, 获取数组的⻓度
    //修改数组元素
    arr[5] = "update"
    console.log(arr[5]);//update
    //删除数组元素
    arr.splice(4,2);// 第⼀个参数表⽰从下标为4的位置开始删除. 第⼆个参数表⽰要删除几个元素
    console.log(arr[5]);//undefined 元素已经删除, 如果元素不存在, 结果为undefined
    console.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 来使用

网站公告

今日签到

点亮在社区的每一天
去签到