文章目录

  • `HTML`
    • 基础
      • `HTML`文件的基本结构
      • 标签
      • 属性
      • 转义字符
      • 元素之间的关系
    • 常用标签
      • 基本
      • 列表
      • 图片
      • 表格
      • 嵌套页面
      • 表单
      • `form`提交表单的属性：
        • `GET`请求的特点
        • `POST`请求的特点
      • 表单的提交
  • `CSS`
    • 基础
      • 基本语法
      • `HTML`引用`CSS`的方式
      • 样式的继承
    • 选择器
      • 标签名选择器
      • `id`选择器
      • `class`选择器
      • 组合选择器
      • 复合选择器
      • 通配选择器
      • 后代元素选择器
      • 子元素选择器
      • 兄弟元素选择器
      • 伪类选择器
      • 否定伪类选择器
      • 属性选择器
      • 选择器的优先级
    • 常用样式
  • `JavaScript`
    • 概述
      • 第一种编写位置
      • 第二种编写位置
      • 第三种编写位置
    • 语法
      • 变量
        • 数据类型
        • 变量定义
        • 特殊常量
        • 关系运算
        • 数组
      • 函数
        • 定义方式
        • 隐形参数`arguments`
        • 匿名函数
        • 函数变量
      • 对象
        • 定义方式创建对象
        • 工厂方式创建对象
        • 构造函数方式创建对象
        • 构造函数改良
        • 原型对象
        • 包装类
      • 作用域
        • 全局作用域
        • 函数作用域
        • 变量声明提前
        • 函数声明提前
    • `DOM`
      • 概述
      • 文档加载
      • `DOM`查询
        • 获取节点
        • 增删改节点
        • 修改元素样式
    • 事件
      • 常用事件
      • 事件对象
      • 事件的冒泡
      • 静态注册
      • 动态注册方式一
        • `onload`事件
        • `onclick`事件
        • `onblur`事件
        • `onchange`事件
        • `onsubmit`事件
        • 鼠标事件
      • 动态注册方式二
    • 正则表达式
      • 正则表达式的创建
      • 正则语法
      • 正则字符串方法
  • `jQuery`
    • 概述
      • 引入`jQuery`
      • `jQuery`核心函数
      • `jQuery`核心对象
      • 简单示例
    • 核心函数的基本使用
      • `jQuery(callback)`
      • `jQuery(selector,[context])`
      • `jQuery(html,[ownerDoc])`
      • `jQuery(array)`
    • `jQuery`对象的基本使用
      • `jQuery`对象的基本成员
      • 示例
      • `jQuery`工具方法
    • `jQuery`选择器
      • 基本选择器
        • 标签名选择器
        • `id`选择器
        • `class`选择器
        • 并集选择器
        • 交集选择器
        • 通配选择器
      • 层次选择器
        • 后代元素选择器
        • 子元素选择器
        • `prev+next`选择器
        • 兄弟选择器
      • 过滤选择器
      • 表单选择器
    • `jQuery-CSS`
      • 样式
      • 位置
        • 坐标位置
        • 滚动条位置
      • 尺寸
    • `jQuery`对象的增删改查
      • `jQuery`对象的过滤
      • `jQuery`对象的查询
      • `jQuery`对象的增删改
    • `jQuery`事件
      • 加载完成
      • 事件绑定
      • 事件参数
      • 事件委派
      • 常用事件
    • `jQuery`动画
      • 内置动画
      • 自定义动画

HTML

W3School/HTML5

基础

HTML文件的基本结构

  除了文档声明外，所有的HTML内容均在<html>标签中，html标签中的内容又分为<head>内容和body内容。

<!DOCTYPE html> <!-- 约束声明 -->
<html lang="zh_CN"> <!-- 整个页面内容的开始，lang属性指定支持的语言，还可以是lang="en" --><head> <!-- 头部信息，分为三部分：title标题，css样式表，JavaScript代码 --><meta charset="UTF-8"> <!-- 当前页面使用的字符集 --><title>标题</title> <!-- 标题内容显示在页面的头部标签上 --></head><body>Hello world</body> <!-- body标签中是页面的主体内容 -->
</html> <!-- 整个页面内容的结束 -->

标签

  标签分为单标签和双标签。标签也称为元素。

<!-- 单标签(自封闭标签) -->
<br/> <!-- 换行 -->
<hr/> <!-- 换行+水平线 --><!-- 双标签 -->
<body></body> <!-- 以<...>开头，</...>结尾 -->

属性

  HTML标签中的属性分为基本属性和事件属性。基本属性用来设置标签中内容的简单样式效果，事件属性可以设置事件响应后的代码。标签的属性值必须使用""包括。

<!-- bgcolor是基本属性，用于指定页面背景颜色 -->
<body bgcolor="#ff00ff">...</body>
<!-- onclick是事件属性，指定页面被单击后响应的代码；alert()是JavaScript中的警告函数 -->
<body onclick="alert('Hello world')">...</body>
<!-- 按钮示例 -->
<button bgcolor="#a9a9a9" onclick="alert('我是一个按钮')">按钮</button>

转义字符

  HTML中需要将类似<,>,&...等语法元素符号显示出来时，需要使用转义字符。常用的转义字符有：

< : &lt;
> : &gt;
& : &amp;
空格 : &nbsp;

  HTML中文字之间的空白字符被解析为一个空格，其中空白字符包括一个空格，多个空格和回车符。

元素之间的关系

<!--父元素：直接包含子元素的元素子元素：直接被父元素包含的元素祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素兄弟元素：拥有相同父元素的元素
-->
<div><!-- div是h1的父元素，h1是p的兄弟元素 --><h1>Hello world!</h1><!-- span是p的子元素 --><p><span>Hello world!</span></p>
</div>

常用标签

基本

<!-- 文本标签，可以设置文本的颜色，字体样式和字体大小；color指定字体颜色；face指定字体样式；size指定字体大小，取1~7之间的数字；注意：font标签已过时 -->
<font color="blue" face="youyuan" size="5">文本内容</font><!-- h1~h6是文本标题标签(h1为最大标题，h6为最小标题)；align设置标题文本的对齐方式，"left"为左对齐，默认情况；"center"为居中；"right"为右对齐 -->
<h1 align="left"><!-- 可以使用font标签控制标题的样式 --><font color="blue" face="youyuan" size="5">标题1</font>
</h1><!-- 超链接，，同样可以使用font标签设置文本样式；href属性指定跳转地址；target属性指定跳转的目标，"_self"指定在当前页面跳转，默认情况；"_blank"指定打开新页面跳转 -->
<a href="https://www.w3school.com.cn/html/index.asp" target="_self"><font color="blue" face="consolas" size="3">W3School</font>
</a><!-- 使用div标签包含内容可以省略换行符</br>，因为div标签默认独占一行 -->
<div><font face="youyuan">div标签默认独占一行</font></div><!-- span中的内容在同一行，即使内容长度超过显示区域的宽度，也显示缺省的一行 -->
<span><font face="youyuan">span标签中的内容在同一行</font></span><!-- 默认在内容的上方和下方均空出一行，如果已有空行就不再添加空行 -->
<p><font face="youyuan">p标签是段落标签</font></p>

列表

<!-- ul(unorder list) : 无序列表；type属性指定列表项前面的符号，"none"表示无符号 -->
<ul type="none"><!-- li(list item) : 列表项 --><li><a href="https://www.w3school.com.cn/html/index.asp" target="_self"><font color="blue" face="consolas" size="3">W3School</font></a></li><li><a href="https://github.com" target="_self"><font color="blue" face="consolas" size="3">Github</font></a></li><li><a href="https://gitee.com" target="_self"><font color="blue" face="consolas" size="3">Gitee</font></a></li>
</ul><!-- ol(order list) : 有序列表 -->
<ol><!-- li(list item) : 列表项 --><li>...</li><li>...</li><li>...</li>
</ol>

图片

<!-- 图片标签，将指定图片显示在网页中；src属性指定图片的资源路径，web中的路径分为相对路径和绝对路径：相对路径："."表示当前HTML文件所在目录，".."表示当前HTML文件所在目录的上一级目录；绝对路径：http://ip:port/工程名/资源路径；width和height属性设置图片的宽和高(像素)，border属性设置图片的边框宽度；alt指定当路径找不到时代替显示的文本 -->
<img src="./res/beauty.jpg" width="200" height="200" border="1" alt="资源不存在"/>

表格

<!-- 显示表格；weight和height指定表格的宽和高，border指定单元格边框宽度；align指定表格在页面中的对齐方式；cellspacing指定单元格之间的间距 -->
<table width="500" height="1000" border="1" align="center" cellspacing="2"><!-- tr是行标签 --><tr><!-- td是单元格标签，align属性指定单元格中内容的对齐方式；colspan指定此单元格的跨列，colspan="2"指定此单元格占据两个列的宽度；rowspan指定此单元格的跨行，rowspan="2"指定此单元格占据两个行的高度；bgcolor指定单元格背景颜色 --><td align="center" colspan="2" rowspan="2" bgcolor="#ff00ff">第一行第一列</td><td ...>第一行第二列</td><td ...>第一行第三列</td></tr><tr><td ...>第二行第一列</td><td ...>第二行第二列</td><td ...>第二行第三列</td></tr>...
</table>

嵌套页面

<!-- 嵌套页面：在本页面中嵌套另一个页面；name为嵌套页面起名，方便引用；src指定另一个页面的地址 -->
<iframe name="page_1" src="./anotherpage.html" width="500" height="500"></iframe><!-- 嵌套页面与超链接配合使用：点击超链接时页面跳转至嵌套页面中 -->
<iframe name="page_1" src="./anotherpage.html" width="500" height="500"></iframe>
<ul type="none"><li><!-- target指定嵌套页面中的name属性 --><a href="https://www.w3school.com.cn/html/index.asp" target="page_1"><font face="consolas">W3School</font></a></li><li><a href="https://github.com" target="page_1"><font face="consolas">Github</font></a></li><li><a href="https://gitee.com" target="page_1"><font face="consolas">Gitee</font></a></li>
</ul>

表单

<!-- 表单的作用是将用户输入的信息提交至服务器 -->
<form action="https://localhost:8080" method="get"><!-- input是输入框，type="text"指定输入的是文字类型，value指定默认填充文字 -->用户名称：<input type="text" value="请输入用户名称"/><br/><!-- type="password"指定输入的是密码属性，浏览器会使用掩码掩盖 -->用户密码：<input type="password"/><br/>确认密码：<input type="password"/><br/>性别：<!-- type="radio"指定输入的是单选框；name指定单选框组名，name相同的单选框为同一组，仅能选中组中的一个；checked指定单选框的默认选中状态 --><input type="radio" name="sex_radio" checked="checked"/>男<input type="radio" name="sex_radio"/>女<br/>技能：<!-- type="checkbox"指定输入类型为复选框 --><input type="checkbox" checked="checked"/>C<input type="checkbox"/>Java<input type="checkbox"/>C++<input type="checkbox"/>JavaScript<br/>国籍：<!-- select是下拉列表 --><select><!-- option为下拉列表选项，selected="selected"指定本项默认被选中 --><option selected="selected">--请选择国籍--</option><option>中国</option><option>美国</option><option>日本</option></select><br/>自我评价：<!-- 多行文本框，rows属性指定可以输入的行数；cols指定每行的字数；可以指定文本框中的默认内容 --><textarea rows="10" cols="20">请输入自我评价</textarea><br/><!-- 重置表单，以按钮的形式呈现，点击后将重置所有信息；value指定按钮中的文本 --><input type="reset" value="清除所有信息"/>提交：<!-- 提交表单，一按钮形式呈现，点击后将提交信息；value指定按钮中的文本 --><input type="submit" value="提交信息"/>选择照片：<!-- 可选择系统中的文件 --><input type="file"/><!-- 隐藏域，不被用户所见，由程序定义，提交表单是同样提交至服务器 --><input type="hidden"/>
</form>

  可以使用表格格式化表单：

<form action="https://localhost:8080" method="get"><h1 align="center"><font face="幼圆" size="5">基本信息</font></h1><table align="center"><tr><td align="left"><font face="幼圆">用户名称：</font><input type="text" value="用户名称" name="username"/></td></tr><tr><td align="left"><font face="幼圆">用户密码：</font><input type="password" name="password"/></td></tr><tr><td align="left"><font face="幼圆">确认密码：</font><input type="password"/></td></tr><tr><td align="left"><font face="幼圆">性别：</font><input type="radio" checked="checked" name="sex" value="boy"/><font face="幼圆">男</font><input type="radio" name="sex" value="girl"/><font face="幼圆">女</font></td></tr><tr><td align="left"><font face="幼圆">国籍：</font><select name="country"><option selected="selected" value="none"><font face="幼圆">--请选择国籍--</font></option><option value="cn"><font face="幼圆">中国</font></option><option value="usa"><font face="幼圆">美国</font></option><option value="jp"><font face="幼圆">日本</font></option></select></td></tr><tr><td align="left"><font face="幼圆">技能：</font><input type="checkbox" name="skill" value="c"/><font face="幼圆">C</font><input type="checkbox" name="skill" value="cpp"/><font face="幼圆">C++</font><input type="checkbox" name="skill" value="java"/><font face="幼圆">Java</font><input type="checkbox" name="skill" value="js"/><font face="幼圆">JavaScript</font></td></tr><tr><td align="left"><input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;<input type="reset" value="清除"/></td></tr></table>
</form>

