web前端开发

m19990000

已于 2024-08-04 16:01:11 修改

阅读量856

点赞数 22

文章标签：前端 html

于 2024-07-11 08:53:43 首次发布

本文链接：https://blog.csdn.net/m19990000/article/details/140309262

版权

一、HTML

什么是网页

网页是基于浏览器的应用程序，是数据展示的载体

1.1 HTML概述

1.1.1 概念

超文本标记语言（HyperText Markup Language）浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容

超级：从内容上超级，包含图片以及动态效果等

标记：

1.1.2 标签

标签也称为标记或元素，用于在网页中标记内容

1.语法：标签使用< >为标志，在< >内部写标签名和标签属性

注释语法：
标签名不区分大小写，推荐小写表示

2.分类：

双标签：成对出现，包含开始标签和结束标签。
单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。

3.标签属性：

标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。例：<meta charset="utf-8">
同一个标签中可以添加若干组标签属性，使用空格间隔。

1.1.3 使用

1.创建网页文件，使用.html或.htm作为文件后缀

2.添加网页的基本结构

<!doctype html>
<html>
	<head>
		<title>网页标题</title>
		<meta charset="utf-8">
	</head>
	<body>
         网页主体内容
	</body>
</html>

专业的开发工具支持HTML代码补全功能，如VSCode中，创建好HTML页面以后可以输入英文感叹号(!)然后按tab键补全页面基本结构(不同的开发工具补全的基本结构有细微的差别，可以忽略)。

3.标签嵌套

在双标签中书写其他标签，称为标签嵌套

嵌套结构中，外层元素称为父元素，内层元素称为子元素；
多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素
平级结构互为兄弟元素

1.2 常用标签介绍

1.2.1 基本结构解析

<!-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->
<!doctype html> 
<!-- HTML文档开始的标志 -->
<html> 
   <!-- 头部设置，可在head中设置网页标题，网页选项卡图标，引入外部的资源文件，设置网页相关信息等 -->
   <head>
       <!-- 设置网页标题，显示在网页选项卡上方 -->
       <title>网页标题</title>
       <!-- 设置网页字符编码 -->
       <meta charset="utf-8"> 
   </head>
   <!-- 网页主体部分，显示网页主要内容 -->
   <body> 
       网页主体内容
   </body>
</html><!-- 文档结束-->

1.2.2 body中常用标签

1.文本标签

标题标签：自带加粗效果，从h1到h6字体大小逐级递减

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签： <p>段落文本</p>
普通文本标签：<span>行分区标签，用于对特殊文本特殊处理</span>
格式标签： 浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。

<br>
<hr> 画横线

字符实体： 某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写例：

使用 < 在页面中呈现 "<"
使用 > 在页面中呈现 ">"
使用 © 在页面中呈现版权符号"©"
使用 ¥ 在页面中呈现人民币符号"￥"

容器标签:常用于页面结构划分，结合CSS实现网页布局

<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>

图片标签 :<img src="">用于在网页中插入一张图片

属性 src 用于给出图片的URL，必填。

属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。

属性 title 用于设置图片标题，鼠标悬停在图片上时显示

属性 alt 用于设置图片加载失败后的提示文本

<img src="" width="" height="" title="" alt="">

超链接标签：用户可以点击超链接实现跳转至其他页面

属性 href 用于设置目标文件的URL，必填。

属性 target用于设置目标文件的打开方式，默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")

<a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

<body>
  <!-- href指定链接位置
  url:统一资源定位符（通过一个网络地址定位一个网络资源，
    那么这个地址就是一个URL） 
    完整URL组成：
    协议、主机地址、端口、路径、参数、锚点
    协议：网络通信协议（浏览器和服务器之间的通信遵循什么样的协议）
    主机地址：访问哪个服务器上的哪个后端程序
    路径：具体想要什么
    参数：提供进一步说明
    锚点：更具体的想要哪部分内容
  -->
  <!-- 如果不写完整的url,默认查找本地文件；
   如果想要跳转某个具体的忘了地址，需要一个完整的url -->
  <a href="图片.html" target="_blank">点我呀</a>
  <a href="https:www.baidu.com">点我呀</a>
