华清远见-重庆中心-HTML/CSS/JS/JQUERY技术总结

最新推荐文章于 2024-09-11 21:44:44 发布

T遗落

最新推荐文章于 2024-09-11 21:44:44 发布

阅读量157

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_59330405/article/details/128394739

版权

本文详细总结了HTML、CSS、JavaScript和jQuery的基础知识与应用技巧，涵盖了常用的HTML标签、CSS样式、JavaScript语法以及jQuery的选择器、事件和动画效果，旨在帮助读者全面了解网页开发的核心技术。

摘要由CSDN通过智能技术生成

HTML是一门超文本标记语言

超文本：超级文本/超链接文本，超越了文本的限制，入多媒体文件、超链接等。

标记：也称为标签，用<>括起来的特点单词，整体称为标记或标签，分为但标签和双标签。

常用标签

文本标签

常用标签	作用
<h1></h1>....<h6></h6>	块级元素，双标签。标题，文字加粗
<p></p>	块级元素，双标签。段落
<span></span>	行内元素，双标签。拼接内容
<pre></pre>	块级元素，双标签。预处理标签
<i></i>	行内元素，双标签。斜体
<u></u>	行内元素，双标签。添加下划线
<b></b>	行内元素，双标签。字体加粗
<sub></sub>	行内元素，双标签。文字下标
<sup></sup>	行内元素，双标签。文字上标

图片img

单标签，行内元素

<img src="图片路径" alt="图片无法正常显示时显示的文字" 
    title="鼠标悬停时提示的文字" width="图片宽度" height="图片高度">

列表

无序列表ul/li

双标签，块级元素，默认每一项之前以实心圆符号修饰。

通过type属性可以修改符号：

属性	符号
disc	默认实心圆
circle	空心圆
square	正方形
none	取消修饰符

<ul style="square">
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
</ul>

有序列表ol/li

块级元素，双标签，默认以自增数字修饰

通过type属性修改修饰符：

修饰符	作用
a/A	英文字母
i/I	罗马符号
1	默认数字
none	取消修饰符

<ol>
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
</ol>

表格table

表格中的标签	作用
<tr>	行
<th>	特殊的单元格，表头，文字加粗居中
<td>	列

跨行跨列

跨行：rowspan="跨行数";

跨列:colspan="跨列数";

多媒体

音频:audio

<audio controls auoplay loop muted>
    <source src="音频路径" type="audio/mpeg">
</audio>

视频：video

<video width="320" height="200" controls autoplay loop muted>
	<source src="视频路径" type="video/mp4">
</video>

属性	作用
autoplay	默认播放
loop	循环播放
muted	静音播放
controls	开启控制器

a标签

行内元素，双标签。

超链接

可以通过a标签访问任何一个地址。

<a href="网址或资源路径" target="">跳转</a>

target的作用：能够控制访问的资源在哪里打开

属性	作用
_self	默认当前页面打开
_blank	在新页面打开
_parent	在父页面打开
指定name名	如果是锚点，通过"#name"访问；如果是iframe，通过"name"访问

锚点

通过a标签能够实现当前页面的快速定位。

设置锚点

<a name="锚点名"></a>

访问锚点

<a href="#指定的锚点名">点击访问锚点</a>

浮动框架：iframe

语法：

<iframe src="页面的路径" width="宽度" height="高度">
    
</iframe>

例题

<body>
    <h1>iframe浮动框架</h1>
	<a href="http://taobao.com" target="main">跳转淘宝</a>
	<a target="ifm1" href="index.html">在iframe1中显示</a>
	<a target="ifm2" href="index.html">在iframe2中显示</a>
	<hr>
	<iframe name="main" src="列表与表格.html" width="100%" height="500px"></iframe>
	iframe1:<iframe name="ifm1" width="35%"></iframe>
	iframe2:<iframe name="ifm2"width="35%"></iframe>
</body>

滚动：marquee

<marquee scrollamount="10" direction="right" behavior="alternate">
    <img src="图片路径">
</marquee>

属性	值
direction	left/right/up/down：滚动朝向
behavior	scroll：默认重复 slide:移动到底停止 alternate：往复
scrollamount	移动速度

表单和表单元素

表单form

双标签，用于接收用户输入的数据

<form action="提交表单的最终目的路径" method="提交方法(post/get)">
    
</form>

get提交的数据会暴露在浏览器地址栏中，post提交的数据不会暴露在浏览器地址中，提交更为安全。

表单元素：定义在form标签中的标签

表单元素	作用
input	单标签，行内元素。修改关键属性type，变化为不同的组件
select	双标签，行内元素。下拉菜单
textarea	双标签，行内元素。文本域
button	双标签，行内元素。按钮

input标签的type值

type值	作用
text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
date	日历组件
number	数字组件
hidden	隐藏域
submit	提交按钮
reset	重置按钮
file	上传文件
image	图片提交按钮

表单元素中的属性