form提交表单的属性：

  action指定提交地址，method指定请求方法，请求方法为get或post，默认为get。

<!-- action指定提交地址；method指定提交方法，提交方法为get或post，默认为get -->
<form action="https://localhost:8080" method="get">...
</form>

GET请求的特点

  GET请求的url格式：form标签的action属性+请求参数。请求参数是表单中具体输入的参数列表。

https://ip:port?name1=value&name2=value&...&namen=value

  注意：GET请求是不安全的，因为请求参数在浏览器上明文显示。GET请求也是有长度限制的，如果请求参数的ASCII字符超过100个，必须使用post请求。

POST请求的特点

  POST请求不会明文显示参数列表，仅仅显示主机名和端口号，因此相对于GET请求更加安全。POST请求理论上没有数据长度的限制。

表单的提交

  表单提交时，为避免输入内容被正确提交，需保证：

1.所有需要提交的表单内容均在<form></form>标签内
2.所有需要提交的表单项设置了name属性
3.需要提交的单选、下拉、复选应当设置value值

  文本输入的name=value属性：

<!-- 文本输入的value属性即为用户输入的文本请求参数：username=用户输入 -->
<input type="text" name="username"/>

  单选输入的name=value属性：

<!-- name为单选的组名，value为被选中选项中设置的value名请求参数：sex=boy -->
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女

  复选输入的name=value属性：

<!-- name为复选选项中的name，value为复选选项中的value 请求参数：skill=c&skill=cpp&skill=java&skill=js -->
<input type="checkbox" name="skill" value="c"/>C99
<input type="checkbox" name="skill" value="cpp"/>C++
<input type="checkbox" name="skill" value="java"/>Java
<input type="checkbox" name="skill" value="js"/>JavaScript

  下拉列表的name=value属性：

<!-- name为select标签中的name，value为被选中选项的value请求参数：country=cn -->
<select name="country"><option value="none">--请选择国籍--</option><option value="cn">中国</option><option value="usa">美国</option><option value="jp">日本</option>
</select>

CSS

W3School/CSS

基础

基本语法

选择器名{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}

HTML引用CSS的方式

  标签中罗列CSS:

<!-- 使用style属性；以下示例将div的边框宽度设置为1px，实线填充，边框颜色为红色；宽度设置为500px，高度设置为500px；border-radius指定边框圆角大小 -->
<divstyle="border: 1px solid red;width: 500px;height: 500px;border-radius: 50px">...</div>

  style标签中声明CSS:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- style标签中声明css --><style type="text/css">/* 设置页面中所有div元素的样式 */div{border: 1px solid red;width: 500px;height: 500px;border-radius: 50px;}</style></head><body><!-- 当前HTML文件body中的所有div的样式均为以上声明的样式 --><div>...</div></body>
</html>

  将样式写入CSS文件并在HTML中使用link标签引用：

style1.css

/* 设置页面中所有div元素的样式 */
div{border: 1px solid red;width: 500px;height: 500px;border-radius: 50px;
}

  HTML中引用：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 使用link标签引用CSS文件 --><link rel="stylesheet" type="text/css" href="style1.css"/></head><body><!-- 所有HTML文件body中的所有div的样式均为以上声明的样式 --><div>...</div><div>...</div><div>...</div></body>
</html>

样式的继承

  后代元素可以继承祖先元素的样式。例：

<divstyle="color:orange;font-size:50px;"><!-- 子元素继承父元素的样式 --><span>Hello world!</span><!-- 后代元素继承祖先元组的样式 --><p><span>Hello world!</span></p><!-- 后代元素继承祖先元组的样式 --><div><p><span>Hello world!</span></p></div>
</div>

  不是所有的样式都具有继承性，例如某些背景相关的样式不具有继承性。

选择器

  CSS选择器的作用是选择页面中符合条件的元素，并为它们设置样式。CSS选择器主要通过元素的标签名，id属性和class属性进行选择。

标签名选择器

  标签名选择器又称为元素选择器，用于同时设置页面中所有同一种标签的样式。元素选择器的基本语法：

