页面由三部分内容组成！
分别是内容（结构）、表现、行为。
内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用html 技术来展示。
表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用CSS 技术实现。
行为，指的是页面中元素与输入设备交互的响应。一般使用javascript 技术实现。
Hyper Text Markup Language （超文本标记语言） 简写：HTML
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件。
通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）
1、创建一个 web 工程（静态的 web 工程）
2020新版IDEA中使用 javaScript 代替了 static web
2、在工程下创建 html 页面
3、选择浏览器执行页面
第一个 html 示例：
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> </ body> </ html> 注：Java 文件是需要先编译，再由 java 虚拟机跑起来。但 HTML 文件它不需要编译，直接由浏览器进行解析执行。
<html lang="en">
向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，而“en”即表示english。
这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对html页面本身不会有影响。
是一种html语言规范。
<html lang="en"></html>
lang是language的缩写，代表该网页属于哪一个国家或是地区的网页。
下面列举几个常用lang：
en-US 英国(美国)
zh-CN 中文(简体，中国大陆)
zh-SG 中文(简体，新加坡)
zh-HK 中文(繁体，香港)
zh-MO 中文(繁体，澳门)
zh-TW 中文(繁体，台湾)
<!DOCTYPE>标记声明必须位于 HTML 文档的第一行，放在<html>标记之前。
此标记用于告诉浏览器文档使用哪种 HTML 或 XHTML 规范，该标记可声明三种类型，
分别是：严格版本、过渡版本以及基于框架的 HTML 文档（strict、transitional 以及 frameset）。
使用示例：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
标签分为：
双标签：
<p> </p>
开始标签 结束标签
单标签：
<p />
自结束标签
HTML 与 XHTML 之间的差异
在 HTML 中，<br> 标签没有结束标签。
在 XHTML 中，<br> 标签必须被正确地关闭，比如这样：<br />。
正确：< div> < span> </ span> </ div> < div> < span> </ div> </ span> < hr/> < div> </ div> < div> < hr/> < br/> < br> < hr/> < fontcolor = " blue" > </ font> < fontcolor = blue> </ font> < fontcolor > </ font> < hr/> < br/> < !--<!-- 这是错误的 html 注释 -- > < hr/> 可以在w3shool或w3cshool网站查询学习html
< body> < fontcolor = " red" face = " 宋体" size = " 5" > </ font> </ body> < body> < br> 标签
< br> 啊
</ body>
< body> < h1align = " left" > </ h1> < h2align = " center" > </ h2> < h3align = " right" > </ h3> < h4> </ h4> < h5> </ h5> < h6> </ h6> < h7> </ h7> </ body> 在网页中所有点击之后可以跳转的内容都是超连接
< body> < ahref = " https://www.baidu.com" > </ a> < br/> < ahref = " https://www.baidu.com" target = " _self" > </ a> < br/> < ahref = " https://www.baidu.com" target = " _blank" > </ a> </ body> < body> < ultype = " circle" > < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> < ol> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ol> < body>
< body> < imgsrc = " ../pictures/01.bmp" width = " 1245" height = " 344" border = " 1" alt = " 图片找不到" /> </ body> < body> < tableborder = " 1" width = " 300" height = " 300" align = " center" cellspacing = " 2" > < tr> < tdalign = " center" > < b> </ b> </ td> < th> </ th> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> </ tr> </ table> </ body> 1．td：英文全称是＂tabledatacell＂，中文意思是“表中的数据单元”。
2．tr：英文全称是＂tablerow＂的缩写”的缩写。
3．th：英文全称是＂tableheadercell＂的缩写，在中文中是“表头单元格”的意思。
< body> < tablewidth = " 500" height = " 500" cellspacing = " 0" border = " 1" > < tr> < tdcolspan = " 2" > </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < tdrowspan = " 2" > </ td> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> < tdrowspan = " 2" colspan = " 2" > </ td> </ tr> < tr> < td> </ td> < td> </ td> < td> </ td> </ tr> </ table> </ body> iframe 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面.
< body> < br> < iframesrc = " 3-标题标签.html" width = " 500" height = " 400" name = " abc" > </ iframe> < br> < br> < ul> < li> < ahref = " 1-font标签.html" target = " abc" > </ a> </ li> < li> < ahref = " 2-特殊字符.html" target = " abc" > </ a> </ li> < li> < ahref = " 3-标题标签.html" target = " abc" > </ a> </ li> </ ul> </ body> 什么是表单?
表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.
< form> < inputtype = " text" value = " 默认值" /> < br> < inputtype = " password" value = " abc" /> < br> < inputtype = " password" value = " abc" /> < br> < inputtype = " radio" name = " sex" checked = " checked" /> < inputtype = " radio" name = " sex" /> < br> < inputtype = " checkbox" checked = " checked" /> < inputtype = " checkbox" /> < inputtype = " checkbox" /> < br> < select> < option> </ option> < optionselected = " selected" > </ option> < option> </ option> < option> </ option> </ select> < br> < textareacols = " 30" rows = " 10" > </ textarea> < br> < inputtype = " submit" value = " 提交" /> < br> < inputtype = " reset" value = " 重置" /> < br> < inputtype = " file" /> < br> < inputtype = " hidden" /> </ form> </ body>
使用表格来做表单让表单更好看
< body> < form> < h1align = " center" > </ h1> < tablealign = " center" > < tr> < td> </ td> < td> < inputtype = " text" value = " 默认值" /> </ td> </ tr> < tr> < td> </ td> < td> < inputtype = " password" value = " abc" /> </ td> </ tr> < tr> < td> </ td> < td> < inputtype = " password" value = " abc" /> </ td> </ tr> < tr> < td> </ td> < td> < inputtype = " radio" name = " sex" checked = " checked" /> < inputtype = " radio" name = " sex" /> </ td> </ tr> < tr> < td> </ td> < td> < inputtype = " checkbox" checked = " checked" /> < inputtype = " checkbox" /> < inputtype = " checkbox" /> </ td> </ tr> < tr> < td> </ td> < td> < select> < option> </ option> < optionselected = " selected" > </ option> < option> </ option> < option> </ option> </ select> </ td> </ tr> < tr> < td> </ td> < td> < textareacols = " 30" rows = " 10" > </ textarea> </ td> </ tr> < tr> < td> < inputtype = " reset" value = " 重置" > </ td> < tdalign = " center" > < inputtype = " submit" value = " 提交" > </ td> </ tr> </ table> </ form> </ body> 如何把表单中填写的数据提交给服务器？
< body> < formaction = " https://localhost:8080" method = " get" > < inputtype = " hidden" name = " action" value = " login" > < h1align = " center" > </ h1> < tablealign = " center" > < tr> < td> </ td> < td> < inputtype = " text" value = " 默认值" /> </ td> </ tr> < tr> < td> </ td> < td> < inputtype = " password" value = " abc" /> </ td> </ tr> < tr> < td> </ td> < td> < inputtype = " password" value = " abc" /> </ td> </ tr> < tr> < td> </ td> < td> < inputtype = " radio" name = " sex" checked = " checked" /> < inputtype = " radio" name = " sex" /> </ td> </ tr> < tr> < td> </ td> < td> < inputtype = " checkbox" checked = " checked" /> < inputtype = " checkbox" /> < inputtype = " checkbox" /> </ td> </ tr> < tr> < td> </ td> < td> < select> < option> </ option> < optionselected = " selected" > </ option> < option> </ option> < option> </ option> </ select> </ td> </ tr> < tr> < td> </ td> < td> < textareacols = " 30" rows = " 10" > </ textarea> </ td> </ tr> < tr> < td> < inputtype = " reset" value = " 重置" > </ td> < tdalign = " center" > < inputtype = " submit" value = " 提交" > </ td> </ tr> </ table> </ form> </ body> 上述代码提交后，地址栏中显示：
https://localhost:8080/?action=login&sex=on
https://localhost:8080/ 服务器地址
？ 分隔符
action=login&sex=on 请求参数（要提交的表单中填写的信息）
但是为什么只有 hidden的和sex的，其他的信息怎么没有？
因为 表单项没有 name 属性值
给相应的标签添加name属性值
之后再输入提交后显示如下：
https://localhost:8080/
?
action=login 隐藏域
&
username=sad 用户名
&
userpassword=asd 密码
&
sex=on 性别
&
hobby=on 兴趣爱好
&
hobby=on 兴趣爱好
&
hobby=on 兴趣爱好
&
country=%E7%BE%8E%E5%9B%BD 国籍
&
description=aaa 自我描述
为什么都是 on ？
sex=on 性别
&
hobby=on 兴趣爱好
&
hobby=on 兴趣爱好
&
hobby=on 兴趣爱好
on代表选上，off代表没选上
因为单选框，复选框，下拉列表的option标签等没有加value属性值
on发送给服务器是没有意义的
有些标签如text password textarea等不加value属性值是因为用户输入的信息即是value值
总结：
表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有 name 属性值
2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
3、表单项不在提交的 form 标签中
------------------------------------------------------------
method 属性设置提交的方式 GET(默认值)或 POST
GET 请求的特点是：
1、浏览器地址栏中的地址是：action=属性[+?+请求参数]
请求参数的格式是：name=value&name=value
2、不安全
3、它有数据长度的限制
POST 请求的特点是：
1、浏览器地址栏中只有服务器的地址
2、相对于 GET 请求要安全
3、理论上没有数据长度的限制
< body> < formaction = " https://localhost:8080" method = " post" > < inputtype = " hidden" name = " action" value = " login" > < h1align = " center" > </ h1> < tablealign = " center" > < tr> < td> </ td> < td> < inputtype = " text" name = " username" /> </ td> </ tr> < tr> < td> </ td> < td> < inputtype = " password" name = " userpassword" /> </ td> </ tr> < tr> < td> </ td> < td> < inputtype = " radio" name = " sex" checked = " checked" value = " boy" /> < inputtype = " radio" name = " sex" value = " girl" /> </ td> </ tr> < tr> < td> </ td> < td> < inputtype = " checkbox" checked = " checked" name = " hobby" value = " Java" /> < inputtype = " checkbox" name = " hobby" value = " JavaScript" /> < inputtype = " checkbox" name = " hobby" value = " C++" /> </ td> </ tr> < tr> < td> </ td> < td> < selectname = " country" > < optionvalue = " none" > </ option> < optionselected = " selected" value = " China" > </ option> < optionvalue = " America" > </ option> < optionvalue = " Japan" > </ option> </ select> </ td> </ tr> < tr> < td> </ td> < td> < textareacols = " 30" rows = " 10" name = " description" > </ textarea> </ td> </ tr> < tr> < td> < inputtype = " reset" value = " 重置" > </ td> < tdalign = " center" > < inputtype = " submit" value = " 提交" > </ td> </ tr> </ table> </ form> </ body> < body> < div> </ div> < div> </ div> < span> </ span> < span> </ span> < p> </ p> < p> </ p> </ body>
CSS 是「层叠样式表单」。是用于(增强) 控制网页样式 并允许 将样式信息与网页内容分离的 一种标记性语言。
css就是修改标签的样式，给标签化妆，显得更好看
可以在 文档:CSS2.0.chm 中查找写法
选择器：浏览器根据“选择器” 决定 受CSS样式影响的 HTML元素（标签）
属性 (property) ：是你要改变的样式名，并且每个属性都有一个值。
属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)
例如：
p{
color:red;
font-size:30px;
}
注：一般每行只描述一个属性
CSS 注释：/*注释内容*/
< divstyle = " border : 1px solid red; " > </ div> < divstyle = " border : 1px solid red; " > </ div> < spanstyle = " border : 1px solid red; " > </ span> < spanstyle = " border : 1px solid red; " > </ span> </ body> 问题：这种方式的缺点？
1. 如果标签多了。样式多了。代码量非常庞大。
2. 可读性非常差。
3. Css 代码没什么复用性可方言。
在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。
格式如下：
xxx {
Key : value value;
Key : value value;
}
< head> < styletype = " text/css" >
div {
border : 1px solid red;
}
span {
border : 1px solid red;
}
</ style> </ head> < body> < div> </ div> < div> </ div> < span> </ span> < span> </ span> </ body> 问题：这种方式的缺点。
1. 只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
2. 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。
把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。
< head> < linkrel = " stylesheet" type = " text/css" href = " 1.css" /> </ head> < body> < div> </ div> < div> </ div> < span> </ span> < span> </ span> </ body> css文件
div{
border: 1px solid yellow;
}
span{
border: 1px solid red;
}
使用link标签链接一个外部样式表
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
rel 属性规定当前文档与被链接文档之间的关系。
rel ="stylesheet" 代表连链接的是外部样式表
href属性=URL 规定被链接文档的位置。
标签名选择器的格式是：
标签名{
属性：值;
}
标签名选择器，可以决定哪些标签被动的使用这个样式。
< head> < styletype = " text/css" >
div {
border : 1px solid yellow;
color : blue;
font-size : 30px;
}
span {
border : 5px dashed blue;
color : yellow;
font-size : 20px;
}
</ style> </ head> < body> < div> </ div> < div> </ div> < span> </ span> < span> </ span> </ body> id 选择器的格式是：
#id 属性值{
属性：值;
}
id 选择器，可以让我们通过标签的 id 属性选择性的去使用这个样式。
< head> < styletype = " text/css" >
#id001 {
color : blue;
font-size : 30px;
border : 1px solid yellow;
}
#id002 {
color : red;
font-size : 20px;
border : 5px dotted blue;
}
</ style> </ head> < body> < divid = " id001" > </ div> < divid = " id002" > </ div> </ body> class 类型选择器的格式是：
.class属性值{
属性：值;
}
class 类型选择器，可以通过每个标签的 class 属性有效的选择性地去使用这个样式。
class值相同的标签为一类，共用同一个样式。
< head> < metacharset = " UTF-8" > < title> </ title> < styletype = " text/css" >
.class01 {
color : blue;
font-size : 30px;
border : 1px solid yellow;
}
.class02 {
color : red;
font-size : 20px;
border : 5px dotted blue;
}
</ style> </ head> < body> < divclass = " class01" > </ div> < divclass = " class02" > </ div> < spanclass = " class01" > </ span> < span> </ span> </ body> 组合选择器的格式是：
选择器 1，选择器 2，选择器 n{
属性：值;
}
组合选择器可以让多个选择器共用同一个 css 样式代码。
< head> < styletype = " text/css" >
.class01,#id01 {
color : blue;
font-size : 20px;
border : 1px solid yellow;
}
</ style> </ head> < body> < divclass = " class01" > </ div> < spanid = " id01" > </ span> < div> </ div> < span> </ span> </ body> 这些样式和它们的用法都可以在css2.0.chm文件里查到
1、字体颜色
color：red；
颜色可以写颜色名如：black, blue, red, green 等
颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#
2、宽度
width:19px;
宽度可以写像素值：19px； 也可以写百分比值：20%；
3、高度
height:20px;
高度可以写像素值：19px； 也可以写百分比值：20%；
4、背景颜色
background-color:#0F2D4C
5、字体样式：
color：#FF0000；字体颜色红色
font-size：20px; 字体大小
6、红色 1 像素实线边框
border：1px solid red;
实线 solid
虚线 dashed
点线 dotted
7、DIV 居中
margin-left: auto;
margin-right: auto;
8、文本居中：
text-align: center;
9、超连接去下划线
text-decoration: none;
10、表格细线
table {
border: 1px solid black; /*设置边框*/
border-collapse: collapse; /*将边框合并*/
}
td,th {
border: 1px solid black; /*设置边框*/
}
11、列表去除前面的修饰图形
ul {
list-style: none;
}
< head> < styletype = " text/css" >
div {
color : red;
border : 1px yellow solid;
width : 300px;
height : 300px;
background-color : green;
font-size : 30px;
margin-left : auto;
margin-right : auto;
text-align : center;
}
a {
text-decoration : none;
}
table {
border : 1px solid black;
border-collapse : collapse;
}
td {
border : 1px solid black;
}
ul {
list-style : none;
}
</ style> </ head> < body> < div> </ div> < ahref = " www.baidu.com" > </ a> < table> < tr> < td> </ td> < td> </ td> </ tr> </ table> < ul> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> </ body> Javascript 语言诞生主要是完成页面的数据验证。
因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。
JS 是 Netscape 网景公司的产品，最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。
JS 是弱类型，Java 是强类型。
弱类型就是类型可变；强类型就是定义变量时，类型已确定无法改变。
特点：
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
3. 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关
--------------------------------------------------------
主要功能：
1.嵌入动态文本于HTML页面。
2.对浏览器事件做出响应。
3.读写HTML元素。
4.在数据被提交到服务器之前验证数据。
5.检测访客的浏览器信息。控制cookies，包括创建和修改等。
6.基于Node.js技术进行服务器端编程。
语言组成：
ECMAScript，描述了该语言的语法和基本对象。
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发。
常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
说白了就是让网页动起来。
只需要在 head 标签中，或者在 body 标签中， 使用 script 标签 来书写
< head> < scripttype = " text/javascript" >
alert ( "hello javaScript!" ) ;
</ script> </ head> 使用 script 标签引入 单独的 JavaScript 代码文件
< head> < scripttype = " text/javascript" src = " 1.js" > </ script> < scripttype = " text/javascript" >
alert ( "hello javaScript!" ) ;
</ script> </ head> 1.js文件
alert("hello");
什么是变量？
变量是可以存放某些值的内存的命名。
JavaScript 的变量类型：
数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function
JavaScript 里特殊的值：
undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined.
null 空值
NaN 全称是：Not a Number。非数字。非数值。
JS 中的定义变量格式：
var 变量名;
var 变量名 = 值;
</ head> < scripttype = " text/javascript" >
var i;
alert ( i) ;
i= 12 ;
alert ( typeof ( i) ) ;
i= "abc" ;
alert ( typeof ( i) ) ;
var a= 12 ;
var b= "abc" ;
alert ( a* b) ;
</ script> < body> 等于： == 等于是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
< head> < scripttype = " text/javascript" >
var a = "12" ;
var b = 12 ;
alert ( a == b ) ;
alert ( a === b ) ;
</ script> </ head> 且运算： &&
或运算： ||
取反运算： !
在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
0 、null、 undefined、””(空串) 都认为是 false；
< head> < scripttype = " text/javascript" >
var i= 0 ;
if ( i) {
alert ( "零为真" ) ;
} else {
alert ( "零为假" ) ;
}
var a = "abc" ;
var b = true ;
var d = false ;
var c = null
alert ( a&& b) ;
alert ( b&& a) ;
alert ( a&& d) ;
alert ( a&& c) ;
alert ( a&& d&& c) ;
alert ( a&& c&& d) ;
alert ( d|| c) ;
alert ( c|| d) ;
alert ( a|| c) ;
alert ( b|| c) ;
</ script> </ head> 数组的定义方式：
var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素
< head> < scripttype = " text/javascript" >
var arr= [ ] ;
alert ( arr. length) ;
arr[ 0 ] = 12 ;
alert ( arr. length) ;
arr[ 2 ] = "abc" ;
alert ( arr. length) ;
alert ( arr[ 1 ] ) ;
for ( var i = 0 ; i < arr. length; i++ ) {
alert ( arr[ i] ) ;
}
var arr1= [ true , 11 , "abc" ] ;
</ script> </ head> 使用 function 关键字来定义函数
（1）第一种定义方式
格式如下:
function 函数名(形参列表){
函数体
}
在 JavaScript 语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用 return语句返回值即可！
< head> < scripttype = " text/javascript" >
function fun ( ) {
alert ( "无参函数fun()被调用了" ) ;
}
fun ( ) ;
function fun2 ( a, b ) {
alert ( "有参函数fun2()被调用了 a=" + a+ " b=" + b) ;
}
fun2 ( 12 , "abc" ) ;
function sum ( num1, num2 ) {
var res= num1+ num2;
return res;
}
alert ( sum ( 100 , 50 ) ) ;
</ script> </ head> （2）第二种定义方式
格式如下：
var 函数名 = function(形参列表){
函数体
}
< head> < scripttype = " text/javascript" >
var fun = function ( ) {
alert ( "无参函数" ) ;
}
fun ( ) ;
var fun2 = function ( a, b ) {
alert ( "有参函数a=" + a+ ",b=" + b) ;
}
fun2 ( 1 , 2 ) ;
var fun3 = function ( num1, num2 ) {
return num1+ num2;
}
alert ( fun3 ( 100 , 200 ) ) ;
</ script> </ head> js中是不允许函数重载的，重载会直接覆盖掉上一次的定义
< head> < scripttype = " text/javascript" >
function fun ( ) {
alert ( "无参函数 fun()" ) ;
}
function fun ( a, b ) {
alert ( "有参函数 fun(a,b)" ) ;
}
fun ( ) ;
</ script> </ head> function fun(){
alert("无参函数fun()");
}
fun(1,"abc");
虽然是无参函数但是还是可以传参数，因为有隐形参数
就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像 java 基础的可变长参数一样。
public void fun( Object ... args );
可变长参数其实是一个数组。
那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。
< head> < scripttype = " text/javascript" >
function fun ( a ) {
alert ( arguments. length) ;
alert ( arguments[ 0 ] ) ;
alert ( arguments[ 1 ] ) ;
alert ( arguments[ 2 ] ) ;
alert ( "a=" + a) ;
alert ( "无参函数fun()" ) ;
}
fun ( 1 , "ab" , true ) ;
function sum ( num1, num2 ) {
var res= 0 ;
for ( var i = 0 ; i < arguments. length; i++ ) {
if ( typeof ( arguments[ i] ) == "number" ) {
res+= arguments[ i] ;
}
}
return res;
}
alert ( sum ( 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ) ) ;
</ script> </ head> Object 形式的自定义对象
对象的定义：
var 变量名 = new Object(); // 对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数
对象的访问：
变量名.属性 / 函数名();
< head> < scripttype = " text/javascript" >
var obj= new Object ( ) ;
obj. name= "华仔" ;
obj. age= 18 ;
obj. fun = function ( ) {
alert ( "姓名：" + this . name+ ",年龄：" + this . age) ;
}
alert ( obj. age) ;
obj. fun ( ) ;
</ script> </ head> {}花括号形式的自定义对象
对象的定义：
var 变量名 = { // 空对象
属性名：值, // 定义一个属性
属性名：值, // 定义一个属性
函数名：function(){} // 定义一个函数
};
对象的访问：
变量名.属性 / 函数名();
< head> < scripttype = " text/javascript" >
var obj= {
name : "国哥" ,
age : 18 ,
fun : function ( ) {
alert ( "姓名：" + this . name+ ",年龄：" + this . age) ;
}
}
alert ( obj. age) ;
obj. fun ( ) ;
</ script> </ head> 什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件：
onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件： 常用于按钮的点击响应操作。
onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。
使用事件之前要进行事件的注册(绑定)
什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
事件的注册又分为静态注册和动态注册两种：
静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件：
是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件
响应后的代码，叫动态注册。
动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名 = fucntion(){}
window.οnlοad=function()是什么意思？
onload是window窗口对象的事件属性，
语句是把“匿名函数”赋值给window的onload事件属性，
当window加载完成时会触发onload事件，也就触发了“匿名函数”，执行函数体内的语句。
< head> < scripttype = " text/javascript" >
window. onload = function ( ) {
alert ( "动态注册onload事件" ) ;
}
</ script> </ head> < head> < scripttype = " text/javascript" >
function onclickFun ( ) {
alert ( "静态注册onclick事件" ) ;
}
window. onload = function ( ) {
var btnObj = document. getElementById ( "btn01" ) ;
btnObj. onclick = function ( ) {
alert ( "动态注册onclick事件" ) ;
}
}
</ script> </ head> < body> < buttononclick = " onclickFun ( ) ; " > </ button> < buttonid = " btn01" > </ button> </ body> 为什么要写window.onload = function (){}？
因为如果使用动态注册，不写window.onload的话
代码自上而下执行，执行到：
document.getElementById("btn01");
根本找不到btn01
所以要使用window.onload，
当页面全部加载完毕，即自上而下代码全部初始化之后，
再执行window.onload = function (){再执行这里的代码}
常用用于输入框失去焦点后验证其输入内容是否合法。
< head> < scripttype = " text/javascript" >
function onblurFun ( ) {
alert ( "静态注册失去焦点事件" ) ;
}
window. onload = function ( ) {
var passwordObj = document. getElementById ( "password" ) ;
passwordObj. onblur = function ( ) {
alert ( "动态注册失去焦点事件" ) ;
}
}
</ script> </ head> < body> < inputtype = " text" onblur = " onblurFun ( ) ; " > < br> < inputid = " password" type = " text" > </ body> < head> < scripttype = " text/javascript" >
function onchangeFun ( ) {
alert ( "女神已经改变了" ) ;
}
window. onload = function ( ) {
var selectObj = document. getElementById ( "sel01" ) ;
selectObj. onchange = function ( ) {
alert ( "男神已经改变了" ) ;
}
}
</ script> </ head> < body> < selectonchange = " onchangeFun ( ) ; " > < option> </ option> < option> </ option> < option> </ option> < option> </ option> </ select> < selectid = " sel01" > < option> </ option> < option> </ option> < option> </ option> < option> </ option> </ select> </ body> < head> < scripttype = " text/javascript" >
function onsubmitFun ( ) {
alert ( "静态注册表单提交事件---发现不合法" ) ;
return false ;
}
window. onload = function ( ) {
var formObj = document. getElementById ( "form01" ) ;
formObj. onsubmit = function ( ) {
alert ( "静态注册表单提交事件---发现不合法" ) ;
return false ;
}
}
</ script> </ head> < body> < formaction = " https://localhost:8080" method = " get" onsubmit = " return onsubmitFun ( ) " > < inputtype = " submit" value = " 静态注册" > </ form> < formaction = " https://localhost:8080" method = " get" id = " form01" > < inputtype = " submit" value = " 动态注册" > </ form> </ body> DOM 全称是 Document Object Model 文档对象模型
大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。
那么 它们是如何实现把标签，属性，文本转换成为对象来管理呢。这就是我们马上要学习的重点
Document 对象的理解：
第一点：Document 它管理了所有的 HTML 文档内容。
第二点：document 它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签 都 对象化
第四点：我们可以通过 document 访问所有的标签对象。
什么是对象化？？
举例：
有一个人有年龄：18 岁，性别：女，名字：张某某
我们要把这个人的信息对象化怎么办！
Class Person {
private int age;
private String sex;
private String name;
}
那么 html 标签 要 对象化 怎么办？
<body>
<div id="div01">div01</div>
</body>
模拟对象化，相当于：
class Dom{
private String id; // id 属性
private String tagName; //表示标签名
private Dom parentNode; //父亲
private List<Dom> children; // 孩子结点
private String innerHTML; // 起始标签和结束标签中间的内容
}
（1）document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
（2）document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
（3）document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
（4）document.createElement( tagName)
通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名
注：
（1）document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询
（2）如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询
（3）如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。
w3cschool菜鸟教程 新版本.chm文件中可以学习html,css,javascript
正则表达式（RegExp）：regular expression
< head> < scripttype = " text/javascript" >
var patt1 = new RegExp ( "e" ) ;
alert ( patt1) ;
var patt2 = / e / ;
var patt3 = / [abc] / ;
var patt4 = / [a-z] / ;
var patt5 = / [A-Z] / ;
var patt6 = / [0-9] / ;
var patt7 = / \w / ;
var patt8 = / a+ / ;
var patt9 = / a* / ;
var patt10 = / a? / ;
var patt11 = / a{3} / ;
var patt12 = / a{3,5} / ;
var patt13 = / a{3,} / ;
var patt14 = / a$ / ;
var patt15 = / ^a / ;
var patt16 = / ^a{3,5}$ / ;
var str = "aaaa12" ;
alert ( patt16. test ( str) ) ;
</ script> </ head> 剩下的可以百度搜索或者看文档
< head> < scripttype = " text/javascript" >
function onclickFun ( ) {
var usernameObj = document. getElementById ( "username" ) ;
var usernameText = usernameObj. value;
var patt = / ^\w{5,12}$ / ;
var usernameSpanObj = document. getElementById ( "usernameSpan" ) ;
if ( patt. test ( usernameText) ) {
usernameSpanObj. innerHTML = "<img src='../pictures/right.png' width='18' height='18'>" ;
} else {
usernameSpanObj. innerHTML = "<img src='../pictures/wrong.png' width='18' height='18'>" ;
}
}
</ script> </ head> < body> < inputtype = " text" id = " username" /> < spanstyle = " color : red; " id = " usernameSpan" > </ span> < buttononclick = " onclickFun ( ) ; " > </ button> </ body> < head> < scripttype = " text/javascript" >
function checkAll ( ) {
var hobbies = document. getElementsByName ( "hobby" ) ;
for ( var i = 0 ; i < hobbies. length; i++ ) {
hobbies[ i] . checked = true ;
}
}
function checkNo ( ) {
var hobbies = document. getElementsByName ( "hobby" ) ;
for ( var i = 0 ; i < hobbies. length; i++ ) {
hobbies[ i] . checked = false ;
}
}
function checkReverse ( ) {
var hobbies = document. getElementsByName ( "hobby" ) ;
for ( var i = 0 ; i < hobbies. length; i++ ) {
hobbies[ i] . checked = ! hobbies[ i] . checked;
}
}
</ script> </ head> < body> < inputtype = " checkbox" name = " hobby" value = " cpp" checked = " checked" > < inputtype = " checkbox" name = " hobby" value = " java" > < inputtype = " checkbox" name = " hobby" value = " js" > < br> < buttononclick = " checkAll ( ) " > </ button> < buttononclick = " checkNo ( ) " > </ button> < buttononclick = " checkReverse ( ) " > </ button> </ body> < head> < scripttype = " text/javascript" >
function checkAll ( ) {
var inputs = document. getElementsByTagName ( "input" ) ;
for ( var i = 0 ; i < inputs. length; i++ ) {
inputs[ i] . checked = true ;
}
}
</ script> </ head> < body> < inputtype = " checkbox" value = " cpp" checked = " checked" > < inputtype = " checkbox" value = " java" > < inputtype = " checkbox" value = " js" > < br> < buttononclick = " checkAll ( ) " > </ button> </ body> 节点就是标签对象（但其实注释，文本等也都是节点）
节点的常用属性和方法就是标签的常用属性和方法
方法：
（1）通过具体的元素节点调用getElementsByTagName()方法，获取当前节点的指定标签名孩子节点
（2）appendChild( oChildNode )方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
属性：
childNodes属性，获取当前节点的所有子节点
firstChild属性，获取当前节点的第一个子节点
lastChild属性，获取当前节点的最后一个子节点
parentNode属性，获取当前节点的父节点
nextSibling属性，获取当前节点的下一个节点
previousSibling属性，获取当前节点的上一个节点
className用于获取或设置标签的 class 属性值
innerHTML属性，表示获取/设置起始标签和结束标签中的内容
innerText属性，表示获取/设置起始标签和结束标签中的文本
< head> < linkrel = " stylesheet" type = " text/css" href = " style/css.css" /> < scripttype = " text/javascript" >
window. onload = function ( ) {
document. getElementById ( "btn01" ) . onclick = function ( ) {
var bjObj = document. getElementById ( "bj" ) ;
alert ( bjObj. innerHTML) ;
}
var btn02Ele = document. getElementById ( "btn02" ) ;
btn02Ele. onclick = function ( ) {
var lis = document. getElementsByTagName ( "li" ) ;
alert ( lis. length)
} ;
var btn03Ele = document. getElementById ( "btn03" ) ;
btn03Ele. onclick = function ( ) {
var genders = document. getElementsByName ( "gender" ) ;
alert ( genders. length)
} ;
var btn04Ele = document. getElementById ( "btn04" ) ;
btn04Ele. onclick = function ( ) {
var lis = document. getElementById ( "city" ) . getElementsByTagName ( "li" ) ;
alert ( lis. length)
} ;
var btn05Ele = document. getElementById ( "btn05" ) ;
btn05Ele. onclick = function ( ) {
alert ( document. getElementById ( "city" ) . childNodes. length) ;
} ;
var btn06Ele = document. getElementById ( "btn06" ) ;
btn06Ele. onclick = function ( ) {
alert ( document. getElementById ( "phone" ) . firstElementChild. innerHTML) ;
} ;
var btn07Ele = document. getElementById ( "btn07" ) ;
btn07Ele. onclick = function ( ) {
var bjObj = document. getElementById ( "bj" ) ;
alert ( bjObj. parentNode. innerHTML) ;
} ;
var btn08Ele = document. getElementById ( "btn08" ) ;
btn08Ele. onclick = function ( ) {
alert ( document. getElementById ( "android" ) . previousElementSibling. innerHTML) ;
} ;
var btn09Ele = document. getElementById ( "btn09" ) ;
btn09Ele. onclick = function ( ) {
alert ( document. getElementById ( "username" ) . value) ;
} ;
var btn10Ele = document. getElementById ( "btn10" ) ;
btn10Ele. onclick = function ( ) {
document. getElementById ( "username" ) . value = "国哥你真牛逼" ;
} ;
var btn11Ele = document. getElementById ( "btn11" ) ;
btn11Ele. onclick = function ( ) {
alert ( document. getElementById ( "bj" ) . innerText) ;
} ;
var btn11Ele = document. getElementById ( "btn12" ) ;
btn11Ele. onclick = function ( ) {
alert ( document. getElementById ( "city" ) . innerText) ;
alert ( document. getElementById ( "city" ) . innerHTML) ;
} ;
} ;
</ script> </ head> < body> < divid = " total" > < divclass = " inner" > < p> </ p> < ulid = " city" > < liid = " bj" > </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> < br> < br> < p> </ p> < ulid = " game" > < liid = " rl" > </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> < br/> < br/> < p> </ p> < ulid = " phone" > < li> </ li> < liid = " android" > </ li> < li> </ li> </ ul> </ div> < divclass = " inner" > < inputtype = " radio" name = " gender" value = " male" /> < inputtype = " radio" name = " gender" value = " female" /> < br> < br> < inputtype = " text" name = " name" id = " username" value = " abcde" /> </ div> </ div> < divid = " btnList" > < div> < buttonid = " btn01" > </ button> </ div> < div> < buttonid = " btn02" > </ button> </ div> < div> < buttonid = " btn03" > </ button> </ div> < div> < buttonid = " btn04" > </ button> </ div> < div> < buttonid = " btn05" > </ button> </ div> < div> < buttonid = " btn06" > </ button> </ div> < div> < buttonid = " btn07" > </ button> </ div> < div> < buttonid = " btn08" > </ button> </ div> < div> < buttonid = " btn09" > </ button> </ div> < div> < buttonid = " btn10" > </ button> </ div> < div> < buttonid = " btn11" > </ button> </ div> < div> < buttonid = " btn12" > </ button> </ div> </ div> </ body> //css.css
@CHARSET "UTF-8" ; body {
width : 800px;
margin-left : auto;
margin-right : auto;
}
button {
width : 300px;
margin-bottom : 10px;
}
#btnList {
float : left;
}
#total {
width : 450px;
float : left;
}
ul {
list-style-type : none;
margin : 0px;
padding : 0px;
}
.inner li {
border-style : solid;
border-width : 1px;
padding : 5px;
margin : 5px;
background-color : #99ff99;
float : left;
}
.inner {
width : 400px;
border-style : solid;
border-width : 1px;
margin-bottom : 10px;
padding : 10px;
float : left;
}
< head> < scripttype = " text/javascript" >
window. onload = function ( ) {
var divObj = document. createElement ( "div" ) ;
divObj. innerHTML = "国哥，我爱你" ;
document. body. appendChild ( divObj) ;
}
</ script> </ head> < head> < scripttype = " text/javascript" >
window. onload = function ( ) {
var divObj = document. createElement ( "div" ) ;
var textObj = document. createTextNode ( "国哥，我爱你" ) ;
divObj. appendChild ( textObj) ;
document. body. appendChild ( divObj) ;
}
</ script> </ head> jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
什么是 jQuery ?
jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。
jQuery 核心思想
它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
jQuery 流行程度
jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用jQuery。
jQuery 好处
jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能
< head> < scripttype = " text/javascript" src = " ../jquery-3.6.0.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
var $btnObj = $ ( "#btnId" ) ;
$btnObj. click ( function ( ) {
alert ( "jQuery的单击事件" ) ;
} )
} ) ;
</ script> </ head> < body> < buttonid = " btnId" > </ button> </ body> 常见问题？
1、使用 jQuery 一定要引入 jQuery 库吗？
答案： 是，必须
2、jQuery 中的$到底是什么？
答案： 它是一个函数
3、怎么为按钮添加点击响应函数的？
答案：
1、使用 jQuery 查询到标签对象
2、使用标签对象.click( function(){} );
$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。
$(参数) 就是调用$这个函数
1、传入参数为 [ 函数 ] 时：
表示页面加载完成之后。相当于 window.onload = function(){}
2、传入参数为 [ HTML 字符串 ] 时：
会为我们创建这个 html 标签对象
3、传入参数为 [ 选择器字符串 ] 时：
$(“#id 属性值”); id 选择器，根据 id 查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
$(“.class属性值”); 类型选择器，可以根据 class 属性查询标签对象
4、传入参数为 [ DOM 对象 ] 时：
会把这个 dom 对象转换为 jQuery 对象
< head> < scripttype = " text/javascript" src = " ../jquery-3.6.0.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
alert ( "页面加载完成之后，自动调用" ) ;
} ) ;
$ ( function ( ) {
$ ( " <div>\n" +
" <span>div-span1</span>\n" +
" </div>" ) . appendTo ( "body" ) ;
} ) ;
$ ( function ( ) {
alert ( $ ( "button" ) . length) ;
} ) ;
$ ( function ( ) {
var btn01Obj = document. getElementById ( "btn01" ) ;
alert ( btn01Obj) ;
alert ( $ ( btn01Obj) ) ;
} ) ;
</ script> </ head> < body> < buttonid = " btn01" > </ button> < button> </ button> < button> </ button> </ body> Dom 对象
1.通过 getElementById()查询出来的标签对象是 Dom 对象
2.通过 getElementsByName()查询出来的标签对象是 Dom 对象
3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
4.通过 createElement() 方法创建的对象，是 Dom 对象
DOM 对象 Alert 出来的效果是：[object HTML 标签名 Element]
jQuery 对象
5.通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
6.通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
7.通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
jQuery 对象 Alert 出来的效果是：[object Object]
API应用程序接口，一些预定义的函数
< head> < scripttype = " text/javascript" src = " ../jquery-3.6.0.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
alert ( $ ( "<h1></h1>" ) ) ;
var btn01Obj = document. getElementById ( "btn01" ) ;
alert ( btn01Obj) ;
alert ( $ ( btn01Obj) ) ;
alert ( $ ( "#btn01" ) ) ;
} ) ;
</ script> </ head> < body> < buttonid = " btn01" > </ button> </ body> jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。
jQuery 对象不能使用 DOM 对象的属性和方法
DOM 对象也不能使用 jQuery 对象的属性和方法
1、dom 对象转化为 jQuery 对象（*重点）
1、先有 DOM 对象
2、$( DOM 对象 ) --->就可以转换成为 jQuery 对象
2、jQuery 对象转为 dom 对象（*重点）
1、先有 jQuery 对象
2、jQuery 对象[下标]--->取出相应的 DOM 对象 (因为jQuery对象本质是dom对象数组)
< head> < scripttype = " text/javascript" src = " ../jquery-3.6.0.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
var divObj = document. getElementById ( "testDiv" ) ;
alert ( divObj) ;
alert ( $ ( divObj) ) ;
var $btnObjs = $ ( "button" ) ;
for ( var i = 0 ; i < $btnObjs. length; i++ ) {
alert ( $btnObjs[ i] ) ;
}
} ) ;
</ script> </ head> < body> < divid = " testDiv" > </ div> < buttonid = " btn01" > </ button> < buttonid = " btn02" > </ button> < buttonid = " btn03" > </ button> < buttonid = " btn04" > </ button> </ body>
看文档jQueryAPI_1.7.1_CN.chm
1）id选择器：
#id
通过id来匹配标签
2）标签选择器：
通过标签名来匹配标签
3）类选择器：
.class名
通过类名来匹配标签
4）* 选择器：
得到所有标签
5）组合选择器：
selector1,selector2,selectorN
上面几个选择器的综合使用
下面示例中的p.myClass --->标签名是p且类名是myClass的标签
结果与jQuery顺序不同？
根据页面的顺序(即HTML代码中的顺序)
练习选择器的使用
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=UTF-8" > < title> </ title> < styletype = " text/css" >
div, span, p {
width : 140px;
height : 140px;
margin : 5px;
background : #aaa;
border : #000 1px solid;
float : left;
font-size : 17px;
font-family : Verdana;
}
div.mini {
width : 55px;
height : 55px;
background-color : #aaa;
font-size : 12px;
}
div.hide {
display : none;
}
</ style> < scripttype = " text/javascript" src = " ../jquery-3.6.0.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
$ ( "#btn1" ) . click ( function ( ) {
$ ( "#one" ) . css ( "background-color" , "#bbffaa" ) ;
} ) ;
$ ( "#btn2" ) . click ( function ( ) {
$ ( ".mini" ) . css ( "background-color" , "#bbffaa" ) ;
} ) ;
$ ( "#btn3" ) . click ( function ( ) {
$ ( "div" ) . css ( "background-color" , "#bbffaa" ) ;
} ) ;
$ ( "#btn4" ) . click ( function ( ) {
$ ( "*" ) . css ( "background-color" , "#bbffaa" ) ;
} ) ;
$ ( "#btn5" ) . click ( function ( ) {
$ ( "span,#two" ) . css ( "background-color" , "#bbffaa" ) ;
} ) ;
} ) ;
</ script> </ head> < body> < inputtype = " button" value = " 选择 id 为 one 的元素" id = " btn1" /> < inputtype = " button" value = " 选择 class 为 mini 的所有元素" id = " btn2" /> < inputtype = " button" value = " 选择 元素名是 div 的所有元素" id = " btn3" /> < inputtype = " button" value = " 选择 所有的元素" id = " btn4" /> < inputtype = " button" value = " 选择 所有的 span 元素和id为two的元素" id = " btn5" /> < br> < divclass = " one" id = " one" > < divclass = " mini" > </ div> </ div> < divclass = " one" id = " two" title = " test" > < divclass = " mini" title = " other" > </ div> < divclass = " mini" title = " test" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" title = " tesst" > </ div> </ div> < divstyle = " display : none; " class = " none" > </ div> < divclass = " hide" > </ div> < div> < inputtype = " hidden" size = " 8" > </ div> < spanclass = " one" id = " span" > </ span> </ body> </ html> 1）祖先后代选择器：在给定的祖先标签下匹配所有的后代标签
语法：ancestor descendant
找到祖先ancester标签的所有后代descendant标签
即ancester标签的儿子标签，孙子标签等等
2）子元素(标签)选择器：在给定的父元素下匹配所有的子元素
语法：parent > child
找parent标签下的所有child子标签
只找子标签，孙子标签往后的不找
3）相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素
语法：prev + next
4）兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素
语法：prev ~ sibings
找到所有在pre标签之后的且与pre标签同辈的标签
练习
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=UTF-8" > < title> </ title> < styletype = " text/css" >
div, span, p {
width : 140px;
height : 140px;
margin : 5px;
background : #aaa;
border : #000 1px solid;
float : left;
font-size : 17px;
font-family : Verdana;
}
div.mini {
width : 55px;
height : 55px;
background-color : #aaa;
font-size : 12px;
}
div.hide {
display : none;
}
</ style> < scripttype = " text/javascript" src = " ../jquery-3.6.0.js" > </ script> < scripttype = " text/javascript" >
$ ( document) . ready ( function ( ) {
$ ( "#btn1" ) . click ( function ( ) {
$ ( "body div" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn2" ) . click ( function ( ) {
$ ( "body > div" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn3" ) . click ( function ( ) {
$ ( "#one + div" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn4" ) . click ( function ( ) {
$ ( "#two ~ div" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
} ) ;
</ script> </ head> < body> < inputtype = " button" value = " 选择 body 内的所有 div 元素" id = " btn1" /> < inputtype = " button" value = " 在 body 内, 选择div子元素" id = " btn2" /> < inputtype = " button" value = " 选择 id 为 one 的下一个 div 元素" id = " btn3" /> < inputtype = " button" value = " 选择 id 为 two 的元素后面的所有 div 兄弟元素" id = " btn4" /> < br> < br> < divclass = " one" id = " one" > < divclass = " mini" > </ div> </ div> < divclass = " one" id = " two" title = " test" > < divclass = " mini" title = " other" > </ div> < divclass = " mini" title = " test" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" title = " tesst" > </ div> </ div> < divstyle = " display : none; " class = " none" > </ div> < divclass = " hide" > </ div> < div> < inputtype = " hidden" size = " 8" > </ div> < spanid = " span" > </ span> </ body> </ html> 具体方法看文档
元素就是标签
1）基本过滤选择器
:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素
练习：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=UTF-8" > < title> </ title> < styletype = " text/css" >
div, span, p {
width : 140px;
height : 140px;
margin : 5px;
background : #aaa;
border : #000 1px solid;
float : left;
font-size : 17px;
font-family : Verdana;
}
div.mini {
width : 55px;
height : 55px;
background-color : #aaa;
font-size : 12px;
}
div.hide {
display : none;
}
</ style> < scripttype = " text/javascript" src = " ../jquery-3.6.0.js" > </ script> < scripttype = " text/javascript" >
$ ( document) . ready ( function ( ) {
function anmateIt ( ) {
$ ( "#mover" ) . slideToggle ( "slow" , anmateIt) ;
}
anmateIt ( ) ;
} ) ;
$ ( document) . ready ( function ( ) {
$ ( "#btn1" ) . click ( function ( ) {
$ ( "div:first" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn2" ) . click ( function ( ) {
$ ( "div:last" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn3" ) . click ( function ( ) {
$ ( "div:not(.one)" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn4" ) . click ( function ( ) {
$ ( "div:even" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn5" ) . click ( function ( ) {
$ ( "div:odd" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn6" ) . click ( function ( ) {
$ ( "div:gt(3)" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn7" ) . click ( function ( ) {
$ ( "div:eq(3)" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn8" ) . click ( function ( ) {
$ ( "div:lt(3)" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn9" ) . click ( function ( ) {
$ ( ":header" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn10" ) . click ( function ( ) {
$ ( ":animated" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn11" ) . click ( function ( ) {
$ ( "div:not(:animated):last" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
} ) ;
</ script> </ head> < body> < inputtype = " button" value = " 选择第一个 div 元素" id = " btn1" /> < inputtype = " button" value = " 选择最后一个 div 元素" id = " btn2" /> < inputtype = " button" value = " 选择class不为 one 的所有 div 元素" id = " btn3" /> < inputtype = " button" value = " 选择索引值为偶数的 div 元素" id = " btn4" /> < inputtype = " button" value = " 选择索引值为奇数的 div 元素" id = " btn5" /> < inputtype = " button" value = " 选择索引值为大于 3 的 div 元素" id = " btn6" /> < inputtype = " button" value = " 选择索引值为等于 3 的 div 元素" id = " btn7" /> < inputtype = " button" value = " 选择索引值为小于 3 的 div 元素" id = " btn8" /> < inputtype = " button" value = " 选择所有的标题元素" id = " btn9" /> < inputtype = " button" value = " 选择当前正在执行动画的所有元素" id = " btn10" /> < inputtype = " button" value = " 选择没有执行动画的最后一个div" id = " btn11" /> < h3> </ h3> < br> < br> < divclass = " one" id = " one" > < divclass = " mini" > </ div> </ div> < divclass = " one" id = " two" title = " test" > < divclass = " mini" title = " other" > </ div> < divclass = " mini" title = " test" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" title = " tesst" > </ div> </ div> < divstyle = " display : none; " class = " none" > </ div> < divclass = " hide" > </ div> < div> < inputtype = " hidden" size = " 8" > </ div> < divid = " mover" > </ div> </ body> </ html> 2）内容过滤选择器
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素 （空）
:parent 匹配含有子元素或者文本的元素 （非空）
:has(selector) 匹配含有选择器所匹配的元素的元素
-----
-----
-----
练习：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=UTF-8" > < title> </ title> < styletype = " text/css" >
div, span, p {
width : 140px;
height : 140px;
margin : 5px;
background : #aaa;
border : #000 1px solid;
float : left;
font-size : 17px;
font-family : Verdana;
}
div.mini {
width : 55px;
height : 55px;
background-color : #aaa;
font-size : 12px;
}
div.hide {
display : none;
}
</ style> < scripttype = " text/javascript" src = " ../jquery-3.6.0.js" > </ script> < scripttype = " text/javascript" >
$ ( document) . ready ( function ( ) {
function anmateIt ( ) {
$ ( "#mover" ) . slideToggle ( "slow" , anmateIt) ;
}
anmateIt ( ) ;
} ) ;
$ ( document) . ready ( function ( ) {
$ ( "#btn1" ) . click ( function ( ) {
$ ( "div:contains(di)" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn2" ) . click ( function ( ) {
$ ( "div:empty" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn3" ) . click ( function ( ) {
$ ( "div:has(.mini)" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn4" ) . click ( function ( ) {
$ ( "div:parent" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
} ) ;
</ script> </ head> < body> < inputtype = " button" value = " 选择 含有文本 ' di' 的 div 元素" id = " btn1" /> < inputtype = " button" value = " 选择不包含子元素(或者文本元素) 的 div 空元素" id = " btn2" /> < inputtype = " button" value = " 选择含有 class 为 mini 元素的 div 元素" id = " btn3" /> < inputtype = " button" value = " 选择含有子元素(或者文本元素)的div元素" id = " btn4" /> < br> < br> < divclass = " one" id = " one" > < divclass = " mini" > </ div> </ div> < divclass = " one" id = " two" title = " test" > < divclass = " mini" title = " other" > </ div> < divclass = " mini" title = " test" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" title = " tesst" > </ div> </ div> < divstyle = " display : none; " class = " none" > </ div> < divclass = " hide" > </ div> < div> < inputtype = " hidden" size = " 8" > </ div> < divid = " mover" > </ div> </ body> </ html> 3）可见性过滤选择器
:hidden 匹配所有不可见元素或者type为hidden的元素
:visible 匹配所有可见元素
---
练习：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=UTF-8" > < title> </ title> < styletype = " text/css" >
div, span, p {
width : 140px;
height : 140px;
margin : 5px;
background : #aaa;
border : #000 1px solid;
float : left;
font-size : 17px;
font-family : Verdana;
}
div.mini {
width : 55px;
height : 55px;
background-color : #aaa;
font-size : 12px;
}
div.hide {
display : none;
}
</ style> < scripttype = " text/javascript" src = " ../jquery-3.6.0.js" > </ script> < scripttype = " text/javascript" >
$ ( document) . ready ( function ( ) {
function anmateIt ( ) {
$ ( "#mover" ) . slideToggle ( "slow" , anmateIt) ;
}
anmateIt ( ) ;
} ) ;
$ ( document) . ready ( function ( ) {
$ ( "#btn1" ) . click ( function ( ) {
$ ( "div:visible" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn2" ) . click ( function ( ) {
$ ( "div:hidden" ) . show ( "slow" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn3" ) . click ( function ( ) {
alert ( $ ( "input:hidden" ) . attr ( "value" ) ) ;
} ) ;
} ) ;
</ script> </ head> < body> < inputtype = " button" value = " 选取所有可见的 div 元素" id = " btn1" > < inputtype = " button" value = " 选择所有不可见的 div 元素" id = " btn2" /> < inputtype = " button" value = " 选择所有不可见的 input 元素" id = " btn3" /> < br> < divclass = " one" id = " one" > < divclass = " mini" > </ div> </ div> < divclass = " one" id = " two" title = " test" > < divclass = " mini" title = " other" > </ div> < divclass = " mini" title = " test" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" title = " tesst" > </ div> </ div> < divstyle = " display : none; " class = " none" > </ div> < divclass = " hide" > </ div> < div> < inputtype = " hidden" value = " 123456789" size = " 8" > </ div> < divid = " mover" > </ div> </ body> </ html> 4）属性过滤选择器
[attribute] 匹配包含给定属性的元素。
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。
练习：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=UTF-8" > < title> </ title> < styletype = " text/css" >
div,span,p {
width : 140px;
height : 140px;
margin : 5px;
background : #aaa;
border : #000 1px solid;
float : left;
font-size : 17px;
font-family : Verdana;
}
div.mini {
width : 55px;
height : 55px;
background-color : #aaa;
font-size : 12px;
}
div.hide {
display : none;
}
</ style> < scripttype = " text/javascript" src = " ../jquery-3.6.0.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
$ ( "#btn1" ) . click ( function ( ) {
$ ( "div[title]" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn2" ) . click ( function ( ) {
$ ( "div[title='test']" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn3" ) . click ( function ( ) {
$ ( "div[title!='test']" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn4" ) . click ( function ( ) {
$ ( "div[title^='te']" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn5" ) . click ( function ( ) {
$ ( "div[title$='est']" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn6" ) . click ( function ( ) {
$ ( "div[title*='est']" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn7" ) . click ( function ( ) {
$ ( "div[id][title*='es']" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
$ ( "#btn8" ) . click ( function ( ) {
$ ( "div[title][title!='test']" ) . css ( "background" , "#bbffaa" ) ;
} ) ;
} ) ;
</ script> </ head> < body> < inputtype = " button" value = " 选取含有 属性title 的div元素." id = " btn1" /> < inputtype = " button" value = " 选取 属性title值等于' test' 的div元素." id = " btn2" /> < inputtype = " button" value = " 选取 属性title值不等于' test' 的div元素(没有属性title的也将被选中)." id = " btn3" /> < inputtype = " button" value = " 选取 属性title值 以' te' 开始 的div元素." id = " btn4" /> < inputtype = " button" value = " 选取 属性title值 以' est' 结束 的div元素." id = " btn5" /> < inputtype = " button" value = " 选取 属性title值 含有' es' 的div元素." id = " btn6" /> < inputtype = " button" value = " 组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有' es' 的 div 元素." id = " btn7" /> < inputtype = " button" value = " 选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id = " btn8" /> < br> < br> < divclass = " one" id = " one" > < divclass = " mini" > </ div> </ div> < divclass = " one" id = " two" title = " test" > < divclass = " mini" title = " other" > </ div> < divclass = " mini" title = " test" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" title = " tesst" > </ div> </ div> < divstyle = " display : none; " class = " none" > </ div> < divclass = " hide" > </ div> < div> < inputtype = " hidden" value = " 123456789" size = " 8" > </ div> < divid = " mover" > </ div> </ body> </ html> 5）表单过滤选择器
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有 文本输入框
:password 匹配所有的密码输入框
:radio 匹配所有的单选框
:checkbox 匹配所有的复选框
:submit 匹配所有提交按钮
:image 匹配所有 img 标签
:reset 匹配所有重置按钮
:button 匹配所有 input type=button <button>按钮
:file 匹配所有 input type=file 文件上传
:hidden 匹配所有不可见元素 display:none 或 input type=hidden
6）表单对象属性过滤选择器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected 匹配所有选中的 option
练习：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=UTF-8" > < title> </ title> < scripttype = " text/javascript" src = " ../jquery-3.6.0.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
$ ( "#btn1" ) . click ( function ( ) {
$ ( ":text:enabled" ) . val ( "New Value" ) ;
} ) ;
$ ( "#btn2" ) . click ( function ( ) {
$ ( ":text:disabled" ) . val ( "New Value Too" ) ;
} ) ;
$ ( "#btn3" ) . click ( function ( ) {
alert ( $ ( ":checkbox:checked" ) . length) ;
} ) ;
$ ( "#btn4" ) . click ( function ( ) {
var $checkboies = $ ( ":checkbox:checked" ) ;
for ( var i = 0 ; i < $checkboies. length; i++ ) {
alert ( $checkboies[ i] . value) ;
}
$checkboies. each ( function ( ) {
alert ( this . value) ;
} ) ;
} ) ;
$ ( "#btn5" ) . click ( function ( ) {
var $option = $ ( "select option:selected" ) ;
$option. each ( function ( ) {
alert ( this . innerHTML) ;
} ) ;
} ) ;
} )
</ script> </ head> < body> < h3> </ h3> < buttonid = " btn1" > </ button> < buttonid = " btn2" > </ button> < br/> < br/> < buttonid = " btn3" > </ button> < buttonid = " btn4" > </ button> < br/> < br/> < buttonid = " btn5" > </ button> < br/> < br/> < formid = " form1" action = " #" > < inputname = " add" value = " 可用文本框1" /> < br> < inputname = " email" disabled = " disabled" value = " 不可用文本框" /> < br> < inputname = " che" value = " 可用文本框2" /> < br> < inputname = " name" disabled = " disabled" value = " 不可用文本框" /> < br> < br> < br> < inputtype = " checkbox" name = " newsletter" checked = " checked" value = " test1" /> < inputtype = " checkbox" name = " newsletter" value = " test2" /> < inputtype = " checkbox" name = " newsletter" value = " test3" /> < inputtype = " checkbox" name = " newsletter" checked = " checked" value = " test4" /> < inputtype = " checkbox" name = " newsletter" value = " test5" /> < br> < br> < br> < selectname = " test" multiple = " multiple" style = " height : 100px" id = " sele1" > < option> </ option> < optionselected = " selected" > </ option> < option> </ option> < optionselected = " selected" > </ option> < option> </ option> < option> </ option> </ select> < br> < br> < br> < selectname = " test2" > < option> </ option> < option> </ option> < optionselected = " selected" > </ option> < option> </ option> < option> </ option> < option> </ option> </ select> </ form> </ body> </ html>
eq() 获取给定索引的元素 功能跟 :eq() 一样
first() 获取第一个元素 功能跟 :first 一样
last() 获取最后一个元素 功能跟 :last 一样
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true
has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样
not(exp) 删除匹配选择器的元素 功能跟 :not 一样
children(exp) 返回匹配给定选择器的子元素 功能跟 parent>child 一样
find(exp) 返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样
next() 返回当前元素的下一个兄弟元素 功能跟 prev + next 功能一样
nextAll() 返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样
nextUntil() 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
parent() 返回父元素
prev(exp) 返回与当前元素相邻的前一个兄弟元素
prevAll() 返回当前元素前面所有的兄弟元素
prevUntil(exp) 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
siblings(exp) 返回所有兄弟元素
add() 把与表达式匹配的元素添加到jQuery对象中。
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > < html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=UTF-8" > < title> </ title> < styletype = " text/css" >
div, span, p {
width : 140px;
height : 140px;
margin : 5px;
background : #aaa;
border : #000 1px solid;
float : left;
font-size : 17px;
font-family : Verdana;
}
div.mini {
width : 55px;
height : 55px;
background-color : #aaa;
font-size : 12px;
}
div.hide {
display : none;
}
</ style> < scripttype = " text/javascript" src = " ../jquery-3.6.0.js" > </ script> < scripttype = " text/javascript" >
$ ( document) . ready ( function ( ) {
function anmateIt ( ) {
$ ( "#mover" ) . slideToggle ( "slow" , anmateIt) ;
}
anmateIt ( ) ;
$ ( "#btn1" ) . click ( function ( ) {
$ ( "div" ) . eq ( 3 ) . css ( "background-color" , "#bfa" ) ;
} ) ;
$ ( "#btn2" ) . click ( function ( ) {
$ ( "div" ) . first ( ) . css ( "background-color" , "#bfa" ) ;
} ) ;
$ ( "#btn3" ) . click ( function ( ) {
$ ( "div" ) . last ( ) . css ( "background-color" , "#bfa" ) ;
} ) ;
$ ( "#btn4" ) . click ( function ( ) {
$ ( "div" ) . filter ( ":even" ) . css ( "background-color" , "#bfa" ) ;
} ) ;
$ ( "#btn5" ) . click ( function ( ) {
alert ( $ ( "#one" ) . is ( ":empty" ) ) ;
} ) ;
$ ( "#btn6" ) . click ( function ( ) {
$ ( "div" ) . has ( ".mini" ) . css ( "background-color" , "#bfa" ) ;
} ) ;
$ ( "#btn7" ) . click ( function ( ) {
$ ( "div" ) . not ( ".one" ) . css ( "background-color" , "#bfa" ) ;
} ) ;
$ ( "#btn8" ) . click ( function ( ) {
$ ( "body" ) . children ( "div[class='one']" ) . css ( "background-color" , "#bfa" ) ;
} ) ;
$ ( "#btn9" ) . click ( function ( ) {
$ ( "body" ) . find ( "div[class='mini']" ) . css ( "background-color" , "#bfa" ) ;
} ) ;
$ ( "#btn10" ) . click ( function ( ) {
$ ( "#one" ) . next ( "div" ) . css ( "background-color" , "#bfa" ) ;
} ) ;
$ ( "#btn11" ) . click ( function ( ) {
$ ( "#one" ) . nextAll ( "span" ) . css ( "background-color" , "#bfa" ) ;
} ) ;
$ ( "#btn12" ) . click ( function ( ) {
$ ( "#one" ) . nextUntil ( "span" ) . css ( "background-color" , "#bfa" )
} ) ;
$ ( "#btn13" ) . click ( function ( ) {
$ ( ".mini" ) . parent ( ) . css ( "background-color" , "#bfa" ) ;
} ) ;
$ ( "#btn14" ) . click ( function ( ) {
$ ( "#two" ) . prev ( "div" ) . css ( "background-color" , "#bfa" )
} ) ;
$ ( "#btn15" ) . click ( function ( ) {
$ ( "span" ) . prevAll ( "div" ) . css ( "background-color" , "#bfa" )
} ) ;
$ ( "#btn16" ) . click ( function ( ) {
$ ( "span" ) . prevUntil ( "#one" ) . css ( "background-color" , "#bfa" )
} ) ;
$ ( "#btn17" ) . click ( function ( ) {
$ ( "#two" ) . siblings ( ) . css ( "background-color" , "#bfa" )
} ) ;
$ ( "#btn18" ) . click ( function ( ) {
$ ( "span" ) . add ( "#two" ) . css ( "background-color" , "#bfa" ) ;
} ) ;
} ) ;
</ script> </ head> < body> < inputtype = " button" value = " eq()选择索引值为等于 3 的 div 元素" id = " btn1" /> < inputtype = " button" value = " first()选择第一个 div 元素" id = " btn2" /> < inputtype = " button" value = " last()选择最后一个 div 元素" id = " btn3" /> < inputtype = " button" value = " filter()在div中选择索引为偶数的" id = " btn4" /> < inputtype = " button" value = " is()判断#one是否为:empty或:parent" id = " btn5" /> < inputtype = " button" value = " has()选择div中包含.mini的" id = " btn6" /> < inputtype = " button" value = " not()选择div中class不为one的" id = " btn7" /> < inputtype = " button" value = " children()在body中选择所有class为one的div子元素" id = " btn8" /> < inputtype = " button" value = " find()在body中选择所有class为mini的div后代元素" id = " btn9" /> < inputtype = " button" value = " next()#one的下一个div" id = " btn10" /> < inputtype = " button" value = " nextAll()#one后面所有的span元素" id = " btn11" /> < inputtype = " button" value = " nextUntil()#one和span之间的元素" id = " btn12" /> < inputtype = " button" value = " parent().mini的父元素" id = " btn13" /> < inputtype = " button" value = " prev()#two的上一个div" id = " btn14" /> < inputtype = " button" value = " prevAll()span前面所有的div" id = " btn15" /> < inputtype = " button" value = " prevUntil()span向前直到#one的元素" id = " btn16" /> < inputtype = " button" value = " siblings()#two的所有兄弟元素" id = " btn17" /> < inputtype = " button" value = " add()选择所有的 span 元素和id为two的元素" id = " btn18" /> < br/> < br/> < inputtype = " text" name = " account" disabled = " disabled" /> < br> < br> < divclass = " one" id = " one" > < divclass = " mini" > </ div> </ div> < divclass = " one" id = " two" title = " test" > < divclass = " mini" title = " other" > < b> </ b> </ div> < divclass = " mini" title = " test" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> </ div> < divclass = " one" > < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" > </ div> < divclass = " mini" title = " tesst" > </ div> </ div> < divstyle = " display : none; " class = " none" > </ div> < divclass = " hide" > </ div> < spanid = " span1" > </ span> < div> < inputtype = " hidden" size = " 8" > </ div> < spanid = " span2" > </ span> < divid = " mover" > </ div> </ body> </ html>