属性	作用
name	用于提交数据时设置提交的参数名
value	用于设置组件的默认值
checked	用于单选按钮和复选按钮的默认选中
required	用于设置输入框为必填项
selected	用于设置下拉菜单默认选中
disabled	用于设置某个组件为不可用状态
readonly	用于设置某个组件为只读状态
max/min/step	number独有，用于设置最大值、最小值和步长
rows/cols	textarea独有，用于设置行数和宽度

div标签

块级元素，双标签

CSS

css时层叠样式表，控制HTML中标签样式的语言，可以精确到像素，用于美化HTML标签

语法：样式名:样式值；

color:red;
font-sizq:24px;

选择器

选择器	作用
id选择器	1.给标签添加id属性并命名 2.在style标签中通过"#id"名获取通常用于选择某一个元素
class选择器	1.给标签添加class属性并命名 2.在style标签中通过".class"名获取通常用于选择某一组元素
元素/HTML/标签选择器	直接通过标签名获取通常用于选择一组数据
层次选择器	通过空格或>获取某个元素的子元素元素A 元素B：获取元素A下所有元素B 元素A>元素B：获取元素A下的第一层元素B
群组选择器	通过","同时选择多个元素

优先级

行内样式-->id选择器-->class选择器->标签选择器

写在标签中的style属性-->写在style标签中的属性-->引入css文件

CSS书写位置

1.写在标签中的style属性

<body style="background-color:red">
    //设置背景颜色为红色
</body>

2.写在style标签中