标签名{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">/* 设置页面中所有div元素的样式 */div{border: 1px solid red;width: 500px;height: 500px;border-radius: 50px;}</style></head><body><div>...</div><div>...</div></body>
</html>

id选择器

  id选择器用于为id属性符合条件的元素设置样式。id选择器的基本语法为：

#选择器名{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">/* 选择器名使用"#+选择器名"的格式，第一种样式的div */#id001{border: 1px solid red;width: 500px;height: 500px;border-radius: 25px;}/* 选择器名使用"#+选择器名"的格式，第二种样式的div */#id002{border: 2px solid darkgray;width: 500px;height: 500px;border-radius: 30px;}</style></head><body><!-- 使用id属性引用，引用第一种样式 --><div id="id001">...</div><!-- 使用id属性引用，引用第二种样式 --><div id="id002">...</div></body>
</html>

  一个id选择器在一个页面中只能被同一种元素引用一次，如果希望页面中的同一种元素多次引用某种样式，则需要使用class选择器。

<div id="id002">...</div>
<div id="id002">...</div> <!-- 错误！一个id选择器在一个页面中只能被同一种元素引用一次!!! -->

class选择器

  class选择器用于为class属性符合条件的元素设置样式。一个class选择器在一个页面中可以被同一种元素引用多次。class选择器的基本语法：

.选择器名{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">/* 选择器名使用".+class名"的格式，第一种样式的div */.divclass1{border: 1px solid red;width: 500px;height: 500px;border-radius: 25px;}/* 选择器名使用".+class名"的格式，第二种样式的div */.divclass2{border: 2px solid darkgray;width: 500px;height: 500px;border-radius: 30px;}</style></head><body><!-- 使用class属性引用，引用第一种样式 --><div class="divclass1">...</div><!-- 使用class属性引用，引用第二种样式 --><div class="divclass2">...</div><!-- 一个class选择器在一个页面中可以被同一种元素引用多次 --><div class="divclass1">...</div></body>
</html>

组合选择器

  组合选择器可以同时声明多个选择器，且多个选择器中可以包含多种类型的选择器，这些选择器共用同一个样式，提高CSS代码的复用性。组合选择器的基本语法：

选择器名1,选择器名2,选择器名3...{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">/* 同时定义了标签名选择器:span,id选择器:id003和id004,class选择器:divclass3 */span,#id003,#id004,.divclass3{border: 2px solid #f8f8f8;width: 500px;height: 500px;border-radius: 50px;}</style></head><body><span>...</span><div id="id003">...</div><div id="id004">...</div><div class="divclass3">...</div></body>
</html>

复合选择器

  复合选择器用于对元素不同类型的选择器属性值做交集处理，只有不同类型的选择器属性值满足复合选择器的元素才能使用该样式。复合选择器的基本语法：

选择器名1选择器名2选择器名3{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">/* 只对标签名为div且class属性为"style1"的元素有效 */div.style1{color:green;border:2px;border-color:darkgray;}/* 只对标签名为p且class属性为"style2"的元素有效 */p.style2{color:purple;border:5px;border-color:black;}</style></head><body><!-- 有效 --><div class="style1">Hello world!</div><!-- 无效 --><div class="style2">Hello world!</div><!-- 无效 --><p class="style1">Hello world!</p><!-- 有效 --><p class="style2">Hello world!</p></body>
</html>

通配选择器

  通配选择器用于同时设置页面中所有元素的样式。通配选择器的基本语法：

*{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">/* 通配选择器 */*{color:green;border:2px;border-color:darkgray;}</style></head><body><h1>Hello world!</h1><a href="https://github.com" target="_self">Github</a><div>Hello world!</div></body>
</html>

后代元素选择器

  后代元素选择器用于为指定元素的指定后代元素设置样式。后代选择器的基本语法：

祖先选择器名 后代选择器名 后代选择器名...{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">/* 为div元素内的所有span元素设置样式 */div span{color:green;font-size:25px}/* 为id是"id001"的元素的p后代元素的id是"id002"的后代元素设置样式 */#id001 p #id002{color:purple;font-size:50px}</style></head><body><div><!-- 子元素也是后代元素!!! --><span>Hello world!</span><p><span>Hello world!</span></p></div><div id="id001"><p><span>Hello world!</span></p><p><span id="id002">Hello world!</span></p></div></body>
</html>

子元素选择器

  子元素选择器用于为指定元素的指定子元素设置样式。子元素选择器的基本语法：

父选择器名 > 子选择器名 > 子选择器名...{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">/* 为div元素的span子元素设置样式 */div > span{color:green;font-size:50px;}/* 为id是"id001"的元素的p子元素的id是"id002"的子元素设置样式 */#id001 > p > #id002{color:purple;font-size:50px;}</style></head><body><div><!-- 此span不是div的子元素 --><p><span>Hello world!</span></p><span>Hello world!</span></div><div id="id001"><p><span id="id002">Hello world!</span></p><p><span>Hello world!</span></p></div></body>
</html>

兄弟元素选择器

  兄弟元素选择器用于为指定元素的兄弟元素设置样式。兄弟元素选择器的基本语法：

/* 为指定元素的后一个元素设置样式 */
选择器名+后一个选择器名{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}/* 为指定元素的后边所有元素设置样式 */
选择器名~后一个选择器名{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">/* 为div后的第一个span设置样式 */div+span{color:red;}/* 为p后的所有span设置样式 */p~span{color:orange;}</style></head><body><div>Hello world!</div><span>Hello world!</span><p>Hello world!</p><span>Hello world!</span><span>Hello world!</span><span>Hello world!</span></body>
</html>

伪类选择器

  伪类选择器用于为元素的不同状态设置不同样式。伪类选择器的基本语法：

选择器名:元素状态{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">/* 超链接未被访问过的状态 */a:link{color:black;}/* 超链接已被访问过的状态 */a:visited{color:purple;}/* 鼠标移入的状态 */a:hover{color:green;}/* 被点击的状态 */a:active{color:yellow;}/* 按钮的常规状态 */.button1{background-color:gray;color:black;width:100px;height:50px;border:2px;border-color:darkgray;border-radius:5px;}/* 鼠标移入按钮的状态 */.button1:hover{background-color:lightgray;color:black;width:100px;height:50px;border:2px;border-color:gray;border-radius:5px;}/* 按钮被点击的状态 */.button1:active{background-color:lightgreen;color:black;width:100px;height:50px;border:2px;border-color:green;border-radius:5px;}</style></head><body><div><a href="https:github.com">Github</a></div><div><a href="https:gitee.com">Gitee</a></div><button class="button1">按钮</button></body>
</html>

  常用伪类状态：

/* 超链接未被访问过的状态 */
:link;
/* 超链接已被访问过的状态 */
:visited;
/* 鼠标移入的状态 */
:hover;
/* 被点击的状态 */
:active;
/* 获取焦点的状态 */
:focus;
/* 文本被选中的状态 */
::selection;

否定伪类选择器

  否定伪类选择器用于剔除某个元素，为其他元素设置样式。否定伪类选择器的基本语法：

选择器名:not(选择器名){属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">/* 为除了class是"style1"的其它所有div设置样式 */div:not(.style1){color:green;}/* 为除了id是"id001"的所有其它span设置样式 */span:not(#id001){color:purple;}.style1{color:orange;}#id001{color:blue;}</style></head><body><div>Hello world!</div><div class="style1">Hello world!</div><div>Hello world!</div><span>Hello world!</span><span id="id001">Hello world!</span><span>Hello world!</span></body>
</html>

属性选择器

  属性选择器用于为具有指定属性的元素设置样式。属性选择器的基本语法：

/* 只为设置了指定属性的元素设置样式 */
选择器名[属性名]{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}/* 只为指定属性为指定值的元素设置样式 */
选择器名[属性名="属性值"]{属性1:属性值;属性2:属性值;...属性n:属性值; /* 最后一个分号可以省略，但建议都加上 */
}

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">/* 只为设置了title属性的按钮设置样式；注意title为鼠标移入后的提示 */div[title]{background-color:purple;color:green;}/* 只为字体颜色为darkgray的元素设置样式 */ .div1[color="darkgray"]{font-size:50px;}</style></head><body><!-- 未设置title属性，样式无效 --><div>Hello world!</div><!-- 设置了title属性，样式有效 --><div title="Hello world!">Hello world!</div><!-- color属性值为"darkgray"，样式有效 --><div class="div1" color="darkgray">Hello world!</div><!-- color属性值不为"darkgray"，样式无效 --><div class="div1" color="green">Hello world!</div></body>
</html>

选择器的优先级

  当元素选择器选中多个样式时，为避免样式冲突，CSS设置了选择器的优先级：

选择器 举例 优先级
内联样式 <div style="color:orange">Hello</div> 1000
id选择器 #id001{color:orange;} 100
类和伪类选择器 .style1{color:orange;} 10
元素选择器 div{color:orange;} 1
通配选择器 *{color:orange;} 0
继承样式 — none

常用样式

div{/* 文本颜色，可以是#ff00ff的十六进制，也可以是rgb(255,0,255)的函数形式，也可以是red颜色名形式 */color: red;/* 字体大小 */font-size: 5px;/* 边框样式，有宽度，颜色和填充三个属性，填充可以选择：solid(实线),dotted(点画线),dashed(虚线) */border: 1px darkgray solid;/* 边框圆角 */border-radius: 25px;/* 块高度 */width: 500px;/* 块宽度 */height: 500px;/* 背景颜色 */background-color: darkgray;/* 块与父容器的边距；同时设置margin-left: auto和margin-right: auto可使块水平居中 */margin-left: auto;margin-right: auto;margin-top: auto;margin-bottom: auto;/* 文本对齐方式 */text-align: center;/* 超链接下划线颜色，选择none可去除下划线 */text-decoration: none;
}

JavaScript

W3School/JavaScript

概述

  JavaScript是弱类型语言，即其数据无需严格的声明定义，且数据类型可变。JavaScript无需额外的运行环境，与HTML嵌套使用。

第一种编写位置

  可以在HTML标签的属性值中编写JavaScript代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title></head><body><!-- button的onclick属性中定义JavaScript代码 --><button onclick="alert('Hello world!');alert('你点击了BUTTON1!!!');">BUTTON1</button><button onclick="alert('Hello world!');alert('你点击了BUTTON2!!!');">BUTTON2</button><!-- 超链接中定义JavaScript代码，注意超链接中必须加javascript: --><a href="javascript:alert('Hello world!');">Hello world!</a></body>
</html>

第二种编写位置

  可以在HTML文件中的head标签中直接编写JavaScript代码，使用这种方式，页面打开时就会立刻执行JavaScript代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 使用script标签包括JavaScript代码 --><script type="text/javascript">/* JavaScript提供的警告函数 */alert("Hello world!");</script> </head><body>...</body>
</html>

第三种编写位置

  可以将JavaScript代码编写到一个单独的文件中，使用时在HTML中引用即可。

helloworld.js

alert("Hello world!");

  HTML文件中使用script标签引入：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 使用src属性根据JavaScript文件的路径引入 --><script type="text/javascript" src="./helloworld.js"></script></head><body>...</body>
</html>

  script标签一旦引用外部JavaScript文件，就不能再编写JavaScript代码！如果需要在script标签内部编写代码，可以创建一个新的script标签。

<!-- 错误！script标签一旦引用外部JavaScript文件，就不能再编写JavaScript代码!!! -->
<script type="text/javascript" src="./helloworld.js">alert("hello coder!");</script><!-- 正确！如果需要在script标签内部编写代码，可以创建一个新的script标签 -->
<script type="text/javascript" src="./helloworld.js"></script>
<script type="text/javascript">alert("hello coder!");</script>

语法

变量

数据类型

/* 数值类型 */
number
/* 字符串类型 */
string
/* 对象类型 */
object
/* 布尔类型 */
boolean
/* 函数类型，函数类型变量可以指向一个函数，类似于C中的函数指针 */
function

变量定义

/* 定义变量不初始化 */
var 变量名;
/* 定义变量并初始化 */
var 变量名=初始化;

特殊常量

/* 所有未赋初值的变量值均为undefined */
undefined
/* 空值 */
null
/* Not A Number，非数字，非数值，例如字符串 */
NAN
/* 布尔运算值 */
true,false

关系运算

/* 与Java相同 */
>,<,>=,<=,!=/* 等于判断，判断字面值是否相等，不检查数据类型是否一致 */
==/* 全等于判断，判断字面值是否相等，检查数据类型是否一致 */
===/* 基本用法与Java一致，JavaScript中所有变量都可以当作布尔变量使用，当变量的值为0,null,undefined,""(空字符串)时，认为是false. */
&&,||,!/* 且运算中，表达式全为真时，返回最后一个表达式的值 */
var a=123;
var b=true;
var c="abc";
if(a&&b&&c) {/* 返回c="abc" */alert(a&&b&&c);
}/* 且运算中，表达式不全为真时，返回第一个为假的表达式的值 */
var a=true;
var b;
var c=false;
if(a&&b&&c) {alert("才怪!");}
else {/* 返回b=undefined */alert(a&&b&&c);
}/* 或运算中，表达式全为假时，返回最后一个表达式的值 */
var a=false;
var b=null;
var c;
if(!(a||b||c)) {/* 返回c=undefined */alert(a||b||c);
} /* 或运算中，表达式不全为假时，返回第一个为真的表达式的值 */
var a=false;
var b="abc";
var c=true;
if(a||b||c) {/* 返回b="abc" */alert(a||b||c);
}

数组

/* 定义方式 */
var a=[]; // 定义一个空数组
var b=[123,"abc",true]; // 定义数组并赋初值/* 赋值时如果下标超过定义时的长度，数组将自动扩容；读取时如果下标超过定义时的长度，不会影响数组的长度 */
a[10]=123; // 数组自动扩容，长度变为11
var c=a[20]; // 无影响/* 调用数组长度与Java一致 */
alert(a.length);

函数

定义方式

/********** 定义方式一 **********/function 函数名(形参列表) {函数体;
}/* 空参函数 */
function fun() {alert("Hello world!");
}
// 调用
fun();
// 空参函数语法上允许调用时传参
fun("abc",123,true);/* 有参函数，形参无需使用var声明 */
function fun(a,b) {alert("a=" + a + ",b=" + b);
}
// 调用
fun(123,"abc");
// 有参函数语法上允许调用时不传参
fun();/* 有返回值的函数，返回无需使用var声明 */
function fun(a,b,c) {var x=2*a;var y=b/3;var z=c+5;return x*y/z;
}
// 调用
alert(fun(500,80,77));/********** 定义方式二 **********/var 函数名 = function(形参列表) {函数体;
}/* 有返回值的函数 */
var fun = function(a,b,c) {var x=2*a;var y=b/3;var z=c+5;return x*y/z;
}
// 调用
alert(fun(500,80,77));

  JavaScript不允许函数重载，强制重载函数，则会覆盖上一次定义。

隐形参数arguments

  JavaScript的函数内部存在隐形参数，因此定义函数时不定义形参列表，函数也可以接收传入的参数，类似于Java中的可变长形参。函数内部的隐形参数实质是一个名为arguments的数组，使用下标调用即可。

/* 与Java相同，字符串与其它类型相加时，会做字符串拼接 */
function fun() {var str="";for(var i=0;i<arguments.length;i++) {str+=arguments[i];}return str;
}
// 调用
alert(fun("Hello world!",123,true));/* 使用typeof()可以判断数据类型 */
function fun() {var sum=0;for(var i=0;i<arguments.length;i++) {if(typeof(arguments[i]) != "number") {continue;}sum+=arguments[i];}return sum;
}
// 调用
alert(fun(1,2,"abc",3,4,5,6,7,8,9));

匿名函数

  匿名函数是一种可以不声明函数名的函数。匿名函数在原地调用，调用后即废弃，又称为立即调用函数。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><script type="text/javascript">/* 使用()将匿名函数包括，使用并列的()可以传参 */(function() {alert("Hello world!");})();/* 使用()将匿名函数包括，使用并列的()可以传参 */(function(arg1,arg2) {alert(arg1+arg2);})("Hello world!",123);/* 使用()将匿名函数包括，使用并列的()可以传参 */(function() {for(var i=0;i<arguments.length;i++) {alert(arguments[i]);}})("Hello world!",123,true);</script></head><body>...</body>
</html>

函数变量

  使用var或function声明的函数以及普通变量均可以动态地指向不同的函数，从而动态地改变函数的功能。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><script type="text/javascript">var a = "Hello world!"var b = function(msg) {alert("b : " + msg);}function c(msg) {alert("c : " + msg);}function d(msg) {alert("d : " + msg)}a = b;a("Hello world!"); // b : Hello world!b = c;b("Hello world!"); // c : Hello world!c = d;c("Hello world!"); // d : Hello world!d = "Hello world!";alert(d); // Hello world!</script></head><body>...</body>
</html>

对象

定义方式创建对象

  此方式每创建一个新对象都需要定义对象的结构。

/********** 定义方式一 **********//* 定义一个新对象，不包含任何属性和方法 */
var 对象名=new Object();/* 添加一个属性 */
对象名.属性名=值;/* 添加一个方法 */
对象名.函数名=function(形参列表){函数体;
}// 示例
/* 创建新对象 */
var employee=new Object();
/* 添加属性 */
employee.id;
employee.name;
employee.departmentId;
/* 添加方法 */
employee.getId=function() {return this.id;}
employee.setId=function(id) {this.id=id;}
employee.getName=function() {return this.name;}
employee.setName=function(name) {this.name=name;}
employee.getDepartmentId=function() {return this.departmentId;}
employee.setDepartmentId=function(departmentId) {this.departmentId=departmentId;}// 对象的使用
employee.setName("Tony");
alert(employee.getName());/********** 定义方式二 **********//* 成员之间使用","隔开，最后一个成员末尾不需要加"," */
var 对象名={属性1:值,属性2:值,属性3:值,函数名1:function(形参列表) {函数体;},函数名2:function(形参列表) {函数体;},函数名3:function(形参列表) {函数体;}
}// 示例
var employee={/* 属性必须初始化 */id : null,name : null,departmentId : null,getId : function() {return this.id;},setId : function(id) {this.id = id;},getName : function() {return this.name;},setName : function(name) {this.name = name;},getDepartmentId : function() {return this.departmentId;},setDepartmentId : function(departmentId) {this.departmentId = departmentId;}
}
// 调用
employee.setName("Tony");
alert(employee.getName());

工厂方式创建对象

  需要大量结构相同的对象时，可以使用工场方式创建对象。

/* 定义工厂 */
function createEmployee(id,name,departmentId) {var employee = new Object();employee.id = id;employee.name = name;employee.departmentId = departmentId;employee.toString = function() {return "id : " + id + ",name : " + name + ",department id : " + departmentId;}/* 返回对象 */return employee;
}/* 使用工厂创建对象 */
var employee1 = createEmployee(1,"Tony",1);
alert(employee1); // 调重写的toString()
var employee2 = createEmployee(2,"Steven",2);
alert(employee2); // 调重写的toString()

构造函数方式创建对象

  定义方式和工厂方式创建的对象均为Object类型，如需自定义对象类型，需使用构造函数。JavaScript中，构造函数也被称为类。

/* 定义构造函数 */
function Employee(id,name,departmentId) {/* 类中的所有成员使用this关键字添加或访问 */this.id = id;this.name = name;this.departmentId = departmentId;this.toString = function() {return "id : " + id + ",name : " + name + ",department id : " + departmentId;}
}/* 使用构造函数创建对象，注意使用new关键字 */
var employee = new Employee(1,"Tony",1);
alert(employee); // 调重写的toString()

  构造函数中必须使用this添加或访问自身类的成员。
  构造函数与普通函数调用的区别在于构造函数需要使用new关键字调用。当以构造函数形式调用时，构造函数中的this为本类对象；当以普通函数形式(不使用new调用)调用时，this为window对象。

构造函数改良

  使用构造函数创建新对象时，系统会为每个对象中的方法分配新的内存空间，然而所有对象中的方法结构完全一致，导致了不必要的内存浪费。所有对象可以引用同一个外部方法，创建新对象时，系统无需再为方法分配新的内存空间，这种方式可以极大的改善网页的性能。

/* 定义外部函数 */
function getId(employee) {return employee.id;}
function getName(employee) {return employee.name;}
function getDepartmentId(employee) {return employee.departmentId;}/* 定义构造函数 */
function Employee(id,name,departmentId) {this.id = id;this.name = name;this.departmentId = departmentId;/* 引用外部函数 */this.getId = getId;this.getName = getName;this.getDepartmentId = getDepartmentId;
}/* 创建新对象 */
var e = new Employee(1,"Tony",1);
/* 调用外部函数 */
alert(e.getId(e) + "," + e.getName(e) + "," + e.getDepartmentId(e));

原型对象

  同一种类的所有实例都包含一个相同的属性：原型对象。原型对象是同一种类的实例公有内存空间的地址引用。可以将类的公有成员添加在原型对象中以节省内存空间。普通函数和构造函数都有原型对象，但构造函数的原型对象意义更加重大。
  原型对象有两种访问方法：通过构造函数名调用prototype属性；通过构造函数创建的对象调用__proto__属性。两种方式调用的均为原型对象，区别仅在于调用方式不同。
  对象调用成员时，先在对象自身中寻找目标成员，有则直接调用；没有则在原型对象中寻找，有则直接调用；原型对象中也没有，则在原型对象的原型对象(__proto__.__proto__)中寻找，有则直接调用；以此类推，最终会在Object的原型对象中寻找，依然没有，返回undefined.

/********** 原型对象调用方式一 **********/function Employee(id,name,departmentId) {this.id = id;this.name = name;this.departmentId = departmentId;/* 使用构造函数名调用prototype属性 */Employee.prototype.getId = function() {return this.id;}Employee.prototype.getName = function() {return this.name;}Employee.prototype.getDepartmentId = function() {return this.departmentId;}
}/* 创建新对象 */
var e = new Employee(1,"Tony",1);
/* 先在对象自身中寻找目标成员，如果有则直接调用；如果没有则在原型对象中寻找，原型对象中有则直接调用 */
alert(e.getId() + "," + e.getName() + "," + e.getDepartmentId());/********** 原型对象调用方式二 **********/function Employee(id,name,departmentId) {this.id = id;this.name = name;this.departmentId = departmentId;/* 使用构造函数创建的对象调用__proto__属性 */this.__proto__.getId = function() {return this.id;}this.__proto__.getName = function() {return this.name;}this.__proto__.getDepartmentId = function() {return this.departmentId;}
}/* 创建新对象 */
var e = new Employee(1,"Tony",1);
/* 先在对象自身中寻找目标成员，如果有则直接调用；如果没有则在原型对象中寻找，原型对象中有则直接调用 */
alert(e.getId() + "," + e.getName() + "," + e.getDepartmentId());

包装类

  JavaScript提供了基本类型的包装类，可用于创建基本类型数据，也可用于基本类型数据的转换。

/* 创建基本类型数据 */
var num = new Number(12345);
alert(num);
var str = new String("Hello world!");
alert(str);
var boo = new Boolean(true);
alert(boo);/* 基本数据类型的转换 */
var num = new Number("3.1415");
alert(num*2); // 6.283
var str = new String(123456);
alert(str); // "123456"
var boo = new Boolean("10>5");
alert(boo); // true

作用域

全局作用域

  全局作用域在HTML页面打开时创建，在HTML页面关闭时销毁。直接编写在script标签中或由script标签引入的JavaScript代码均在全局作用域中。
  全局作用域中有一个特殊的对象:window.window对象代表一个浏览器窗口，在HTML页面打开时由浏览器创建。在全局作用域中自定义的变量、函数、对象等都会作为window对象的成员保存。
  全局成员可以在任何作用域中使用window对象访问；当前作用域不存在与全局作用域中同名成员时，也可以使用成员名直接访问全局成员；在全局作用域中还可以使用this访问全局成员。

<script type="text/javascript">/* 全局自定义变量 */var a = "Hello world!";/* 全局自定义函数 */function myalert(msg) {alert("myalert : " + msg);}/* 全局自定义对象 */var employee = new Object();employee.id = 1;employee.name = "Tony";employee.departmentId = 2;employee.print = function() {alert(this.id + " " + this.name + " " + this.departmentId);}/* 使用window调用全局成员 */alert(window.a);window.myalert("Hello world!");window.employee.print();</script>

函数作用域

  函数作用域在函数调用时创建，在函数执行完毕后销毁。函数作用域中可以访问全局作用域中的成员，全局作用域中不可访问函数作用域中的成员。
  与Java相同，函数作用域中对变量的访问遵循就近原则。访问一个变量时，先在自身作用域中寻找，如果自身作用域中不存在，则向上一级作用域寻找。

变量声明提前

  使用var声明的变量具有变量声明提前特性，即可以在var声明变量之前调用该变量。

a = "Hello world!";
alert(a); // 提示"Hello world!"
var a = "Hello coder!";

函数声明提前

  使用function声明的函数具有函数声明提前特性，即可以在函数声明之前调用函数。使用var声明的函数不具有函数声明提前特性。

alert(myalert1("Hello world!")); // 正确运行，function声明的函数具有函数声明提前特性
alert(myalert2("Hello world!")); // undefined，var声明的函数不具有函数声明提前特性
function myalert1(msg) {alert("myalert : " + msg);
}
var myalert2 = function(msg) {alert("myalert : " + msg);
}

DOM

概述

  DOM(Document Object Model)的作用是使用JavaScript代码操作网页，将网页中的所有部分都转换为JavaScript对象，使用模型表示对象之间的关系，方便获取对象。
  节点(Node)是构成HTML文档的最基本单元。HTML文档本身为文档节点，HTML中的标签为元素节点，标签中的属性为属性节点，标签中的文本内容为文本节点。节点的类型不同，属性和方法也不尽相同。

node nodeName nodeType nodeValue
文档节点 #document 9 null
元素节点 标签名 1 null
属性节点 属性名 2 属性值
文本节点 #text 3 文本内容

  浏览器已经提供了文档节点，即document对象。document对象代表整个HTML文档，是window对象的属性，可以在网页中直接使用。

<body><button id="btn1">按钮1</button><button id="btn2">按钮2</button><script type="text/javascript">/* 使用window对象获取document对象 */var btn1 = window.document.getElementById("btn1");/* window代表全局作用域，可以直接省略 */var btn2 = document.getElementById("btn2");/* 获取属性值 */alert(btn1.innerHTML);/* 修改属性值 */btn2.innerHTML = "BUTTON2";</script>
</body>

文档加载

  HTML文档从上往下加载，只有文档加载完成才能获取文档中的所有内容。HTML文档加载到末尾时就完成了页面的加载，将JavaScript代码放在HTML文档的末尾可以获取页面中的所有内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title></head><body><button id="btn1">按钮1</button><button id="btn2">按钮2</button><!-- JavaScript代码放在文档末尾 --><script type="text/javascript">var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");/* 事件的动态注册，onclick()是按钮点击事件响应函数 */btn1.onclick = function() {alert(btn1.innerHTML);}btn2.onclick = function() {btn2.innerHTML = "BUTTON2";}</script></body>
</html>

  JavaScript的事件机制提供了页面加载完成事件。注册页面加载事件，可以在页面加载完成事件响应代码中获取页面中的所有内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><script type="text/javascript">/* 注册onload事件 */window.onload = function() {var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");/* 事件的动态注册，onclick()是按钮点击事件响应函数 */btn1.onclick = function() {alert(btn1.innerHTML);}btn2.onclick = function() {btn2.innerHTML = "BUTTON2";}}</script></head><body><button id="btn1">按钮1</button><button id="btn2">按钮2</button></body>
</html>

DOM查询

获取节点

/* 通过id获取一个元素对象，由document对象调用 */
getElementById(id);
/* 通过标签名获取一组元素对象，由document对象调用 */
getElementsByTagName(tagName);
/* 通过name属性获取一组元素对象，由document对象调用 */
getElementsByName(name);
/* 通过class属性(CSS选择器名)获取多个元素节点，由document对象调用 */
getElementsByClassName(className);
/* 通过class属性(CSS选择器名)获取一个元素节点，由document对象调用。如果有多个节点满足条件，返回第一个 */
querySelector(classSelector);/* 通过标签名获取一组子元素对象，由父节点调用 */
getElementsByTagName(tagName);
/* 属性，获取当前节点下的所有子节点，由父节点调用 */
childNodes;
/* 属性，获取当前节点下的第一个子节点，由父节点调用 */
firstChild;
/* 属性，获取当前节点下的最后一个子节点，由父节点调用 */
lastChild;/* 属性，获取当前节点的父节点，由子节点调用 */
parentNode;
/* 属性，获取当前节点的前一个兄弟节点，由兄弟节点调用 */
previousSibling;
/* 属性，获取当前节点的后一个兄弟节点，由兄弟节点调用 */
nextSibling;/* 属性，获取当前标签中的文本内容，由当前节点调用 */
innerHTML;

增删改节点

/* 创建元素节点，传入参数指定标签名，由document对象调用 */
createElement(tagName);
/* 创建文本节点，传入参数指定文本内容，由document对象调用 */
createTextNode(text);/* 把新的节点添加到指定节点中，由父节点调用 */
appendChild(child);
/* 删除子节点，由父节点调用 */
removeChild(child);
/* 替换子节点(使用newChild替换refChild)，由父节点调用*/
replaceChild(newChild,refChild);
/* 在指定子节点之前插入子节点(将newChild插入到refChild之前)，由父节点调用 */
insertBefore(newChild,refChild);

修改元素样式

  使用元素节点对象的style属性可动态修改元素的内联样式。内联样式有较高的样式优先级，可以覆盖选择器样式，动态修改内联样式会立即生效。

/* 基本语法：元素对象.style.样式名 */
alert(btn.style.backgroundColor);
btn.style.backgroundColor = "green";
btn.style.width = "20px";
btn.style.height = "10px";

  使用style属性获取的是使用CSS选择器设置的样式，CSS选择器设置的样式不一定与元素正在展示的样式相同，因为元素的样式可能被动态改变。获取元素正在展示的样式，需使用getComputedStyle()方法。

/* 获取元素正在展示的样式，该方法由window对象调用；参数1传入目标元素对象，参数2传入一个伪元素，一般传null;返回包含元素正在展示的样式信息的对象 */
var obj = getComputedStyle(btn1,null);
alert(obj.width);

事件

常用事件

  事件是指用户在与页面进行交互时页面的响应。常用的事件有：

onload(加载完成事件) : 页面加载完成之后的响应，用于做页面初始化
onclick(单击事件) : 点击按钮后的响应
onblur(失去焦点事件) : 输入框失去焦点之后的响应，常用于验证输入完成后的内容是否合法
onchange(内容改变事件) : 下拉框或输入框内容改变之后的响应
onsubmit(表单提交事件) : 用户点击提交表单时的响应，常用于提交表单之前验证所有内容是否合法
onmousedown(鼠标按下事件) : 鼠标左键按下后的响应
onmouseup(鼠标松开事件) : 鼠标左键松开后的响应
onmousemove(鼠标移动事件) : 鼠标移动后的响应

  事件需要注册才能正确的响应，事件的注册指为事件指定响应代码。事件的注册分为静态注册和动态注册，静态注册指使用HTML标签的事件属性直接指定响应代码；动态注册指使用HTML标签的DOM对象指定响应代码。

事件对象

  当事件的响应函数被触发时，浏览器会将一个事件对象作为实参传入响应函数中。在响应函数内部，可以通过事件对象获取相关事件的一切信息，例如鼠标移动事件中的坐标信息等。

事件的冒泡

  在多层嵌套元素内部触发事件时，事件会向上传导，即子元素的事件会触发父元素的事件，这种现象称为事件的冒泡。如果不希望事件冒泡现象发生，可以设置内层元素的cancelBubble属性为true.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><script type="text/javascript">window.onload = function() {btn = document.getElementById("btn");btn.onclick = function(event) {alert("button is clicked");/* 禁止事件传导至btn的上层 */event.cancelBubble = true;}div = document.getElementById("div");div.onclick = function() {alert("div is clicked");}body = document.getElementById("body");body.onclick = function() {alert("body is clicked");}}</script></head><body id="body"><div id="div"><!-- btn的事件被触发后，div和body的事件也会被触发；如果不希望事件传导至div，可将btn事件对象的cancelBubble属性设置为true;如果希望事件传导至div但不传导至body，可将body事件对象的cancelBubble属性设置为true --><button id="btn">button</button></div></body>
</html>

静态注册

  静态注册即直接使用相应的事件属性注册响应函数。由于静态注册用法简单且存在很多缺陷，静态注册在实际开发中不常使用。onsubmit事件的静态注册具有特殊性，在此仅介绍具onsubmit事件的静态注册。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><script type="text/javascript">/* 提交表单的响应返回true,表单被成功提交；返回false,表单不提交 */function onSubmit() {alert("Are you sure to submit?");return true;}</script></head><body><!-- 注意onsubmit事件在form标签中指定；如果希望根据情况可能阻止表单提交，需要在响应函数前加"return"，响应函数返回false则表单提交被阻止 --><form action="https://localhost:8080" method="post" onsubmit="return onSubmit();"><input type="submit" value="提交表单"/></form></body>
</html>

动态注册方式一

onload事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><script type="text/javascript">/* onload的动态注册是固定写法；onload()类似与Java中的main()，所有操作都应该在onload()中调用 */window.onload = function() {alert("Hello world!");}</script></head><body>...</body>
</html>

onclick事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><script type="text/javascript">window.onload = function() {/* 使用document对象获取元素 */var btn1 = document.getElementById("btn001");var btn2 = document.getElementById("btn002");/* 注册事件 */btn1.onclick = function() {alert("You clicked the BUTTON1!");}btn2.onclick = function() {alert("You clicked the BUTTON2!");}}</script></head><body><button id="btn001">BUTTON1</button><button id="btn002">BUTTON2</button></body>
</html>

onblur事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><script type="text/javascript">window.onload = function() {/* 获取元素 */var input1 = document.getElementById("ipt001");/* 注册事件 */input1.onblur = function() {alert("You finished edit!");}}</script></head><body>用户名:<input type="text" id="ipt001"/></body>
</html>

onchange事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><script type="text/javascript">window.onload = function() {/* 获取元素 */var select1 = document.getElementById("slct001");/* 注册事件 */select1.onchange = function() {/* 获取select被选中的索引 */var index = select1.selectedIndex;/* 获取options集合中对应索引的value */var value = select1.options[index].valueif(value === "none") {alert("请选择国籍!!!");}else if(value === "cn") {alert("你是中国人!!!");}else if(value === "usa") {alert("You are American!!!");}else if(value === "jp") {alert("あなたは日本人です!!!");}}}</script></head><body>请选择国籍：<select id="slct001" name="country"><option selected="selected" value="none">--请选择国籍--</option><option value="cn">中国</option><option value="usa">美国</option><option value="jp">日本</option></select></body>
</html>

onsubmit事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><script type="text/javascript">window.onload = function() {var submit1 = document.getElementById("submit1");submit1.onsubmit = function() {alert("提交成功!!!");/* 返回true,表单成功提交；返回false,表单不提交 */return true;}}</script></head><body><!-- 注意：onsubmit的id在form标签上设置 --><form id="submit1" action="https://localhost:8080" method="post"><input type="submit" value="提交表单"/></form></body>
</html>

鼠标事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><script type="text/javascript">window.onload = function() {var div = document.getElementById("div");/* 按下鼠标事件 */div.onmousedown = function(event) {/* clientX和clientY用于获取事件触发时鼠标的坐标位置 */div.innerHTML = "X:" + event.clientX + "<br/>Y:" + event.clientY; alert("你按下了鼠标！");}/* 松开鼠标事件 */div.onmouseup = function(event) {div.innerHTML = "X:" + event.clientX + "<br/>Y:" + event.clientY; alert("你松开了鼠标！");}/* 移动鼠标事件 */div.onmousemove = function(event) {div.innerHTML = "X:" + event.clientX + "<br/>Y:" + event.clientY; }}</script></head><body><div id="div">X:0<br/>Y:0</div></body>
</html>

  使用类似于onload内建注册函数的方式动态注册事件只能对一个事件绑定一个响应，绑定多个则最后绑定的响应逻辑会覆盖之前绑定的。

动态注册方式二

  使用addEventListener()方法动态注册可为一个事件注册多个响应函数。

/* 为元素添加事件监听器，由元素对象调用；参数1指定事件字符串("click","submit"...)；参数2传入响应函数；参数3传入布尔值，指定是否在捕获阶段触发事件，一般传false */
addEventListener(eventString,eventListener,useCapature);
btn1.addEventListener("click",function(){alert("you clicked BUTTON1!");
},false);

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><script type="text/javascript">window.onload = function() {var btn = document.getElementById("btn");/* 添加onclick事件响应 */btn.addEventListener("click",function(){alert("You clicked ME!");},false);/* 添加onclick事件响应 */btn.addEventListener("click",function(){alert("你点击了我！");},false);}</script></head><body><button id="btn">button</button></body>
</html>

  如果为一个元素的同一个事件绑定了多个响应函数，事件发生时，多个响应函数按照绑定顺序执行。

正则表达式

  正则表达式用于定义一些字符串规则，计算机可以根据正则表达式判断目标字符串是否符合规则。

正则表达式的创建

/* 使用构造函数创建，参数1传入正则表达式字符串；参数2传入匹配模式字符串，可以取值："i"(忽略大小写)，"g"(全局匹配模式) */
var reg = new RegExp(str1,str2);
/* 判断str是否符合规则 */
reg.test(str);/* 使用字面值创建，str1为正则表达式，str2为匹配模式 */
var reg = /str1/str2;
/* 判断str是否符合规则 */
reg.test(str);

正则语法

/* 判断字符串中是否包含指定字符串 *//* 简单包含 : 判断指定字符串中是否包含"abcd" */
var reg = /abcd/;
alert(reg.test("123abcdef")) // true
alert(reg.test("abdcef")); // false/* 或包含 : 判断指定字符串中是否包含"abc"或"bcd"或"cde" */
var reg = /abc|bcd|cde/;
alert(reg.test("123abc121")); // true
alert(reg.test("123bcde")); // true
alert(reg.test("abdc")); // false/* [字符列表]代表一个字符，其值为字符列表中的某一个字符 *//* 判断字符串中是否包含"aac"或"abc"或"acc" */
var reg = /a[abc]c/;
alert(reg.test("123adc")); // false
alert(reg.test("123aac")); // true/* 判断是否包含a~z之间的小写字母 */
var reg = /a[a-z]c/;
alert(reg.test("a1c")); // false
alert(reg.test("aec")); // true/* 判断是否包含A~Z之间的大写字母 */
var reg = /A[A-Z]C/;
alert(reg.test("A1C")); // false
alert(reg.test("AEC")); // true/* 判断是否包含不是0~9之间的字符 */
var reg = /[^0-9]/;
alert(reg.test("123abc")); // true
alert(reg.test("123")); // false/* [^字符列表]代表一个字符，其值为除了字符列表中的字符 *//* 判断是否不包含a[]c,[]中是除了a,b,c以外的字符 */
var reg = /a[^abc]c/;
alert(reg.test("123aac")); // false
alert(reg.test("123aacaxc")); // true/* {n}是字符量词，指定前一个内容连续出现n次，多字符内容需使用()包括*//* 判读是否包含aaaaa */
var reg = /a{5}/;
alert(reg.test("aaaaabcd")); // true
/* 判断是否包含abbb */
reg = /ab{3}/;
alert(reg.test("ababab")); // false
alert(reg.test("abbb")); // true
/* 判断是否包含abcabcabc */
reg = /(abc){3}/;
alert(reg.test("abcabcabc")); // true/* {m,n}指定前一个内容连续出现m~n次，多字符内容需使用()包括 *//* {1,3}表示前一个内容连续出现1~3次 */
var reg = /ab{1,3}c/;
alert(reg.test("ac")); // false
alert(reg.test("abc")); // true
alert(reg.test("abbc")); // true
alert(reg.test("abbbc")); // true
alert(reg.test("abbbbc")); // false/* {m,}指定前一个内容连续出现m次或以上，多字符内容需使用()包括 *//* {2,}表示前一个内容连续出现2次或以上 */
var reg = /ab{2,}c/;
alert(reg.test("abc")); // false
alert(reg.test("abbc")); // true
alert(reg.test("abbbbbbc")); // true/* +指定前一个内容至少连续出现1次，多字符内容需使用()包括 */var reg = /ab+c/;
alert(reg.test("ac")); // false
alert(reg.test("abc")); // true
alert(reg.test("abbc")); // true
alert(reg.test("abbbc")); // true
reg = /(ab)+c/;
alert(reg.test("ac")); // false
alert(reg.test("abc")); // true
alert(reg.test("ababababc")); // true/* *指定前一个内容连续出现0次或多次，多字符内容需使用()包括 */var reg = /ab*c/;
alert(reg.test("ac")); // true
alert(reg.test("abc")); // true
alert(reg.test("abbbc")); // true/* ?指定前一个内容连续出现0次或1次，多字符内容需使用()包括 */var reg = /ab?c/;
alert(reg.test("ac")); // true
alert(reg.test("abc")); // true
alert(reg.test("abbc")); // false/* ^指定字符串以指定内容开头 *//* 判断字符串是否以abcd开头 */
var reg = /^abcd/;
alert(reg.test("abdc")); // false
alert(reg.test("abcdxyz")); // true/* $指定字符串以指定内容结尾 *//* 判断字符串是否以abcd结尾 */
var reg = /abcd$/;
alert(reg.test("abcdxyzbacd")); // false
alert(reg.test("xyzabcd")); // true/* ^$指定字符串与指定内容完全一致 *//* 判断字符串是否为abc */
var reg = /^abc$/;
alert(reg.test("abcabcabc")); // false
alert(reg.test("abc")); // true/* ^|$指定字符串以指定内容开头或以指定内容结尾 *//* 判断字符串是否以abc开头或结尾 */
var reg = /^abc|abc$/;
alert(reg.test("abc")); // true
alert(reg.test("abcabcabc")); // true
alert(reg.test("abcxyzabc")); // true/* .表示任意字符，除了换行符和行结束符 *//* 判断字符串中是否包含字符 */
var reg = /./;
alert(reg.test("abc")); // true
alert(reg.test("^%$*&*&bdajhdbja")); // true/* 由于.是正则语法保留字符，如需检查"."，需使用\.转义字符 *//* 判断字符串中是否包含"." */
var reg = /\./;
alert(reg.test("123")); // false
alert(reg.test("123.456")); // true/* \w代表一个字符，值为任意数字、字母和_(下划线)，相当于[A-z0-9_]；\W代表一个字符，值为除了数字、字母和_(下划线)以外的字符，相当于[^A-z0-9_]\d代表一个字符，值为任意数字，相当于[0-9]；\D代表一个字符，值为除了数字以外的字符，相当于[^0-9]\s代表空格；\S代表一个字符，值为除了空格以外的字符；\b代表一个字符，值为单词边界；\B代表一个字符，值为除了单词边界以外的字符 *//* 判断字符串是否包含数字、字母和_(下划线) */
var reg = /\w/;
alert(reg.test("@#$%^&*()")); // false
alert(reg.test("@#$%abc123_^&*()")); // true
/* 判断字符串是否包含除数字、字母和_(下划线)以外的字符 */
reg = /\W/;
alert(reg.test("123456_abc")); // false
alert(reg.test("123456_abc@#$&%^")); // true/* 判断字符串是否包含数字 */
reg = /\d/;
alert(reg.test("abcdef")); // false
alert(reg.test("abc123def")); // true
/* 判断字符串是否包含除数字以外的字符 */
reg = /\D/;
alert(reg.test("0123456789")); // false
alert(reg.test("123abc")); // true/* 判断字符串是否包含空格 */
reg = /\s/;
alert(reg.test("asdajbj")); // false
alert(reg.test("dbajdkaj  dahdakjsbd ")); // true
/* 判断字符串是否包含除空格以外的字符 */
reg = /\S/;
alert(reg.test("          ")); // false
alert(reg.test("dadl dalkndas")); // true/* 判断字符串是否包含单词"test" */
reg = /\btest\b/;
alert(reg.test("thisisatestforregexp!")); // false
alert(reg.test("this is a test for regexp!")); // true
/* 判断字符串是否包含除单词"test"以外的"test"字符串 */
reg = /\Btest\B/;
alert(reg.test("thisisatestforregexp!")); // true
alert(reg.test("this is a test for regexp!")); // false

正则字符串方法

/* 判断指定字符串是否符合指定正则语法，返回true/false */
test(str);// 例：判断字符串是否是abc(c或d或e)fgh
var reg = /^abc[cde]fgh$/;
alert(reg.test("abcdfgh")); // true/* 以指定字符串为分割，将字符分割子字符串并存储在数组中 */
split(splitstr);// 例：使用","分割指定字符串
var str = "100,122,255,300";
var result = str.split(","); // 分割为["100"]["122"]["255"]["300"]
for(var i=0;i<result.length;i++) {alert(result[i]);}
// 例：使用正则表达式指定的字符串分割指定字符
var str = "100abc122bcd255cde300";
var result = str.split(/\D\D\D/); // 分割为["100"]["122"]["255"]["300"]
for(var i=0;i<result.length;i++) {alert(result[i]);}/* 查找字符串中是否包含指定子字符串，如果包含，返回子字符串第一次出现的索引，如果不包含，返回-1 */
search(substr);// 例：查找字符串中是否包含子字符串
var str = "Hello World! Hello World!";
var result = str.search("World"); // "World"第一次在索引6出现
alert(result);
// 例：查找字符串中是否包含正则表达式指定的字符串
var str = "dajdk84483789@#$";
var result = str.search(/[1-5]\d\d\d[^0-9]/); // "3789@"的索引为9
alert(result);/* 从指定字符串中提取匹配字符串，默认情况只返回第一个匹配结果；如果开启了全局匹配，将匹配到的多个结果封装为数组；如果没有匹配到字符串，返回null */
match(matchstr);// 例：提取字符串中的第一个"Hello World!"
var str = "abdh4q420#%$%Hello World!$*)(*(&))";
var result = str.match("Hello World!"); // "Hello World!"
alert(result);
// 例：提取字符串中满足正则表达式的字符串
var str = "dajdk84483789@#$&%%&*&*&^&5000adasbdj4123--__";
var result = str.match(/[1-5]\d\d\d[^0-9]/); // 默认返回第一个匹配结果 : "3789@"
alert(result);
// 例：使用正则表达式的匹配参数开启全局匹配
var str = "dajdk84483789@#$&%%&*&*&^&5000adasbdj4123--__";
var result = str.match(/[1-5]\d\d\d[^0-9]/g); // ["3789@"]["5000a"]["4123-"]
for(var i=0;i<result.length;i++) {alert(result[i]);}/* 使用新子字符串替换字符串中指定的子字符串，默认只替换第一个匹配的子字符串；如果开启了全局匹配，将替换所有匹配的子字符串；如果匹配到字符串，返回替换后的字符串；如果未匹配到子字符串，返回原字符串 */
replace(oldsub,newsub);// 例：使用"Coder"替换第一个"World"
var str = "Hello World! Hello World!"
var result = str.replace("World","Coder");
alert(result);
// 例：去除第一个非数字部分
var str = "1235465saad#%$513232$%acad%da%$*&32165";
var result = str.replace(/\D+/,"");
alert(result);
// 例：去除所有非数字部分
var str = "1235465saad#%$513232$%acad%da%$*&32165";
var result = str.replace(/\D+/g,"");
alert(result);

jQuery

概述

jQueryDownload
jQuery-APIDOC-CN

  jQuery是JavaScript的类库，主要封装了DOM，用于对页面元素的增删改查。官网下载的jQuery有两种类型，一种是正常代码格式的文件，另一种是去除了注释和回车等不必要内容的压缩版文件，正常格式的适用于开发阶段，压缩版的适用于网页部署阶段，因为压缩版更精炼，浏览器读取速度更快。

引入jQuery

  测试时推荐服务器本地引入，部署时推荐使用可靠的远程引入。

<!-- 服务器本地引入 -->
<script type="text/javascript" src="../js/jquery.js"></script><!-- 服务器远程引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

jQuery核心函数

  jQuery的核心函数window.jQuery/window.$是jQuery新增到window对象中的成员。

/* 核心函数jQuery */
var jQuery = function(selector,context){...};
...
/* window对象新增成员window.jQuery和window.$，均指向jQuery函数 */
window.jQuery = window.$ = jQuery;

jQuery核心对象

  jQuery核心对象即调用jQuery核心函数返回的对象，用于页面中元素的增删改查。

/* 推荐核心对象名使用$开头 */
var $btn1 = $("#btn1");
var $btn2 = jQuery("#btn2");

简单示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 按钮点击事件的注册，$("#id001")为通过id查询元素并返回元素对象 */$("#id001").click(function(event){alert("Hello world!");});});</script></head><body><button id="id001">Hello world</button></body>
</html>

核心函数的基本使用

  jQuery核心函数的重要特性是读写合一，即可以使用核心函数查询元素，也可以使用核心函数增删改函数。

jQuery(callback)

  $()/jQuery()传入任意一个函数时，页面加载完成之后将调用该函数，即为页面加载完成事件的注册。

/* 传入函数时，页面加载完成之后将调用该函数 */
$(callback);/* 传入匿名函数 */
$(function(){alert("Hello world!");
});var fun = function(){alert("Hello world!");
}
/* 传入函数变量 */
$(fun);function fun() {alert("Hello world!");
}
/* 传入函数变量 */
$(fun);

jQuery(selector,[context])

  $()/jQuery()传入选择器名时，jQuery会根据字符串内容指定的选择器名查询对应元素，并返回jQuery封装后的元素对象。

/* 传入选择器时，将根据选择器名查询元素；context为待查找的DOM元素集，document或jQuery对象，可选参数 */
$(selector,[context]);/* 标签名选择器 */
var $btns = $("button");
/* id选择器 */
var $btn1 = $("#id001");
/* class选择器 */
var $btn1 = $(".btn1");

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 标签名选择器 */$("button").click(function(){alert("Hello world!");});/* id选择器 */$("#id001").click(function(){alert("I am id001");});/* class选择器 */$(".btn1").click(function(){alert("I am class btn1");});});</script></head><body><button>button1</button><button id="id001">button2</button><button class="btn1">button3</button></body>
</html>

jQuery(html,[ownerDoc])

  $()/jQuery()传入HTML语句时，jQuery可以根据具体方法查询页面中的HTML语句，使用此方式可以插入新元素，但不推荐使用此方式插入元素。

/* 插入HTML语句时，根据具体方法查询HTML语句；ownerDoc为创建DOM元素所在的文档，可选参数 */
$(html,[ownerDoc]);/* 将指定的HTML语句插入到指定位置 */
$("<button>Hello world!</button>").appendTo("#div001");

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){$(".class1").click(function(){/* 插入新按钮到选择器".class2"选中的元素中 */$("<button>button2</button>").appendTo(".class2");});});</script></head><body><div><button class="class1">button1</button></div><div class="class2">test:</div></body>
</html>

jQuery(array)

  $()/jQuery()传入数组时，可以使用each(callback)方法遍历数组。

/* each()方法传入函数，jQuery每遍历一个数组元素就调用一次该函数；函数的参数1为jQuery传入的当前元素索引，参数2为当前元素值；传入的函数返回false将导致遍历停止(相当于break)，返回true将跳入下一个元素的遍历(相当于continue) */
$(array).each(function(index,item){...return false;
});/* 可将$/jQuery作为对象使用 */$.each(array,function(index,item){...return false;
});

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){$(".class1").click(function(){$(["aa","bb","cc","dd"]).each(function(index,item){console.log("index is " + index + " , value is " + item);/* 返回true将continue */return true;});});$(".class2").click(function(){$.each(["11","22","33","44"],function(index,item){console.log("index is " + index + " , value is " + item);/* 返回true将continue */return true;});});});</script></head><body><button class="class1">Hello world!</button><button class="class2">Hello world!</button></body>
</html>

jQuery对象的基本使用

  jQuery对象内部包含的是DOM元素对象的伪数组(一个或多个元素)。特别注意，jQuery对象是DOM元素的伪数组，并非DOM元素本身。

jQuery对象的基本成员

/* 获取选中元素的个数，即DOM元素数组长度 */
$(selector).length;/* 获取选中元素中的指定元素，即指定索引的DOM元素 */
$(selector)[index];
$(selector).get(index);/* 遍历DOM元素 */
$(selector).each(callback);/* 获取指定元素在兄弟元素中的索引，可传入选择器或DOM元素对象 */
$(selector).index(selector|element);/* 读取选中元素的指定样式 */
$(selector).css(property);/* 设置选中元素的样式 */
$(selector).css({"property1":"value","property2":"value",...});/* attr()用于操作非布尔值的属性 */
/* 读取选中元素的指定属性值 */
$(selector).attr(property);
/* 设置选中元素的指定属性值 */
$(selector).attr(property,value);/* prop()用于操作布尔值的属性 */
/* 读取选中元素的指定属性值 */
$(selector).prop(property);
/* 设置选中元素的指定属性值 */
$(selector).prop(property,value);/* 移除选中元素的指定属性 */
$(selector).removeAttr(property);/* 为选中元素添加class属性 */
$(selector).addClass(classValue);/* 移除选中元素的class属性 */
$(selector).removeClass(classValue);/* 读取选中元素的标签中的文本(相当于DOM中的innerHTML) */
$(selector).html();
/* 设置选中元素的标签中的文本(相当于DOM中的innerHTML) */
$(selector).html(str);/* 读取选中元素的value属性值 */
$(selector).val();
/* 设置选中元素的value属性值 */
$(selector).val(value);

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 获取DOM元素数组 */var $btns = $("button");/* 获取DOM元素个数 */console.log("there is(are) " + $btns.length + " button(s).");/* 获取指定索引的DOM元素 */console.log("the first button is " + $btns[0].innerHTML + ".");console.log("the third button is " + $btns.get(2).innerHTML + ".");/* 遍历数组 */$btns.each(function(index,item){console.log("no." + (index+1) + " button is " + item.innerHTML + ".");return true;});/* 通过选择器获取指定元素在兄弟元素中的索引 */console.log("the index of " + $(".btn4")[0].innerHTML + " is " + $btns.index($(".btn4")) + ".");/* 通过DOM元素对象获取指定元素在兄弟元素中的索引 */console.log("the index of " + $(".btn4")[0].innerHTML + " is " + $btns.index($(".btn4")[0]) + ".");/* 获取样式 */console.log("text color of buttons is " + $btns.css("color"));/* 通过键值对设置样式 */$btns.css({"color":"green","font-size":"50px","background":"darkgray"});});</script></head><body><button>button1</button><button>button2</button><button>button3</button><button class="btn4">button4</button><button>button5</button><button>button6</button></body>
</html>

jQuery工具方法

  jQuery工具方法直接使用$.method的方式调用。

/* 去除字符串两端的空格 */
$.trim(str);
/* 获取对象的类型 */
$.type(obj);
/* 判断对象是否为数组 */
$.isArray(obj);
/* 判断对象是否为函数 */
$.isFunction(obj);
/* 解析JSON字符串为JavaScript对象或数组 */
$.parseJSON(jsonstr);

jQuery选择器

基本选择器

标签名选择器

  标签名选择器以"标签名"作为核心函数的参数，用于查询指定标签名的元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 查询所有div元素 */var $divs = $("div");console.log("there is(are) " + $divs.length + " div(s).");$divs.each(function(index,item){console.log("no." + (index+1) + " div is " + item.innerHTML + ".");return true;});});</script></head><body><div>你好世界！</div><div>Hello world!</div><div>ハローワールド!</div></body>