</body>

1.2.3 常用结构标签

1.列表标签

有序列表（ordered list）默认使用阿拉伯数字标识每条数据

<ol>
	<li>list item 列表项</li> 
	<li>list item 列表项</li>
	<li>list item 列表项</li>
</ol>

无序列表（unordered list）默认使用实心圆点标识列表项

 <ul>
  	<li>list item 列表项</li> 
  	<li>list item 列表项</li>
  	<li>list item 列表项</li>
  </ul>

快捷键：ul>li*3

2.表格标签

表格由行和单元格组成，常用于直接的数据展示或辅助排版,基本结构如下

<!-- 创建表格标签 -->
<table>
	 <!-- 创建行标签 -->
	<tr>
		<!-- 行中创建单元格以显示数据 -->
		<td>姓名</td>
		<td>年龄</td>
		<td>班级</td>
	</tr>
	<tr>
		<td>迪丽热巴</td>
		<td>20</td>
		<td>002</td>
	</tr>
</table>

单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整

单元格属性	作用	取值
colspan	跨列合并单元格	无单位数值
rowspan	跨行合并单元格	无单位数值

3.表单标签

表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。

表单使用<form></form>

属性名	取值
action	设置数据的提交地址
method	设置数据的提交方式，默认为get方式，可以设置为post
enctype	设置数据的编码类型，涉及二进制数据提交（例如图片，文件，音视频等），必须设置数据的提交方式为post,编码类型为"multipart/form-data"
autocomplete	默认为on, 设置为off可以关闭表单输入记录提示

表单控件使用表单控件用于采集用户信息，可设置以下标签属性

属性名	取值
type	设置控件类型
name	设置控件名称，最终与值一并发送给服务器
value	设置控件的值
placeholder	设置输入框中的提示文本
checked	设置单选按钮或复选按钮的默认选中
selected	设置下拉菜单的默认选中

<body>
  <!-- 
  type:控件类型
  name:控件含义
  value:默认内容
  placeholder:提示内容
  maxlength/maxlength:最大最小长度
  -->
  <form action="" >
    姓名：<input type="text" name="user"  
    placeholder="用户名" maxlength="8" maxlength="4">
    <br><br>
    年龄：<input type="date" name="birth">
    <br><br>
    性别：<input type="radio" name="sex" checked value="0">男
    <input type="radio" name="sex" value="1">女
    <br><br>
    照片：<input type="file" name="photo" >
    <br><br>
    爱好：<input type="checkbox" name="hobby" value="js">健身
    <input type="checkbox" name="hobby" value="sy">摄影
    <input type="checkbox" name="hobby" value="bc">编程
    <br><br>
    城市：
    <select name="city" >
      <option value="">北京</option>
      <option value="" selected>上海</option>
      <option value="">深圳</option>
      <option value="">西安</option>
    </select>
    <br><br>
    自我介绍：<br>
    <textarea name="content" cols="30" rows="10" ></textarea>
    <br><br>
    <!-- 按钮标签，放在form中等同于提交的作用 -->
    <button >提交信息</button>
    <!-- 重置标签 -->
    <input type="reset"  value="重置">
  </form>
</body>

前端查询小字典：w3school 在线教程

二、CSS

CSS全称为： Cascading Style Sheets ，意为层叠样式表，与HTML相辅相成，实现网页的排版布局与样式美化

2.1 CSS使用方式

2.1.1 行内样式/内联样式

借助于style标签属性，为当前的元素添加样式声明

<标签名 style="样式声明">

CSS样式声明 : 由CSS属性和值组成例：

style="属性:值;属性:值;"

2.1.2 内嵌样式