<html>
    <head>
        <style>
            选择器{
                样式:值;
                样式:值;
            }
            /*获取页面中所有名为div的元素*/
            div{
                
            }
            /*获取页面中class为test的元素*/
            .test{
                
            }
            /*获取页面中id为test的元素/
            #test{
            
            }
        </style>
    </head>
</html>

3.创建一个独立的.css文件

a.创建.css文件，将原本写在style标签中的内容写入.css文件

b.在页面的head标签中，通过link关键字引入

<link rel="stylesheet" href=".css文件地址"/>

常用样式

尺寸

只能对块级元素设置尺寸，行内元素需要先设置为块级元素，再设置尺寸

样式名	作用	值
width	设置块级元素的宽度	px像素或者百分比或vm
height	设置块级元素的高度	px像素或者百分比或vh

背景background

样式名	作用	值
background-color	背景色	颜色的单词、十进制RGB、十六进制RGB
background-image	背景图	url(图片的地址路径)
background-repeat	背景平铺	默认为重复；no-repeat：不平铺；repeat-x：水平平铺；repeat-y：垂直平铺
background-size	背景尺寸	默认加载原图；100%表示完整显示图片；cover表示覆盖所在元素；
background-position	背景位置	可以同时设置x轴和y轴的距离，通过使用right left top bottom center设置指定方向
background-attachment	背景固定方式	fixed表示固定背景，scroll或默认表示跟随滚动条移动
background	背景属性的简写	可以同时设置图片路径、是否重复和图片位置，无关顺序。

边框border

样式	作用	值
border-style	边框线型	solid：单线 double：双线 dotted：点线 dashed：虚线
border-width	边框宽度	像素
border-color	边框颜色	颜色对应单词、十进制RGB、十六进制RGB
border	同时设置边框线型、宽度、颜色	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- top-left-radius:100px ;左上角为圆弧 border- bottom- right-radius: 100px;右下角为圆弧 border-top-right-radius: 100px;右上角为圆弧 border-bottom-left-radius: 100px;左下角为圆弧
border-radius	同时设置四个角为圆角，如果为正方形，值为边长一半便为圆形	border-radius: 100px;
outline	轮廓。input文本框获得焦点时，会自动显示一个轮廓，通过将该属性设置为none去除轮廓	outline: none;
border-collapse	合并相邻边框。通常用于表格设置边框时，将其值改为collapse,表示合并相邻td边框。(一般写在table标签)	collapse

字体font

样式	作用	值
font-size	字体大小	像素。默认为16px，最小为12px
font-family	字体类型	默认为微软雅黑
font-weight	字体粗细	bolder(粗)、lighter(细)或者数字

文本text

样式名	作用	值
color	文本颜色	颜色的三种方法
line-height	行高(行间距)	像素，一般比字体大。值与容器高度一致时会垂直居中
text-align	文本水平对齐方式	默认left左对齐, right右对齐， center居中
letter-spacing	字符间距	默认为0px
text-indent	文本首行缩进	默认值为32px，首行缩进2个字
text-decoration	文本修饰	under-line下划线，over-line上划线，line-through删除线。通常将a标签设置该样式
text-shadow	文本阴影	颜色水平位置垂直位置模糊程度。如text-shadow:4px 4px 4px #FAEBD7;向右下角移动4px，模糊3px
word-break	英文换行方式	默认以单词为单位换行，不会拆分单词。break-all表示以字母为单位换行，会拆分单词。

列表list

样式名	作用	值
list-style-type	列表符号	通常用none去掉
list-style-image	使用图片替换列表符号	url(图片路径)
list-style-position	调整列表符号的位置	默认outside表示符号和文本分离。inside表示符号和文本绑定。

伪类link/hover/active/visited

表示某个元素的某种状态，用来对某些元素在不同情况下呈现不同的效果

a标签伪类	作用
a:link	为访问时
a:hover	鼠标悬停
a:active	鼠标按住
a:visited	访问后

鼠标样式cursor

值	效果
pointer	鼠标为一只手
move	鼠标为移动符号
auto	默认为箭头
progress	载入
crosshair	光标呈现为十字线
text	光标为文本
wait	此光标指示程序正忙(通常是一只表或沙漏)。
help	此光标指示可用的帮助(通常是一个问号或一个气球)。

显示方式display

值	效果
block	将元素设置为块级元素，能设置尺寸，独占一行
inline	将元素设置为行内元素，不能设置尺寸，占一行的一部分，尺寸由内容决定
inline-block	将元素设置为行内块，能设置尺寸，占一行的一部分
none	不显示、不保留自身的位置，后续的元素会顶替其位置

浮动float

让某个元素脱离原本的位置朝某个方向对齐

值	作用
left	左浮动
right	右浮动
none	清除浮动

float:left和display:inline-block的区别

相同点：都能让多个块级元素显示在同一行

不同点：

display:inline-block多个元素最终会位于同一行内，保留改行位置，元素以下线对齐，保留元素间的缝隙，后续的元素是新的一行。

float:left多个元素向指定方向贴合，不保留改行位置，元素以上线对齐，不保留元素间的缝隙，后续的元素会顶替之前元素的位置

盒子模型

页面中的块级元素都是盒子，盒子由元素自身、内边距、外边距、边框组成。

从外到里:外边距margin，边框border，内边距padding，元素自身

内边距：边框与元素自身之间的距离

外边距：元素A的边框与元素B的边框之间的距离

盒子模型相关样式	作用
padding	内边距。一个参数设置四个方向；两个参数表示上下、左右；三个参数表示上、左右、下；四个参数表示上、右、下、左；
padding-方向	某个方向的内边距，方向可以是left、right、top、bottom
margin	外边距。如果某个值设置为auto表示自动将所在容器剩余距离除以2\|
margin-方向	某个方向的外边距，方向可以是left、right、top、bottom

溢出overflow

子元素超出父元素的范围时称为溢出。

值	作用
hidden	隐藏溢出部分
scroll	使用滚动条
visiable	默认显示

盒子模型的阴影：box-shadom

语法：box-shadom:颜色左右位置上下位置模糊度

box-shadom:gray 4px 5px 6px;

定位position

值	作用
relative	相对定位
fixed	固定定位
absolute	绝对定位

配合定位使用样式

定位相关方向样式	作用	值
left	元素距离页面左边界的左右距离	正值向右，负值向左
right	元素距离页面右边界的左右距离	正值向左，负值向右
top	元素距离页面左边界的上下距离	正值向下，负值向上
bottom	元素距离页面右边界的上下距离	正值向上，负值向下

相对定位relative

让某个元素，相对于原本的位置进行定位，定位原点为元素本身的位置。

元素不会脱离文档流(后续元素不会顶替其位置)，会保留元素原本的位置。

固定定位fixed

让某个元素脱离文档流，默认根据页面的四个边界进行定位。

通常用于放置- -些工具、广告、返回首页等。

绝对定位absolute

让某个元素脱离文档流，根据已定位的父元素进行定位。如果父元素没有定位，会根据页面定位。

层叠z-index

某个已经定位的元素可以通过z-index控制其层叠顺序。

z-index是一个数字，数字越大，距离视线越近。

不透明度

取值范围[0,1)，值越大，越不透明

opacity：

独立的样式。修改某个元素的不透明度

opacity:0.5;

rgba() ：

background-color的值的一种写法：修改背景的不透明度

background-color :rgba(255,0,0,0.5);

转换transform

改变某个元素的状态，如旋转、移动、缩放等

值	作用
rotate(45deg)	顺时针旋转45度
translate(10px,20px)	向右平移10px，向下平移20px
translateX(10px)/translateY(10px)	向右/向下平移10px
rotateX(30deg)/rotateY(30deg)/rotateZ(30deg)	沿着X/Y/Z轴3D旋转
rotate3d(1，1，0，30deg)	沿着X和Y轴3D旋转30度(0表示不旋转，1表示旋转)
scale(1.5)	放大1.5倍

以上的效果可以同时设置：transform:效果1 效果2 ....

transform:rotate(30deg) scale(1.5) trans1ate(10px, 20px);

过渡transition

设置某个转换效果完成所需的时间

相关样式	作用
transition-duration:3s	过渡时间(所需时间)
transition-delay:2s	延时生效
transition-timing-function:linear	时间函数
transition:5s 2s ease	2s后执行，所需5s, 慢-快-慢

动画animation

animation相关样式	作用
animation-name:动画名	执行指定动画
animation-duration:3s	动画执行时间
animation-delay:3s	动画延时时间
animation-iteration-count:3	动画执行次数，infinite表示无限
animation-timing-function:linear	动画执行时间函数，linear表示匀速
animation:动画名5s 2s	简写。只写一个时间表示用时写两个时间表示第一个是用时，第二个是延时

1.定义动画的关键帧

@keyframes myanimate{
    0%{
		//该阶段的样式
		样式名：值
	}
	25%{}
    50%{}
	75%{}
	100{}
}

2.给某元素设置animation样式

#xxx{
	/*执行动画的名称*/
	animation-name: myanimate;
	/*执行动画所需要的时间*/
	animation-duration: 3s;
	/*执行动画的次数   infinite表示无限*/
	animation-iteration-count: infinite;
	/*动画延时*/
	animation-delay:2s ;
	/*执行动画的速度   linear匀速*/
	animation-timing-function: linear;
	
	/*简写  只写一个时间表示用时，两个时间表示第一个用时，第二个延时*/
	animation:动画名 3s 2s infinite linear;
}