</html>

id选择器

  id选择器以"#id"作为核心函数的参数，用于查询指定id属性的元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* id选择器 */var $div1 = $("#id001");var $div2 = $("#id002");var $div3 = $("#id003");/* 设置元素的样式 */$div1.css({"color":"red","font-size":"50px"});$div2.css({"color":"orange","font-size":"40px"});$div3.css({"color":"green","font-size":"30px"});});</script></head><body><div id="id001">你好世界！</div><div id="id002">Hello world!</div><div id="id003">ハローワールド!</div></body>
</html>

class选择器

  class选择器以".class"作为核心函数的参数，用于查询指定class属性的元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){var $divs = $(".class1");$divs.css({"color":"red","font-size":"50px"});$divs = $(".class2");$divs.css({"color":"orange","font-size":"25px"});});</script></head><body><div class="class1">你好世界！</div><div class="class2">Hello world!</div><div class="class2">ハローワールド!</div></body>
</html>

并集选择器

  并集选择器以"选择器1,选择器2,选择器3,..."作为核心函数的参数，于查询多个选择器选中的元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 查询被p,#id001,.class1选中的元素 */var $items = $("p,#id001,.class1");$items.css({"color":"orange","font-size":"50px"});});</script></head><body><p>你好世界！</p><div id="id001">Hello world!</div><div class="class1">ハローワールド!</div></body>
