h5 +css +js +jq 基础知识总结

最新推荐文章于 2024-07-06 22:10:21 发布

@然而

最新推荐文章于 2024-07-06 22:10:21 发布

阅读量2.4k

点赞数 1

分类专栏：前端开发总结文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_53026081/article/details/125691231

版权

前端开发总结专栏收录该内容

15 篇文章 0 订阅

订阅专栏

l软件架构

1，C/S client/server 客户端/服务器

本地需要安装一个客户端，远程需要一个服务器端

如：电脑上安装软件，QQ，迅雷

安装、部署、开发比较麻烦

用户体验好点

2，B/S browser/server 浏览器/服务器

用户只需要安装浏览器，然后输入不同的网址，访问不同的服务器

如:淘宝网、京东、百度...

安装、部署、开发比较简单

缺点：对于服务器的硬件要求比较高，用户量大的时候，体验差

BS架构

资源划分

静态资源：

特点，所有的用户访问看到的内容都是一样的‘

分类：文本、图片、视频、HTML、CSS、JS...

动态资源：

用户访问的时候，得到的内容可能不一样

如果用户访问的时候，访问的是动态资源的话，服务器先把动态资源转换成静态资源，在发送给浏览器

静态资源

HTML：搭建基础网页的，展示网页的内容

CSS：用户美化页面，布局页面的

JavaScript：控制页面的元素，让页面和用户产生交互

HTML

概念：Hyper Text Markup Language：超文本标记语言

超文本：使用超链接的方式，把不同空间的文字信息组织在一起的一种网状文本

标记语言：标签构成的语言

标签格式:

HTML入门

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

1，<!DOCTYPE html> 声明文档为html类型 lang=en /zh-CN 定义页面为英文或者中文,不区分大小写

<!doctype HTML>

2，<html> ：页面根元素

3，<head> ：一般包含一些页面元数据

如：<meta charset="utf-8" /> 设置编码环境

<title> 标题

4，<body> ：包含了可见的页面内容

HTML ：文件的格式 .html 或者 .htm

标签的组成

双标签：有开始和结束标签如 <html> </html>

单标签: 开始标签和结束标签写在一起如 <br /> <img />

<hr />

标签的嵌套：

错误的写法 <a> <b> </a> </b>

正确的写法 <a> <b></b> </a>

标签不区分大小写，建议小写

标签的属性

标签的属性一般定义在开始标签中，以键值的形式出现

如 <a href=""> </a>

宽 width 高height id class

单标签属性的写法： <img src = "">

双标签属性的写法： <a href=""> </a>

标签的学习

1，文件标签

meta标签name值

2，文本标签:

<h1>标题1</h1> <h2>标题1</h2> <h3>标题1</h3> <h4>标题1</h4> <h5>标题1</h5> <h6>标题1</h6>  <p>段落标签</p> <p>段落标签</p> <div>div标签</div> <div>div标签</div>  <br />  <hr > <hr color="red"> <hr width="200px"> <hr size="7" color="aqua"> <hr width="200px" align="right" color="red">

3，含有样式的标签

<b>字体加粗</b> <i>斜体</i> <center>居中</center> <font color="red" size="7" face="宋体">字体</font>

color属性取值：

1，颜色名称 red yellow green blue

2，RGB() rgb(值1，值2，值3) 值的取值范围 0-255

rgb(0,0,255) :蓝色 --> r=0,g=0,b=255

rgba() -->a表示透明的值的范围 0-1

3，#值1值2值3： 16进制的取值方式，3个值也是对应的rgb

取值范围: 00-FF

width/height属性取值：

1，数值 +单位：100px

2，数值% :表示相对于父元素的比例

图片标签

<img src="img/book.jpg" width="200px" alt="表示替换的文本">   <img src="../../抽奖/img/1.jpg" alt="">

相对路径：

./ :代表的是当前目录，找的是同级别的目录信息

../：代表上一级目录，找的是父级的兄弟目录

5、特殊字符

空格：

大于： > ge > <>

小于： < le

版权：@copy

6、列表

<ul type="circle"> <li>北京</li> <li>上海</li> <li>南京</li> </ul>  <ol type="I"> <li>北京</li> <li>上海</li> <li>南京</li> </ol>  <dl> <dt> 城市</dt> <dd>北京</dd> <dd>上海</dd> <dd>南京</dd> </dl>

7，链接标签 a

<a href="http://www.baidu.com">链接到百度</a> <a href="test.html">跳转页面</a> <a href="mailto:1111111@qq.com">联系我们</a> <a href="#top">回到顶部</a> <a href="http://www.baidu.com"><img src="img/book.jpg" width="100px" alt=""></a> <a href="http://www.baidu.com" target="_blank">链接到百度</a> <a href="http://www.baidu.com" target="_self">链接到百度</a>

link:定义文档和外部文件的关系

8、表格标签

<table width="1000px" border="1px" cellspacing="0px" cellpadding="10px"> <caption>标题</caption> <tfoot> <tr> <th >Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> </tr> </tfoot> <tr bgcolor="aquamarine"> <td colspan="3">Data</td> <td align="center">Data</td> <td>Data</td> <!-- <td>Data</td> --> <!-- <td>Data</td> --> </tr> <tr> <td bgcolor="bisque">Data</td> <td rowspan="3">Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <!-- <td>Data</td> --> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <thead> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </thead> <tbody> </tbody> </table>

border：外边框的宽度

width：表格宽度

height：表格高度

cellspacing:边框之间的距离

cellpadding：内容和边框之间的距离

bgcolor：背景颜色

algin：对齐方式

th：表头

td：列

tr：行

cospan：合并列

rowspan：合并行

thead：表示声明表头

tfoot：声明表尾

tbody：表的内容

caption：表格标题

表单 form

表单标签：用于采集用户输入的数据，和服务器进行交互。

form标签定义了一个供用户输入的html表单，可以声明一个范围，这个范围代表了采集用户数据的范围

<form action="http://www.baidu.com" method="post"> 用户名: <input type="text" name="username"> <br> 密码： <input type="password" name="password" ><br> <input type="submit" value="提交"/> </form>

action:指定提交数据的url（表示数据要提交到的地方）

method:指定提交的方式

值：

get：请求的参数会在地址栏中显示，url的长度是有限制的，get方法是不安全的

post：请求的参数不会在地址栏中显示，会封装在请求体中，请求参数没有大小的限制，post方法比较安全

注意：如果表单中的数据想要被提交，需要在表单中加一个name属性

表单项标签

input :定义了输入的控件，可以通过修改type属性的值，从而改变元素展示的样式

<form action="#" method="get">
 <label for="user">用户名:</label> 
 <input id="user" type="text" name="username"> <br> 
密码：  <input type="password" name="password" ><br> 
性别:  <input id="man" type="radio" name="gender"> <label for="man">男</label>    <input type="radio" name="gender">女  <br> 
爱好:  <input id="bas" type="checkbox" name="hobby"/> 
<label for="bas">打篮球</label> <input type="checkbox" name="hobby"/> 踢足球 <input type="checkbox" name="hobby"/> 看电影 
<input type="checkbox" name="hobby"/> 学习  <br> 
文件 : <input type="file"/> <br> 
按钮 : <input type="button" value="按钮" />  <br> 
颜色: <input type="color" />                 <br> 
时间: <input type="date" />                  <br>
 邮箱: <input type="email"  />    <br> 
图片: <input type="image" src="">   <br> 
自我介绍 : <textarea rows="5" cols="10"></textarea> <br> 
籍贯: <select name="city"> <option value="nj">南京</option> <option value="sh">上海</option> <option value="hz">杭州</option> </select> <br> <input type="submit" value="提交"/> </form>

    

<h1>注册页面</h1> <table width="300px" > <tr> <td width="100px"> 用户名: </td> <td width="200px"> <input type="text" /> </td> </tr> <tr> <td width="100px"> 密码: </td> <td width="200px"> <input type="password" /> </td> </tr> <tr> <td width="100px"> 邮箱: </td> <td width="200px"> <input type="email" /> </td> </tr> <tr> <td width="100px"> 手机号: </td> <td width="200px"> <input type="text" /> </td> </tr> <tr> <td width="100px"> 性别: </td> <td width="200px"> <input type="radio" name="gender" />男 <input type="radio" name="gender" />女 </td> </tr> <tr> <td width="100px"> 爱好: </td> <td width="200px"> <input type="checkbox" name="hobby" />唱歌 <input type="checkbox" name="hobby" />打球 <input type="checkbox" name="hobby" />旅游 </td> </tr> <tr> <td width="100px">籍贯</td> <td width="200px"> <select> <option value ="">南京</option> <option value ="">上海</option> </select> </td> </tr> <tr> <td width="100px">个人介绍:</td> <td width="200px"> <textarea rows="4" cols="25"></textarea> </td> </tr> <tr> <td align="center" colspan="2"> <input type="checkbox" /> 是否同意本公司的协议 </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" value="注册"> </td> </tr> </table>

块级元素

宽度默认是根父级宽度是一样的

块级元素是占据父元素的一行，不可以和其他元素共处一行

可以调节宽高

p ,div, ul ,li,h1-h6...

行内元素

大小是自身内容的宽高

可以和其他元素共处一行，如果显示不下会自动换行

没有宽高属性，无法通过宽高属性调整大小

span em

补充内容

URL ：统一资源定位符俗称网址

URL的格式：

协议://主机地址（ip地址） + 目录路径 +参数

常见的协议：

ftp: 文件传输协议，可以通过ftp访问服务器上的文件

使用方式: ftp://admin:123456@192.168.1.1/xxx.pdf

file：用来访问本地计算机中的文件

使用方式: file:///C:/windows/system/win32.dll

telent:允许用户通过一个协商过程与远程设备进行通信

http:超文本传输协议 Hyper Text Transfer Protocol 用来从万维网的服务器传输超文本到本地浏览器中的传输协议

Web标准

结构标准 XML,HTML,XHTML

表现标准 CSS

行为标准 DOM JavaScript

Web浏览器

常见的浏览器

IE Trident

Opera Blink

Safari Webkit

Firefox Gecko

Google Chrome Blink

Microsoft Edge Blink

HTML5语法的变化

HTML5语法变化主要是为了兼容各种不规范的HTML文档

某些元素可以省略结束标签

1，仅仅可以省略结束标签的元素有：p,li,dt,dd,rb,rt,rtc,rp,thead,tbody,tfoot

tr,td,th,optgroup,option,colgroup

2,绝对没有结束标签的元素有：area,base,br,col,command,embed,hr,img,input,

keygen,link,menuitem,meta,param,source,track,wbr

3,可以将开始标签和结束标签一起省略的元素:html,head,body,colgroup,tbody

4,属性值可以不用引号括起来

5，标签不用区分大小写

6，某些标志性的属性可以省略属性值，通常为布尔型。

HTML5 的基本元素，与html概念差不多

<html>,<head>,<title>,<style>,<meta>,<base>,<body>,

HTML5 的文本格式化元素与html概念差不多

HTML5特殊的文本格式化元素

<abbr>,<address>,<blockquote>用于定义块引用,<q>,<code>,<cite>

<b>:定义加粗字体

<big>：定义大号字

<em>：着重文字，斜体

<i>：斜体字

<small>：小号字

<strong>：着重文字，加粗

<sub>：定义下标字

<sup>：定义上标字

<ins>:定义插入字

<del>：定义删除字

计算机输出：

<code>：定义计算机代码

<kbd>：定义键盘输出样式

<samp>：定义计算机代码样本

<tt>：定义打字机输入样式

<var>：定义变量

<pre>：定义预格式文本

引用、术语：

<abbr>：定义缩写

<acronym>：定义首字母缩写

<address>：定义地址

<bdo>：定义文字方向

<blockquote>：定义长的引用

<q>：定义短的引用语

<cite>：定义引用，引证，通常用于著作

<dfn>：定义一个概念，项目，缩写，定义等

超链接和锚点

基于<a>标签HTML5里面新增的属性

download：此属性只是浏览器下载URL而不是导航到它，因此提示用户将其保存为本地文件

media：此属性规定目标URL是为什么类型的媒介/设备进行优化的

HTML5里面的废弃属性

charset,cords,name,rev,shape

列表相关元素

标签属性同HTML，无变化

表格相关元素

标签属性同HTML，无变化

HTML5新增的常用元素

1，新增的文档结构元素，如<header>,<footer>,<aside>,<nav>

2,新增的文本格式化元素，

<bdi>,

<mark>用于定义高亮显示文本

time 用于显示被标注的内容是日期或者时间，采用24小时制，会用到以下2个属性

datetime：该属性表示此元素的时间和日期。

pubtime：这个属性指是time元素中的日期时间是文档的发布日期

3，新增的页面增强元素

meter：用于表示一个已知最大值和最小值的计数器

progress：用于表示一个进度条，常用于下载进度，加载进度等

4，新增的多媒体元素

audio:定义了声音，如音乐

常用属性：src:表示歌曲的路径

controls:设置是否使用播放控制

video：定义了视频，如电影片段

常用属性：src:设置视频路径

controls：设置是否使用播放控制

HTML5的通用属性

html5规范对通用属性也做了一定的修改，保留了，id,style,class,dir,title,lang

accesskey,tableindex

新增了contenteditable 此属性规定元素内容是否可编辑，当元素可编辑时，

他的值返回为true，否则返回false

designMode：如果将designMode属性设置为on，则该页面上所有支持

contenteditable属性的元素变为可编辑的状态

hidden：HTML5所有的元素都有hidden属性，属性值为true时显示，

属性为false时隐藏，hidden=true相当于display:none

spellcheck属性

HTML5为input、textarea等元素增加了spellcheck属性，这个属性有true和false

两个属性值，如果设置为true，浏览器会对用户输入的文本内容执行输入检查，如果检查不通过，那么浏览器会对拼错的单词进行提示

表单控件input属性

type = "text" 单行文本框

type = "password" 定义密码输入框

type = "radio" 单选按钮

type = "checkbox" 多选按钮

type = "submit" 提交

type = "reset" 重置

type = "button" 按钮

type = "image" 图片形式的提交按钮

type = "file" 选择文件控件

type = "hidden" 隐藏输入区域

除了type属性，还可以执行如下几个属性

checked：设置单选框，复选框初始状态为选中，属性值仅有checked，

表示初始就就被选中

disabled：设置首次加载禁用该元素，表示该元素无法获取输入焦点，无法被选中, 无法响应单击事件

maxlength：设置文本框中允许输入的最大字符数

readonly:设置文本框的内容不允许用户直接修改

size：设置该元素的宽度

src：设置图像区域所显示的图像的URL

表单控件的label

label元素用来对其他表单控件元素进行说明，主要用于单击label元素生成的标签

浏览器会自动将焦点转移到与标签相关的表单控件上

绑定的两种方式：

使用label元素的for属性，指定为关联表单控件的id即可

将说明和表单控件一起放入label元素内部即可

HTML5标案新增的元素