滤镜filter

滤镜函数	作用
grayacale(100%)	灰度
blur(5px)	模糊
brightness(150%)	亮度
contrast(150%)	对比度
hue-rotate(180deg)	色调旋转
invert(100%)	反转颜色
opacity(50%)	不透明度
saturate(2)	饱和度
sepia(80%)	灰褐色

JavaScript简称JS

JS是一门面向对象、轻量级、弱类型的解释型脚本语言。

HTML、CSS、JS的作用

HTML：定义页面中的内容

CSS：控制HTML元素的外观和样式

JS：操作HTML元素

JS书写位置

1.可以写在某个标签的某个事件中

2.写在一个<script>标签中，<script>通常放在head标签或者body标签结束前

3.写在一个独立的.js文件中，通过script标签导入

<script src="js文件路径"></script>

JS的输出语句

1.弹警告窗alert

alert(字符串或者变量)
<!--通过提示框输出    alert(输出内容)-->
<button onclick="alert('hello js')">点击</button>

2.控制台输出console.log()

<!--通过控制台输出   console.log(输出内容)-->
<button onclick="console.log('hello js!')">点击2</button>

3.打印在新页面中document.write()

<!--通过新页面输出   document.write(输出内容)-->
<button onclick="document.write('hello js!!!')">点击3</button>

JS由ECMAScript(核心语法)、浏览器对象模型(BOM)、文档对象模型(DOM)组成

ECMAScript(核心语法)

原始数据类型

JS中的原始类型	说明
数值型number	整数、小数都称为数值型
字符串String	用单引号、双引号引起来的内容都是字符串
布尔型boolean	true/false
空null	某个引用类型变量通过null设置为空
未定义undefined	当某个变量没有声明或没有值时

引用数据类型

包括：对象、数组、、函数等

定义变量：var/let

var/let 变量名；
var name;
var age;
let sex;

命名规则

1.由字母、数字、下划线、$符号组成

2.不能使用数字开头

3.不能使用js中的关键字

变量初始化

var name="张三";
var age;
age = 20;
console.log(name+"-----"+age);

JS中的本地对象

JS中的数组Array

可以保存把不同类型的数据，同时数组的长度大小可变。

定义数组

//java定义
数据类型[] 数组名 = new 数据类型[];
//JS定义
var 数组名 = new Array();
var 数组名 = [];

数组的使用

var list = new Array();
list[0]=123;
list[1]="hello";
list[2]=true;

数组遍历

//length属性可以获取数组长度
//循环所有下标，没有赋值元素的输出underfined
for(var i =0;i<list.length;i++){
    console.log(list[i]);
}
//增强for循环，获取保存了数据的下表
for(var index in list){
    //通过下标获取元素
    console.log(list[index]);
}

数组初始化

var 数组名 = new Array(元素1,元素2,元素3....);
var 数组名 = [元素1,元素2,元素3....];

常用方法

方法名	作用	返回值
sort()	将数组中的元素进行升序排序	排序后的数组
reverse()	将数组中的元素倒序保存	倒叙后的数组
pop()	移除数组中的最后一个元素	被移除的元素
push(元素)	添加元素到数组末尾	最新的数组长度
shift()	移除数组中的第一个元素	被移除的元素
unshift(元素)	添加元素到数组开头	最新的数组长度
fill(元素)	使用指定元素填充数组	填充后的数组
splice(index)	从指定索引开始分割数组，方法调用后，数组为剩余元素的数组	截取到的元素集合
splice(index,length)	从指定索引开始切分指定长度个元素，方法调用后，数组为剩余元素的数组	截取到的元素集合
	以上方法在调用后，都会影响原数组

方法名	作用	返回值
indexOf(元素)	得到某个元素第一次出现的索引	索引
lastIndexOf(元素)	得到某个元素最后一次出现的索引	索引
concat(元素)	将指定元素添加到原数组的末尾	添加后的数组
join(字符)	使用指定字符将所有元素串联成一个字符串	拼接后的字符串
slice(start,end)	截取指定[start,end)区间内的元素	截取后的数组
slice(index)	截取从index开始到末尾的元素	截取后的数组
Map(方法名)	将数组中的元素都执行指定方法	执行方法后的新数组
	以上方法在调用后不会影响原数组