</html>

交集选择器

  交集选择器以"选择器1选择器2选择器3..."作为核心函数的参数，于查询多个选择器同时选中的元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 查询被p,class1同时选中的元素 */var $items = $("p.class1");$items.css({"color":"red","font-size":"50px"});});</script></head><body><p class="class1">你好世界！</p><div class="class1">Hello world!</div><div class="class1">ハローワールド!</div></body>
</html>

通配选择器

  通配选择器以"*"作为核心函数的参数，于查询所有元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 查询所有元素 */var $items = $("*");$items.css({"color":"orange","font-size":"50px"});});</script></head><body><div>你好世界！</div><div>Hello world!</div><div>ハローワールド!</div></body>
</html>

层次选择器

  层次选择器用于查询后代元素和兄弟元素。

后代元素选择器

  后代元素选择器以"父元素 后代元素"为核心函数的参数，用于查询指定父元素下的所有指定后代元素，包括子元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 查询body元素下所有的span元素 */var $items = $("body span");$items.css({"color":"orange","font-size":"50px"});});</script></head><body><div>Hello world!</div><div><span>Hello world!</span></div><span>Hello world!</span></body>
</html>

子元素选择器

  子元素选择器以"父元素>子元素"为核心函数的参数，用于查询指定父元素下的所有指定子元素。子元素选择器的查询结果是后代元素选择器查询结果的子集。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 查询body元素的span子元素 */var $items = $("body>span");$items.css({"color":"orange","font-size":"50px"});});</script></head><body><div>Hello world!</div><div><span>Hello world!</span></div><span>Hello world!</span></body>