借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式示例:

<style>
选择器{
属性:值;
属性:值;
}
</style>

2.1.3 外链样式表

创建外部样式表文件后缀使用.css
在HTML文件中使用<link>标签引入外部样式表

<link rel="stylesheet" href="URL">

2.2 css选择器

2.2.1 作用

匹配文档中的某些元素为其应用样式

HTML标签通用属性（所有标签均可）

style

id ：给标签分配惟一的标志，区分其他标签

class：用来给一组标签分配一个标志，用于区分其他标签

id、class值是自定义的，可以由数字、字母、下划线、横线组成，但是不要以数字开头

属性值表达出标签含义，多个单词使用-连接

层级比较多设置值的时候可以外层属性值-_后缀单词，

2.2.2分类

1. 标签选择器

根据标签名匹配文档中所有该元素

标签名 {
   属性：值
}

2.ID选择器

根据元素的id属性值匹配文档中唯一的元素，ID具有唯一性，不能重复使用

# ID属性值 {
    属性：值
}



<p id="first"> 第一个p标签</p>

注意 : id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头; 尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示

3.类选择器/class选择器

根据元素的class属性值匹配响应的元素，class属性值可以重复使用，实现样式的复用

.class属性值{
    属性：值
}

<p class="second one">第二个p标签</p>

也可以指定某个标签的某个类进行设置，标签在前,类选择器在后例 : a.c1{ }

4.群组选择器

为一组元素统一设置样式

div,p,span {
    属性：值
}

5.后代选择器

匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)

selector1 selector2{
}

6.子代选择器

匹配满足选择器的所有直接子元素

selector1>selector2{
}

7.伪类选择器

用于定义元素的特殊状态,比如设置鼠标悬停在元素上时的样式，为已访问和未访问链接设置不同的样式，设置元素获得焦点时的样式等。它必须与基础选择器结合使用 :

:link 	 超链接访问前的状态
:visited 超链接访问后的状态
:hover	 鼠标滑过时的状态
:active  鼠标点按不抬起时的状态(激活)


a:link{
}
a:visited{
}
.c1:hover{ }

注意 :

超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写

:link
:visited
:hover
:active

2.3样式表特性

2.3.1层叠性

多组CSS样式共同作用于一个元素

2.3.2继承性

后代元素可以继承祖先元素中的某些样式例 : 大部分的文本属性都可以被继承

2.3.3优先级问题

行内样式的优先级最高
文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
浏览器默认样式和继承样式优先级都较低但浏览器默认样式比继承样式

使用选择器为元素设置样式发生样式冲突时,选择器的权重需要计算比较,权重越大,优先级越高

选择器	权重
标签选择器	1
(伪)类选择器	10
id选择器	100
行内样式	1000

复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和群组选择器权重以每个选择器单独的权重为准，不进行相加计算例

/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
 color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1  */
 color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
 color:blue;
}

2.4标签分类

2.4.1块元素

独占一行；

可以手动设置宽和高

body div h1~h6 p ul ol li form table hr tr

2.4.2 行内块元素

不独占一行

可以手动设置宽和高

img input button textarea td

2.4.3 行内元素

不独占一行

不可以手动设置宽和高

span a

2.4.4 嵌套规则

1.块元素可以嵌套任意类型的元素

2.p元素段落标签只嵌套行内元素，不能嵌套块元素

3.行内元素最好只嵌套行内或行内块元素

三、JavaScript

3.1 JavaScript概述

1、JS介绍

简称JS，是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等。

2、JS组成

核心语法
浏览器对象模型 BOM——提供了一系列操作浏览器的方法
文档对象模型 DOM——Document Object Model ，提供了一系列操作文档的方法

3.2 使用方式

1、元素绑定事件

事件：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）
事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数。
常用事件：onclick (单击事件)
语法：将事件名称以标签属性的方式绑定到元素上，自定义事件处理。