日期Date

创建Date对象

var now = new Date;

常用方法

<script>
    /*本地对象
			new Array();
			new Date();*/
    //获取当前日期时间
    var now = new Date();
document.write(now+"<br>");
document.write("年:"+now.getFullYear()+"<br>");
document.write("月:"+now.getMonth()+"<br>");
document.write("日:"+now.getDate()+"<br>");
//一周中的第几天，0-6表示周天到周六
document.write("星期:"+now.getDay()+"<br>");
document.write("时:"+now.getHours()+"<br>");
document.write("分:"+now.getMinutes()+"<br>");
document.write("秒:"+now.getSeconds()+"<br>");
//获取从1970年/1/1起经过的毫秒数
document.write("毫秒:"+now.getTime()+"<br>");

//以上方法都有对应的set方法用于设置指定值

//获取日期时间宇符串
document . write(now. toString()+"<br>");
//获取日期部分字符串
document.write(now.toDateString()+"<br>")
//获取时间部分字符串
document.write(now.toTimeString()+"<br>")

//以当前环境输出日期时间字符串
document.write(now.toDateString()+"<br>")
//以当前环境输出日期字符串
document.write(now.toLocaleDateString()+"<br>")
//以当前环境输出时间字符串
document.write(now.toLocaleDateString()+"<br>")

</script>

字符串

在JS中字符串就是一个字符数组，字符串对象有length属性，获取字符串的长度

常用方法

var str = "adfs'FFFF'fsdfs";
document.write(str+"<br>");
//将字符串转换成小写，返回新的字符串
var lower =str.toLowerCase();
document.write(lower+"<br>");
//字符串转换成大写，返回新的字符串
var upper = str.toUpperCase();
document.write(upper);

var blank ="       123465         ";
console.log(blank.length)
//去掉字符串前后的空格，返回新的字符串
var newBlank = blank.trim();
console.log(newBlank.length);
console.log(newBlank);


blank = "    1  2  3    ";
//去掉字符串的左边空格
var left = blank.trimLeft();
console.log(left);
//去掉字符串右边的空格
console.log(blank.trimRight());

var str2 = "abcd12,34x,yz";
//返回指定下标的字符
console.log(str2.charAt(4));

for(var i=0;i<str2.length;i++){
    console.log(str2.charAt(i));
}
//返回指定字符(字符串)在字符串中第一次出现的下标，从0开始
var index = str2.indexOf(",");
console.log(index);
//返回指定字符(字符串)在字符串中最后一次出现的下标，从0开始
var last =str2.lastIndexOf(",");
console.log(last);

//截取用逗号分割的两个电话的号码
var phone = "13023459814,15824986065";
//substring()截取指定位置开始(包含)，到指定位置结束(不包含)的子字符串
var phone1 = phone.substring(0,phone.indexOf(","));
var phone2 = phone.substring(phone.indexOf(",")+1,phone.length);
console.log(phone1);
console.log(phone2);

//substr()截取从指定位置开始(包含)，指定长度的子字符串
//长度超过了字符串的长度，不会报错，截取到字符串的结束
phone2 = phone.substr(phone.indexOf(",")+1,11);
console.log(phone2);

//按指定字符(字符串)拆分字符串为数组
var list = phone.split(",");
console.log(list[0]);
console.log(list[1]);

var chars = "abcedfeg";
//用空字符串拆分，实际就是按照字符拆分
var list1 = chars.split("");
for(var index in list1){
    console.log(list1[index]);
}

//拼接字符串
var stra = "xxx";
var strb = "您好";
console.log(stra+strb);
console.log(stra.concat(strb));


//替换字符串
var str3 = "as df ghjkl";
//用新字符(字符串)替换原字符中第一个字符串
//console.log(str3.replace(" ",""));
console.log(str3.replaceAll(" ",""));

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>
    //向下取整(返回整数部分)
    console.log(Math.floor(3.14));//3
	//向上取整 (小数部分大于0，返回整数部分+1)
	console.log(Math.ceil(3.14));//4
	//四舍五入
	console.log(Math.round(3.14));//3
	//绝对值
	console.log(Math.abs(-10));//10
	//开平方
	console.log(Math.sqrt(4));//2
	//开立方
	console.log(Math.cbrt(8));//2
	//幂运算
	console.log(Math.pow(3,2));//9
	//随机数
	console.log(Math.random());//0-1的随机数
	//[0,10)的随机整数
	console.log(Math.floor(Math.random()*10));
	//5-10(包含)的随机整数
	//m到n(包含)的随机数:Math.floor(Math.arandom()*(n-m+1))+m;
	console.log(Math.floor(Math.random()*6)+5); 
	//5-10(不包含)的随机整数
	//m到n(不包含)的随机数:Math.floor(Math.arandom()*(n-m))+m;
	console.log(Math.floor(Math.random()*5)+5); 