1，input元素新增功能类型

1，color

<input type = "color">元素是input元素中的一个特定种类，

用于创建一个允许用户使用的颜色选择器，或者输入兼容css语法的颜色代码区域

2,time类型

time类型是input元素生成一个时间选择器，它的结果值包含小时和分但是不包括秒数。

3,datetime类型和datetime-local类型

datetime类型使input元素生成一个UTC的日期时间选择器

datetime-local类型是input生成一个本地时间的选择器

4,date类型

<input type="date">元素可以让用户输入一个日期的输入区域，也可以使用日期选择器，值包括年、月、日

5,month类型

month可以使input生成一个月份选择器，语法同date类型

6，week类型

week类型可以是input元素生成一个选择第几周的选择器，语法同date

7,number类型

number类型生成一个只能输入数字的输入框

8,range类型

range类型生成一个拖动条，通过拖动条，用户只能输入指定范围，指定步长的值

9,search类型

search类型会生成一个专门用于输入搜索关键字的文本框

10,tel类型

生成一个只能输入电话号码的文本框

11，url类型

生成一个URL输入框，浏览器会在提交表单前自动检查用户输入的内容如果不符合URL格式，则会阻止提交

HMTL5新增的表单控件

output元素用于表示计算或者用户操作的结构，可以更加明显的显示其他表单控件的值

HTML5表单控件新增属性

1，form属性

2,formaction属性

当表单提交需要提交到多个地址，可以配置formaction

3，formmthod属性

使用场景及方法与formaction相同

4，formenctype

使用场景及方法与formaction相同，实现不同的submit类型按钮用

不同的enctype提交

5，formtarget属性

使用场景及方法与formaction相同，实现不同的submit类型按钮用

不同的target提交

6，placehoder属性

主要用在文本框，该属性的作用是规定可描述输入字段预期值的简单提示信息

7，autocomplete

对客户资料进行保密，防止浏览器软件或者恶意插件获取到，默认值是on，

如果需要增加安全性，在input中加入属性autocomplete=“off”

8，autofocus属性

为某个表单控件增加autofocus后，如果浏览器打开这个页面，

那么这个表单控件会自动获得焦点

9，list属性

list属性为文本框指定一个可用的选项列表，当用户在文本框中输入信息时，

会根据输入的字符自动显示下拉列表，供用户选择

10，pattern属性

pattern属性用于验证表单输入的内容

11，novalidate属性

此属性规定，当提交表单时，不对其进行验证，如果使用该属性

，则表单不会验证表单的输入

12，required

此属性规定提交之前必须要填入字段

CSS

概念：级联样式单，层叠样式单

作用：用来美化网页的，可以用来网页风格设计，比如颜色，字体，定位...

好处：让用户体验更好

CSS的引入

1，行内引入

<p style="color: red;font-size: 50px;">这是一个p标签</p>

2，文档内部引入

3，外部引入

span{ color: aqua; font-size: 100px; } <link rel="stylesheet" type="text/css" href="css/test.css"/> <span>这是一个span标签</span>

CSS的特性

1，层叠

一个html元素，可以有多个样式，但是生效的只会有一个，如果一个元素有多个样式，那么我们使用权重值对样式进行排序

权重值：行内引入样式 +1000，id选择器 +100，属性选择器、class选择器、伪类选择器 +10，普通标签、伪元素 +1

!important 修饰+1000

2，继承

特定的css属性可以从父元素向下传递给子元素，color、font开头、text开头、line开头可以继承，表格的属性也可以继承

盒子、定位、布局不能继承

CSS选择器

1，元素(标签)选择器

语法：标签{属性1：值1；属性2：值2}

2，通配符选择器

语法： *{属性1：值1；属性2：值2}

3，id选择器

语法： #id{属性1：值1；属性2：值2}

4，class选择器

语法： .class{属性1：值1；属性2：值2}

5、派生选择器

1，后代选择器

语法：祖先元素子元素{属性1：值1；属性2：值2}

2，子元素选择器

语法：父元素>子元素{属性1：值1；属性2：值2}

3，相邻兄弟选择器

语法：元素1+ 元素2{属性1：值1；属性2：值2}

6，属性选择器

1，选取带有指定属性的

标签名[属性] {属性1：值1；属性2：值2}

2，选取带有指定属性和值的

标签名[属性=值] {属性1：值1；属性2：值2}

3，选取属性中包含指定值的

标签名[属性~=值] {属性1：值1；属性2：值2}

4，选取属性以指定值开头的

标签名[属性|=值] {属性1：值1；属性2：值2}

7，伪类/伪元素选择器

CSS 伪类 | 菜鸟教程

常用的伪类

:active 选定的链接

:focus 拥有输入焦点的元素

:hover 鼠标悬停在元素上方

:link 未访问的链接

:visited 已访问的链接

:first-child 第一个元素

:last-child 最后一个元素

:nth-child() 指定第几个（比较常用）

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：