<!--实现点击按钮在控制台输出-->
<button onclick="console.log('Hello World');">点击</button>

2、文档内嵌

<script>
  alert("网页警告框");
</script>

注意：<script></script>标签可以书写在文档的任意位置，书写多次，一旦加载到script标签就会立即执行内部的JS代码，因此不同的位置会影响代码最终的执行效果。通常放在head中的js会在点击等事件发生时调用，而放在body中的js往往是为了生成一定的内容。

3、外部链接

创建外部的JS文件 XX.js，在HTML文档中使用<script src=""></script>引入

<script src="index.js"></script>

注意：<script></script>既可以实现内嵌 JS 代码，也可以实现引入外部的 JS 文件，但是只能二选一。

3.2 基础语法

3.2.1 语法规范

JS是由语句组成,语句由关键字,变量,常量,运算符,方法组成。分号可以作为语句结束的标志,也可以省略
JS严格区分大小写
注释语法单行注释使用 // 多行注释使用 /* */

3.2.2 JS的变量与常量

变量

1、作用

用于存储程序运行过程中可以修改的数据

2、语法

使用关键词var声明

3、命名规范

变量名,常量名,函数名,方法名自定义,可以由数字,字母,下划线,$组成,禁止以数字开头
禁止与关键字冲突(var const function if else for while do break case switch return class)
变量名严格区分大小写
变量名尽量见名知意,多个单词组成采用小驼峰,例如："userName"

4、使用注意 :

变量如果省略var关键字,并且未赋值,直接访问会报错
变量使用var关键字声明但未赋值,变量初始值为undefined
变量省略var关键字声明,已被赋值,大多可正常使用，某些浏览器严格条件下会报错，不建议这么做

常量

1、作用

用于存储程序运行过程中不可以修改的数据

2、语法

使用关键词const声明

3.3.3 数据类型

1、 number数值类型

整数

var a = 100

小数

var a = 10.9

2 、String字符串类型

var name = "张三"

字符串使用

1）根据下标获取

let str = "Hello, World!";
console.log(str[0]); // 输出: 'H'

2）获取字符串长度

let str = "Hello, World!";
console.log(str.length); // 输出: 13

3)字符串切片

var str= "hello,word"
var arr = str.split(",")
console.log(arr); // 输出: ["Hello", "World!"]

4)字符串拼接

let str1 = "Hello";
let str2 = "World";
let result = str1 + ", " + str2 + "!"; // 使用加号拼接
console.log(result); // 输出: "Hello, World!"

5)字符串格式化

let str1 = "Hello";
let str2 = "World";
let result2 = `${str1}, ${str2}!`; // 使用模板字符串
console.log(result2); // 输出: "Hello, World!"

3、 boolean布尔类型

var isSave = true;
var isChecked = false;

4、 undefined（程序返回）

特殊值,变量声明未赋值时显示undefined

var a;
console.log(a);//undefined

5、null空类型（主动使用的）

解除对象引用时使用null,表示对象为空

6、数组类型

var arr = [1,2,3,4,5];
console.log(arr[0]);

1）增加元素

var arr = [1,2,3,4,5];
arr.push(6)  //arr = [1,2,3,4,5,6]

2）删除元素

var arr = [1,2,3,4,5]
arr.pop() //删除元素

7、对象类型

var obj = {one:1,two:2};  // 注意键不必加引号也可以
console.log(obj.one);
console.log(obj["one"]);

1)新增属性

obj.three = 3

obj["three"] = 3

2)删除属性

delete obj.trhee

8、数据类型查看

使用 typeof 运算符

console.log(typeof 42);            // 输出: "number"
console.log(typeof 'Hello');       // 输出: "string"
console.log(typeof true);          // 输出: "boolean"
console.log(typeof undefined);     // 输出: "undefined"
console.log(typeof null);          // 输出: "object" (这是一个历史遗留问题)
console.log(typeof {name: 'Alice'}); // 输出: "object"
console.log(typeof function() {}); // 输出: "function"
console.log(typeof Symbol('id'));  // 输出: "symbol"
console.log(typeof BigInt(123));   // 输出: "bigint"