</script>

函数function

一段代码能够完成特定的功能，可以被重复使用

自定义函数

function 函数名(参数1,参数2.....){
    //代码
    return 返回值;//函数不需要返回值，省略return语句
}

函数调用：对象.函数名(参数);

<script>
	//js代码执行时有一个预处理过程，函数在预处理时候就能识别，函数调用可以放在任意位置(不要求函数的调用一定要在函数定义之后)
    function fun1(){
    	console.log("fun1被调用")
	}
	fun1();//函数调用 

	//有参数没有返回值
	function fun2(name) {
   	 console.log("您好,"+name)
	}
	//调用
	fun2("张三");//js函数可以传参数，也可以不传参数，不会报错。

	//有参有返回值
	function fun3(a,b){
   		return a+b;
	}
	var sum = fun3(10,20);
	console.log(sum);
</script>

JS默认全局函数

函数	作用
parseInt()	转换成整数类型
parenFloat()	转换成小数类型
idNaN(元素)	元素是否为小数，元素是小数返回false
Number()	用Number对象转小数
eval()	把字符串中能执行的内容当语句执行

例：

<script>
	//js自带的全局函数
	//字符串转整数
	console.log(parseInt("85"));//转换成整数类型   85 
	console.log(parseInt("abc"));//返回结果为NaN(not a number)
	//数字开头的字符串能够把前面的数字转为整数，后面部分的字符会自动丢弃。
	console.log(parseInt("99abc"));//输出99
			
	//字符串转小数
	console.log(parseFloat("3.14"));///3.14
	console.log(parseFloat("a.14"));//NaN
	console.log(parseFloat("3.14xyz"));//3.14
	//截取小数的位数
	console.log(parseFloat("3.1415926").toFixed(2));//3.14   
			
	//用Number对象转小数
	var num1= new Number("123");
	console.log(num1);
			
	//true 说明字符不是数字，转换失败
	console.log(isNaN(parseFloat("a.14")));
			
	//eval()  把字符串中能执行的内容当语句执行
	console.log(eval("3+2"));
			
</script>

匿名函数

通常用于设置某个标签的某个事件

标签.事件=function(){
    
}

BOM(可以通过JS获取浏览器信息和控制浏览器)

弹窗

1.警告窗，带有提示文字和确认按钮

alert(提示文字);

2.输入框，带有输入框和确认取消按钮，点击确认，返回值为输入的内容

prompt(提示文字);

3.确认框，带有确认取消按钮，点击确认返回true,否则返回false

confirm(提示文字);

window对象

浏览器窗口对象，可以获取浏览器信息，调用浏览器的某些行为

常用属性和行为	作用
window.innerWidth	获取当前浏览器窗口可视区域宽度
window.innerHeight	获取当前浏览器窗口可视区域高度
window.screen	获取当前页面screen对象，保存了屏幕相关信息
window.location	获取当前页面location对象，保存浏览器地址栏相关信息
window.history	获取当前页面history对象，保存了历史记录相关信息
window.alert()	警告框
window.prompt()	输入框
window.confirm()	确认框
var wid=window.open()	弹出新窗口，返回值为弹出的窗口对象
wid.close() window.close()	关闭窗口。如果通过open)方法的返回值调用，关闭打开的新窗口;如果通过window调用，关闭当前窗口
var myTimeout=window.setTimeout(函数，毫秒)	设置延时生效，在指定毫秒后执行一次指定函数，通常是一个匿名函数
window.clearTimeout()	取消指定的延时生效
var myInterval = window.setInterval(函数,毫秒)	设置重复生效，在指定的毫秒后重复执行指定函数，通常是一个匿名函数
window.clearInterval()	取消指定的重复生效

screen对象：用户获取屏幕相关信息

属性	作用
window.screen.width	获取当前屏幕设置的宽度
window.screen.height	获取当前屏幕设置的高度
window.screen.availWidth	获取当前屏幕除任务栏之外的宽度
window.screen.avallHeight	获取当前屏幕除任务栏之外的高度

location对象：设置或获取地址栏相关信息

属性	作用
window.location.href	获取或设置当前浏览器地址，能回退
window.location.assign("地址")	设置当前浏览器地址，能回退
window.location.replace("地址")	设置当前浏览器地址，不能回退
window.location.reload()	重新加载当前页面

history对象

属性	作用
[window.]history.back()/g0(-1)	回退
[window.]history.forward()/go(1)	前进

DOM：文档对象模型

获取节点

获取节点的方式	作用
document.getElementById("某个标签的id名")	根据id获取页面中唯一的节点，返回获取的节点对象
document.getElementsByClassName("某些标签的class名")	根据class名获取页面中对应的所有节点，返回获取的节点数组
document.getElementsByTagName("标签名")	根据标签名获取页面中对应的所有节点，返回获取的节点数组
document.getElementsByName("某个标签的name属性值")	根据标签的name属性值获取对应的所有节点，返回获取的节点数组