</html>

prev+next选择器

  prev+next以"prev+next"为核心函数的参数，用于查询指定元素的下一个元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 查询class为#id001的元素的下一个div元素 */var $items = $("#id001+div");$items.css({"color":"orange","font-size":"50px"});});</script></head><body><!-- prev+next只查询一个元素! --><div>Hello world!</div><div id="id001">Hello world!</div><div>Hello world!</div><div>Hello world!</div><div>Hello world!</div></body>
</html>

兄弟选择器

  兄弟选择器以"prev~siblings"为核心函数的参数，用于查询指定元素下的所有兄弟元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 查询class为#id001的元素之后的所有div兄弟元素 */var $items = $("#id001~div");$items.css({"color":"orange","font-size":"50px"});});</script></head><body><!-- prev~siblings查询多个元素! --><div>Hello world!</div><div id="id001">Hello world!</div><div>Hello world!</div><div>Hello world!</div><div>Hello world!</div></body>
</html>

过滤选择器

  过滤选择器以"选择器:过滤条件"为核心函数的参数，用于在原有选择器基础上添加过滤条件筛选查询结果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 查询第一个body的div子元素的span子元素 */var $item = $("body>div>span:first");$item.css({"color":"orange","font-size":"50px"});/* 查询第一个class不是"class1"的body的div子元素的span子元素 */$item = $("body>div>span:not(.class1):first");$item.css({"color":"lightblue","font-size":"50px"});/* 查询兄弟索引小于1的body的子元素 */$item = $("body>*:lt(1)");$item.css({"color":"lightgreen","font-size":"50px"});/* 查询兄弟索引大于5的body的子元素 */$item = $("body>*:gt(5)");$item.css({"color":"purple","font-size":"50px"});/* 查询兄弟索引等于8的body的子元素 */$item = $("body>*:eq(8)");$item.css({"color":"darkblue","font-size":"50px"});/* 查询内容包含"test"的body的子元素 */$item = $("body>*:contains('test')");$item.css({"color":"orangered","font-size":"50px"});/* 查询设置title属性为"hello"的body的子元素 */$item = $("body>*[title='hello']");$item.css({"color":"blue","font-size":"50px"});});</script></head><body><span>Hello world!</span><div><span>Hello world!</span></div><div><span class="class1">Hello world!</span></div><div><span class="class2">Hello world!</span></div><div><span>Hello world!</span></div><div>Hello world!</div><div title="hello">Hello world!</div><div>Hello world! test Hello world!</div><div>Hello world!</div></body>