3.3.4数据类型转换

1、强制类型转换

(1)转换成字符串类型—— toString()

var a = 100;
a = a.toString(); //"100"
var b = true;
b = b.toString(); //"true"

(2)转换成number类型——Number((param)

参数为要进行数据类型转换的变量或值，返回转换后的结果: 如果转换成功,返回number值如果转换失败,返回NaN,(Not a Number)，只要数据中存在非number字符,一律转换失败，返回 NaN

2、隐士类型转换

当字符串与其他数据类型进行"+"运算时,表示字符串的拼接，不再是数学运算

转换规则：将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串

consloe.log("123"+45) //12345

3.3.5 运算符

赋值运算符

= 将右边的值赋给左边变量

算数运算符

+    -    *    /    %

复合运算符

+=     -=       *=       /=       %=

自增或自减运算符

++      -- 变量的自增和自减指的是在自身基础上进行 +1或-1 的操作注意：

关系运算符

<     >     >=     <=      ==(相等)      !=(不相等)     ===(全等)   !==(不全等)

== 和 ===的区别：

"==" 比较的是两个值是否相等，不考虑数据类型的差异。如：1 == '1' // true

"===" 比较的是两个值是否严格相等，不仅要求值相等，还要求数据类型相同。如：1 === '1' // false

逻辑运算符

&& 逻辑与 条件1&&条件2 表达式同时成立,最终结果才为true;

|| 逻辑或 条件1||条件2 表达式中只要有一个成立,最终结果即为true;

! 逻辑非 !条件 对已有表达式的结果取反

3.4流程控制

3.4.1 分支/选择结构

if语句

if(条件表达式){
	表达式成立时执行的代码段
}

if—else语句

if(条件表达式){
	//条件成立时执行
}else{
	//条件不成立时选择执行
}

多重分支结构

 if(条件1){
  	//条件1成立时执行
  }else if(条件2){
  	//条件2成立时执行
  }else if(条件3){
  	//条件3成立时执行
  }...else{
  	//条件不成立时执行
  }

3.4.2 循环结构

while循环

定义循环变量;
   while(循环条件){
   条件满足时执行的代码段
   更新循环变量;
}

for循环

for(定义循环变量;循环条件;更新循环变量){
	循环体;
}

循环控制 :

break 强制结束循环
continue 结束当次循环，开始下一次循环循环嵌套 : 在循环中嵌套添加其他循环

3.5函数

3.5.1 作用

封装一段待执行的代码

3.5.2 语法

 //函数声明
  function 函数名(参数列表){
  	函数体
  	return 返回值;
  }
  //函数调用
  函数名(参数列表);

3.5.3 匿名函数

1、函数声明

function() {
  console.log('这是一个匿名函数！');
}

2、函数表达式

const anonymousFn = function() {
  console.log('这也是一个匿名函数！');
};

anonymousFn() //执行匿名函数

3、箭头函数

箭头函数是 ES6 中新增的一种函数写法，它通过一个箭头 => 来表示函数的定义。

const arrowFn = () => {
  console.log('这是一个箭头函数！');
};

arrowFn(); // 输出：这是一个箭头函数！

3.6 DOM节点操作

DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）

3.6.1 节点对象

JavaScript 会对 html 文档中的元素、属性、文本进行封装，统称为节点对象，获取节点对象后可以通过方法操作相关的属性内容。

获取元素节点

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

3.6.2 操作标签

3.6.2.1 操作元素内容

innerHTML : 读取或设置元素文本内容,可识别标签语法
innerText : 设置元素文本内容,不能识别标签语法

3.6.2.2 操作元素属性

element.id = "d1"; 		 //set 方法 注意属性值都要写成字符串形式
console.log(element.id);  //get 方法

elem.getAttribute("attrname");//根据指定的属性名返回对应属性值
elem.setAttribute("attrname","value");//为元素添加属性,参数为属性名和属性值
elem.removeAttribute("attrname");//移除指定属性

3.6.2.2 操作元素样式

为元素添加 id、class属性，或操作元素的行内样式，访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。

elem.style = "width:300px;";
elem.style.color = "white";
elem.style.fontSize = "20px";

注意 :
- 属性值以字符串形式给出，单位不能省略
- 如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize

3.6.3 绑定事件

元素绑定事件

事件：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）
事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数。
常用事件：onclick (单击事件)
语法：将事件名称以标签属性的方式绑定到元素上，自定义事件处理。

4. jQuery

4.1 介绍

jQuery 由 John Resig 于 2006 年创建。它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。十多年来，jQuery 一直是世界上最受欢迎的 JavaScript 库。

4.2 使用

4.2.1 引入

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>

本地文件（常用）(使用时路径要正确)

<script src="jquery-1.11.3/jquery.min.js"></script>

jQuery导入本地方法：

1. jquery官网下载

https://jquery.com/download/

4.2.2 基本语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义 jQuery 标识
选择符（selector）“查询”和“查找” HTML 元素。可以创建元素节点或将原生JavaScript对象转换为jquery对象
jQuery 的 action() 执行对元素的操作，jQuery定义了很多操作方法

例如

 // 节点选择的特点，与样式选择器一致

 $("h1").hide()  隐藏h1元素节点
 $("#d1").show()  显示id="d1"的元素
 $(".c1").click()  点击class="c1"的元素
 $("body,h1,p").hide()  同时隐藏多个元素

4.2.3 jQuery选择器

1、基础选择器（同css写法）

标签选择器：$("div")
ID 选择器：$("#d1")
类选择器：$(".c1")
群组选择器：$("body,p,h1")

2、层级选择器

后代选择器： $("div .c1")
子代选择器： $("div>span")

3、过滤选择器，需要结合其他选择器使用。

:first
  匹配第一个元素 例:$("p:first")
:last
  匹配最后一个元素 例:$("p:last")
:eq(index)
  匹配指定下标的元素
:lt(index)
  匹配下标小于index的元素
:gt(index)
  匹配下标大于index的元素

<body>
  <h1 class="one"></h1>
  <h1 class="two"></h1>
  <h1 id="tar"></h1>

  <script>
    // jQuery选择器 + 操作函数
    // $("h1")  是一个伪数组
    // [0]索引会自动将jq对象取出后转换为DOM对象
    $("h1")[0].innerHTML="增加内容"

    // 伪数组=>jq对象   配合过滤器，选择其中一部分元素
    $("h1:first").html("jq选择第一个")
    $("h1:eq(2)").html("jq选择第二个")
    console.log($("h1"))
  </script>
</body>

4.2.4 DOM对象与jQuery对象转换

原生JavaScript对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :

原生JavaScript转换jQuery对象 $(原生对象)，返回 jQuery 对象
jQuery对象转换原生JavaScript对象
- 方法一 : 根据下标取元素,取出即为原生对象 var div = $("div")[0];
- 方法二 : 使用jQuery的get(index)取原生对象 var div2 = $("div").get(0);

4.2.5 操作元素内容

html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val()  //设置或读取表单元素的值,等价于原生value属性

<body>
  <h1>输入内容</h1>
  <div>
    姓名：<input type="text" name="" id="user" value="刘慧杰">
  </div>
  <div>
    密码：<input type="password" id="pass" value="123">
  </div>
  <button id="btn">按钮</button>

  <script>
    console.log($("h1").html())
    $("h1").html("填写信息")
    console.log($("h1").html())
    
    const btn = $("#btn")
    btn.click(() => {
      console.log($("#user").val())
      console.log($("#pass").val())
      $("#user").val("hh")
});

  </script>

</body>

4.2.6 操作标签属性

1、prop("attrName","value") 设置或读取标签属性

//value未赋值时，读取属性值
console.log($("img").prop("src"));

//value赋值时，设置属性值
$("img:first").prop("class","two")

2、removeAttr("attrName") 移除指定属性

3、针对类选择器,提供操作class属性值的方法

addClass("className")	//添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加

<body>
  <img src="image/1.jpeg" class="one">
  <img src="image/2.jpeg" alt="">
  <script>
    console.log($("img").prop("src"));
    $("img").prop("src","image/2.jpeg")
    // 对原有的class值进行替换
    // $("img:first").prop("class","two")
    //增加class值 class = one two
    $("img:first").addClass("two")
    // class = two
    $("img:first").toggleClass("one")
    //class = two one 
    $("img:first").toggleClass("one")
  </script>
</body>

练习：设置一个页面开关，点击一下的时候打开，再点击一下的时候关闭，再点击打开...

开关为正方形

开的状态背景为黄色，红色边框

关的状态背景为灰色，无边框

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="jquery-3.7.1.min.js"></script>
  <style>
    div {
      background-color: yellow;
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }
    .change {
      background-color: rgb(101, 101, 95);
      width: 50px;
      height: 50px;
      border: none ;
    }
  </style>
</head>
<body>
  <div>
  </div>
  <script>
    $("div:first").click(function() {
      $(this).toggleClass("change");
      console.log($("div:first").prop("class"));
    });
  </script> 
</body>
</html>

4.2.7 操作标签样式

css("属性名","属性值")  //设置行内样式
css(JS对象)			 //设置一组CSS样式  JS对象标记
/*
JSON对象:常用数据传输格式
语法 :
   {
    "width":"200px",
    "height":"200px",
    "color":"red"
   }
 */

<body>
  <div></div>
  <script>
    var style = {
      "width":"200px",
      "height":"200px",
      "background-color":"#565656"
    }
    $("div").css(style)
    $("div").css("border","2px solid red")
  </script>

4.2.8 元素的创建,添加,删除

1、作为子元素添加

生成一个新的jQ元素节点对象： var newObj = $("<h1></h1>");
$obj.append(newObj);	//在$obj的末尾添加子元素newObj
$obj.prepend(newObj);	//作为第一个子元素添加至$obj中
$obj.after(newObj);		//在$obj的后面添加新元素
$obj.before(newObj);	//在$obj的前面添加新元素

2、新元素创建并设置属性样式：使用$("标签语法")，返回创建好的元素:

var div = $("<div></div>");	//创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性
var h1 = $("<h1 id='d1'>一级标题</h1>");	//创建的同时设置内容，属性和样式

3、移除元素

$obj.remove();	//移除$obj

<body>
  <!-- 大哥位 -->
  <div id="tar">
    <!-- 大儿子位 -->
    <hr>
    <!-- 小儿子位 -->
  </div>
  <!-- 小弟位 -->

  <script>
    var h1 = $("<h1>大哥位</h1>")
    $("#tar").before(h1)

    var h1 = $("<h1>大儿子位</h1>")
    $("#tar").prepend(h1)

    var h1 = $("<h1>小儿子位</h1>")
    $("#tar").append(h1)

    var h1 = $("<h1>小弟位</h1>")
    $("#tar").after(h1)
  </script>
</body>

4.2.9 事件绑定方式

  //on("事件名称"，function)
  $("div").on("click",function(){});//新版本使用的多些

  //事件名作为方法名
  $("div").click(function(){});  常用事件

jQ中的常用事件与dom类似，写法上就是把dom时间名称前面的on去掉就可以了，比如 onclick 变成 click，onmouseover变成mouseover。

<body>
  <div>我是一个div</div>
  <script>
    $("div").on("click",function(){
      // this指的是调用的对象，但是在jQuery中this会自动转为DOM对象
      // this.html("我骄傲")
      $(this).html("我骄傲")
    })
  </script>
</body>

练习：

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    #user_err {
    color: red;
    font-size: 8px;
    margin: 0px 45px 15px;
  }
  </style>
  
  <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
  <!-- 要求表单控件输入的内容在4-16个字符之间，如果不满足则给出提示 -->
   姓名：<input type="text" id="user" >
   <p id="user_err"></p>
   密码：<input type="text" id="pwd">

   <script>
      $("#user").on("blur",function(){
      if($(this).val().length < 4 || $(this).val().length > 16 ){
        $("#user_err").html("用户名4-16个字符之间");
      }
    })

      $("#user").on("focus",function(){
        $("#user_err").html("");
      })
    
    
   </script>