获取/设置节点的文本

innerText：读取或设置某个节点的内容(双标签中的内容)，无论设置什么内容都会原样显示

innerHTML：读取或设置某个节点的内容(双标签中的内容)，设置的内容中如果有html元素会识别HTML元素

//innerText用于设置或读取标签中的文本，不会识别HTML元素
document.getElementById("mp1").innerText="<h1>李白</h1>";
//inner HTML用于设置或读取标签中的文本，会识别HTML元素
document.getElementById("mp2").innerHTML="<h1>李白</h1>";

效果图：

获取/设置节点属性

常用属性	作用
节点.src	获取或设置资源路径，如img的src
节点.value	获取或设置节点的value属性，如表单元素的value
节点.checked	获取或设置单选按钮和复选框的选中状态
节点.className	获取或设置标签的class属性值
节点.href	获取或设置标签的href属性值，如a标签的href

修改节点样式

修改单个样式：节点.style.样式名="值";

修改多个样式：节点.style.cssText="样式名:值;样式名:值 ";

创建添加删除节点

创建节点

document.creatElement("标签名");
document.createElement("div");

添加子节点

//父节点.appendChild(子节点);
var md = document.createElement("div");
document.body.appendChild(md);

删除子节点

//父节点.removeChild(子节点);
var md = document.getElementById("md");
document.body.removeChild(md);

事件

节点添加事件

<script>
  	节点.事件=function(){
        //触发事件时执行的内容
    }
</script>

常用事件

常用事件	作用
onclick	鼠标单击
ondblclick	鼠标双击
onfocus	文本框获取焦点
onblur	文本框失去焦点
onmouseenter/onmouseover	鼠标移入
onmouseout/onmouseleave	鼠标移出
onmousemove	鼠标移动
onmousewheel	鼠标滚轮滚动
onmousedown/onmouseeup	鼠标按下/松开
onsubmit	表单提交
onchange	改变

event对象

在某个函数中传入一个参数，通常为e或event，就可以监听对应的事件。

节点.事件=function(event){
    
}

event对象常用属性和方法	作用
event.clientX	获取当前鼠标的水平位置
event.clientY	获取当前鼠标的垂直位置
event.preventDefault()	阻止默认事件
event.stopPropagation()	阻止事件冒泡

事件冒泡：

默认在子节点触发事件时，父节点也会触发事件，这种情况称为事件冒泡。

通过event.stopPropagation()；阻止事件发生。

表单相关事件

表单提交

不要使用提交按钮的单击事件，要使用表单的onsubmit事件

获取表单

//使用常用的id/class/标签名/name属性，通过document.getElementXXX方式获取
//还可以使用document.forms获取当前页面中表单的数据
document.forms[0].onsubmit = function(){
    
}

阻止表单提交

//在表单的提交事件中，使用return false阻止表单的提交

输入框

输入框包括：文本框text、密码框password、文本域textarea

获取输入框中输入的内容

//var 变量 = 节点.value;
var username = document.getElementsByName("username")[0].value;

设置输入框内容

//节点.value =值;
document.getElementsByName("username")[0].value = "xx';

单选按钮

判断是否选中

//节点.checked结果为true表示选中

获取单选按钮对应的值

如在获取选择的性别时，可以设置性别变量值为男，默认选中男，再判断选项女是否被选中，如果被选中，更改性别变量的值为女。

复选框

判断是否选中

//节点.checked结果为true表示选中

全选

点击全选时，将所有的复选框的选中状态设置为全选按钮的选中状态

反选

点击反选时，将所有的复选框的选中状态设置为它自身相反的选中状态

获取复选框的值

复选框和单选按钮一致，需要自己设置value

通常定义一个数组保存最终选择的各个选项的value值。

通过遍历所有复选框，判断其状态，如果被选中，将其value添加到数组中。

下拉菜单

获取选中的值

下拉菜单可以通过option的value属性获取选中的值，如果没有设置value属性，获取的是option标签中的文本。

如果有value属性，获取实际的value值。

动态添加选项

可以使用document.createElement("option")方式创建option后，使用appendChild方法添加到selet中。

建议使用new Option(value)方式创建一个Option后，使用select节点.add(option节点)方式添加到select中

