HTML
Hyper Text Markup Language 超文本标记语言
超文本：超级文本/超链接文本，超越了文本的限制，如多媒体文件、超链接等。
标记：也可以称为标签，用<>括起来的一个特定单词，整体称为标记或标签，分为单标签和双标签。
- 单标签：<单词/>
- 双标签：<单词></单词>
标签的类型
- 块级元素，占页面中的一整行。block
- 行内元素，占一行中的一部分。inline
标签的属性
标签第一个中括号中，使用 属性="值" ，让某个标签拥有特定属性。
如<meta charset="utf-8">中，charset="utf-8"就是meta标签的属性
chartset称为属性名，utf-8称为属性值。
如果有多个属性，使用空格隔开。
如<div id="xxx" class="xxx"></div>。
网页基本结构
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>创建一个文本文档，将以上内容进行保存，文档的后缀名改为.html，用浏览器就能解释运行。
HTML注释
<!-- HTML中的注释 -->页面种显示颜色的方式
- 颜色单词，如red、blue、green等
- 颜色RGB。R-RED,G-GREEN,B-BLUE。rgb(255,0,0)表示红色，数字范围[0,255]，值越大，对应的颜色越深
- 颜色的十六进制RGB。#FF0000表示红色，相当于RGB(255,0,0)
资源的路径
-
绝对路径：资源的完整地址。如在线图片地址或带有盘符的地址
-
相对路径：从当前页面出发，找到图片所在位置
- 使用“../”跳出当前目录
- 使用"xxx/"进入xxx目录
常用标签
文字
| 标签名 | 作用 |
|---|---|
| h1~h6 | 块级元素。标题。文字加粗，1最大，6最小。通常用h1~h3 |
| p | 块级元素。段落。 |
| span | 行内元素。 |
| pre | 块级元素。预处理标签。 |
| i | 行内元素。倾斜。 |
| u | 行内元素。下划线。 |
| b | 行内元素。加粗。 |
| sub | 行内元素。文字下标。 |
| sup | 行内元素。文字上标。 |
| 以上标签都是双标签 |
用法：复制表情对应的十进制或十六进制的代码，最好使用span显示
<!--十进制 &#特定值;-->
<span>⭐</span>
<!--十六进制 &#x特定值; -->
<span>⌛</span>图片img
单标签，行内元素
<img src="图片路径" alt="无法显示图片时显示的文字" title="鼠标悬停时的提示文字" width="宽度" height="高度">列表ul/ol/li
双标签，块级元素，li是ul或ol的子标签
无序列表ul
默认每一项前用实心圆符号修饰
通过type属性修改符号
- disc 默认，实心圆
- circle 空心圆
- square 正方形
- none 去掉修饰符号
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>有序列表ol
默认每一项前用自增数字修饰
通过type属性修改符号
- a/A 英文字母
- i/I 罗马符号
- 1 默认数字
- none 去掉修饰符号
<ol>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ol>表格table
| 表格中的标签 | 作用 |
|---|---|
| tr | 表格中的行 |
| td | 每行中的单元格 |
| th | 特殊的单元格，表头，文字加粗居中 |
td可以通过
colspan=“3”属性实现跨3列
rowspan=“2”属性实现跨2行
<table border="1" >
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td rowspan="2">上午</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td colspan="6" align="center">午休</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>体育</td>
<td>音乐</td>
<td>自然</td>
<td>科技</td>
<td>美术</td>
</tr>
<tr>
<td>音乐</td>
<td>体育</td>
<td>科技</td>
<td>美术</td>
<td>自然</td>
</tr>
</table>多媒体
音频audio
<audio controls autoplay loop muted >
<source src="xxx.mp3" type="audio/mpeg">
</audio>视频video
<video width="320" height="240" controls autoplay loop muted >
<source src="xxx.mp4" type="video/mp4">
</video>controls开启控制器
autoplay自动播放
loop循环
muted静音
谷歌浏览器，默认不允许自动播放非静音视频
水平线hr
<hr color="颜色" size="粗细" width="宽度">换行br
<br>a标签
行内元素，双标签。
超链接
可以通过a标签访问任何一个地址
<a href="资源路径" target="">点击跳转</a>target可以控制要访问的资源在哪里打开
-
_self 默认。在当前页面打开
-
_blank 在新页面打开
-
_parent 在父页面打开
-
指定的name名
- 如果是锚点的name，通过“#name“访问
- 如果是iframe的name，通过"name"访问
锚点
可以通过a标签定义锚点和访问锚点，实现当前页面的快速定位
1.设置锚点
<a name="锚点名"></a>2.访问锚点
<a href="#指定的锚点名">点击访问锚点</a>浮动框架iframe
<a href="xx" target="main">xx</a>
<a href="yy" target="main">yy</a>
<iframe name="main" src="页面的路径" width="宽度" height="高度">
</iframe>marquee标签
<!--
direction="left/right/up/down"朝向。默认left
behavior=""行为。scroll默认重复 slide移动到底后停止 alternate往复
scrollamount=""移动速度。
-->
<marquee scrollamount="10" direction="right" >
xxxx
</marquee>表单和表单元素
表单form
双标签，用于接收用户输入的数据
<form action="表单提交的最终目的路径" method="表单提交方式">
</form>form表单有两个重要的属性
- action:设置提交路径
- 可以是一个页面，也可以是后台请求映射
- method:设置提交方式
- 默认值为get，表示使用get方式提交，提交的数据会暴露在浏览器地址栏中
- 设置为post方式，提交的数据不会暴露在浏览器地址栏中
表单元素
定义在表单form标签中的标签
| 常用表单元素 | 作用 |
|---|---|
| input | 单标签，行内元素。通过修改关键属性type，变化为不同的组件 |
| select | 双标签，行内元素。下拉菜单 |
| textarea | 双标签，行内元素。文本域 |
| input标签type属性的值 | 作用 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| date | 日历组件 |
| number | 数字组件 |
| hidden | 隐藏域 |
| file | 上传文件 |
| image | 图片提交按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| 表单元素中的属性 | 作用 |
|---|---|
| name | 用于提交数据时设置提交的参数名 |
| value | 用于设置组件的默认值 |
| checked | 用于设置单选按钮和复选框的默认选中 |
| placeholder | 用于设置输入框的提示文字 |
| required | 用于设置输入框为必填项 |
| selected | 用于设置下拉菜单默认选中 |
| disabled | 用于设置某个组件为不可用状态 |
| readonly | 用于设置某个组件为只读状态 |
| max/min/step | number独有，用于设置最大值、最小值和步长 |
| rows/cols/ | textarea独有，用于设置文本域的行数和列数 |
div标签
块级元素，双标签，没有任何特点。
页面布局时采用div布局。
CSS
Cascading Style Sheets 层叠样式表
用于控制HTML中标签样式的语言。可以精确到像素，美化修饰HTML标签。
CSS语法
样式名：样式值；
color:red;
font-size:20px;
选择器
用于选择页面中元素(标签)的工具。
id选择器
1.给标签添加id属性，对其命名
2.在style标签中通过**#id**名获取
通常用于选择某一个元素
<html>
<head>
<style>
#test{
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>class选择器
1.给标签添加class属性，对其命名
2.在style标签中通过**.class**名获取
通常用于选择一组元素
<html>
<head>
<style>
.test{
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>元素/html/标签选择器
直接通过标签名获取。
通常用于选择一组元素。
<html>
<head>
<style>
div{
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>将CSS写在哪里
1.写在标签的style属性中
style="样式:值;样式:值;"
<body style="background-color:red;">
</body>2.写在<style>标签中，通过选择器获取标签后控制样式
style标签通常放在head标签中
<html>
<head>
<style>
选择器{
样式:值;
样式:值;
}
/*获取页面中所有名为div的元素*/
div{
}
/*获取页面中class为test的元素*/
.test{
}
/*获取页面中id为test的元素*/
#test{
}
</style>
</head>
</html>CSS优先级
如果某个元素同时拥有id、class以及style属性时。
优先级从高到低
style属性==>id选择器==>类选择器==>元素选择器
常用样式
尺寸
只能对块级元素设置尺寸。
如果要对行内元素设置尺寸，需要先将其改为块级元素。
| 样式名 | 作用 | 值 |
|---|---|---|
| width | 设置块级元素的宽度 | px像素或百分比或vw |
| height | 设置块级元素的高度 | px像素或百分比或vh |
设置为像素时，元素不会根据浏览器的窗口大小变化而变化，是固定值。
设置为百分比或vh/vw时，元素会根据浏览器的窗口大小变化二变化，都是百分比。
如果元素需要根据实际窗口变化，宽度建议使用百分比，高度建议使用vh。
背景background
| 样式名 | 作用 | 值 |
|---|---|---|
| background-color | 背景色 | 颜色的单词、十进制RGB、十六进制RGB |
| background-image | 背景图 | url(图片路径) |
| background-repeat | 背景重复 | 默认重复。 no-repeat不重复 repeat-x表示x轴重复 repeat-y表示y轴重复 |
| background-size | 背景尺寸 | 默认加载原图。 100%表示完整显示图片。 cover表示覆盖元素。 如body的背景如果设置为cover，随着页面高度变大，背景也会变大，100%则会完整显示图片。 |
| background-position | 背景位置 | 可以同时设置x轴和y轴的距离。 如10px 20px表示向右移动10px，向下移动20px 也可以通过background-position-x或-y只移动具体轴 通过使用right left top bottom center设置指定方向 |
| background-attachment | 背景固定方式 | fixed表示固定背景，scroll或默认表示跟随滚动条移动 |
| background | 背景属性简写 | 可以同时设置图片路径、是否重复和图片位置，无关顺序。如 background:url(图片地址) no-repeat right top 表示图片不重复位于容器右上角 |
| background | 渐变函数 | linear-gradient(to left, #7a28c1, #a17fe0, #59C173) |
边框border
边框会"套"在元素外层，元素原本大小不变，但所占区域会变为原本大小+边框宽度
| 样式 | 作用 | 值 |
|---|---|---|
| border-style | 边框线型 | solid单线，double双线，dotted点线，dashed虚线 |
| border-width | 边框宽度 | 像素 |
| border-color | 边框颜色 | 颜色的三种写法 |
| border | 同时设置边框线型、宽度和颜色 | 1px solid red |
| border-方向-样式 | 某个方向的style或width或color。方向可以是left、right、top、bottom | border-bottom-color:red |
| border-方向 | 同时设置指定方向边框线型、宽度和颜色 | border-right:1px solid red; |
| border-上下-左右-radius | 设置某个方向为圆角 | |
| border-radius | 同时设置四个角为圆角。如果正方形，值设置为边长的一半变为圆形 | |
| outline | 轮廓。input文本框获得焦点时，会自动显示一个轮廓，通过将该属性设置为none去除轮廓 | |
| border-collapse | 合并相邻边框。通常用于表格设置边框时，将其值改为collapse，表示合并相邻td边框。 | collapse |
字体font
| 样式名 | 作用 | 值 |
|---|---|---|
| font-size | 字体大小 | 像素。默认16px，最小12px |
| font-family | 字体字型 | 默认微软雅黑 |
| font-weight | 字体粗细 | lighter细，bolder粗 |
文本text
| 样式 | 作用 | 值 |
|---|---|---|
| color | 文本颜色 | 颜色的三种写法 |
| text-align | 文本对齐方式 | 默认left，right右对齐，center居中 |
| line-height | 行高 | 像素。如果希望文字“垂直居中”，设置行高为所在容器的高度。 |
| letter-spacing | 字符间距 | 像素。 |
| text-indent | 首行缩进 | 像素。如果缩进2个字，默认设置为32px |
| text-shandow | 文本阴影 | 颜色 水平位置 垂直位置 模糊程度。如gray 4px 4px 3px 表示向右下角移动4px，模糊3px |
| text-decoration | 文本修饰 | under-line下划线，over-line上划线，line-through删除线。通常将a标签设置该样式为none表示去掉默认的下划线 |
| word-break | 英文换行方式 | 默认以单词为单位换行，不会拆分单词。break-all表示以字母为单位换行，会拆分单词。 |
列表list
| 样式名 | 作用 | 值 |
|---|---|---|
| list-style-type | 列表符号 | 通常用none去掉。 |
| list-style-image | 使用图片替换列表符号 | url(图片路径) |
| list-style-position | 列表符号位置 | 默认outside表示符号和文本分离。inside表示符号和文本绑定。 |
伪类
表示某个元素的某种状态。
用于对某些元素在不同的情况下呈现不同的效果。
如a标签在访问前、悬停时、访问时、访问后的四个状态对应四个伪类
| a标签伪类 | 作用 |
|---|---|
| a:link | 未访问时 |
| a:hover | 鼠标悬停 |
| a:active | 鼠标按住 |
| a:visited | 访问后 |
以上的:hover可以适用于很多标签，如div:hover。
但其余伪类只适用于a标签。
鼠标样式cursor
| 值 | 效果 |
|---|---|
| pointer | 光标呈现为指示链接的指针（一只手） |
| crosshair | 光标呈现为十字线。 |
| move | 此光标指示某对象可被移动。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
| progress | 载入 |
显示方式display
| 值 | |
|---|---|
| block | 将元素设置为块级元素，能设置尺寸，独占一行 |
| inline | 将元素设置为行内元素，不能设置尺寸，占一行中的一部分，尺寸由内容决定 |
| inline-block | 将元素设置为行内块，能设置尺寸，占一行中的一部分 |
| none | 不显示，不保留自身位置，后续元素会顶替其位置 |
浮动float
让某个元素脱离原本的位置，朝某个方向对齐。
| 值 | 作用 |
|---|---|
| left | 向左浮动 |
| right | 向右浮动 |
| none | 清除浮动 |
float:left和display:inline-block的区别
相同点：都能让多个独占一行的块级元素位于同一行
display:inline-block
多个元素最终会位于同一行内，保留该行位置，元素以下线对齐，保留元素间的缝隙，后续元素是新的一行。
float:left
多个元素脱离自身的位置向指定方向贴合，不保留该行位置，元素向上线对齐，不保留元素间的缝隙，后续元素会顶替之前元素的位置
盒子模型：
内边距padding：边框与元素自身之间的距离
外边距margin：元素A的边框与元素B的边框之间的距离
一个元素的所占位置是外边距+边框+内边距+元素自身的大小。
溢出overflow
盒子模型阴影box-shadow
JavaScript
JavaScript通常简称为JS，由网景(NetScape)公司推出。
是一门面向对象、轻量级、弱类型的解释型脚本语言。
弱类型：没有数据类型的限制，变量甚至可以不同定义就能使用。
解释型：无需编译，通过解释器解释运行。浏览器就是一个JS解释器。
script脚本：按指令顺序执行。
JS的作用
HTML用于定义页面中的内容
CSS用于控制HTML元素的外观和样式
JS用来操作HTML元素
HTML+CSS+JS组成前端基本三要素。
可以在页面中控制任意元素
可以在页面中动态嵌入元素
可以操作浏览器
可以与用户进行数据交互
。。。
JS写在哪里
1.写在某个标签的某个事件中
事件如鼠标单击onclick，鼠标移入onmouseenter等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body >
<!-- 通过提示框输出alert("输出内容") -->
<button onclick="alert('Hello JS!')">点击1</button>
<!-- 通过控制台输出console.log("输出内容") -->
<button onclick="console.log('Hello JS!')">点击2</button>
<!-- 通过新页面输出document.write("输出内容") -->
<button onclick="document.write('Hello JS!')">点击3</button>
</body>
</html>2.写在什么结束。 整个字符串都要是数字
Math
-
floor() 向下取整
-
ceil() 向上取整
-
round() 四舍五入
-
abs() 取绝对值
-
random() 产生[0, 1)的随机数
-
产生随机数的公式
-
[m, n]的随机数： Math.floor(Math.random() * (n - m + 1)) + m
-
[m, n) 的随机数：Math.floor(Math.random() * (n - m)) + m
-
<script>
// floor 向下取整（返回整数部分）
console.log(Math.floor(3.94)); //3
//ceil 向上取整（返回整数部分加1）
console.log(Math.ceil(3.14)); //4
// round 四舍五入
console.log(Math.round(3.54)); //3
// abs 取绝对值
console.log(Math.abs(-10)); //10
//开平方
console.log(Math.sqrt(9)); //3
//开立方
console.log(Math.cbrt(8)); //2
//幂运算，3的2次方
console.log(Math.pow(3, 2)); //9
// random 返回0到1的随机数[0, 1）
console.log(Math.random());
//0到9的随机数
console.log(Math.floor(Math.random() * 10));
//5到10（包含）的随机数
// m到n（包含n）的随机数: Math.floor(Math.random() * (n - m + 1)) + m
console.log(Math.floor(Math.random() * (10 - 5 + 1)) + 5);
// 5到10（不包含）的随机数
// m到n（不包含n）的随机数: Math.floor(Math.random() * (n - m)) + m
console.log(Math.floor(Math.random() * (10 - 5)) + 5);
</script>函数function
一段代码的，能够完成特定的功能，可以被重复的使用
自定义函数
- 函数的定义
function 函数名(参数1，参数2...){
//代码
return 返回值； //函数不需要返回值，省略return语句
}
- 函数调用
对象.函数名(参数);
<script>
fun1();//函数调用
// js代码执行时有一个预处理过程，函数在预处理时候就能识别，
// 函数调用可以放在任意位置（不要求函数的调用一定要在函数定义之后）
function fun1(){
console.log("fun1 被调用");
}
fun1();//函数调用
// 有参数，无返回值
function fun2(name){
console.log("你好，" + name);
}
fun2("HQYJ");
fun2();//js函数调用可以传参数，也可以不传，不会报错
function fun3(a, b){
return a + b;
}
var sum = fun3(3, 2);
console.log(sum);
</script>js默认的全局函数
-
parseInt（）
-
parseFloat()
-
isNaN()
-
eval()
//js自带的全局函数
//字符串转整数
console.log(parseInt("85"));
console.log(parseInt("abc")); //返回结果为NaN （not a number）
console.log(parseInt("99abc"));//99, 数字开头的字符串能把前面的数字转为整数，后面部分的字
符自动丢弃
// 字符串转小数
console.log(parseFloat("3.14"));
console.log(parseFloat("a.14"));// NaN
console.log(isNaN(parseFloat("a.14")));// true, 说明字符不是数字，转换失败
console.log(parseFloat("3.1515927").toFixed(2));//toFixed()对小数保留小数的位数
console.log(parseFloat("3.14xyz"));//3.14
// eval, 把字符串中能执行的内容当语句执行
console.log(eval("3 + 2")); //5匿名函数
没有名字的函数，通常设置某个标签的某个事件
标签.事件=function(){
}BOM
Browser Object Model
浏览器对象模型
可以通过JS获取浏览器信息和控制浏览器的行为。
弹框
-
警告框，带有提示文字和确认按钮
alert("提示文字") -
输入框，带有输入框和确认取消按钮，点击确认，返回值为输入的内容。
prompt("提示文字") -
确认框，带有确认取消按钮，点击确认返回true，否则返回false
confirm("提示文字")
window对象
表示浏览器窗口对象，可以获取浏览器相关信息，调用浏览器的某些行为
screen对象
用于获取屏幕相关信息
location对象
用于设置或获取地址栏相关信息
history对象
DOM
Document Object Model
文档对象模型
-
每个页面都是一个文档树document tree
-
页面中的每个标签都是这个树的节点node
-
根节点是html
-
document对象是DOM中的核心对象，表示当前页面对象
-
DOM用于操作(获取设置内容、更改样式等)页面中的节点
标签==元素==节点==DOM对象
获取节点
获取设置节点文本
innerText
读取或设置某个节点的内容(双标签中的内容)，无论设置什么内容都会原样显示
innerHTML
读取或设置某个节点的内容(双标签中的内容)，设置的内容中如果有HTML元素会识别HTML元素
jQuery
jQuery是一个轻量级的javascript函数库，封装了很多javascript中的内容。jQuery的本质依然是javacript(一个.js文件)。
作用
jQuery的宗旨：”write less,do more"，意味写更少的代码，做更多的事情。
-
用于获取文档中的元素，对元素进行操作
-
更强大的选择器
-
支持链式写法
-
封装了ajax，更方便使用
...
使用
1.下载jQuery.js文件，导入到项目中
-
- 通过右键另存为下载
-
使用HBuilder中自带的创建
- 新建项目，在js文件夹下右键新建.js文件，选择jQuery，修改名称
2.在页面中导入jQuery.js文件
<script src="jQuery.js文件路径"></script>3.在页面中加入另一个script标签，在该标签中写jQuery代码
- 通常将jQuery代码写在文档就绪函数中，表示在页面所有内容加载成功后开始执行
- 文档就绪函数类似于js中的onload事件
<script src="jQuery.js文件路径"></script>
<script>
//文档就绪函数
jQuery(document).ready(function(){
//jQuery代码
});
//简化版文档就绪函数
$(function(){
//jQuery代码
});
</script>jQuery对象和js对象(dom对象)
在js中，使用document.getElementXXX获取到的是dom对象。
dom对象只能使用如.style、.innerText等属性修改样式或内容，不能使用jQuery对象中的属性或函数。
在jQuery中，使用jQuery选择器获取到的是jQuery对象。
jQuery对象只能使用jQuery中的属性或函数，不能使用dom对象中的属性或函数。
通常在jQuery对象命名时，使用$符号作为前缀，方便区分jQuery对象和dom对象。
两者之间转换
jQuery对象转换为dom对象
- jQuery对象[0]
- jQuery对象.get(0)
dom对象转换为jQuery
$(dom对象)
<html>
<body>
<h1 id="test"></h1>
</body>
<script src="jQuery.js"></script>
<script>
$(function(){
//通过js的方式获取的对象，称为dom对象，只能使用dom对象操作节点的属性和方法
var test= document.getElementById("test");
test.innerText="修改文本"；
//通过jQuery的选择器获取的对象，称为jQuery对象，只能使用jQuery对象操作节点的属性和方法
//$("#test").innerText="xxx"//无效
$("#test").text("修改文本");
//将jQuery对象转换为dom对象
$("#test")[0].innerText="修改文本";
//将dom对象转换为jQuery对象
$(test).text("修改文本");
});
</script>
</html>$符号冲突问题
在页面中引入jQuery.js后，$符号相当于"jQuery"这个单词，有特殊的含义。
如果一个页面中，会引入多个js函数库，并且这些函数库都会用到符号时，就会造成符号冲突。
jQuery提供了一个**noConflict()**函数用于释放对$的使用权。
//直接调用该方法，释放对$的使用权，之后只能使用默认的"jQuery"
$.noConflict();
//$("#md")//这时会无效
jQuery("#md")//只能这样使用
//调用该方法，使用变量接收，释放对$的使用权，用指定的变量名代替$
var jq=$.noConflict();
jq("#md")//将jq当做$使用jQuery中的选择器
基本选择器
| 基本选择器 | |
|---|---|
| $("#id名") | id选择器，根据id名获取某个节点 |
| $(".class名") | class选择器，根据class名获取某些节点 |
| $("标签名") | 元素选择器，根据标签名获取某些节点 |
| $("#id名，.class名，标签名") | 群组选择器，根据指定的选择器获取所有满足的节点 |
| $("a.test") | 获取class名为test的a标签 |
| $("a#test") | 获取id名为test的a标签 |
| $("*") | 获取所有节点 |
层次选择器
| 层次选择器 | |
|---|---|
| $("#test空格*") | 得到id为test节点中的所有子节点。 |
| $("#test空格div") | 得到id为test节点中的所有div子节点。 |
| $("#test>*") | 得到id为test节点中的第一层所有子节点。 |
| $("#test>.test") | 得到id为test节点中的第一层class为test的子节点 |
| $("#test+p") | 得到id为test节点后紧邻的第一个p节点 |
| $("#test~p") | 得到id为test节点后同级的p节点 |
注意
-
$("p .test")表示得到p标签下的class为test的标签。有空格
<p> <div class="test"></div> <p class="test"></p> </p> //可以得到p标签中的两个 -
$("p.test")表示饿到class为test的p标签。无空格
<p> <div class="test"></div> <p class="test"></p>//只能得到这一个 </p>
过滤选择器
普通过滤
$("选择器:特定单词")
| 普通过滤 | |
|---|---|
| $("tr:odd") | 奇数索引。得到索引为1,3,5...的tr标签，按自然顺序为偶数 |
| $("tr:even") | 偶数索引。得到索引为0,2,4...的tr标签，按自然顺序为奇数 |
| $("tr:first") | 得到所有tr标签中的第一个 |
| $("tr:last") | 得到所有tr标签中的最后一个 |
| $("tr:eq(索引)") | 得到指定索引的tr |
| $("tr:gt(索引)") | 得到大于指定索引的tr |
| $("tr:lt(索引)") | 得到小于指定索引的tr |
| $("li:nth-child(3n+1)") | |
| $("#test p:first-child") | |
| $("#test p:last-child") | |
| $("div:not(.test)") | 得到class不为test的div |
| $("div:not(:eq(3))") | 得到索引不为3的div |
表单元素过滤
| 表单元素过滤 | |
|---|---|
| $(":input") | 得到所有表单元素，包含input、select、textarea |
| $(":text") | 得到文本框 |
| $(":password") | 得到密码框 |
| $(":radio") | 得到单选按钮 |
| $(":checkbox") | 得到复选框 |
| $(":checked") | 得到被选中的表单元素，包含radio、checkbox、select |
| $(":checkbox:checked") | 得到被选中的复选框 |
| $(":selected") | 得到被选中的下拉菜单选项 |
| (":reset")/(":submit") | 得到重置/提交按钮 |
属性过滤选择器
| 属性过滤 | |
|---|---|
| $("a[href]") | 得到所有包含href属性的a标签 |
| $("a:not([href])") | 得到所有不包含href属性的a标签 |
| $("div[属性=值]") | 得到指定属性和值的div |
| $("div[属性!=值]") | 得到指定属性不等于指定值的div |
| $("div[属性^=值]") | 得到以指定值开头的指定属性的div |
| ("div[属性=值]") | 得到以指定值结尾的指定属性的div |
| $("div[属性*=值]") | 得到包含指定值的指定属性的div |
$("div[属性1=值][属性2=值]") | 得到既包含指定值的属性1且包含指定值的属性2的div |
内容(文本)过滤选择器
| 内容过滤选择器 | |
|---|---|
| $("p:contains(文字)") | 得到带有指定文字的p标签 |
| $("p:not(:contains(文字))") | 得到不带有指定文字的p标签 |
| $("p:empty") | 得到没有任何文本的p标签 |
操作节点
获取、设置节点内容
| 函数 | |
|---|---|
| 节点.text() | 获取节点中的文本。相当于js中的var text=x.innerText； |
| 节点.text("内容") | 设置节点中的文本。相当于js中的x.innerText="内容"； |
| 节点.html() | 获取节点中的内容。相当于js中的var text=x.innerHTML； |
| 节点.html("内容") | 设置节点中的内容。相当于js中的x.innerHTML="内容"； |
| 节点.val() | 获取某节点中的value属性值。相当于js中的var val=x.value; |
| 节点.val("内容") | 设置某节点中的value属性值。相当于js中的x.value="内容"; |
获取、设置节点样式
| 函数名 | |
|---|---|
| 节点.css("样式名") | 获取某个节点的某个样式值 |
| 节点.css("样式名","值") | 设置某个节点的某个样式 |
| 节点.css({样式名:"值",样式名:"值"...}) | 同时设置多个样式 |
| 节点.css("样式名","值").css("样式名","值") | 同时设置多个样式 |
获取、设置节点属性
| 函数名 | |
|---|---|
| 节点.attr("属性名") | 获取某个属性的值 |
| 节点.attr("属性名","值") | 设置某个属性的值 |
| 节点.removeAttr("属性名") | 移除指定属性 |
| 节点.addClass("class名") | 给某个节点追加class值 |
| 节点.removeClass("class名") | 移除某个节点的某个class值 |
| 节点.toggleClass("class名") | 添加或移除某个class值。如果没有则添加，有则移除。 |
| 节点.hasClass("class名") | 判断是否存在某个class值 |
打地鼠游戏核心原理
1.使用js画div和开始按钮
2.写好显示图片的样式，如“show”，使用setInterval，每隔一段时间，随机一个div，让其拥有该样式
3.每次只能有一个div有该样式：可以每次先清除“show”后，再添加"show"
4.给每个div添加单击事件，点中了图片(带有"show"的div)，移除样式"show"
创建节点
$("完整标签")
如
//js写法
var h1=document.createElement("h1");
h1.innerText="创建出的h1";
//jquery写法
var $h1=$("<h1>创建出的h1</h1>");
//以上两种方式创建出的节点都是处于游离态，需要添加到已有的某个节点上添加节点
| 添加子节点 | |
|---|---|
| 父节点.append(子节点) | 将子节点添加到父节点中的最后 |
| 子节点.appendTo(父节点) | 将子节点添加到父节点中的最后 |
| 父节点.prepend(子节点) | 将子节点添加到父节点中的最前 |
| 子节点.prependTo(父节点) | 将子节点添加到父节点中的最前 |
| 添加兄弟节点 | |
|---|---|
| 原始节点.before(新节点) | 添加新节点到原始节点之前 |
| 新节点.insertBefore(原始节点) | 添加新节点到原始节点之前 |
| 原始节点.after(新节点) | 添加新节点到原始节点之后 |
| 新节点.insertAfter(原始节点) | 添加新节点到原始节点之后 |
移除节点
| 移除节点 | |
|---|---|
| 某节点.remove() | 移除某节点 |
| 某节点.empty() | 移除某节点中的子节点 |
复制节点
| 复制节点 | |
|---|---|
| 某节点.clone() | 复制某节点，不复制节点的事件 |
| 某节点.clone(true) | 复制某节点，复制节点的事件 |
修饰节点
| 替换节点 | |
|---|---|
| 旧节点.replaceWith(新节点) | 用新节点替换旧节点 |
| 新节点.replaceAll(旧节点) | 用心节点替换旧节点 |
| 包裹节点 | |
|---|---|
| 原节点.wrap(指定节点) | 使用指定节点包裹原节点，如果原节点是集合，会逐一包裹 |
| 原节点.wrapAll(指定节点) | 使用指定节点包裹原节点，如果原节点是集合，会整个用一个节点包裹 |
| 父节点.wrapInner(指定节点) | 使用指定节点对父节点中的所有子节点整个包裹 |
通过节点获取节点
| 函数名 | |
|---|---|
| 某节点.next() | 得到某节点的下一个节点 |
| 某节点.prev() | 得到某节点的上一个节点 |
| 某节点.nextAll(参数) | 得到某节点之后的所有或指定节点。参数为标签名的字符串，如nextAll("a")表示得到后续所有a标签 |
| 某节点.prevAll(参数) | 得到某节点之前的所有或指定节点 |
| 某节点.siblings(参数) | 得到某节点同级所有或指定节点 |
| 父节点.children(参数) | 得到某父节点的所有或指定子节点 |
| 节点集合.first() | 得到节点集合中的第一个子节点 |
| 节点集合.last() | 得到节点集合中的最后一个子节点 |
| 子节点.parent() | 得到某节点的父节点 |
| 某节点.index() | 得到节点所在集合的索引 |
预设动画
| 函数名 | |
|---|---|
| show() | 同时将宽度和高度从0变为原始值，最终display:block |
| hide() | 同时将宽度和高度从原始值变为0，最终display:none |
| toggle() | 切换show/hide |
| fadeIn() | 将不透明度从0变为1，淡入，最终display:block |
| fadeOut() | 将不透明度从1变为0，淡出，最终display:none |
| fadeToggle() | 切换fadeIn/fadeOut |
| slideUp() | 将高度从原始值变为0，最终display:none |
| slideDown() | 将高度从0变为原始值，最终display:block |
| slideToggle() | 切换slideUp/slideDown |
| 以上所有函数都可以给两个参数。第一个参数为动画执行所需毫秒，第二个参数为动画执行结束后的回调函数，表示在动画执行后执行。 |
$("#md").click(function(){
//如果希望在动画执行后执行，不能这样写
/*
$(this).fadeOut(500);
alert("消失后弹出");
*/
//正确写法
$(this).fadeOut(500,function(){
alert("消失后弹出");
})
});自定义动画
启用自定义动画
- 使用animate()函数，该函数有四个参数分别为样式组、所需事件、动画函数、回调函数
- animate()函数支持链式写法
- 只支持数值型样式。如尺寸、位置等。字符串型样式不支持，如颜色等
节点.animate({
"样式":"值",
"样式":"值"
},2000,linear,function(){
//动画执行结束后执行
}).animate(...)停止动画
停止当前动画
节点.stop();
停止所有动画
节点.stop(true);
事件
绑定事件
-
js中的事件绑定方式为：
//dom节点.on事件=function(){} document.getElementById("md").onclick=function(){ } -
jquery中的事件绑定方式为：
//jquery节点.事件(function(){}); $("#md").click(function(){ }); 或 //jquery节点.bind("事件名",function(){}) $("#md").bind("click",function(){ })
| 事件函数 | 作用 |
|---|---|
| click() | 单击 |
| hover() | 鼠标悬停/离开。该事件可以传入两个函数，分别表示悬停时触发第一个函数，离开时触发第二个函数。如果只有一个函数，悬停离开均触发这一个函数。 |
| focus() | 获得焦点 |
| blur() | 失去焦点 |
| change() | 改变。适用于各种能发生变化的节点，如文本框、单选、复选、下拉等 |
| mouseup/down/over/move/enter/leave/out() | 鼠标相关 |
| submit() | 表单提交 |
| ... | 将js中的事件名去掉on变为函数 |
前端框架
设计者提供给用户该框架的css文件和js文件。
用户只需导入css文件和js文件后，通过对应的class值呈现相应的样式和效果。
任何前端框架都有对应的开发文档API，只需参考其使用使用说明即可。
BootStrap
由Twitter推出的一套前端框架。其最大的特点是"栅格化系统"。
使用
1.下载核心文件
2.将解压后的整个文件夹复制到项目中
3.新建一个页面，引入3个文件
- bootstrap.min.css文件
- jquery.js文件
- bootstrap.min.js文件
引入js时，一定要先引入jquery，再引入bootstrap.min.js。因为bootstrap依赖于jquery.
Layui
由国内开发者设计的一款基于jquery的前端框架。
官网现已下架，但Layui依然可以使用。
使用
1.下载layui核心文件
2.解压后导入项目
3.在页面中加入2个文件
- layui.css文件
- layui.js文件
JSON
JavaScript Object Notation JS对象简谱
是一种数据交换格式，可以理解为保存数据、交换数据的一种格式。
JSON数据通常以键值对的形式保存。
键:值
键的类型为字符串，值的类型可以是普通类型、对象或数组。
值的数据类型
| 值的数据类型 | 符号 | 示例 |
|---|---|---|
| 字符串 | "" | "name":"wanghai" |
| 数值 | 直接写数字 | "age":20 |
| 逻辑值 | true/false | "married":false |
| 空 | null | "car":null |
| 对象 | {} | "pet":{"petName":"小汪","petAge":2} |
| 数组 | [] | "family":[{"relation":"父亲","name":"xxx"},{"relation":"弟弟","name":"xxx"}] |
举例
使用Json格式如保存一个人的信息
属性：姓名、年龄、性别、宠物、婚姻状况、房产、家庭成员
{
"name": "张明",
"age": 20,
"sex": "男",
"pet": {
"petName": "刀乐",
"petType": "猫"
},
"married": true,
"house": null,
"family": [{
"name": "赵鑫",
"relation": "配偶"
},{
"name": "张明亮",
"relation": "父亲"
}]
}在HTML中读取JSO文件
- $.getJSON("json文件路径",回调函数)
- $.ajax({url:"访问的资源路径",success:function(){访问成功后的回调函数}})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<table class="layui-table " lay-skin="row">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th colspan="2">宠物</th>
<th>婚姻状况</th>
<th>是否有房</th>
<th colspan="2">家庭成员</th>
</tr>
<tr>
<td>name</td>
<td>sex</td>
<td>age</td>
<td>petName</td>
<td>petType</td>
<td>married</td>
<td>house</td>
<td>familyName</td>
<td>familyRelation</td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td >familyName</td>
<td >familyRelation</td>
</tr>
</table>
<button>使用ajax读取json文件</button>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$(function() {
// $.getJSON("json文件路径",function(res){}) res为读取到的所有数据
$.getJSON("data.json",function(res){
console.log(res);
})
$("button:eq(0)").bind("click",function(){
$.ajax({
url:"data.json",
success:function(res){
// console.log(res);
// 读取json文件中的数据，通过.访问
$("td:contains(name)").text(res.name);
// pet是对象res.对象.对象属性
$("td:contains(petName)").text(res.pet.petName);
// family是对象数组res[索引].对象属性
$("td:contains(familyName):eq(0)").text(res.family[0].name);
$("td:contains(familyRelation):eq(0)").text(res.family[0].relation);
}
});
});
});
</script>
</html>
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