</html>

表单选择器

  过滤选择器以":表单选择器"为核心函数的参数，用于在原有选择器基础上添加表单过滤条件筛选查询结果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 查询第一个表单输入元素 */var $item = $(":input:first");$item.css({"background-color":"orange"});/* 查询不可用的单行文本输入元素 */$item = $(":text:disabled");$item.css({"background-color":"lightblue"});/* 查询密码输入元素 */$item = $(":password");$item.css({"background-color":"lightgreen"});/* 查询submit元素并绑定点击事件 */$item = $(":submit").click(function(){/* 查询被选中的checkbox */var $itemForm = $(":checkbox:checked");console.log("there is(are) " + $itemForm.length + " checked.");/* 查询被选中的option */$itemForm = $(".select1>option:selected");console.log("you choosed " + $itemForm[0].innerHTML + ".");});});</script></head><body><form action="https://localhost:8080" method="post"><div><input type="text"/></div><div><input type="text" disabled="disabled"/></div><div><input type="password"/></div><div><span>Java</span><input type="checkbox" name="skill" value="Java"/><span>C++</span><input type="checkbox" name="skill" value="C++"/><span>JavaScript</span><input type="checkbox" name="skill" value="JavaScript"/></div><div><select class="select1" name="country"><option value="none" selected="selected">--请选择国籍--</option><option value="cn">中国</option><option value="usa">美国</option><option value="jp">日本</option></select></div><p><input type="submit" value="提交"/></p></form></body>
</html>

jQuery-CSS

样式

/* 读取选中元素的指定样式属性，返回rgb(r,g,b)格式 */
$(selector).css(property);
/* 设置选中元素的指定样式 */
$(selector).css({property1:"value",property2:"value",property3:"value",...
});

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){var $text = $("div>span");/* 读取样式属性 */console.log($text.css("color"));var n = 0;$("div>button").click(function(){n++;if(n%2 == 1) {/* 设置样式 */$text.css({/* 可使用属性字符串作为属性名 */"color":"orange","font-size":"50px","font-family":"Consolas"});}if(n%2 == 0) {$text.css({/* 直接使用属性名，需符合驼峰命名法 */color:"purple",fontSize:25,fontFamily:"Youyuan"});}});});</script></head><body><div><button>button</button></div><div><span>Hello world!</span></div></body>
</html>

位置

坐标位置

/* 读取选中元素(可见部分)相对于当前页面的位置 */
var offset = $(selector).offset();
/* 读取元素相对页面的左边距 */
console.log(offset.left);
/* 读取元素相对页面的右边距 */
console.log(offset.top);
/* 设置选中元素(可见部分)相对于当前页面的位置 */
$(selector).offset({/* 设置左边距 */left:leftValue,/* 设置上边距 */top:topValue
});/* 读取元素(可见部分)相对于父元素(可见部分)的位置 */
var position = $(selector).position();
/* 读取元素(可见部分)相对父元素(可见部分)的左边距 */
console.log(position.left);
/* 读取元素(可见部分)相对父元素(可见部分)的右边距 */
console.log(position.top);

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){var $div1 = $("body>div");var $div2 = $("body>div>div");$div1.css({"background-color":"lightblue","border":"1px solid darkblue"});$div2.css({"background-color":"lightgreen","border":"1px solid green"});/* 设置相对于页面的偏移 */$div1.offset({left:100,top:100});$div2.offset({left:200,top:300});var offset = $div1.offset();var position = $div2.position();console.log(offset.left + "," + offset.top);console.log(position.left + "," + position.top);});</script></head><body><divstyle="width:1000px;height:1000px;"><divstyle="width:500px;height:500px;"></div></div></body>
</html>

滚动条位置

/* 读取选中元素的水平滚动条与容器的左边距 */
$(selector).scrollLeft();
/* 设置选中元素的水平滚动条与容器的左边距 */
$(selector).scrollLeft(leftValue);/* 读取选中元素的垂直滚动条与容器的上边距 */
$(selector).scrollTop();
/* 设置选中元素的垂直滚动条与容器的上边距 */
$(selector).scrollTop(topValue);

尺寸

/* 读取选中元素的 内容 宽度像素值 */
$(selector).width();
/* 设置选中元素的 内容 宽度像素值 */
$(selector).width(width);/* 读取选中元素的 内容 高度像素值 */
$(selector).height();
/* 设置选中元素的 内容 高度像素值 */
$(selector).height(height);/* 读取选中元素的 内部 宽度像素值，innerWidth = width + 2*padding */
$(selector).innerWidth();
/* 读取选中元素的 内部 高度像素值，innerHeight = height + 2*padding */
$(selector).innerHeight();/* 读取选中元素的 外部 宽度像素值，如果传入false(或不传)，outerWidth = width + 2*padding + 2*border；如果传入true，outerWidth = width + 2*padding + 2*border + 2*margin */
$(selector).outerWidth(true/false);
/* 读取选中元素的 外部 高度像素值，如果传入false(或不传)，outerHeight = height + 2*padding + 2*border；如果传入true，outerHeight = height + 2*padding + 2*border + 2*margin */
$(selector).outerHeight(true/false);

jQuery对象的增删改查

jQuery对象的过滤

  使用jQuery对象中的以下过滤方法，可将原有的jQuery对象进一步筛选，仅保留符合条件的DOM对象。过滤方法获取的仍然是jQuery对象。

/* 获取选中的元素中的第一个元素 */
$(selector).first();
/* 获取选中的元素中的最后一个元素 */
$(selector).last();/* 获取选中的元素中指定索引的元素 */
$(selector).eq(index);/* 获取选中的元素中具有指定属性的元素 */
$(selector).filter("[property]");/* 并集过滤器，获取选中的元素中满足或运算条件的元素 */
$(selector).filter("[property1=value],[property2=value],[property3!=value]...");
/* 交集过滤器，获取选中的元素中满足与运算条件的元素 */
$(selector).filter("[property1=value][property2=value][property3!=value]...");/* 非或过滤器，获取选中的元素中不满足或运算条件的元素 */
$(selector).not("[property1=value],[property2=value],[property3!=value]...");
/* 非与过滤器，获取选中的元素中不满足与运算条件的元素 */
$(selector).not("[property1=value][property2=value][property3!=value]...");

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){var $items = $("body>*");/* 获取选中元素中的第一个元素 */$items.first().css({"color":"orange"});/* 获取选中元素中索引为1的元素 */$items.eq(1).css({"color":"red"});/* 获取选中元素中具有title属性的元素 */$items.filter("[title]").css({"color":"blue"});/* 获取选中元素中class属性值为"class1"的元素 */$items.filter("[class=class1]").css({"color":"purple"});/* 获取选中元素中class属性值为"class2"或"class3"的元素 */$items.filter("[class=class2],[class=class3]").css({"color":"pink"});/* 获取选中元素中具有title属性且class属性值为"class4"的元素 */$items.filter("[title][class=class4]").css({"color":"green"});/* 获取选中元素中具有title属性且title属性值不为"hello"的元素 */$items.filter("[title]").not("[title=hello]").css({"color":"lightblue"});});</script></head><body><div>Hello world!</div><div>Hello world!</div><div title="hello">Hello world!</div><div class="class1">Hello world!</div><div class="class2">Hello world!</div><div class="class3">Hello world!</div><div title="hello" class="class4">Hello world!</div><div title="hello world">Hello world!</div></body>
</html>

jQuery对象的查询

/* 查询选中元素的指定子元素 */
$(selector).children(selector);/* 查询选中元素中的指定后代元素 */
$(selector).find(selector);/* 查询选中元素的父元素 */
$(selector).parent();/* 查询选中元素之前的一个元素 */
$(selector).prev(selector);/* 查询选中元素之前的所有元素 */
$(selector).preAall(selector);/* 查询选中元素之后的一个元素 */
$(selector).next(selector);/* 查询选中元素之后的所有元素 */
$(selector).nextAll(selector);/* 查询选中元素的所有的指定兄弟元素 */
$(selector).siblings(selector);

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){/* 选中id为"id001"的元素 */var $items = $("#id001");/* 查询选中元素的索引为0的子元素 */$items.children("*:eq(0)").css({"color":"red"});/* 查询选中元素中class属性为"class1"的后代元素 */$items.find(".class1").css({"color":"green"});$items = $(".class1");/* 查询选中元素的父元素 */$items.parent().css({"background-color":"orange"});$items = $("body>*:eq(1)>*:eq(1)");/* 查询选中元素之前的一个元素 */$items.prev("*").css({"color":"purple"});/* 查询选中元素之后的所有元素 */$items.nextAll("*").css({"color":"pink"});$items = $("body>*:eq(2)>*:eq(1)");/* 查询选中元素的所有兄弟元素 */$items.siblings("*").css({"color":"lightblue"});});</script></head><body><div id="id001"><span>Hello world!</span><div><span class="class1">Hello world!</span></div><span>Hello world!</span></div><div><div>Hello world!</div><div>Hello world!</div><div>Hello world!</div><div>Hello world!</div><div>Hello world!</div><div>Hello world!</div></div><div><div>Hello world!</div><div>Hello world!</div><div>Hello world!</div></div></body>
</html>

jQuery对象的增删改

/* 在选中的元素之后新增置底指定元素 */
$(selector).append(htmlstr);
/* 将新增元素置底到指定元素之后 */
obj1.appendTo(obj2);/* 在选中的元素之前新增置顶指定元素 */
$(selector).prepend(htmlstr);
/* 将新增元素置顶到指定元素之前 */
obj1.prependTo(obj2);/* 在选中的元素之后插入新增元素 */
$(selector).after(htmlstr);
/* 将新增元素插入到指定元素之后 */
obj1.insertAfter(obj2);/* 在选中的元素之前插入新增元素 */
$(selector).before(htmlstr);
/* 将新增元素插入到指定元素之前 */
obj1.insertBefore(obj2);/* 将选中的元素替换为指定元素 */
$(selector).replaceWith(htmlstr);
/* 使用已有元素(obj1)替换指定元素(obj2) */
obj1.replaceAll(obj2);/* 清空选中元素 内部的 所有元素 */
$(selector).empty();/* 移除选中元素中的指定元素 */
$(selector).remove(selector);

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><!-- 从BootCN远程引入jQuery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">/* 页面加载完成事件的注册，相当于window.onload */$(function(){var $items = $("body>*:eq(0)");/* 在选中的元素之后新增置底div元素 */$items.append("<div>我是append添加的div</div>");/* 将新增元素置底到指定元素之后方式1 */$("<div>我是appendTo添加的div1</div>").appendTo($items);/* 将新增元素置底到指定元素之后方式2 */$("<div>我是appendTo添加的div2</div>").appendTo("body>*:eq(0)");$items = $("body>*:last");$items.prepend("<div>我是prepend添加的div</div>");/* 将新增元素置顶到指定元素之前方式1 */$("<div>我是prependTo添加的div1</div>").prependTo($items);/* 将新增元素置顶到指定元素之前方式2 */$("<div>我是prependTo添加的div2</div>").prependTo("body>*:last");$items = $("body>*:eq(0)");$items.after("<div>我是after插入的div</div>");$("<div>我是insertAfter插入的div</div>").insertAfter($items);$items = $("body>*:eq(1)");/* 将选中的元素替换为指定元素 */$items.replaceWith("<p>Hello world!</p>");$items = $("body>*:eq(1)").nextAll("*");/* 使用已有元素替换指定元素 */$("<p>Hello world!</p>").replaceAll($items);$items = $("body>ul:first");/* 清空选中元素内部的所有元素 */$items.empty();$items = $("body>ol:first>*");/* 移除选中元素中的指定元素 */$items.remove("*:eq(1)");});</script></head><body><div>Hello world!</div><div>Hello world!</div><div>Hello world!</div><ul><li>Hello world!</li><li>Hello world!</li><li>Hello world!</li></ul><ol><li>Hello world!</li><li>Hello world!</li><li>Hello world!</li></ol></body>
</html>

jQuery事件

加载完成

/* 页面加载完成事件绑定方式1 */
$(document).ready(function(){/* 页面加载完成函数体 */
});/* 页面加载完成事件绑定方式2，两种方式完全等效 */
$(function(){/* 页面加载完成函数体 */
});

事件绑定

/********** 事件绑定 **********//* 绑定方式1 */
$(selector).click(callback);
// 例：
$(function(){$("#id001").click(function(){console.log("Hello world!");});
});/* 绑定方式2 */
$(selector).on(eventName,callback);
// 例：
$(function(){$("#id001").on("click",function(){console.log("Hello world!");});
});
/* 绑定方式2可以为事件绑定多个响应，事件发生后，响应函数按照定义顺序先后执行 */
$(function(){var $btn1 = $("#id001");$btn1.on("click",function(){console.log("Hello world!");});/* 绑定多个响应 */$btn1.on("click",function(){console.log("Hello coder!");});
});/* 绑定方式3(进对于鼠标移入移出的切换事件) */
$(function(){var funOver = function(){console.log("鼠标移入");}var funOut = function(){console.log("鼠标移出");}/* 参数1传入鼠标移入事件回调函数，参数2传入鼠标移出事件回调函数 */$("#id001").hover(funOver,funOut);
});/********** 事件解绑 **********//* 解除指定元素的所有事件的绑定 */
$(selector).off();/* 解除指定元素的一个或多个指定事件的绑定 */
$(selector).off(event1Name,event2Name,event3Name,...);
// 例：
$(function(){$("#id001").off("click","mouseenter","mouseleave");
});