综合案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
        
		<form>
			用户名:<input type="text" name="username" /><br> 性别:
			<input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" />女<br> 爱好:
			<input type="checkbox" name="hobby" value="游泳" />游泳
			<input type="checkbox" name="hobby" value="旅游" />旅游
			<input type="checkbox" name="hobby" value="阅读" />阅读<br>
			<input type="checkbox" id="all" />全选
			<input type="checkbox" id="reverse" />反选
			<br> 职业:
			<select name="job">
				<option>医生</option>
				<option>教师</option>
				<option>学生</option>
				<option>工人</option>
			</select>
			<input type="text" id="optValue" /><button type="button">添加选项</button>
			<br>
			<input type="submit" value="注册" id="sbm" />
		</form>

		<script>
			//全选按钮事件
			//获取所有的爱好复选框
			var hobbyList = document.getElementsByName("hobby");
			document.getElementById("all").onchange = function() {
				//给所有的爱好复选框设置状态
				for(var i = 0; i < hobbyList.length; i++) {
					//选中状态同全选按钮状态一致
					hobbyList[i].checked = this.checked;
				}
			}
			//反选按钮事件
			document.getElementById("reverse").onchange = function() {

				//给所有的爱好复选框设置状态
				for(var i = 0; i < hobbyList.length; i++) {
					//选中状态同全选按钮状态一致
					hobbyList[i].checked = !hobbyList[i].checked;
				}
			}

			//添加选项
			document.getElementsByTagName("button")[0].onclick = function() {
				var optValue = document.getElementById("optValue").value;
				if(optValue.length == 0) {
					alert("必须输入选项内容");
					return;
				}
				//创建一个option
				var opt = new Option(optValue);
				//设置value属性
				opt.value=optValue;
				//将option添加到select中
				document.getElementsByName("job")[0].add(opt);
				return false;
			}

			//表单提交
			document.forms[0].onsubmit = function() {
				//获取文本框的值
				var username = document.getElementsByName("username")[0].value;
				//获取单选按钮的值
				var sex = document.getElementsByName("sex")[1].checked ? "女" : "男";

				//复选框事件
				var hobbyies = []; //最终的爱好数组
				//遍历爱好选项
				for(var i = 0; i < hobbyList.length; i++) {
					//判断是否选中
					if(hobbyList[i].checked) {
						//将选中的选项的value添加到数组中
						hobbyies.push(hobbyList[i].value);
					}
				}

				//下拉框
				var job = document.getElementsByName("job")[0].value;
				alert("用户名:" + username + "\n性别:" + sex + "\n爱好:" + hobbyies + "\n职业:" + job);

				return false;
			}
            
		</script>
        
	</body>

</html>

jQuery

jQuery是一个轻量级的JavaScript函数库，封装了很多JS中的内容。

使用

在页面中导入jquery.js文件

<script src="jQuery.js文件路径"></script>

页面中加入另一个script标签，写入jquery代码

<script src="jQuery.js文件路径"></script>
<script>
	//文档就绪函数
    jQuery(document).ready(function(){
        //jQuery代码
    });
    //简化版文档就绪函数
    $(function(){
        //jQuery代码
    });
</script>

jQuery对象和JS对象

1.在js中，使用document.getElementXXX获取到的是dom对象。

2.dom对象只能使用如.style、.innerText等属性修改样式或内容，不能使用jQuery对象中的属性或函数。

3.在jQuery中，使用jQuery选择器获取到的是jQuery对象。

4.jQuery对象只能使用jQuery中的属性或函数，不能使用dom对象中的属性或函数。

5.通常在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提供了一个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.test")表示得到class为test的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
$("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值

创建节点：$("完整标签");

//js写法
var h1 = document.createElement("h1");
h1.immerText="创建出的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(参数)	得到某节点之后的所有或指定节点。参数为标签名的字符串，如prevAll("a")表示得到后续所有a标签
某节点.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;
faseToggle()	切换fadeln/fadeOut
slideUp()	将高度从原始值变为0，最终display:none;
slideDown()	将高度从0变为原始值，最终display:block;
slideToggle()	切换slideUp/slideDown
	以上所有函数都可以给两个参数。第一个参数为动画执行所需毫秒，第二个参数为动画执行结束后的回调函数，表示在动画执行后执行。

$("#md").click(function(){
    //如果希望在动画后执行，不能这样写
    //$(this).fadeOut(500);
    //alert("消失后弹出");
    
    //正确写法
    $("#md").hide(2000, function() {
		alert("消失了");
	});
});

自定义动画

启用自定义动画

使用animate()函数，该函数有四个参数分别为样式组，所需事件、动画函数、回调函数
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变为函数

JSON

是一种数据交换格式，可以理解为保存数据、交换数据的一种格式。

JSON数据通常以键值对的形式保存。

键:值

键的类型为字符串，值的类型可以是普通类型、对象或数组

值的数据类型

值的数据类型	符号	示例
字符串	""	"name":"张三"
数值型	直接写数字	age=21
逻辑值	true/false	"married":false
空	null	"car":null
对象	{}	"pet":{"name":"小红","age":2}
数组	[]	"family":[{"relation":"父亲","name":"xxx"},{"relation":"母亲","name":"xxx"}]

举例：

属性:姓名、年龄、性别、宠物、婚姻状况、房产、家庭成员

{
	"name":"王亮",
	"age":20,
	"sex":"男",
	"pet":{
		"petName":"可乐",
		"petType":"狗"
	},
	"married":true,
	"house":null,
	"family":[{
		"name":"王四喜",
		"relation":"父亲"
	},{
		"name":"黄欣",
		"relation":"母亲"
	}]
}