p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { background:#0000ff; }

html代码

Css部分代码

伪元素选择器

:first-letter 首字母

:first-line 首行

:before 元素之前

:after 元素之后

CSS属性

背景属性

不能继承

background-color 背景颜色

background-image 背景图片

background-size 设置背景图片的尺寸

background-repeat 设置背景是否重复显示

background-position 设置图片的定位

background-attachment 设置图片是否随着背景滚动

background 以上属性简写

CSS字体属性

可以继承

font-size:字体大小

font-style:设置字体是否是斜体

font-family：设置文本的字体

font-variant:设置字体是否以小型大写字母显示

font-weight:设置字体是否加粗

font：简写形式

文本属性

color 文本的颜色

direction 文本的方向

letter-spacing 文本的字符间距

line-height 文本的行高

text-algin 文本的对齐方式

text-decoration 设置文本的划线效果

text-indent 文本的首行缩进

text-shadow 文本阴影

text-transform 文本的大小写

white-space 设置文本超出颜色范围的处理

word-spacing 设置单词之间的间距

尺寸属性

width 宽度

min-width 设置最小宽度

max-width 设置最大宽度

height 高度

min-height 最小高度

max-height 最大高度

如果父级设置了min-height，那么父元素的高度会随着子元素的高度的增加而增加

如果设置了max-height，那么父元素的高度会随着子元素的高度减小而减小

列表属性

list-style-image 设置列表的标记项为图像

list-style-position 设置列表标记项的位置

list-style-type 设置列表标记想的样式

list-style 简写方式

表格属性

border-collapse 设置表格边框的合并

border-spacing 设置表格边框之间的距离

caption-side 表格标题的位置

empty-cells 设置表格中的空单元格是否显示

内容属性

content 一般和：before、：after配合使用，给元素中插入内容

盒子模型

内容 content

内边距

padding

padding-top

padding-right

padding-left

padding-bottom

外边距

margin

margin-top

margin-right

margin-left

margin-bottom

边框 border

样式

border-style

border-top-style

border-bottom-style

border-right-style

border-left-style

值： none:无边框效果 dotted：点线效果 dashed：虚线效果 solid：实线效果 double：双线效果

宽度

border-width

border-top-width

border-bottom-width

border-right-width

border-left-width

颜色

border-color

border-top-color

border-bottom-color

border-right-color

border-left-color

复合写法

border

border-top

border-right

border-left

border-bottom

轮廓属性

outline 边框的轮廓

outline-style

outline-color

oitline-width

outline: 5px dashed green;

布局属性

HTML中的3种布局方式

1，普通文档流

文档中的元素按照默认的显示规则排版布局，从上到下，从左到右，块级元素独占一行，行内元素按照顺序水平渲染，直到在当前行遇到了边界，然后换到下一行继续渲染，元素之间内容不能重叠。

2，浮动

设定元素向某一个方向以浮动的方式排列元素，从上到下，按照指定方向见缝插针。元素不能重叠显示。

float : 设置元素是否浮动，以及浮动的方向

HTML代码

<body> <div> <ul> <li>主题导航</li> <li>9.9包邮</li> <li>好货让利榜</li> <li>大额优惠券</li> <li>母婴榜</li> <li>品牌尖货</li> <li>特惠宝贝</li> <li>潮流范</li> <li>有好货</li> </ul> </div> </body>

CSS代码

HTML代码

<body> <div class="shop-list"> <div class="shop"> <div class="shop-text"> <span>保暖内衣</span> <span>全场五折起</span> </div> <div class="shop-img"> <img width="120px" src="img/adv-pic02.jpg" > </div> </div> <div class="shop"> <div class="shop-text"> <span style="color: #FFA500;">唇彩</span> <span>大牌直降</span> </div> <div class="shop-img"> <img width="120px" src="img/adv-pic02.jpg" > </div> </div> <div class="shop"> <div class="shop-text"> <span style="color: orchid;">薄款外套</span> <span>秋装上新</span> </div> <div class="shop-img"> <img width="120px" src="img/adv-pic02.jpg" > </div> </div> <div class="shop"> <div class="shop-text"> <span>保暖内衣</span> <span>全场五折起</span> </div> <div class="shop-img"> <img width="120px" src="img/adv-pic02.jpg" > </div> </div> <div class="shop"> <div class="shop-text"> <span>保暖内衣</span> <span>全场五折起</span> </div> <div class="shop-img"> <img width="120px" src="img/adv-pic02.jpg" > </div> </div> <div class="shop"> <div class="shop-text"> <span>保暖内衣</span> <span>全场五折起</span> </div> <div class="shop-img"> <img width="120px" src="img/adv-pic02.jpg" > </div> </div> </div> </body>

CSS代码

clear：设置元素的哪一侧没有浮动

clip：裁剪绝对定位元素

overflow：设置内容溢出元素框的处理方式

display：设置元素如何显示

值：

none：设置元素隐藏

inline：设置元素以行元素的方式显示,行元素不能设置宽高，内容并排显示

inline-block：设置元素以行级块元素的方式显示，可以设置宽高，且可以并排显示

block：设置元素以块元素的方式显示，可以设置宽高，不能并排显示

visibility：定义元素是否可见，设置隐藏后，原有的区域会保留，这是跟display的区别

/* visibility: hidden; */

3，定位

直接定位元素在文档中或者父元素中的位置，脱离了文档流，元素可以重叠，按照显示级别以覆盖的方式显示

position

sticky: 粘性定位

fixed: 固定的

absolute: 绝对定位，相对于父元素，如果没有父元素，找到页面

relative: 相对定位，相对于正常显示的位置来定位

static: 默认值，元素正常显示位置

位置的值：

top 定位的位置距离顶部多少

bottom 定位的位置距离底部多少

right 定位的位置距离右侧多少

left 定位的位置距离左侧多少

4，flex布局

Flex布局 - Javascript小白 - 博客园

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。

容器的属性

以下6个属性设置在容器上。

属性决定主轴的方向（即项目的排列方向）。

属性定义了项目在主轴上的对齐方式

属性定义项目在交叉轴上如何对齐。

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目的属性

一下6个属性设置在项目上。

CSS3新增的内容

新增的选择器

兄弟选择器

语法：元素1~元素2 {样式1：值;样式2:值}

属性选择器

语法：

元素[属性^=值] 选择属性以指定值开头的元素

元素[属性$=值] 选择属性以指定值结尾的元素

元素[属性*=值] 选择属性包含指定值的元素

新增的伪类的选择器

:root 选择文档的根元素，html中的根元素就是<html>

:only-child 选择唯一子元素并加样式

:first-of-type 向同级同类型的元素中的第一个元素添加样式

:last-of-type 向同级同类型的元素中的最后一个元素添加样式

:nth-of-type(n) 向同级同类型的元素中的第n个元素添加样式

:only-of-type 向同级同类型的元素中的唯一元素添加样式

:empty 向没有子元素或者没有文本呢容的元素添加样式

伪元素选择器

:enabled 向处于可用状态的元素添加样式(表单、超链接)

:disabled 向处于不可用状态的元素添加样式

:checked 向处于选中状态的元素添加样式

:not(selector) 向不是某个元素添加样式

:target 正在访问的锚点

::selection 向选中内容所在元素添加样式

CSS3新增属性

新增的背景属性

background-clip 设置背景的覆盖范围

值：

border-box: 表示背景覆盖范围到边框

padding-box：表示背景覆盖范围到内边距

content-box：表示背景覆盖范围到内容

background-origin 设置背景覆盖的起点

值：

border-box: 表示背景起点到边框

padding-box：表示背景起点到内边距

content-box：表示背景起点范围到内容

不同浏览器的前缀

-ms- ie浏览器

-moz- firefox浏览器

-o- Opera浏览器

-webkit- Chrome浏览器

CSS3新增文本字体属性

服务器字体

@font-face{

font-family:字体名称;

src:url(字体文件的url),local(该字体在本地的名称)；

}

新增的文本属性

text-overflow:设置文本超过元素框大小的时候处理的方式

clip：裁剪文本内容

ellipsis:显示省略号

word-break：设置自动换行的处理方式

normal：使用浏览器默认的换行规则

break-all：允许单词内换行

keep-all：在半角空格或者连字符处换行

word-warp：设置长单词是否允许换行显示

normal：只允许在断字点处换行

break-word:可以在长单词或者url中换行

新增的盒子模型属性

圆角属性

boder-radius

boder-radius: 1 2 3 4 /1 2 3 4

前面的4个分别表示左上，右上，右下，左下的横向半径

前面的4个分别表示左上，右上，右下，左下的垂直半径

boder-top-right-radius

boder-top-left-radius

boder-bottom-right-radius

boder-bottom-left-radius

盒子阴影

box-shadow 5px 5px 10px 5px red inset ;

第一个值:表示阴影横向偏移距离

第二个值：表示阴影纵向偏移距离

第三个值：表示阴影的模糊程度

第四个值：表示阴影扩展距离

第五个值：表示阴影的颜色

第六个值：表示内阴影

resize属性

用户设置元素是否可用由用户调整尺寸

值：

none 无法调整

both 可用调整宽高

horizontal 仅调整宽

vertical 仅调整高

这个属性如果要生效，要同时设置overflow属性

outline-offset

设置轮廓的偏移量

CSS3中的变形和动画

变形属性

transform:用于设置元素的变形，可用使用一个或者多个变形函数，常用的变形函数如下:

1,translate(x,y):表示元素水平方向移动x，垂直方向移动y

translateX(x):仅表示元素水平方向移动x

translateY(y):仅表示元素垂直方向移动y

2，rotate(x) :表示元素顺时针旋转x角度，单位式deg

3，scale(x,y):表示元素水平方向缩放x，垂直方向缩放y

scaleX(x):仅表示水平方向缩放x

scaleY(y):仅表示垂直方向缩放y

4，skew(xdeg,ydeg) :表示元素水平方向倾斜x度，垂直方向倾斜y度。

skewX(xdeg):仅表示元素水平方向倾斜x度

skewY(ydeg)：仅表示元素垂直方向倾斜y度

5，matrix(a,b,c,d,x,y)：将旋转、缩放、移动、倾斜组合在一起

transform-origin：设置元素旋转的中心点

CSS3的3D变形属性

1，transform属性新增的3个变形函数

rotateX：元素沿着x轴旋转

rotateY：元素沿着Y轴旋转

rotateZ：元素沿着Z轴旋转

2，transform-style：设置嵌套的子元素在3D空间中的显示效果

值:

flat：子元素不保留3D位置

peserve-3d：子元素保留3D位置

3，perspective 设置成透视效果，效果近大远小

4，perspective-origin ：设置3D元素所基于的x轴和y轴

5，backface-visibility：设置颜色的背面面向屏幕的时候是否可见

CSS3过渡属性

为元素增加过渡动画效果，可以设置在一定时间内，从一种样式变成另一种样式

过渡的属性:

transition-delay:设置过渡延迟时间

transition-duration：设置过渡的持续时间

transition-timing-function：过渡的时间曲线

值：

ease：先慢后快

linear：匀速

ease-in：慢速开始

ease-out：慢速结束

ease-in-out：慢速开始和结束的过渡效果

cubic-bezier:贝济埃曲线控制动画的速度

transition-property:设置哪个CSS使用过渡

transition：过渡的简写形式

CSS3的动画属性

1，@keyframes 声明动画

2，animation-name 使用@keyframes声明的动画

3，animation-delay 动画的延迟时间

4，animation-duration 动画的持续时间

5，animation-timing-function 设置动画的时间曲线

值：

ease：先慢后快

linear：匀速

ease-in：慢速开始

ease-out：慢速结束

ease-in-out：慢速开始和结束的过渡效果

cubic-bezier:贝济埃曲线控制动画的速度

6，animation-iteration-cout 动画的播放次数

infinate：表示无限次播放

7，animation-direction 设置动画的反向播放

alternate：可以反向播放

8，animation-play-state 设置动画的播放状态

running：表示播放

paused：表示暂停

9，animation：简写动画的所有属性

CSS3新增的多列属性

column-count 设置元素被分隔的列数

column-width 设置列的宽度

columns 设置列数和宽度（以上两个的简写）

column-gap 设置列之间的间隔

column-span 设置元素横跨的列数

column-rule-style 设置列之间的间隔样式

column-rule-color 设置列之间的间隔颜色

column-rule-width 设置列之间的间隔宽度

column-rule 以上3个样式的简写

div{ /* column-count: 6; */ column-width: 200px; column-gap: 30px; column-rule-style:dashed ; column-rule-color: #0000FF; column-rule-width: 10px; column-rule: 5px solid red; } </style> </head> <body> <div> 直播吧9月22日讯英超官方公布了最新一轮新冠检测的结果，包括曼城队中场京多安在内，共有3人检测结果为阳性。在9月14日到9月20日之间，共有1574名球员和球队工作人员接受了新冠病毒的检测，最终发现了3例阳性病例，其中就包括了曼城队的京多安，曼城官方在稍早前也已经确认了这一消息。曼城官方：京多安感染新冠病毒，将接受10天隔离根据英超官方和英国政府的规定，京多安将进行为期10天的自我隔离，他将有可能缺席曼城队接下来的3场比赛。德国中场也是曼城队中第三位感染新冠病毒的球员，此前队中边锋马赫雷斯和中卫拉波尔特也确诊感染，两人在上周都已回归训练，但只有马赫雷斯进入了球队客战狼队的大名单。曼城官方的公告中并没有透露更多信息，只是补充了“俱乐部所有人都祝愿伊尔凯（京多安）能早日康复”。 </div> </body>

JavaScript

概念：一门客户端脚本语言

运行在客户端的浏览器中，每个浏览器都有它的解析引擎

脚本语言：不需要编译的，直接被浏览器解析执行

js的功能：可以增强用户和html页面的交互，可以控制html元素。

JavaScript 发展史

1992 nombase ---> 专门用来验证表单的 --->C-- 改名 ScriptEase

1995 网景 netscape -->LiveScript -->Java-->Javascript

1996 微软借鉴了LiveScript -->ie -->JScript 收费

1997 --> ECMA (欧洲计算机制造协商会)

-->ECMAScript 是所有客户端语言的标准

javascript -->

1，ECMAScript

2,BOM

3,DOM

ECMAScript的基本语法

基础知识：

js引入

1，行内引入样式

2，文档内引入

在文档的任意位置，写一对script标签，然后把js的代码写在里面就可以了

3，外部引入

在外部新建一个js文件，然后再文档内部新建一个scriptsrc的标签，把外部文件引入即可

注意：script标签可以写在文档的任意位置，再html代码前和代码后，运行的顺序不一样

语法

1，区分大小写 test 和TEST

2，变量是弱类型

3，每行结束的分号可有可无（建议写）

4，注释 //表示单行注释 /**/表示多行注释

5，大括号表示代码块

关键字

关键字是指可以用于表示控制语句的开始和结束，或者用于执行特定操作。

比如: var if else for while switch case this...

变量

概念:一个存储了数据的小块的内存区域

强类型语言的变量：java,C 开辟内存区域的时候，会把这个区域要存放的类型定义好。

如 Java中声明变量： int a = 10； a = 10.5;错误

弱类型语言的变量:js 开辟的内存区域不会定义数据的类型，可以存放任意类型的数据

如 js中声明变量: var a = 10; a = 10.5;正确

数据类型

原始数据类型

number ：

整数、

小数、

非数（NaN）不能参与运算，与自身不等

string ：用单引号或者双引号引起来的

boolean：值有true和false

null ：null

undefined：undefined

undefined是派生自null的，所以null==undefined 返回结果为true

引用数据类型

对象(Object)、数组(Array)、函数(function)

类型的判断：

typeof：用来判断原始值是什么类型

instanceof：用来判断引用数据的类型

类型的转换

Number(变量) -->将变量转为number类型

String(变量) 将变量转为string类型

Boolean(变量) 将变量转为boolean

ParseFloat(变量) 将变量转为浮点型

ParseInt(变量) 将变量转为int类型

运算符

1,赋值运算符 =

var a = 10; 把10这个值赋值给a这个变量

2，算数运算符 + - * / %

3，比较运算符 > ,< , >= , <= , != , == , === , !==

使用比较运算符连接的内容，我们称之为表达式，表达式的返回结果为true或者false

注意: >=的意思是大于或者等于，只要满足一个条件，结果就为true。

==和===的区别：==表示值相等，就为true，===表示值和类型都相等，结果才为true。

逻辑运算符

逻辑原算符的俩头都是表达式，比较结果都是布尔类型

逻辑与 && 表示两个表达式结果都为true，这个逻辑表达式的结果才为true，有一个为false，结果为false。

逻辑或 || 表示当两个表达式结果都为false的时候，整个逻辑表达式的结果为false，有一个为true，结果为true

逻辑取反！表达式的结果为true，取反为fasle，结果为false，取反为true

注意：！有隐式的转换类型效果，可以将后面的内容转成布尔类型

一元运算符 ++ --

++ 表示自增用法 :a++, ++a a = 5, a++ --> a=6

-- 表示自减用法： a--, --a

二元运算符

+= a+=5; --> a=a+5

-= a-=5; --> a = a-5;

*= a*=5; --> a= a*5;

/= a/=5; --> a = a/5;

var a = 10,b = 10,c = 10,d = 10; a += 5; //15 b -= 5; //5 c *= 5;// 50 d /= 5; //2 document.write(a+"---"+b+"---"+c+"---"+d);

三元运算符

语法: 条件表达式 ? 真值 : 假值

当条件表达式的值为true的时候，整个表达式的结果取真值，如果条件表达式的值为false，整个表达式结果取值false

var money = 500; var total = money * 0.8; money = money>=500 ? total : money; document.write(money);

分支循环

if---else if中可以有多个表达式，最终要有一个统一的true或者false。

语法:

if(条件1){ 5>4 && 3>5

条件1成立的时候执行此处的代码块

}else if(条件2){

条件2成立的时候执行此处的代码块

}else{

条件1和条件2都不成立，执行此处代码块

}

switch case ：表示多条件选择语句，case的值和提供的值相比较，哪个case值和比较值相等，那么，就执行此case代码块。

语法:

switch(n){

case 1:

代码块1

break；

case 2:

代码块2

break;

default：

n值与1和2都不等的时候，执行此代码块

}

for循环

如果需要一遍又一遍的运行相同的代码，并且每次的值有不同，这个时候就可以用循环语句

语法:

for(语句1;语句2;语句3){

执行的代码

}

多重for循环

for(){

}

******

//多重for循环画矩形 for (var i = 0; i < 4; i++) { for (var j = 0; j < 6; j++) { document.write("*"); } document.write("<br>"); }

CSS代码 <style type="text/css"> td{ border: 1px solid black; } table{ border-collapse: collapse; } </style> JS代码 //使用多重for循环画出乘法表 document.write("<table>"); for (var i = 1; i <= 9; i++) { document.write("<tr >"); for (var j = 1; j <= i ; j++) { document.write("<td>"); document.write(j+"*"+i+"="+(i*j)+" "); document.write("</td>"); } document.write("<br>"); document.write("</tr>"); } document.write("</table>");

关键字continue 、break 用在循环中

continue表示，跳出本次循环，继续下次循环

break 结束循环

for (var i = 0; i < 5; i++) { if(i == 2){ continue; } document.write(i+","); } document.write("<br>"); for (var i = 0; i < 5; i++) { if(i == 2){ break; } document.write(i+","); }

for...in遍历用来遍历对象的属性，多用于对象、数组这种复合类型

for(key in 对象){

代码块

}

//使用forin遍历对象 var person = {id:1,name:"张三",age:20} for(key in person){ document.write(key+":"+person[key]); document.write("<br>") }

while 循环

语法:

while(表达式){

代码块

}

// 使用while循环求和 1-100 var i = 1; var sum = 0; while(i<=100){ sum += i; i++; } document.write(sum) //使用while求偶数和 var i = 0; var sum = 0; while(i<=100){ sum += i; i+=2; } document.write(sum);

do-while 循环

语法：

do{

代码块

}while(条件)

do-while和while的区别，do-while最少会执行一次代码块的内容

//使用do-while 求1-100的和 var i = 1; var sum = 0; do{ sum += i; i++; }while(i<=100) document.write(sum);

数组

概念：使用单独的变量名存储一系列的值，可以说是一个容器中装了一堆元素。

数组的声明

声明数组的3种方式：

方式1：使用new关键字创建一个Array对象

方式2：使用new关键字创建Array对象的同时赋初值

方式3：使用[]，直接声明，同时赋初值

数组操作

添加、删除元素，遍历数组，插入元素，合并数组，数组转字符串，数组排序

添加元素

1，使用数组的下标进行添加

2，使用push方法添加元素到数组

//往空数组添加元素 var arr = new Array(); //使用下标的方式添加 arr[0] = "上海"; arr[1] = "南京"; arr[2] = "北京"; //使用push方法添加 var arr1 = new Array(); arr1.push("上海"); arr1.push("南京"); arr1.push("北京");

遍历数组

1，for循环

2，for ...in 循环

//使用for循环遍历arr数组 for (var i = 0; i < arr.length; i++) { document.write(arr[i]+"<br>"); } //使用for...in方式遍历 for(key in arr1){ document.write(key + ":" + arr1[key]); document.write("<br>"); }

删除数组元素

pop方法：从尾部删除元素，删除后的元素会从数组中剥离并返回

语法：数组.pop()

//使用pop方法删除 //创建数组 var arr = ["a","b","c","d","e"]; document.write("数组删除之前的元素有:"); document.write("<br>"); for (var i = 0; i < arr.length; i++) { document.write(arr[i]+","); } document.write("<br>"); //使用数组调用pop方法 var a = arr.pop(); document.write("调用pop方法被删除掉的元素是"+a); document.write("<br>"); document.write("数组删除之后的元素有:"); document.write("<br>"); for (var i = 0; i < arr.length; i++) { document.write(arr[i]+","); }

shift方法：从头部删除元素

语法：数组.shift()

//使用shift方法删除元素 var arr = ["a","b","c","d","e"]; //使用数组调用shift方法 var b = arr.shift(); document.write("调用shift方法被删除掉的元素是"+b); document.write("<br>"); for (var i = 0; i < arr.length; i++) { document.write(arr[i]+","); }

splice方法：从指定位置删除元素

语法：数组.splice(删除元素的位置,删除元素的个数)

//使用splice方法删除 var arr = ["a","b","c","d","e"]; //使用数组调用shift方法 var c = arr.splice(2,2); document.write("调用splice方法被删除掉的元素是"+c); document.write("<br>"); for (var i = 0; i < arr.length; i++) { document.write(arr[i]+","); }

数组插入元素

unshift方法：从头部插入元素

语法：

数组.unshift(要加的内容)

调用unshift方法后，会返回一个值，这个值表示新数组的长度。

var arr = ["a","b","c"]; var newarr = arr.unshift("d"); document.write(newarr); document.write("<br>"); for (var i = 0; i < arr.length; i++) { document.write(arr[i]+","); }

splice方法：从指定位置插入元素

语法：数组.splic(x，y，z1，z2...)

x:表示想要删除或者添加的起始位置

y:想要删除的元素的个数

z1,z2：表示想要添加的元素，想添加几个元素都写在后面

//使用splice方法插入元素 var arr = [1,2,3,4,5,6]; //从第三个位置开始插入789三个数字，没有删除元素 arr.splice(3,0,7,8,9); for (var i = 0; i < arr.length; i++) { document.write(arr[i]+","); }

合并数组

concat方法：将多个数组连接成为一个数组

语法: 数组1. concat(数组2,数组3,...)

//使用concat方法连接数组 var arr = [1,2,3]; var arr1 = [4,5,6]; var arr2 = [7,8,9]; var newarr = arr.concat(arr1,arr2); for (var i = 0; i < newarr.length; i++) { document.write(newarr[i]+","); }

数组转字符串

join方法：将数组中的元素合并成一个用指定分隔符合并起来的字符串。

语法:数组.join(分隔符)

//数组转字符串 var arr = ['a','b','c']; var str = arr.join('|'); document.write(str + "-----"+ typeof(str));

数组中元素的排序

reverse方法：倒序排序，把原数组直接倒过来排序

sort方法：按照一定的规则，把数组按照顺序排序

sort方法会按照ascii码表值来排序。按照数字中的第一个值的顺序

//数组的排序 //reverse方法 var arr = [45,25,6,98,75,12,55]; //调用reverse方法 arr.reverse(); for (var i = 0; i < arr.length; i++) { document.write(arr[i]+","); } document.write("<br>"); //调用sort方法 arr.sort(); for (var i = 0; i < arr.length; i++) { document.write(arr[i]+","); }

二维数组

如果一个数组中，存放的元素本身也是一个数组，那么可以称之为是多维数组，二维数组就是再原数组中再存放数组。

比如: [[1,2,3],[4,5,6],[7,8,9]]

//创建一个二维数组，使用for循环往数组中添加数据 // var arr = [[1,2,3],[4,5,6],[7,8,9]]; //先声明一个空数组，作为外面的大数组 var arr = new Array(); //使用for往大数组中添加小数组，循环几次，就添加几个 for (var i = 0; i < 5; i++) { arr[i] = new Array(); //里面的for循环往小数组中添加具体的值 for (var j = 0; j < 5; j++) { arr[i].push(i*j); } } //[ [0,0,0,0,0],[0,1,2,3,4],[0,2,4,6,8],[0,3,6,9,12],[0,4,8,12,16] ] //使用for循环遍历二维数组 for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr[i].length; j++) { document.write(arr[i][j]+","); } document.write("<br>"); }

字符串

字符串是一种基本数据格式，各种语言都支持，可以实现各种语言之间的通信。

常见的属性

constructor	对创建该对象的函数的引用

String 对象方法

字符串的操作

1，字符串的连接

加法操作：使用+将两个或者多个字符串进行连接

var str = "hello"; var str1 = "world"; var str2 = 123; var newstr = str + str1; document.write(newstr+"<br>"); var newstr1 = "hello"+"world"+123; document.write(newstr1+"<br>"); var newstr2 = str + str1 + str2; document.write(newstr2+"<br>");

concat()方法:

语法: 字符串.concat(字符串1,字符串2,....)

var str = "hello"; var str1 = "world"; var str2 = 123; var newstr = str.concat(str1,str2); document.write(newstr+"<br>"); var newstr1 = str.concat("world",123); document.write(newstr1+"<br>"); var newstr2 = str.concat("world"+123); document.write(newstr2+"<br>");

字符串搜索

indexof()方法：从指定的索引位置开始，搜索子字符串在父字符串中第一次出现的位置。起始搜索位置没指定的话就从0开始。

语法：字符串.indexOf(搜索词，起始索引位置)

var str = 'abcdefgabcdefg'; console.log(str.indexOf('a')); //0 console.log(str.indexOf('a',3)); //7 console.log(str.indexOf('def')); //3

lastindexof()方法：用法和indexof类似，不同的是，检索顺序从后向前，返回的是指定字符串最后出现的位置

语法：

字符串.lastindexOf(搜索词,起始索引位置)

console.log(str.lastIndexOf('a')); //7 console.log(str.lastIndexOf('a',3));//0 console.log(str.lastIndexOf('def'));//10

search()方法：检索字符串中指定的子字符串（或者是正则表达式），如果检索到了，返回第一个匹配的子字符串的起始位置，如果不成功，则会返回-1.

语法：

字符串.search(搜索词)

console.log(str.search('c')); //2 console.log(str.search('h')); //-1

match()方法：在字符串内检索指定的值（或者正则表达式），如果检索不到，会返回null，如果检索成功，会返回一个数组，这个数组里面存放，搜索的子字符串，索引值，父字符串

语法：字符串.match(搜索词)

console.log(str.match('def')); //["def", index: 3, input: "abcdefgabcdefg", groups: undefined] console.log(str.match('h')); //null

字符串的截取

substring()：截取从传入参数的开始位置到结束位置-1处的所有字符。如果没有传入结束位置，那么表示截取到最后。

语法：字符串.substring（截取开始位置,截取结束位置）

var str = 'abcdefg'; console.log(str.substring(1,4)); //bcd console.log(str.substring(2)); //cdefg console.log(str.substring(-1)); //abcdefg

slice()：用法和substring基本相同，不同的是，slice能传入负数，负数表示从后向前计算截取位置

语法：字符串.slice(截取开始位置,截取结束位置)

console.log(str.slice(1,4)); //bcd console.log(str.slice(2)); //cdefg console.log(str.slice(2,-2)); //cde console.log(str.slice(-5,-2)); //cde console.log(str.slice(-2,-5)); //空

substr()：从截取位置开始截取指定长度的字符，如果没有指定长度的值，那么就截取到最后。如果截取开始的值是负数，表示从后面向前计算

语法: 字符串.substr(截取的开始位置,length)

//console.log(str.substr(1,4)); //bcde //console.log(str.substr(2)); //cdefg //console.log(str.substr(2,-2)); //空 //console.log(str.substr(-2,2)); //fg

//求大字符串中小字符串出现的次数 //'javashizuiniubidewoaijava,javashizuiniubidewoaijava' //'java' //求java上上面字符串中出现的次数 //声明大字符串 var str1 = 'javashizuiniubidewoaijava,javashizuiniubidewoaijava'; //声明小字符串 var str2 = 'java'; //声明小字符串的长度 var smalllength = str2.length; //声明统计变量，出现的次数 var count = 0; for (var i = 0; i < str1.length; i++) { //for循环做截取，每次截取的内容为小字符串长度个数的字符 var newstr = str1.slice(i,i+smalllength); //判断截取出来的字符串和小字符串是否相等，如果相等，统计数量+1 if(newstr == str2){ count++; } } document.write(count);

字符串的替换

replace()方法：传入2个参数，前面的是要被替换的子字符串，后面是要替换成为的子字符串，如果第一个参数传入的是子字符串，那么replace只将进行一次替换，返回经过一次替换以后的结果字符串。

语法：字符串.replace(要被替换的字符串，要替换成为的字符串)

var str = 'abcdeabcde'; console.log(str.replace('a','A'));

字符串的切割

split()方法：用于将一个字符串分割成字符串数组，返回数组的最大长度一般不设置

语法：字符串.spilt(用于分割字符串的子字符串，返回数组最大的长度)

var str = "a|b|c|d|e"; console.log(str.split("|")); console.log(str.split("")); console.log(str.split("|",3)); //声明大字符串 var str1 = 'javashizuiniubidewoaijava,javashizuiniubidewoaijava'; //声明小字符串 var str2 = 'java'; var arr = str1.split(str2); var count = arr.length-1; document.write(count);

正则表达式

史上最全常用正则表达式大全 - 牧云流 - 博客园

一个由字符序列形成的搜索模式，在文本搜索的时候，可以按照搜索模式搜索我们想要的内容。

正则表达式也可以进行，文本搜索、文本替换、文本提取等操作

正则表达式的组成

正则表达式是由普通字符和特殊字符组成的文字模式

正则表达式包含匹配符、限定符、定位符、转义符

匹配符：表示用于匹配某个或者某些字符，通过一对中括号括起来的内容，称之为"字符簇",表示的是一个范围。

[a-z] : 表示匹配a-z中的任意一个小写字母一次。

[A-Z] 表示匹配A-Z中的任意一个大写字母一次。

[0-9] 表示匹配0-9中的任意一个数字一次等同[\d]

[a-z0-9] 表示匹配a-z或者0-9中的任意字符一次

[A-Za-z0-9] 表示匹配任意字母或者数字一次等同[\w]

[abcd] 表示匹配字母abcd中的任意一个字母一次

[1234] 表示匹配数字1234中的任意一个数字一次

在匹配符中有一个符号 ^ ,写在匹配符里面，表示取反的意思

[^1234] 表示匹配除了1234以外的任意字符1次

[^0-9] 表示匹配除了数字以外的任意一个字符

[^abcd] 表示匹配除了abcd以外的任意字符1次

var str = '315h645616'; var reg = /[^0-9]/; document.write(str.search(reg));

限定符:指定正则表达式要出现的次数

* :子表达式匹配零次或者多次等同 {0,}

+ : 子表达式匹配一次或者多次等同 {1,}

? :子表达式匹配零次或者一次等同于 {0,1}

{n} :子表达式匹配固定的n次，比如 {10} 表示匹配10次

{m,n} ：子表达式匹配最少m次，最多n次，比如 {1,5}表示最少匹配1次最多5次

{n,} :子表达式最少匹配n次

var str = "123365266566"; var reg = /[\d]{11}/; document.write(str.search(reg));

定位符：定位符可以将一个正则表达式固定在一行的开始或者结束。

^ :匹配输入字符串的开始位置，表示以XXX开始

$ :匹配输入字符串的结束位置，表示以XXX结束

\b :匹配一个单词边界

\B :匹配一个非单词边界

var str = '2020-9-29'; var reg = /^[\d]{4}-[\d]{1,2}-[\d]{1,2}$/; document.write(reg.test(str));

转义符：在正则表达式中，如果有特殊符号的，需要使用转义符(反斜杠\)进行转义。如 [],*,+,/,.,^,$ 等特殊符号

var str = '15+5=20'; // var reg = /[\/]/; var reg = /[\+]/; document.write(reg.test(str));

g ：golbal表示全局匹配

i ：表示不区分大小写

m ：多行模式，达到一行为本末尾时，还会继续匹配下一行

var str = '15+5=20'; var reg = /[0-9]+/g; console.log(str.match(reg));

正则表达式用到的方法

search() :用法和字符串的用法相同

match() :

replace() :替换与正则匹配的字符串

split() :将字符串分割，以正则匹配的内容分割

test():检测一个字符串是否符合正则表达式的模式

exec():检索字符串中正则表达式的匹配，返回一个数组，存放匹配结果

对象

对象是一个以键值形式存储属性的集合，每个属性有特定的名称，以及与名称对应的值。

对象的声明：

在js中，对象的声明有两种方法

1，赋值 new Object()

先声明一个类，使用new关键字来创建一个拥有独立内存区域和指向原型的对象。

//对象的声明 //创建一个User类 var User = function(id,name){ this.id = id; this.name = name; } //创建User类的实例化对象 var user1 = new User(1,"张三"); document.write(user1.name); var user2 = new User(2,'李四'); document.write(user2.name); //创建一个学生类，有学号、姓名、年龄三个属性 //实例化学生类，声明2个学生对象，并返回他们的属性值 var Student = function(sid,name,age){ this.sid = sid; this.name = name; this.age = age; } var stu1 = new Student(1001,'张三',20); document.write(stu1.age+"---"+stu1.name+"---"+stu1.sid);

2，直接使用{} 声明

利用现有值，直接实例化对象

var user1 = {id:1,name:'张三'}; var user2 = Object.create({id:2,name:'李四'}); document.write(user1.name); document.write("<br>"); document.write(user2.name);

对象的属性

对象的属性，用来描述对象的特征，分为属性名和属性值，在js中，属性可以动态的操作，比如，添加、删除、检测

添加：为已有的对象添加属性

语法：对象 . 属性名或者对象["属性名"]

删除属性

语法: delete 对象.属性名

检测:判断某个属性是否存在于此对象中。

语法: 属性名.对象

// 添加属性 //声明一个空对象 var user = {}; //为对象添加3个属性 user.sid = 1001; user.name = '张三'; user['age'] = 20; document.write(user.sid); document.write("<br>"); document.write(user['name']); document.write("<br>"); //删除属性 delete user.name; document.write(user.name); document.write("<br>"); //检测属性 if('name' in user){ document.write("user有name属性"); }else{ document.write("user没有name属性"); }

对象的方法

方法表示对象的一些动作

var stu1 = {sid:1001,name:'张三',age:20}; stu1.show = function(sid,name,age){ document.write("我是"+stu1.name+",我今年"+stu1.age+"岁,学号是"+stu1.sid); } stu1.show();

//声明一个学生对象，属性有学号、姓名、年龄、所学课程 //有一个选课方法，方法的实现内容是，当学生选择一门课后，会把这门课加入到 //所学课程中。 //调用选课方法，传入几门课程，并把数据返回 var stu = {}; stu.id = 1001; stu.name = '张三'; stu.age = 20; stu.course = []; stu.chooseCourse = function(courseName){ stu.course.push(courseName); } stu.chooseCourse("JAVA"); stu.chooseCourse("MySQL"); stu.chooseCourse("HTML"); document.write("所学课程有:"+stu.course);

对象的遍历

使用for in循环可以遍历处对象的键，然后可以使用键去访问对象的属性和方法。

//对象的遍历 for(key in stu){ document.write(key+":"+stu[key]); document.write("<br>"); }

函数

函数是一组延迟动作集的定义，可以通过事件触发或者在其他脚本中进行调用。用帮助封装、调用代码。

函数由函数名、参数、函数体、返回值 4个部分构成

参数、和返回值可有可无。

语法：

function 函数名(参数){

函数体

return 返回值；

}

函数的声明：

1，通过函数名声明，程序调用的时候执行

2，通过匿名函数赋值给变量，也需要调用才能执行

3，通过new的方式来声明，不需要调用，直接执行

//1，通过函数名声明，程序调用的时候执行 function fun1(){ document.write("我是函数fun1"); document.write("<br>"); } fun1(); //2，通过匿名函数赋值给变量，也需要调用才能执行 var fun2 = function(){ document.write("我是函数fun2"); document.write("<br>"); } fun2(); //3，通过new的方式来声明，不需要调用，直接执行 var fun3 = new Function(document.write("我是函数fun3"));

函数的参数

无参的函数

有限个数的参数

不定长参数

//无参的函数 function fun1(){ document.write("我是函数fun1"); document.write("<br>"); } fun1(); //有限个数的参数 function fun2(a,b){ document.write("传入的2个参数为，a="+a+",b="+b); document.write("<br>"); } fun2(); fun2(3,5); fun2("hello","world"); //不定长参数 function fun3(...param){ len = param.length; //返回传入参数的长度 for (var i = 0; i < len; i++) { document.write("参数"+i+"="+param[i]); document.write("<br>"); } } fun3(1,3,5,7,9); fun3(1,2,3,4,5,6,7,8,9);

函数参数的默认值

对含参的函数来说，可以为参数设置默认值，如果没有传入此参数，那么将按照默认值的参与表达式的运算，传入值则按照实际的值运算。

//参数的默认值 function fun1(name,age){ name = name||"貂蝉"; age = age||20; document.write("你好,我是"+name+",我今年"+age+"岁"); } fun1(); document.write("<br>"); // fun1('吕布'); fun1(25); document.write("<br>"); fun1("关羽",30);

函数的返回值

返回值为普通值

返回值是数组

返回值是对象

//返回值为普通值 function fun1(a,b){ return a+b; } var a = fun1(3,5); document.write(a); document.write("<br>"); //返回值是数组 function fun2(a,b){ arr = []; arr.push(a*2); arr.push(b/3); return arr; } var b = fun2(3,6); document.write(b); document.write("<br>"); //返回值是对象 function fun3(id,name){ obj = {}; obj.id = id; obj.name = name; return obj; } var c = fun3(1001,'赵云'); console.log(c); document.write(c.name);

函数的调用

传值调用

将参数的值传递给函数，函数在进行调用时候会复制这个值，然后将复制的值在函数中进行运算，如果这个被复制的值在函数体中发生了改变，不会影响原值。

传值调用的类型：数字、字符串、布尔类型变量、字符

传地址调用：

将参数的内存地址传给函数进行调用，当此参数在函数体中被改变，原值也会发生改变。

地址调用所转入的参数必须是复合类型，包括：数组、对象

//传值调用 function fun1(str){ str = 'hello'; } var a = '你好'; fun1(a); document.write(a); document.write("<br>"); //传地址调用 function fun2(person){ person.name = '李四'; } var b = {name:'张三'}; fun2(b); document.write(b.name);

传函数调用：函数既可以作为返回值返回，也可以作为一个参数传入另一个函数中被调用。

//传函数调用 function add(a,b){ return a+b; } function chengfa(a,b){ return a*b; } function operation(a,b,fun){ return fun(a,b); } var rs = operation(3,5,add); document.write(rs); var rs1 = operation(4,6,chengfa); document.write(rs1);

内置函数

Math 数学函数

常用方法

ceil() 向上取整

floor() 向下取整

min() 取最小值

max() 取最大值

pow(a，b) 求a的b次方

random() 随机数

round() 四舍五入

sqrt() 开平方

Date 时间函数

var date = new Date();

// var date = new Date(); //声明当前时间 var date = new Date("2020-10-08 15:15:15");//自定义时间 document.write(date); document.write("<br>"); document.write("获取年份:"+date.getFullYear()+"<br>"); document.write("获取月份:"+(date.getMonth()+1)+"<br>"); document.write("获取日:"+date.getDate()+"<br>"); document.write("获取周:"+date.getDay()+"<br>"); document.write("获取毫秒值:"+date.getTime()+"<br>"); document.write("获取时:"+date.getHours()+"<br>"); document.write("获取分:"+date.getMinutes()+"<br>"); document.write("获取秒:"+date.getSeconds()+"<br>"); document.write("获取日期:"+date.toLocaleDateString()+"<br>"); document.write("获取时间:"+date.toLocaleTimeString()+"<br>"); document.write("获取日期时间:"+date.toLocaleString()+"<br>");

定时器函数

setInterval()

按照指定的周期调用函数或者计算表达式。在这个函数中，会不停的调用函数，直到使用clearInterval()或者页面被关闭

语法：

setInterval(函数，毫秒值) 表示每隔多少毫秒调用函数

HTML代码

JS代码

setTimeout() 在指定的毫秒数以后调用函数或者表达式

语法：

setTimeout(函数，毫秒数) 在指定毫秒数以后调用函数

示例

HTML代码

CSS代码

JS代码

setTimeout()和setInterval()的主要区别:

setTimeout()只运行一次，也就是说，当达到设定的时间后，就触发运行指定的代码，运行完之后就结束，如果想再次执行同样的函数，可以在函数体内再次调用setTimeout() 回调自身函数

setInterval()时循环执行的，每达到指定的时间间隔就执行相应的函数或表达式

JavaScript对象模型

BOM对象

window对象

Window 对象属性

Window 对象方法

location对象 Location 对象包含有关当前 URL 的信息。

Location 对象属性

Location 对象方法

navigator对象 Navigator 对象包含有关浏览器的信息。

Navigator 对象属性

Navigator 对象方法

screen对象 Screen 对象包含有关客户端显示屏幕的信息。

Screen 对象属性

history对象对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象属性

History 对象方法

BOM操作

js的弹出框

警告框 alert()

确认框 confirm

提示框 pompt

<body> <button type="button" οnclick="fun_prompt()">点击</button> <p id="demo"></p> </body> <script type="text/javascript"> function fun_prompt(){ var txt; var person = prompt("请输入你的姓名:",'张三'); if(person == null || person ==''){ txt = '用户取消输入' }else{ txt = '你好,'+person+'欢迎光临' } document.getElementById('demo').innerHTML = txt; } </script>

window窗口的宽高

window窗口打开

window窗口关闭

<body> <button type="button" οnclick="win_close()">点击关闭</button> </body> <script type="text/javascript"> function win_close(){ window.close(); } </script>

window调整尺寸

<body> <button type="button" οnclick="win_resize()">点击调整</button> </body> <script type="text/javascript"> function win_resize(){ window.resizeTo(200,200) } </script>

window颜色设置

<body> Hello World!! </body> <script type="text/javascript"> window.onload = function(){ document.bgColor = 'blue'; document.fgColor = 'red'; } </script>

loacation 对象返回当前页面的URL

history对象

back() 后退一步

forward()前进一步

go() 表示前进或者后退指定的步数

文件1代码

<body> <a href="demo1.html">跳转到demo1</a> <button type="button" οnclick="forward()">前进</button> </body> <script type="text/javascript"> function forward(){ window.history.forward(); } </script>

文件2代码

<body> <a href="demo2.html">跳转到demo2</a> <button type="button" οnclick="back()">后退</button> </body> <script type="text/javascript"> function back(){ window.history.back(); } </script>

文件3代码

<body> <button type="button" οnclick="go()">后退2步</button> </body> <script type="text/javascript"> function go(){ window.history.go(-2); //后退2步 } </script>

DOM对象

文档对象模型 Document Object Model 属于BOM的一部分，用来操作BOM中的核心对象document

js通过DOM能够改变页面中所有的HTML元素，HTML属性、CSS样式

DOM操作

获取节点

1，通过id获取节点

document.getElementById(id)

2，通过class属性获取节点

document.getElementsByClassName(class值)

3，通过标签名称获取节点

document.getElementsByTagName(标签名)

4，通过name属性获取节点

document.getElementsByName(name属性值)

示例

HTML代码

JS代码 <script type="text/javascript"> window.onload = function(){ //通过id获取 mydiv = document.getElementById('mydiv_html'); mydiv2 = document.getElementById('mydiv_text'); mydiv.innerHTML = '<b>我是通过id获取节点信息添加的</b>'; mydiv2.innerText = '<b>我是通过id获取节点信息添加的</b>'; //class获取 classdiv = document.getElementsByClassName('classdiv'); for (var i = 0; i < classdiv.length; i++) { classdiv[i].innerHTML = '通过class获取节点信息'+i; } //通过name获取 namediv = document.getElementsByName('namediv'); for (var i = 0; i < namediv.length; i++) { namediv[i].innerHTML = '通过name获取节点信息'+i; } //通过标签名获取 tag_span = document.getElementsByTagName('span'); for (var i = 0; i < tag_span.length; i++) { tag_span[i].innerHTML = '通过tagname获取节点信息'+i; } } </script>

总结

通过class、name、tagname获取节点的时候，获取的结果可能是多个，所以element后面要加s。它们获取的节点信息将以伪数组的形式存在，虽然不具备数组的方法，但是可以遍历伪数组。即使获取的节点信息只有一个，仍然以伪数组的形式存在。

获取、设置元素的属性值

getAttribute(属性名) 获取传入属性名的属性值

setAttribute(属性名，属性值) 给节点设置一个属性名，同时给一个属性值

示例：给表格设置隔行换色

HTML代码

JS代码

创建添加节点

创建节点

document.createElement('h3') 创建h3标签

document.createTextNode(文本内容) 创建文本内容节点

document.createAttribute('class') 创建class属性

添加节点

element.appendChild(节点信息) 往父节点添加一个子节点

element.insertBefore(新节点，老节点) 往一个元素内部的老节点之前添加一个新节点

示例：给表格添加节点

HTML代码

CSS代码

JS代码

删除节点

elemet.removeChild(节点值) 删除当前节点下指定的子节点，删除成功会返回被删除的该节点，否则返回null

示例

表格中删除一行

HTML代码

JS代码

属性的操作

1,获取当前元素的父节点

element.parentNode //获取元素的父节点

2，获取当前元素的子节点

element.children //获取子节点，只能获取html节点

element.childNodes //获取当前元素的所有子节点，包括文本、HTML、属性节点..

element.firstChild //返回当前元素的第一个子节点

element.lastChild //获取最后一个节点

3，获取当前元素的同级元素

element.nextElementSibling //获取当前元素的下一个同级元素，没有返回null

element.previousElementSibling //获取当前元素的上一个同级元素

4，获取当前元素的文本

element.innerHTML // 返回元素的所有文本，包括HTML代码

element.innerText //返回当前元素的自身及子代所有文本值，只有文本内容，不含html代码

5，获取当前节点的节点类型

node.nodeType //返回节点的类型

6，设置样式

element.style.color = 'red' //设置颜色的字体颜色为红色

示例：模拟导航栏隐藏显示

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .menu{ cursor: pointer; } </style> <script type="text/javascript"> function dian(thisa){ nextnode = thisa.nextElementSibling; //获取下一个节点信息 if(nextnode.style.display == 'none'){ nextnode.style.display = 'block'; }else{ nextnode.style.display = 'none'; } } </script> </head> <body> <li class="menu" οnclick="dian(this)">导航一</li> <li style="display: none;"> <a href="">菜单1</a> <br> <a href="">菜单2</a> <br> <a href="">菜单3</a> <br> <a href="">菜单4</a> <br> <a href="">菜单5</a> <br> </li> <li class="menu" οnclick="dian(this)">导航一</li> <li style="display: none;"> <a href="">菜单6</a> <br> <a href="">菜单7</a> <br> <a href="">菜单8</a> <br> <a href="">菜单9</a> <br> <a href="">菜单10</a> <br> </li> <li class="menu" οnclick="dian(this)">导航一</li> <li style="display: none;"> <a href="">菜单11</a> <br> <a href="">菜单12</a> <br> <a href="">菜单13</a> <br> <a href="">菜单14</a> <br> <a href="">菜单15</a> <br> </li> </body> </html>

事件

指的是在浏览器窗体中或HTML元素上发生的，可以触发JS代码的块运行的行为

窗口事件：用户与页面其他元素交互时发生的事件，如，页面加载、窗口大小改变、滚动页面..

load事件

页面完全加载完以后，window触发load事件，

如 window.onload = function(){ }

resize事件

将浏览器窗口调整到一个新的高度或者宽度的时候，可以触发resize事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ /*设置宽高，js中才能获取到值*/ height: 100%; width: 100%; } </style> </head> <script type="text/javascript"> function winresize(){ winWidth = document.body.clientWidth; //获取body宽度 winHeight = document.body.clientHeight; //获取body高度 alert('窗口发生改变,宽为:'+winWidth+',高为:'+winHeight); } </script> <body οnresize="winresize()"> </body> </html>

scroll事件:文或者浏览器窗口被滚动期间，会触发scroll事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ width: 100%; height: 100%; } </style> </head> <script type="text/javascript"> function winScroll(){ text = document.getElementById('text'); //获取滚动距离，并且把距离写入文档中 text.innerText = '滚动条滚动到了'+ document.documentElement.scrollTop+'px'; text.style.top = document.documentElement.scrollTop + 'px'; } </script> <body οnscrοll="winScroll()"> <div style="height: 300%;"></div> <span id="text" style="position: absolute;top: 10px;" >滚动条滚动到了0px</span> </body> </html>

焦点事件：指的是页面元素对焦点的获得与失去

如，文本框，点击文本框可以在文本框中输入文字，其实就是文本框获得了焦点

focus 获取焦点触发

blur 失去焦点触发

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script type="text/javascript"> var note; function myfocus(notename){ //获取焦点的函数 note = document.getElementById(notename); note.innerText = "获取焦点，开始输入"; } function myblur(notename){ //失去焦点的函数 note = document.getElementById(notename); note.innerText = "失去焦点，开始判断"; } </script> <body> <input type="text" name='username' οnfοcus="myfocus('unote')" οnblur="myblur('unote')"> <span id="unote"></span> <br> <input type="text" name='password' οnfοcus="myfocus('pnote')" οnblur="myblur('pnote')"> <span id="pnote"></span> </body> </html>

鼠标事件

主要是鼠标操作所触发的事件，单击、双击、单击按下、单击抬起、鼠标滑过

鼠标的单击事件 click

示例，通过鼠标单击确定鼠标点击的位置

clientX clientY 获取坐标位置

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ width: 100%; height: 100%; } </style> </head> <script type="text/javascript"> function dian(e){ dianX = e.clientX; //获取点击坐标横向 dianY = e.clientY; //获取点击坐标纵向 alert('x:'+dianX+',y:'+dianY); } </script> <body οnclick="dian(event)"> </body> </html>

鼠标的悬停和离开

mouseover 鼠标悬停

mouseout 鼠标离开

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script type="text/javascript"> function showmenu(e){ e.style.height = 180+'px'; } function hidemenu(e){ e.style.height = 30+'px'; } </script> <body> <div οnmοuseοver="showmenu(this)" οnmοuseοut="hidemenu(this)" style="width: 120px;height: 30px;border: 1px solid blue; overflow: hidden;background: #cccccc;"> <table> <tr> <td>下拉菜单</td></tr> <tr> <td>菜单1</td></tr> <tr> <td>菜单2</td></tr> <tr> <td>菜单3</td></tr> <tr> <td>菜单4</td></tr> <tr> <td>菜单5</td></tr> </table> </div> </body> </html>

鼠标拖拽

mousedown 鼠标按下

mouseup 鼠标抬起

mousemover 鼠标移动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ width: 100%; height: 100%; } #dd{ width: 120px; height: 120px; background: blue; position: absolute; } </style> </head> <script type="text/javascript"> var dd; //获取盒子的节点信息 var flag = false; function ondown(){ //鼠标按下以后，才能移动，获取移动节点信息 dd = document.getElementById('dd'); flag = true; } function onmove(e){ //移动的时候执行的函数 if(flag){ dd.style.left = e.clientX-60+'px'; dd.style.top = e.clientY-60+'px'; } } function onup(){ flag = false; } </script> <body οnmοusemοve="onmove(event)"> <div id="dd" οnmοusedοwn="ondown()" οnmοuseup="onup()" style="top: 120px;left: 80px;"></div> </body> </html>

键盘事件：有关键盘操作触发的事件，按下键盘，键盘抬起...

keydown ：当用户按下键盘上的任意键时触发，按住不放，重复触发

keypress：当用户按下键盘上的字符键时触发，按住不放，重复触发

keyup :用户释放键盘按键触发

keycode 键盘对应的编码值

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ height: 100%; width: 100%; } </style> </head> <script type="text/javascript"> var tank = {}; var movestate,attchstate; window.onload = function(){ tank['37'] = '左移'; tank['38'] = '上移'; tank['39'] = '右移'; tank['40'] = '下移'; tank['32'] = '开火'; movestate = document.getElementById('movestate'); attchstate = document.getElementById('attchstate'); } function keydown(e){ //键盘按下的函数 keycode = e.keyCode; //获取按键的编码 if(keycode !=32&&tank[keycode]){ movestate.innerHTML = tank[keycode]; //获取keycode值对应的移动效果 } if(keycode == 32){ attchstate.innerHTML = tank[keycode]; } } function keyup(e){ //键盘抬起 keycode = e.keyCode; //获取按键的编码 if(keycode !=32&&tank[keycode]){ movestate.innerHTML = '静止'; //把节点内容恢复为静止 } if(keycode == 32){ attchstate.innerHTML = ''; } } </script> <body οnkeydοwn="keydown(event)" οnkeyup="keyup(event)"> 坦克运行的状态: <span id="movestate">静止</span> <br> 坦克攻击的状态: <span id="attchstate"></span> </body> </html>

JQuery

JQuery基础

JQuery是JavaScript的函数库，包含以下功能：HTML元素的选取、HTML元素的操作、CSS操作、HTML事件函数、JS的特效动画、HTML中DOM遍历修改、AJAX。。。

优势：

轻量级

强大的选择器

出色的DOM封装

可靠的事件处理机制

完善的AJAX

丰富的插件、开源、完善的文档

JQuery的安装、引入

JQuery入口函数和JS入口函数的区别:

Jquery的入口函数是再HTML所有标签(DOM)都加载完之后执行

JavaScript的window.onload是HTML所有内容加载完（包括外部的图片）,才会执行

JQuery语法：

通过选取HTML元素，并对选取的元素执行操作

基本语法:

$(选择器).操作()

$ :用来定义JQuery

选择器是用来查询查找HTML元素的

操作是指对选中的元素执行的操作

如 :

$(this).hide(); 把当前的元素隐藏

$("p").hide() 把所有的p元素隐藏

JQuery选择器

语法： $("选择器")

如： $("#id值") == document.getElementById()

$(" ") 可以看作是一个函数，$是函数名称，后面括的内容其实是函数的参数传递

选择器的分类

1，id选择器：通过HTML元素中的id值来选取指定元素

语法： $("#id值")

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: blue; float: left; margin: 5px; padding: ; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="test0"> <p>id = test0</p> <p>js选中</p> </div> <div id="test1"> <p>id = test1</p> <p>jquery选中</p> </div> <div id="test2"> <p>id = test2</p> <p>未选中</p> </div> </body> <script type="text/javascript"> //使用原生JS操作添加样式 window.onload = function(){ var test0 = document.getElementById('test0'); test0.style.border = '3px solid red'; //给节点加了边框样式 } </script> <script type="text/javascript"> //使用Jquery操作添加样式 $(function(){ $("#test1").css('border','3px solid orange'); }) </script> </html>

2，class选择器

语法: $(".class值") 表示选取指定class值的元素

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p class="p1"> p-1</p> <p class="p1"> p-2</p> <p class="p2"> p-3</p> <div class="d1">div-1</div> <div class="d1">div-2</div> <div class="d2">div-3</div> </body> <script type="text/javascript"> //通过原生JS获取 window.onload = function(){ var p1 = document.getElementsByClassName("p1"); p1[1].style.border = '3px solid red'; var p2 = document.getElementsByClassName("p2"); p2[0].style.border = '3px solid blue'; } </script> <script type="text/javascript"> //通过jquery获取 $(function(){ $(".d1").css('border','3px solid orange'); $(".d2").css('border','3px solid green'); }) </script> </html>

3，标签选择器

语法：$("标签名") 选择指定的标签名的信息

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p>p-1</p> <p>p-2</p> <div>div-1</div> <div>div-2</div> </body> <script type="text/javascript"> //原生写法 window.onload = function(){ var p = document.getElementsByTagName('p'); p[0].style.border = '3px solid red'; } </script> <script type="text/javascript"> //jquery写法 $(function(){ $("div").css('border','3px solid blue'); }) </script> </html>

4，位置选择器

根据元素的位置来选择指定元素

$("选择器:first") 选择第一个元素

$("选择器:last") 选择最后一个元素

$("选择器:odd") 选择奇数索引、偶数行的元素，索引从0计算

$("选择器:even") 选择偶数索引、奇数行的元素，索引从0计算

$("选择器:eq(n)") 选择确定的第n个索引元素

$("选择器:gt(n)") 选择大于某个索引的元素

$("选择器:lt(n)") 选择小于某个索引的元素

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul> <li>第1行元素,索引是0</li> <li>第2行元素,索引是1</li> <li>第3行元素,索引是2</li> <li>第4行元素,索引是3</li> <li>第5行元素,索引是4</li> <li>第6行元素,索引是5</li> <li>第7行元素,索引是6</li> <li>第8行元素,索引是7</li> <li>第9行元素,索引是8,最后一行</li> </ul> </body> <script type="text/javascript"> $(function(){ $("li:first").css('color','red'); //选择第一行 $("li:last").css('color','blue');//选择最后一行 $("li:odd").css('background','orange');//选择偶数行 $("li:even").css('background','yellow');//选择奇数行 $("li:eq(3)").css('font-size','40px'); //选择索引未为3 $("li:gt(7)").css('font-size','60px');//选择索引大于7 $("li:lt(3)").css('font-size','80px')//选择索引小于3 }) </script> </html>

5，属性选择器

$("[属性名]") 匹配有特定属性名的元素

$("[属性名=‘值’]") 匹配属性名等于特定值的元素

$("[属性名!='值']") 匹配属性名不等于特定值的元素

$("[属性名^='值']") 匹配属性值以特定值开头的元素

$("[属性名$='值']") 匹配属性值以特定值结尾的元素

$("[属性名*='值']") 匹配属性值包含特定值的元素

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="div" name="div1">div-1</div> <div class="div" name="div2">div-2</div> <div class="div" name="div3">div-3</div> <a href="http://www.baidu.com">连接到百度</a> <br> <a href="http://www.taobao.cn">连接到淘宝</a> <br> <a href="www.qq.com">连接到腾讯</a> <br> </body> <script type="text/javascript"> //属性选择器 $(function(){ $('div[name]').css('color','red'); //选择有name属性的 //选择有name属性并且指定值的元素 $('div[name=div2]').css('font-size','40px'); //选择有name属性并且指定值不等于某值的元素 $('div[name!=div3]').css({'background':'#cccccc','border':'3px solid red'}); //以指定值开头 $("a[href^=www]").css('color','orange'); //以指定值结尾 $("a[href$=cn]").css('color','red'); //包含某个值 $("a[href*=baidu]").css('font-size','40px'); }) </script> </html>

6，后代选择器

语法： $("选择器1 选择器2") 选择选择器1的后代选择器2

7，子代选择器

语法：$("选择器1>选择器2") 选择选择器1的子代选择器2

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul id="test"> <li>Li-1</li> <li>Li-2</li> <li>Li-3 <ul> <li>Li-3-1</li> <li>Li-3-2</li> <li>Li-3-3</li> </ul> </li> </ul> </body> <script type="text/javascript"> $(function(){ //后代选择器 //$('#test li').css('border','3px solid red'); //子代选择器 $('#test>li').css('border','3px solid blue'); }) </script> </html>

可见性过滤选择器

:hidden

:visible

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>可见性过滤选择器</title> <style type="text/css"> #txt_show {display:none; color:#00C;} #txt_hide {display:block; color:#F30;} </style> </head> <body> <p id="txt_hide">点击按钮，我会被隐藏哦~</p> <p id="txt_show">隐藏的我，被显示了，嘿嘿^^</p> <input name="show" type="button" value="显示隐藏的P元素" id="show"/> <input name="hide" type="button" value="隐藏显示的P元素" id="hide" /> <script src="js/jquery-1.12.4.js"></script> <script> $(function(){ //点击#show，隐藏的p显示 $("#show").click(function(){ $("p:hidden").show(); }) //点击#hide，显示的p隐藏 $("#hide").click(function(){ $("p:visible").show(); }) }); </script> </body> </html>

选择器对象

$("选择器").each(function(index){this}) 选择器对象的遍历

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p class="p1">段落1</p> <p class="p1">段落2 <a href="">段落2.1</a> </p> <p class="p2">段落3</p> </body> <script type="text/javascript"> $(function(){ //each的使用 $('.p1').each(function(index){ alert(this); }) }) </script> </html>

$("选择器").find() 匹配选择器的子元素的

$("选择器").not() 匹配选择器中去除了某个或者某几个元素

$("选择器").add() 再选择器中追加节点

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p class="p1">段落1</p> <p class="p1" id="c2">段落2 <a href="" id="a1">段落2.1</a> <a href="">段落2.2</a> </p> <p class="p2">段落3</p> <p class="p3">段落4</p> </body> <script type="text/javascript"> $(function(){ //find 使用 //$('.p1').find("#a1").css("border",'3px solid red'); //not 使用 //$('.p1').not('#c2').css("border",'3px solid blue'); //add使用 $('.p2').add('.p3').css("border",'3px solid blue'); }) </script> </html>

选择器对象的遍历

可以使用each()遍历节点

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul id="test"> <li>段落1</li> <li>段落2</li> <li>段落3</li> <li>段落4</li> <li>段落5</li> </ul> </body> <script type="text/javascript"> $(function(){ //使用each遍历添加title $('#test li').each(function(index){ this.title = '我是增加的第'+(index+1)+'个title属性'; }) }) </script> </html>

JQuery中的DOM操作

1，对HTML元素的查找

查找元素的节点 text()

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p id="test"> 床前明月光</p> <button type="button">点击显示文本内容</button> </body> <script type="text/javascript"> $(function(){ $('button').click(function(){ //给按钮加上点击事件 alert("文本内容:"+$('#test').text()) }) }) </script> </html>

查找元素的属性

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p title="p标签的title属性值"> 床前明月光</p> <button type="button">点击显示文本内容</button> </body> <script type="text/javascript"> $(function(){ $('button').click(function(){ //给按钮加上点击事件 alert($('p').attr('title'));//弹出p标签的title属性值 }) }) </script> </html>

2，对HTML元素的创建

创建HTML元素使用jquery的函数 $( )

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul> <li>锄禾日当午</li> <li>汗滴禾下土</li> </ul> <button type="button">点击创建节点</button> </body> <script type="text/javascript"> $(function(){ //创建节点 var $li1 = $("<li>谁知盘中餐</li>"); var $li2 = $("<li>粒粒皆辛苦</li>"); $('button').click(function(){ //添加节点 $('ul').append($li1); $('ul').append($li2); }) }) </script> </html>

3，对HTML元素的插入

A . append (B) 向A中添加B，添加再已有节点之后

A. appendTo(B) 把A添加到B中

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul> <li>目录1</li> <li>目录2</li> <li>目录3</li> <li>目录4</li> </ul> <button type="button">点击添加节点</button> </body> <script type="text/javascript"> $(function(){ //给button添加点击事件 $('button').click(function(){ //添加节点 //$('ul').append($('<li>目录5</li>')); //append写法 $('<li>目录5</li>').appendTo($('ul')); //appendTo写法 }) }) </script> </html>

A. prepend (B) 向A中添加B，添加已有节点之前

A. prependTo (B) 把A添加到B中已有节点之前

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul> <li>目录1</li> <li>目录2</li> <li>目录3</li> <li>目录4</li> </ul> <button type="button">点击添加节点</button> </body> <script type="text/javascript"> $(function(){ //给button添加点击事件 $('button').click(function(){ //添加节点 //$('ul').prepend($('<li>目录5</li>')); //perpend写法 $('<li>目录5</li>').prependTo($('ul')); //prependTo写法 }) }) </script> </html>

A. after(B) 再A后面添加B，这个是同级元素

A.insertAfter(B) 在B后面添加A

A.before(B) 在B之前添加A

A.indsertBefore(B) 在A之前添加B

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <button type="button">点击添加节点</button> </body> <script type="text/javascript"> $(function(){ //给button添加点击事件 $('button').click(function(){ //使用after添加同级节点 $('h2').after('<p>添加的p标签</p>'); //在h2的后面加标签p $('<p>添加的p标签</p>').insertAfter($('h3')); //使用before添加 $('h1').before('<div>添加的div标签</div>'); $('<div>添加的div标签</div>').insertBefore($('h2')); }) }) </script> </html>

4，对HTML元素的删除

remove() 移除指定元素以及子元素

//使用remove会把自身删除

empty() 清空指定中的子元素

//使用empty只会删除子元素，保留自身标签

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 100px; margin: 10px; background-color: aquamarine; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="div1"> <p>div1中的p标签1</p> <p>div1中的p标签2</p> </div> <div id="div2"> <p>div2中的p标签1</p> <p>div2中的p标签2</p> </div> <button id="btn1" type="button">点击使用remove</button> <button id="btn2" type="button">点击使用empty</button> </body> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $('#div1').remove(); //使用remove会把自身删除 }); $("#btn2").click(function(){ $('#div2').empty();//使用empty只会删除子元素，保留自身标签 }); }) </script> </html>

5，对HTML元素的复制

clone() 复制克隆选中的HTML元素

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p>床前明月光</p> <button type="button">点击按钮，复制p标签，并且追加到body后</button> </body> <script type="text/javascript"> $(function(){ $("button").click(function(){ //克隆p元素，并且追加到body中 $('body').append($('p').clone()); }); }) </script> </html>

6，对HTML元素的替换

A.replaceWith（B）将匹配的元素A替换成指定元素B

A.replaceAll(B) 将匹配的元素B替换成所有选择器匹配元素A

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul> <li>锄禾日当午</li> <li>汗滴禾下土</li> </ul> <button type="button">点击按钮替换内容</button> </body> <script type="text/javascript"> $(function(){ $('button').click(function(){ //点击事件 //替换 replaceWith //$('ul li:eq(0)').replaceWith("<li>谁知盘中餐</li>"); //replaceAll $("<li>谁知盘中餐</li>").replaceAll($('ul li:eq(0)')); }); }) </script> </html>

JQuery事件

绑定事件

on 在jquery3.0以后弃用

bind(事件名称，函数)

事件名称表示需要绑定的事件、如click、scroll、mouseup

函数表示绑定事件需要执行的效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> span{ display: none; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <input type="text"> <p>单击输入框获得焦点</p> <span>请输入你的电话号码</span> </body> <script type="text/javascript"> $(function(){ //使用bind方法给input绑定一个focus事件 //$('input').bind('focus',function(){ // //事件的内容是让span显示 // $('span').show(); //}) //简写的绑定方式 $('input').focus(function(){ //事件的内容是让span显示 $('span').show(); }) }) </script> </html>

鼠标事件

click() 鼠标单击事件

dblclick() 鼠标双击事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p>如果你点击我，就会弹出弹框~</p> </body> <script type="text/javascript"> $(function(){ //单击事件 //$('p').click(function(){ //给p标签加上单击事件 // alert("调用了click方法"); //}) //鼠标双击事件 $('p').dblclick(function(){ //给p标签加上单击事件 alert("调用了dblclick方法"); }) }) </script> </html>

mouseenter() 鼠标滑过

mouseleave() 鼠标离开

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p id="p1"> 第一行：鼠标滑过此处，第二行内容变色</p> <p id="p2"> 第二行内容</p> </body> <script type="text/javascript"> $(function(){ //鼠标悬停，第二行背景色变为红色 $('#p1').mouseenter(function(){ $('#p2').css('background','red'); }); //鼠标离开，第二行背景色变回白色 $('#p1').mouseleave(function(){ $('#p2').css('background','white'); }); }) </script> </html>

hover() 一个方法实现鼠标滑过的效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p id="p1"> 第一行：鼠标滑过此处，第二行内容变色</p> <p id="p2"> 第二行内容</p> </body> <script type="text/javascript"> $(function(){ 鼠标悬停，第二行背景色变为红色 //$('#p1').mouseenter(function(){ // $('#p2').css('background','red'); //}); 鼠标离开，第二行背景色变回白色 //$('#p1').mouseleave(function(){ // $('#p2').css('background','white'); //}); //使用hover()实现 $("#p1").hover( function(){ $('#p2').css('background','red'); }, function(){ $('#p2').css('background','white'); }) }) </script> </html>

键盘事件

keydown() 键盘按下

keyup() 键盘抬起

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> 请随意输入:<input type="text"> <p>当你输入的时候，实现输入框背景色变化的效果</p> </body> <script type="text/javascript"> $(function(){ //键盘按下 $("input").keydown(function(){ $("input").css('background','red'); }); //键盘抬起 $("input").keyup(function(){ $("input").css('background','yellow'); }); }) </script> </html>

keypress() 键盘或者按钮被按下的时候触发的事件

alt、ctrl、shift、esc不会触发keypress

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> 请随意输入:<input type="text"> <p>按键的次数: <span>0</span></p> </body> <script type="text/javascript"> i = 0; $(function(){ $("input").keypress(function(){ //绑定keypress事件 //触发事件给变量加1，并且把内容返回到span节点 $("span").text(i+=1); }) }) </script> </html>

表单事件

submit() 只要表单提交，就会触发submit事件

只作用于form标签

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <form action="" > 姓名: <input type="text" name="name"> <br> 年龄: <input type="text" name="age"> <input type="submit" value="提交"/> </form> </body> <script type="text/javascript"> $(function(){ //submit的使用 $("form").submit(function(){ alert("提交成功！！"); }) }) </script> </html>

change() 当文本内容发生改变的时候，触发change事件

作用于文本域，textarea ,select

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> 姓名: <input type="text" name="name"> <br> <p>在文本框中输入内容，然后按下回车键</p> </form> </body> <script type="text/javascript"> $(function(){ //change的使用 $("input").change(function(){ alert("文本已修改！！"); }) }) </script> </html>

focus() 获的焦点

blur() 失去焦点

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> 姓名: <input type="text" name="name"> <br> 年龄: <input type="text" name="age"> </form> </body> <script type="text/javascript"> $(function(){ // focus的使用，获得焦点 $("input").focus(function(){ $(this).css('background','blue'); }); //blur使用失去焦点 $("input").blur(function(){ $(this).css('background','red'); }); }) </script> </html>

窗口事件

scroll() 滚动窗口触发，滚动元素

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; overflow: scroll; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div> 好好学习！！天天玩游戏！！好好学习！！天天玩游戏！！好好学习！！天天玩游戏！！好好学习！！天天玩游戏！！好好学习！！天天玩游戏！！ </div> <p>滚动了: <span>0</span>次</p> </body> <script type="text/javascript"> i = 0; $(function(){ //scroll事件触发 $('div').scroll(function(){ $('span').text(i+=1); }) }) </script> </html>

resize() 调整窗口大小触发

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p>窗口重置了 <span>0</span>次</p> <p>调整窗口大小试一试</p> </body> <script type="text/javascript"> i = 0; $(function(){ $(window).resize(function(){ $('span').text(i+=1); }) }) </script> </html>

事件冒泡

当页面上出现多个元素嵌套的时候，绑定同一个事件，当我们触发内部元素的事件，也会触发外部元素的相同事件。这个称为事件冒泡

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="content"> 外部的div <span>span元素</span> 外部的div </div> <div id="msg"></div> </body> <script type="text/javascript"> $(function(){ //内部的span一个事件 $('span').click(function(){ var txt = $("#msg").html()+"<p>内部的span被点击</p>"; $("#msg").html(txt); }); //外部的div事件 $('#content').click(function(){ var txt = $("#msg").html()+"<p>外部的div被点击</p>"; $("#msg").html(txt); }); //内部的span一个事件 $('body').click(function(){ var txt = $("#msg").html()+"<p>body被点击</p>"; $("#msg").html(txt); }); }) </script> </html>

冒泡事件可能会引起不可预料的后果，所以要阻止冒泡事件的发生

stop.propagation() 阻止冒泡事件

阻止默认行为

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <form action="#" > ursename: <input id="username" type="text"> <span></span><br> <input id="sub" type="submit" value="提交"/> </form> </body> <script type="text/javascript"> $(function(){ $("#sub").click(function(){ var username = $("#username").val(); //获取文本框输入的内容 if(username != 'jack'){ $('span').text('你输入的用户名不正确'); //阻止提交默认事件 //event.preventDefault(); return false; }else{ alert("登录成功"); } }) }) </script> </html>

简写的阻止冒泡事件和默认行为的方式

return false；

事件解除

unbind() 解除事件绑定

语法： unbind(事件类型，[函数名称])

1,如果没有参数，删除所有的绑定的事件

2，如果提供事件类型，则指删除该类型的绑定事件

3，如果同时提供事件类型和函数名称，那么就删除指定名称的事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <button id="btn" type="button">单击</button> <button id="delAll" type="button">点击解除绑定</button> <div id="test"></div> </body> <script type="text/javascript"> $(function(){ //绑定事件 $("#btn").bind("click",function(){ $('#test').append('<p> 绑定的函数1</p>'); }).bind("click",function(){ $('#test').append('<p> 绑定的函数2</p>'); }).bind("click",function(){ $('#test').append('<p> 绑定的函数3</p>'); }); //解除绑定 $("#delAll").click(function(){ $("#btn").unbind('click'); }) }); </script> </html>

单一事件解绑

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <button id="btn" type="button">单击</button> <button id="delAll" type="button">点击解除绑定</button> <button id="delTwo" type="button">解除第二个事件</button> <div id="test"></div> </body> <script type="text/javascript"> $(function(){ //绑定事件 $("#btn").bind("click",myFun1=function(){ $('#test').append('<p> 绑定的函数1</p>'); }).bind("click",myFun2=function(){ $('#test').append('<p> 绑定的函数2</p>'); }).bind("click",myFun3=function(){ $('#test').append('<p> 绑定的函数3</p>'); }); //解除绑定 //$("#delAll").click(function(){ // $("#btn").unbind('click'); //}) //解除单个的绑定事件 $("#delTwo").click(function(){ $("#btn").unbind('click',myFun2); }) }); </script> </html>

绑定单次事件

one() 用法和bind相同，只能实现一次事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <button id="btn" type="button">单击</button> <div id="test"></div> </body> <script type="text/javascript"> $(function(){ //绑定事件 $("#btn").one("click",myFun1=function(){ $('#test').append('<p> 绑定的函数1</p>'); }).one("click",myFun2=function(){ $('#test').append('<p> 绑定的函数2</p>'); }).bind("click",myFun3=function(){ $('#test').append('<p> 绑定的函数3</p>'); }); }); </script> </html>

JQuery效果

JQuery容器适应

元素及浏览器窗口的宽度和高度

获取元素宽度和高度

$(选择器).witdh()|innerWidth()|outerWidth()

$(选择器).height()|innerHeight()|outerHeight()

分别表示

width和height 表示返回元素内容的宽高

innerWidth()和innerHeight() 返回元素内容加上内边距的宽高

outerWidth()和outerHeight() 返回内容、内边距、边框的宽高

获取窗口的宽高

$(window).width

$(window).height

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; padding: 20px; border: 10px solid red; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div></div> </body> <script type="text/javascript"> $(function(){ //获取元素的宽高 var w = $('div').width(); var h = $('div').height(); var innerw = $('div').innerWidth(); var innerh = $('div').innerHeight(); var outerw = $('div').outerWidth(); var outerh = $('div').outerHeight(); //获取窗口的宽高 var winw = $(window).width(); var winh = $(window).height(); alert('w:'+w+',h:'+h); alert('innerw'+innerw+',innerh:'+innerh); alert('outerw:'+outerw+',outerh:'+outerh); alert('winw:'+winw+',winh:'+winh); }) </script> </html>

div自适应窗口高度

如果在窗口中由两个div，现在需要div2把剩下空白区域填满，不通过浏览器高度不同，剩余的空间也不同，需要动态改变div2的高度，这就是页面div高度的自适应

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .header{ height: 100px; line-height: 100px; background-color: #abcdef; } .content{ margin-top: 10px; overflow: hidden; } .content .left{ width: 20%; height: 100%; background-color: #ABCDEF; float: left; } .content .right{ width: 80%; height: 100%; background-color: #fff000; float: right; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="header">Header</div> <div class="content"> <div class="left">left</div> <div class="right">right</div> </div> </body> <script type="text/javascript"> function setHeight(){ var winh = $(window).height(); $('.left').css('height',winh-110+'px'); } $(function(){ setHeight(); }) </script> </html>

JQuery标签操作

标签内容操作

输入框中值的操作（文本框、文本域、下拉框）,HTML内容操作

$(选择器).text() ：设置或者返回所选元素的文本内容

$(选择器).html() ：设置或者返回所选元素的文本内容(返回HTML标签)

$(选择器).val() ：设置或者返回表字段的值

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p id="test0"> 窗前 <b>明月</b> 光</p> <input type="text" id="test1"> <br> <button id="btn1" type="button">显示文本text</button> <button id="btn2" type="button">显示文本html</button> <button id="btn3" type="button">显示表单字段val</button> </body> <script type="text/javascript"> $(function(){ //返回text $("#btn1").click(function(){ alert("文本内容位:"+$("#test0").text()); }) //返回html $("#btn2").click(function(){ alert("文本内容位:"+$("#test0").html()); }) //返回val $("#btn3").click(function(){ alert("文本内容位:"+$("#test1").val()); }) }) </script> </html>

注册页面

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <form action="" > <table width="100%"> <tr> <td> <h1>会员注册</h1> </td> </tr>  <tr> <td> 用户名: </td> <td> <input οnblur="checkusername()" type="text" name="username"> </td> <td> <div id="username"> 请输入用户名，由4-20位数字、字母、下划线在组成，不能以数字开头 </div> </td> </tr>  <tr> <td> 密码: </td> <td> <input οnblur="checkpassword()" type="password" name="password"> </td> <td> <div id="password"> 请输入密码，由6-20位非空白字符组成 </div> </td> </tr>  <tr> <td> 密码: </td> <td> <input οnblur="checkrepassword()" type="password" name="repassword"> </td> <td> <div id="repassword"> 请输入确认密码，和密码相同 </div> </td> </tr> </table> <input type="submit" value="注册"/> </form> </body> <script type="text/javascript"> //验证用户名 function checkusername(){ var username = $('[name=username]').val();//获取输入的值 //用用户名匹配正则 var re = /^[a-zA-Z_][a-zA-Z0-9_]{3,19}$/.test(username); if(re){ $("#username").html("用户名合法,请继续输入"); return true; }else{ $("#username").html("<font color='red'>用户不合法,请重新输入</font>"); return false; } } //验证密码 function checkpassword(){ var password = $('[name=password]').val();//获取输入的密码值 //用用户名匹配正则 var re = /[a-zA-Z0-9_]{6,20}/.test(password); if(re){ $("#password").html("密码合法,请继续输入"); return true; }else{ $("#password").html("<font color='red'>密码不合法,请重新输入</font>"); return false; } } //确认密码 function checkrepassword(){ var password = $('[name=password]').val();//获取输入的密码值 var repassword = $('[name=repassword]').val();//获取取认的密码值 if(password==repassword){ $("#repassword").html("确认密码正确"); return true; }else{ $("#repassword").html("<font color='red'>确认密码错误，请重新输入</font>"); return false; } } </script> </html>

标签属性操作

语法：$(选择器).attr(属性名,[值])

如果同时传入属性名和值，那就是给元素设置属性和值，

如果只传属性名，那就是获取属性的属性值

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p title="p标签的title属性值">文档内容</p> <button id="btn" type="button">点击获取p标签title值</button> </body> <script type="text/javascript"> $(function(){ $('#btn').click(function(){ alert($('p').attr('title')); }) }) </script> </html>

图片轮换效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #img1{ width: 580px; border: 5px solid orange; position: relative; } #img1 img{ display: block; } #img1 div{ border: 1px solid orange; background-color: aliceblue; padding: 1px 5px; position: absolute; bottom:8px; font-weight: bold; } </style> </head> <body> <div id="img1"> <img src="./img/1.jpg" width="580px"> <div style="right: 60px;background-color: orange;" >1</div> <div style="right: 35px;" >2</div> <div style="right: 10px;" >3</div> </div> </body> <script type="text/javascript"> //定义一个存放图片的数组 var arr = ["./img/1.jpg","./img/2.jpg","./img/3.jpg"]; var k = 0; //数组的索引 var t; function changeSrc(){ k++; //下标自增正，不能超过2 if(k>2){ k=0; } var path = arr[k];//获取图片数组的src地址 $("#img1 img").attr('src',path); //jquery调用arrt方法 //使用位置选择器改变子div的样式 $("#img1 div").css('background',''); $("#img1 div:eq("+k+")").css('background','orange'); t = setTimeout(changeSrc,1000); } $(function(){ t = setTimeout(changeSrc,1000); //设置鼠标悬停效果 $("#img1").mouseenter(function(){ clearTimeout(t); }); $("#img1").mouseleave(function(){ t = setTimeout(changeSrc,1000); }); }) </script> </html>

标签样式操作

$(选择器).css（样式属性名,[值]）设置或者返回被选元素一个或者多个样式的值

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p style="color: red;">p标签内容1</p> <p style="color: green;">p标签内容2</p> </body> <script type="text/javascript"> $(function(){ //弹出第一个p标签的color属性值 alert($('p:first').css('color')); //设置属性 $('p').css('background','orange'); }) </script> </html>

$(选择器).addClass（类名）增加类名

$(选择器).removeClass（类名）移除类名

$(选择器).toggleClass（类名）添加和移除的集合

如果之前存在样式，那就移除，不存在，就添加

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .test{ font-weight: bold; color: red; } .add{ background-color: yellow; color: blue; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <button id="btn1" type="button">追加样式</button> <button id="btn2" type="button">移除样式</button> <button id="btn3" type="button">切换样式</button> <p class="test"> 你喜欢的运动是</p> <ul> <li>足球</li> <li>篮球</li> </ul> </body> <script type="text/javascript"> $(function(){ //追加样式 $("#btn1").click(function(){ $("p").addClass("add"); $("li").addClass("add"); }); //移除样式 $("#btn2").click(function(){ $("p").removeClass("add"); $("li").removeClass("add"); }); //结合体 $("#btn3").click(function(){ $("p").toggleClass("add"); $("li").toggleClass("add"); }); }) </script> </html>

选项卡效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ padding: 0; margin: 0; } .content{ width: 380px; } .content #div0,#div1,#div2{ border: 2px solid orange; } #div0 ul,#div1 ul,#div2 ul{ padding-left: 30px; padding-top: 10px; padding-bottom: 10px; } .content #ul1{ list-style: none; overflow: hidden; height: 38px; line-height: 38px; } #ul1 li{ width: 80px; height: 38px; line-height: 38px; text-align: center; font-weight: bold; float: left; } .cur{ background-color: #FF0000; color: white; } </style> </head> <body> <div class="content"> <ul id="ul1"> <li class="cur">国内</li> <li>国际</li> <li>体育</li> </ul>  <div id="div0"> <ul> <li><a href="">[国内]标题1</a></li> <li><a href="">[国内]标题2</a></li> </ul> </div>  <div id="div1" style="display: none;"> <ul> <li><a href="">[国际]标题1</a></li> <li><a href="">[国际]标题2</a></li> </ul> </div>  <div id="div2" style="display: none;"> <ul> <li><a href="">[体育]标题1</a></li> <li><a href="">[体育]标题2</a></li> </ul> </div> </div> </body> <script type="text/javascript"> $(function(){ $("#ul1 li").each(function(index){ $(this).mouseenter(function(){ //设置标题对应内容的显示或者隐藏 $("#div0,#div1,#div2").css("display","none"); $("#div"+index).css("display","block"); //设置标题样式显示效果 $("#ul1 li").removeClass('cur'); $("#ul1 li:eq("+index+")").addClass('cur'); }) }) }) </script> </html>

JQuery动画

隐藏和显示

$(选择器).hide(speed,函数) 隐藏元素

$(选择器).show(speed,函数) 显示元素

$(选择器).toggle(speed,函数) 显示和隐藏的结合

speed：用来控制显示或者隐藏的速度，可以是时间以毫秒位单位，slow等，可选参数

函数：传入函数表示动画执行完以后，执行此函数

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #div1{ position: absolute; width: 200px; height: 200px; top: 50px; left: 10px; background-color: red; display: none; } </style> </head> <body> <button id="btn1">瞬间显示</button> <button id="btn2">慢慢显示</button> <button id="btn3">慢慢隐藏</button> <button id="btn4">显示隐藏切换</button> <div id="div1"> </div> </body> <script type="text/javascript"> $(function(){ //瞬间显示 $("#btn1").click(function(){ $('#div1').show(); }) //慢慢显示 $("#btn2").click(function(){ $('#div1').show(3000); }) //慢慢隐藏 $("#btn3").click(function(){ $('#div1').hide(2000); }) //显示隐藏切换 $("#btn4").click(function(){ $('#div1').toggle(); }) }) </script> </html>

淡入和淡出

$(选择器).fadeIn(speed,函数) 淡入已经隐藏的元素

$(选择器).fadeOut(speed,函数) 淡出元素

$(选择器).fadeToggle(speed,函数) 淡入淡出结合使用

$(选择器).fadeTo(speed，透明度，函数) 淡入淡出到指定的透明度

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #div1{ position: absolute; width: 200px; height: 200px; top: 50px; left: 10px; background-color: red; } </style> </head> <body> <button id="btn1">淡出</button> <button id="btn2">淡入</button> <button id="btn3">淡入淡出切换</button> <div id="div1"> </div> </body> <script type="text/javascript"> $(function(){ //淡出 $("#btn1").click(function(){ $("#div1").fadeOut(5000); }) //淡入 $("#btn2").click(function(){ $("#div1").fadeIn(); }) //淡出淡入切换 $("#btn3").click(function(){ $("#div1").fadeToggle(); }) }) </script> </html>

动画效果滑动

slideDown() 向下滑动

slideUp() 向上滑动

slideToggle() 上下结合

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul,li{ padding: 0; margin: 0; list-style: none; } .nav{ height: 350px; background-color: #f3f3f3; } .nav>li{ text-align: center; float: left; width: 100px; height: 35px; line-height: 35px; background-color: #abcdef; border-right: 1px solid white; } a{ text-decoration: none; } .nav ul{ background-color:orange ; display: none; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul class="nav"> <li><a href="">首页</a></li> <li id="son1"><a href="">产品</a> <ul> <li><a href="">产品1</a></li> <li><a href="">产品2</a></li> </ul> </li> <li><a href="">资讯</a></li> </ul> </body> <script type="text/javascript"> $(function(){ //下拉效果 $("#son1").mouseenter(function(){ $("#son1 ul").slideDown(); }) //上拉效果 $("#son1").mouseleave(function(){ $("#son1 ul").slideUp(); }) }) </script> </html>

遮罩层

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .big-link{ display: block; margin-top: 100px; font-size: 70px; color: #06f; } .mask{ position: absolute; top: 0px; background-color: #777; left: 0px; opacity: 0.5; } .reval-modal{ display: none; position: absolute; top: 100px; left: 50%; margin-left: -300px; width: 500px; background-color: #eee; z-index: 100; padding: 30px 40px 34px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.4); } a{ text-decoration: none; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <a href="#" class="big-link" οnclick="s()"><h3>登录</h3></a> <div id="mask" class="mask"></div> <div id="mymodal" class="reval-modal"> <h1><span>登录</span><a href="JavaScript:h()">X</a></h1> <p>你好，欢迎登录</p> </div> </body> <script type="text/javascript"> function s(){ //控制遮罩的宽高，和显示遮罩、登录框 $("#mask").css("height",$(document).height()); $("#mask").css("width",$(document).width()); $("#mask").show(); $("#mymodal").show(); } function h(){ //控制遮罩的宽高，和隐藏遮罩、登录框 $("#mask").css("height",$(document).height()); $("#mask").css("width",$(document).width()); $("#mask").hide(); $("#mymodal").hide(); } </script> </html>

页面右下角弹层<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 150px; border: 1px solid #ccc; background-color: #f0f0f0; position: absolute; right: 6px; bottom: 0px; display: none; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="div1">div1</div> </body> <script type="text/javascript"> $(function(){ $("#div1").slideDown(1000,function(){ setTimeout(function(){ $("#div1").slideUp(1000); },3000) }); }) </script> </html>

自定义动画

animate()用于创建自定义动画，这个函数关键在于通过改变元素样式来实现动画效果

语法：

$(选择器).animate（JSON串，speed，函数）

JSON串：包含样式的属性和值的映射，{a:'1',b:'2'}

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #test{ height: 100px; width: 100px; background-color: red; position: absolute; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="test"> </div> </body> <script type="text/javascript"> $(function(){ $('#test').click(function(){ $('#test').animate({left:'200px',width:'200px',height:'200px'},2000) }) }) </script> </html>

累加累减动画

动画中回调函数的使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #test{ height: 100px; width: 100px; background-color: red; position: absolute; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="test"> </div> </body> <script type="text/javascript"> $(function(){ $('#test').click(function(){ $('#test').animate ({left:'+=200px',width:'200px',height:'200px'},2000, function(){ $('#test').animate({left:'0px',width:'100px',height:'100px'},2000) }) }) }) </script> </html>

获取鼠标位置

使用mouseenter、mouseleave、mousedown、mousedownup、mousemove都可以获取鼠标位置

示例使用mousemove获取位置

$(选择器).pageX 鼠标x轴坐标

$(选择器).pageY 鼠标y轴坐标

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #test{ width: 500px; height: 300px; font-size: 35px; border: 5px solid orange; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="test"> </div> </body> <script type="text/javascript"> $(function(){ $("#test").mousemove(function(e){ x = e.pageX; y = e.pageY; $("#test").html("x:"+x+",y:"+y); }) }) </script> </html>

遮罩层移动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .big-link{ display: block; margin-top: 100px; font-size: 70px; color: #06f; } .mask{ position: absolute; top: 0px; background-color: #777; left: 0px; opacity: 0.5; } .reval-modal{ display: none; position: absolute; top: 100px; left: 50%; margin-left: -300px; width: 500px; background-color: #eee; z-index: 100; padding: 30px 40px 34px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.4); } a{ text-decoration: none; } </style> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <a href="#" class="big-link" onclick="s()"><h3>登录</h3></a> <div id="mask" class="mask"></div> <div id="mymodal" class="reval-modal"> <h1><span>登录</span><a href="JavaScript:h()">X</a></h1> <p>你好，欢迎登录</p> </div> </body> <script type="text/javascript"> function s(){ //控制遮罩的宽高，和显示遮罩、登录框 $("#mask").css("height",$(document).height()); $("#mask").css("width",$(document).width()); $("#mask").show(); $("#mymodal").show(); } function h(){ //控制遮罩的宽高，和隐藏遮罩、登录框 $("#mask").css("height",$(document).height()); $("#mask").css("width",$(document).width()); $("#mask").hide(); $("#mymodal").hide(); } //移动遮罩层登录框 //声明变量存放位置、坐标信息 var x0,y0,left0,top0,xn,yn,x1,y1; var start = false; $(function(){ //先绑定鼠标按下事件 $("#mymodal>h1").mousedown(function(e){ //获取鼠标按下的坐标，及当前元素的left和top值 x0 = e.pageX; y0 = e.pageY; left0 = parseInt($("#mymodal").css('left')); top0 = parseInt($("#mymodal").css('top')); start = true; //alert("鼠标按下"); }) //绑定鼠标抬起事件 $("#mymodal>h1").mouseup(function(){ start = false; }) //绑定鼠标移动事件 $("#mymodal>h1").mousemove(function(e){ if(start){ //获取鼠标移动后的坐标点 xn = e.pageX; yn = e.pageY; //使用移动后的坐标减去原来的坐标，就是元素移动距离 x1 = xn-x0; y1 = yn-y0; //把两个值分别加到元素的top和left属性中 $("#mymodal").css('left',left0+x1+'px'); $("#mymodal").css('top',top0+y1+'px'); } }) }) </script> </html>

二级联动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <select name="province" οnchange="showCity()" > <option value="1">江苏</option> <option value="2">山东</option> </select> <select name="city"> </select> </body> <script type="text/javascript"> function showCity(){ //获取选择的下拉菜单中的值 var v = $("[name=province]").val(); //声明城市节点 var ob = $("[name=city]"); //判断获取的值是多少 switch(v){ case "1": ob.empty(); ob.append("<option value='11'>南京</option>"); ob.append("<option value='12'>苏州</option>"); ob.append("<option value='13'>扬州</option>"); break; case "2": ob.empty(); ob.append("<option value='21'>济南</option>"); ob.append("<option value='22'>青岛</option>"); ob.append("<option value='22'>临沂</option>"); break; } } $(function(){ showCity(); }) </script> </html>

JQuery 中AJAX

简介

概念：全称是 Asynchronous JavaScript and XML 异步的JavaScript和XML，网页的异步通信，就是JS或者JQery可以直接发送HTTP请求到服务器，通过后与服务器进行少量数据交互，AJAX可以实现网页的异步更新。

Jquery中AJAX的语法

$.ajax({

url: ' ',

type: 'post | get',

data: '数据',

dataType： 'json | xml |text |script',

success:function(re){

服务器回传数据处理

}

})

JSON对象

JSON是存储数据的对象，也是存储和交换文本信息的对象

存放格式

第一种 { name:'张三',age:20}

第二种 [{ name:'张三',age:20},{ name:'李四',age:30},{ name:'王五',age:21}]

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var studentOne = {name:'张三',age:20}; var students = [{ name:'张三',age:20},{ name:'李四',age:30},{ name:'王五',age:21}]; //遍历多个对象的数据 $(function(){ var n; var a; for(var k in students){ n = students[k].name; a = students[k].age; $("#s").append("<tr><td>"+n+"</td><td>"+a+"</td></tr>"); } }) </script> </head> <body> studentOne的name值为： <script type="text/javascript"> document.write(studentOne.name); </script> <table id="s"> <tr> <th>name</th> <th>age</th> </tr> </table> </body> </html>

XML使用

XML也可以是服务器返回数据的一种格式，可以使用一些js中方法，如find，attr等。。

XML称为可扩展性标记语言。

<?xml version="1.0" encoding="utf-8"?> <list> <province id="1" name='江苏'> <city id="11" name='南京'></city> <city id="12" name='苏州'></city> <city id="13" name='扬州'></city> </province> <province id="2" name='山东'> <city id="21" name='济南'></city> <city id="22" name='青岛'></city> <city id="23" name='临沂'></city> </province> </list>

ajax二级联动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //获取城市 function getCity(){ //知道选则哪个省份，获取省份对应的城市 var pid = $("[name=province]").val(); //获取省份的id值 var cityId,cityName; //ajax读取xml文件内容 $.ajax({ url:'test.xml', dataType:'xml', success:function(re){ $("[name=city]").empty(); //清空城市的节点内容 $(re).find("[id="+pid+"] city").each(function(){ //遍历城市节点 //获取id和name值 cityId = $(this).attr('id'); cityName = $(this).attr('name'); $("[name=city]").append("<option value ='"+cityId+"'>"+cityName+"</option>"); }) } }) } $(function(){ //获取省份信息 var id,name; $.ajax({ url:'test.xml', dataType:'xml', success:function(re){ //遍历省份节点 $(re).find('province').each(function(){ //获取省份数据 id = $(this).attr('id'); name = $(this).attr('name'); //把获取到的数据加到html节点中 $("[name=province]").append("<option value ='"+id+"'>"+name+"</option>"); }) getCity(); } }) //为省份追加内容变化事件 $("[name=province]").change(getCity); }) </script> </head> <body> 省:<select name="province"></select> 市:<select name="city"> </select> </body> </html>

load()方法

get()方法和post()方法

语法：

$(选择器).load(url,data,函数)

test.txt文件文件内容

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <script type="text/javascript"> $(function(){ $('button').click(function(){ $("#div1").load("test.txt"); }) }) </script> <body> <div id="div1">文本内容显示到此处</div> <button type="button">点击获取文本内容</button> </body> </html>

$.get(url,data,函数,dataType)

$.post(url,data,函数,dataType)

    

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <script type="text/javascript"> $(function(){ $('button').click(function(){ // $("#div1").load("test.txt"); //get方法 //$.get("test.txt",function(data,status){ // alert("返回数据:"+data+",请求状态:"+status); //}) //post方法 //$.post("test_post.php",{name:"百度",url:"http://www.baidu.com"}, // function(data,status){ // alert("返回数据:"+data+",请求状态:"+status); //}) }) }) </script> <body> <div id="div1">文本内容显示到此处</div> <button type="button">点击获取文本内容</button> </body> </html>

@然而

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
h5 +css +js +jq 基础知识总结

l软件架构1，C/S client/server 客户端/服务器本地需要安装一个客户端，远程需要一个服务器端如：电脑上安装软件，QQ，迅雷安装、部署、开发比较麻烦用户体验好点2，B/S browser/server 浏览器/服务器用户只需要安装浏览器，然后输入不同的网址，访问不同的服务器如:淘宝网、京东、百度... 安装、部署、开发比较简单缺点：对于服务器的硬件要求比较高，用户量大的时候，体验差 BS架构资源划分静态资源：
复制链接

扫一扫

专栏目录