事件参数

  事件回调函数被系统调用时会传入一个事件对象，可通过此对象获取事件发生时的一些参数，或对事件的传播作一些处理。

$(function(){$("#id001").on("mousemove",function(event){/* clientX与clientY是事件相对于事件元素可见部分左上角的坐标 */console.log(event.clientX + "," + event.clientY);/* pageX与pageY是事件相对于页面左上角的坐标 */console.log(event.pageX + "," + event.pageY);/* offsetX与offsetY是事件相对于完整事件元素左上角的坐标 */console.log(event.offsetX + "," + event.offsetY);/* 停止事件冒泡 */event.stopPropagation();/* 阻止事件的默认行为 */event.preventDefault();});
});

事件委派

  将子元素的事件交给父元素处理的事件处理方式称为事件委派。事件委派可以无需为每个子元素绑定事件，对于需要为大量子元素绑定事件的场合，事件委派可以减少工作量。使用事件委派的前提是不能停止事件冒泡。

/* 事件委派，参数1传入子元素选择器，参数2传入事件名，参数3传入事件处理回调函数 */
$(parentSelector).delegate(childrenSelector,eventName,callback);
/* 事件解委派，传入事件名；不传参数则解除所有事件委派 */
$(parentSelector).undelegate(eventName);/* 使用事件参数的target属性获取引发事件的子元素，target属性是DOM对象 */
$("ol").delegate("*","click",function(event){if(event.target.innerHTML == "list1") {console.log("you clicked list1.");}else if(event.target.innerHTML == "list2") {console.log("you clicked list2.");}else if(event.target.innerHTML == "list3") {console.log("you clicked list3.");}
});/* 回调函数是引发事件的子元素调用的，所以使用this可以直接获取引发事件的子元素DOM对象 */
$("ol").delegate("*","click",function(event){if(this.innerHTML == "list1") {console.log("you clicked list1.");}else if(this.innerHTML == "list2") {console.log("you clicked list2.");}else if(this.innerHTML == "list3") {console.log("you clicked list3.");}
});

常用事件

事件 事件方法 事件名称
点击事件 click() "click"
鼠标移入事件 mouseenter() "mouseenter"
鼠标移出事件 mouseleave() "mouseleave"
鼠标移动事件 mousemove() "mousemove"
鼠标左键按下事件 mousedown() "mousedown"
鼠标左键弹起事件 mouseup() "mouseup"
双击事件 dblclick() "dblclick"
元素获取焦点事件 focusin() "focusin"
元素失去焦点事件 focusout() "focusout"
表单元素内容改变事件 change() "change"
文本元素被选中事件 select() "select"
键盘按键按下事件 keydown() "keydown"
键盘按键弹起事件 keyup() "keyup"
表单提交事件 submit() "submit"

jQuery动画

内置动画

/* 淡出，元素由完全透明逐渐变为完全不透明，原理是不断改变元素的透明度(opacity)属性。参数1指定淡出的持续时间，可以是"slow"(600ms),"normal"(400ms),"fast"(200ms),或者是具体的毫秒值；参数2用于指定切换效果，默认是"swing",也可以是"linear"；参数3指定动画完成后调用的回调函数 */
$(selector).fadeOut([speed],[easing],[callback]);/* 淡入，元素由完全不透明逐渐变为完全透明，原理是不断改变元素的透明度(opacity)属性。 参数1指定淡出的持续时间，可以是"slow"(600ms),"normal"(400ms),"fast"(200ms),或者是具体的毫秒值；参数2用于指定切换效果，默认是"swing",也可以是"linear"；参数3指定动画完成后调用的回调函数 */
$(selector).fadeIn([speed],[easing],[callback]);/* 渐变切换，元素原本完全不透明，调用后逐渐变为完全透明；元素原本完全透明，调用后逐渐变为完全不透明。参数1指定淡出的持续时间，可以是"slow"(600ms),"normal"(400ms),"fast"(200ms),或者是具体的毫秒值；参数2用于指定切换效果，默认是"swing",也可以是"linear"；参数3指定动画完成后调用的回调函数 */
$(selector).fadeToggle([speed],[easing],[callback]);/* 垂直收缩，原理是逐渐改变元素的height属性。参数1指定淡出的持续时间，可以是"slow"(600ms),"normal"(400ms),"fast"(200ms),或者是具体的毫秒值；参数2用于指定切换效果，默认是"swing",也可以是"linear"；参数3指定动画完成后调用的回调函数 */
$(selector).slideDown([speed],[easing],[callback]);/* 垂直展开，原理是逐渐改变元素的height属性。参数1指定淡出的持续时间，可以是"slow"(600ms),"normal"(400ms),"fast"(200ms),或者是具体的毫秒值；参数2用于指定切换效果，默认是"swing",也可以是"linear"；参数3指定动画完成后调用的回调函数 */
$(selector).slideUp([speed],[easing],[callback]);/* 垂直切换，原理是逐渐改变元素的height属性。参数1指定淡出的持续时间，可以是"slow"(600ms),"normal"(400ms),"fast"(200ms),或者是具体的毫秒值；参数2用于指定切换效果，默认是"swing",也可以是"linear"；参数3指定动画完成后调用的回调函数 */
$(selector).slideToggle([speed],[easing],[callback]);/* 逐渐显示，原理是逐渐改变元素的height,width和opacity属性。参数1指定淡出的持续时间，可以是"slow"(600ms),"normal"(400ms),"fast"(200ms),或者是具体的毫秒值,如果不传参，则为瞬间显示；参数2用于指定切换效果，默认是"swing",也可以是"linear"；参数3指定动画完成后调用的回调函数 */
$(selector).show([speed],[easing],[callback]);/* 逐渐隐藏，原理是逐渐改变元素的height,width和opacity属性。参数1指定淡出的持续时间，可以是"slow"(600ms),"normal"(400ms),"fast"(200ms),或者是具体的毫秒值,如果不传参，则为瞬间隐藏；参数2用于指定切换效果，默认是"swing",也可以是"linear"；参数3指定动画完成后调用的回调函数 */
$(selector).hide([speed],[easing],[callback]);/* 逐渐切换，原理是逐渐改变元素的height,width和opacity属性。参数1指定淡出的持续时间，可以是"slow"(600ms),"normal"(400ms),"fast"(200ms),或者是具体的毫秒值,如果不传参，则为瞬间切换；参数2用于指定切换效果，默认是"swing",也可以是"linear"；参数3指定动画完成后调用的回调函数 */
$(selector).toggle([speed],[easing],[callback]);

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">body>div{width:500px;height:500px;background-color:orange;border:2px solid green;border-radius:25px; }</style><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">$(function(){var $div = $("body>div");/* 渐变切换 */$("body>p>button:eq(0)").on("click",function(){$div.fadeToggle("slow","linear",function(){console.log("fadeToggle finished.");});});/* 垂直切换 */$("body>p>button:eq(1)").on("click",function(){$div.slideToggle("slow","linear",function(){console.log("slideToggle finished.");});});/* 逐渐切换 */$("body>p>button:eq(2)").on("click",function(){$div.toggle("slow","linear",function(){console.log("toggle finished.");});});});</script></head><body><p><button>fadeToggle</button><button>slideToggle</button><button>toggle</button></p><div></div></body>
</html>

自定义动画

/* 自定义动画启动。参数1传入最终样式，动画会根据当前样式逐渐变化为指定的最终样式；参数2指定淡出的持续时间，可以是"slow"(600ms),"normal"(400ms),"fast"(200ms),或者是具体的毫秒值；参数3用于指定切换效果，默认是"swing",也可以是"linear"；参数4指定动画完成后调用的回调函数 */
$(selector).animate([params],[speed],[easing],[callback]);// 例：
$("#id001").animate({width:"200%",height:"150%",offsetX:100,offsetY:200
},"slow","linear",function(){console.log("finished.");
});/* animate()方法在动画执行完成后返回，返回的是最终状态的jQuery对象，因此可以使用链式调用，实现分步动画效果 */
$("#id001").animate({width:"200%"
},"slow","linear",function(){console.log("half finished.");
}).animate({height:"150%"
},"slow","linear",function(){console.log("finished.");
});

  示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JavaWebTest</title><style type="text/css">body>div{width:500px;height:500px;background-color:lightblue;border:2px solid green;border-radius:25px; }</style><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script type="text/javascript">$(function(){var $div = $("body>div");/* 渐变到指定样式 */$("body>p>button:eq(0)").on("click",function(){$div.animate({"width":"250px","height":"250px"},"slow","linear",function(){console.log("animate1 finished.");});});/* 分步渐变到指定样式 */$("body>p>button:eq(1)").on("click",function(){$div.animate({"width":"250px"},"slow","linear",function(){console.log("animate2 half finished.");}).animate({"height":"250px"},"slow","linear",function(){console.log("animate2 finished.");});});});</script></head><body><p><button>animate1</button><button>animate2</button></p><div></div></body>
</html>

前端基础(HTML,CSS,JavaScript,jQuery)相关推荐

  1. Web前端开发HTML清华大学,清华大学出版社-图书详情-《Web前端开发——HTML5+CSS+JavaScript+ jQuery +Dreamweaver》...

    前言 Web前端开发是网站开发方向重要的专业课程,随着市场对Web前端工程师的需求增加,国内很多本专科院校正在或准备开设该课程.本书是咸阳师范学院2016年教材建设资助项目. Web前端开发涵盖多门技 ...

  2. web前端基础html,css,js,jquery

    目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...

  3. Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)

    源码获取:博客首页 "资源" 里下载! 一.项目简述 功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行 环境配置: Jdk1.8 + Tomcat8 ...

  4. 【Web前端】html+css+javascript

    1 HTML 1.1. HTML基本概念 HTML:hyper text markup language 超文本标记语言,就是超出纯文本范畴的语言,其中既可以定义文本也可以定义图片,超链接等等非文本性 ...

  5. 前端基础：CSS 3

    前端基础:CSS 3 文章目录 前言 一.什么是CSS 0. CSS的简单介绍 1. 什么是CSS 2. CSS发展史 3. CSS的快速入门及优势 4. 四种CSS导入方式 二.选择器 1. 三种基 ...

  6. 生日祝福（HTML+CSS+JavaScript+jQuery）

    生日倒计时 下载地址:[生日祝福(HTML+CSS+JavaScript+jQuery).zip-教育文档类资源-CSDN下载]

  7. javaWeb学习笔记1—前端三件套 HTML CSS JavaScript

    学习视频地址 javaWeb学习笔记-前端三件套 HTML CSS JavaScript 1.字体标签 2. 字符实体 3.标题标签 4.超链接 5.列表标签 6. img标签 路径 7.表格 8.i ...

  8. 【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI

    前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...

  9. 外部导入方式添加背景图_web前端基础：CSS的三种导入方式说明

    随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能.但是随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿.于是css便诞生了. Web前端基础教程,Web ...

最新文章

  1. less 命令(转)
  2. 跟正刊学习SCI英文写作——摘要部分的拆解
  3. python训练营微信公众号真实性_用python进行微信公众号开发（仅测试学习）
  4. angularjs 让当前路由重新加载_Spring Cloud Gateway的动态路由怎样做？集成Nacos实现很简单...
  5. 计算机操作系统读者和写者模型的简单介绍以及思考
  6. 深入解读Linux进程调度系列（4）——调度与时钟中断
  7. 干货 | E-Prime实验数据处理之E-Merge妙招，确定不来看吗？
  8. 如何设计沉浸式游戏引导界面？你要知道的七大点
  9. 写一个自己的javascript库
  10. Bugzilla的快速入门指南(全网最详细)
  11. unctf2020部分wp
  12. 大智慧行情服务器文件夹,大智慧行情分析系统炒股软件常用三大菜单操作
  13. 使用showdown将markdown笔记插入到HTML网页
  14. 系统架构演变到Spring Cloud
  15. C语言： “老板，来两份外卖，一份卤肉饭（%d），一份鸡汤面（%f）...“
  16. 星辉信息科技教程-Centos上silk微信语音转换成mp3格式
  17. c语言less函数,LESS使用方法
  18. 日语语法准备一：日语词性的分类
  19. matlab生成fmu
  20. 微信转账怎么退回？别傻傻等待24小时自动退还了！

热门文章

  1. 大白话告诉你什么是Raid1
  2. vue源码解析observer
  3. 高并发解决方案-代理服务器Nginx
  4. ajax没返回响应数据,jQuery的Ajax时无响应数据的解决方法
  5. Xshell6和Xftp提示“要继续使用此程序，您必须应用最新的更新或使用新版本
  6. Xshell7、Xftp7提示 “要继续使用此程序,您必须应用最新的更新或使用新版本”
  7. 23 | 知其然知其所以然：聊聊API自动化测试框架的前世今生
  8. 图像分割中的cv2函数讲解
  9. CCNP350-401学习笔记（251-300题）
  10. 百元的价格，五星级的体验，尽在朗丽兹酒店