</body>
</html>

4.2.10 jQuery函数

1、$(selector).hide() 隐藏节点

2、$(selector).show() 显示节点

3、$(selector).each() 方法规定为每个匹配元素规定运行的函数

<body>
  <h1>这是一个h1标签</h1>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
  <script>
    $("h1").hide()
    $("h1").show()
    // 对jq伪数组进行遍历，每遍历一项就执行一次匿名函数
    // 匿名函数有两个形参，第一个是遍历到的元素的索引号，
    // 第二个元素是遍历到的元素的DOM对象
    $("li").each(function(index,element){
      console.log("遍历:",index,element)
      $(element).html("hhhh")
    })
  </script>
</body>

4、$.each()函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理

$.each(Object, function(index, data){});

 var arr = [1,2,3,4,5]
    $.each(arr,function(index,item){
      console.log(index,item)
    })

作业

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="jquery-3.7.1.min.js"></script>
  <style>
    ul li {
      display: inline-block;
      width: 50px;
      height: 20px;
      text-align: center;
      line-height: 20px;
    }
    .active{
      color: white;
      background-color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li class="item " >难度：</li>
    <li class="item ">全部</li>
    <li class="item ">初级</li>
    <li class="item ">中级</li>
    <li class="item ">高级</li>
  </ul>
  <!-- 当item标签被点击的时候，现有的active标签移除对当前点击的标签添加active -->
   <script>
    $(".item").each(function(index,ele){
      $(ele).on("click",function(){
        $(".active").removeClass("active");
        $(ele).addClass("active");
      })
    })
   </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态下拉菜单</title>
  <script src="jquery-3.7.1.min.js"></script>
  <style>
    select {
      width: 100px;
      height: 30px;
    }
  </style>
</head>
<body>
  <!-- 城市 -->
  <select name="city" id="city">
    <option value="0">请选择</option>
    <option value="010">北京</option>
    <option value="021">上海</option>
    <option value="022">天津</option>
  </select>
  <!-- 区、县 -->
  <select name="area" id="area">
    <option value="">请选择</option>
  </select>
  
  <script>
    const data = {
    "0":[{"value":"0","name":"请选择"}],
    "010":[{"value":"hd","name":"海淀区"},
          {"value":"cy","name":"朝阳区"},
          {"value":"丰台","name":"丰台区"}
          ],
    "021":[{"value":"ja","name":"静安区"},
          {"value":"cm","name":"崇明区"},
          {"value":"mh","name":"闵行区"}
          ],
    "022":[{"value":"hp","name":"和平区"},
          {"value":"hb","name":"河北区"},
          {"value":"hx","name":"河西区"}
          ]
}
    $("#city").on("change",function(){
      // 将原来二级菜单的选项删除
      $("#area option").remove()
      // child是每个城市对应区的数组
      const child = data[$(this).val()]
      console.log(child)
      // 遍历数组，每项生成一个option，填充到第二个select
      $.each(child,function(index,item){
        var opt = $("<option ></option>").html(item.name).prop("value",item.value);
        $("#area").append(opt)
      })
      
    })
  </script>
</body>
</html>