前端干货知识点！带你重温细致入微的前端内容！【长文·建议收藏】
HTML介绍
#web端的组成
HTMl 一堆标签组成的内容,基础的排版和样式
CSS 描述了标签的样式
JS/JQ 添加动态的展示效果
#浏览器发送请求的过程:
浏览器发送请求>HTTP请求>服务器接受请求>服务端返回相应>服务端把HTML文件内容发送给浏览器>浏览器渲染页面
#什么是HTML
HTML是一种超文本标记语言,本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的页面,对于不同的浏览器,对同一个标签可能有不同的解释(浏览器的兼容性),HTML文件的文件格式是.html或者htm,HTMl是一种标记语言,不是一种编程语言,HTMl使用标签来描述网页,遵循的是固定的规则,没有像python语言的编程逻辑性,超文本指的是图片,音频,视频,都是bytes类型的,才能发送,标记所有的内容都是包裹在标签中
#HTMl的网络术语
网页 ：由各种标记组成的一个页面就叫网页。
主页(首页) : 一个网站的起始页面或者导航页面。
标记： <p>称为开始标记 ，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：<p>内容</p>称为元素.
属性：给每一个标签所做的辅助信息。
#标记的分类
标记分为双边标记和单闭合标记
HTML标签结构(主体)
<!DOCTYPE html>
<html lang="zh-CN"> #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'
<head>
<meta charset="UTF-8">#对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则需要设置为 <meta charset="gbk">,一般都是UTf-8
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css样式优先级</title>
</head>
<body> </body>
</html>
1:#<!DOCTYPE html>
声明为HTML的文档,此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范
2:#<html> </html>
标记文档的开始与结束,是HTML页面的根元素,在他们之间包括了head头部标签,还有body主体标签
3:#<head></head>
定义了HTML文档的开头部分,他们之间的内容不会出现在浏览器的页面上,包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的
head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>
<title>：指定整个网页的标题，在浏览器最上方显示。
<meta>：提供有关页面的基本信息
<link>：定义文档与外部资源的关系。
<style>:定义内部样式表与网页的关系
4:#<title>、</title>
定义了网页标题，在浏览器标题栏显示
5:#<body>、</body>
之间的文本是可见的网页主体内容
6:#http-equiv属性(了解就好)
#<!--重定向 2秒后跳转到对应的网址，注意分号-->******************
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
#<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
#<!--告诉IE浏览器以最高级模式渲染当前网页-->*****************
<meta http-equiv="x-ua-compatible" content="IE=edge">
7:#name属性
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
#关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的
<meta name="description" content="xxxxxpythonxxx学习">
#是对这个文档的描述，在百度一些内容的页面上，f12打开看看
标签分类
#块级标签(行外标签):独占一行,可以包含内敛标签和某些块级标签,
div,p,h1-h6,hr,form
p标签,p标签内部不能包含块级标签和p标签
#内联标签(行内标签):不独占一行,不能包含块级标签,只能包含内敛标签
b,i,u,s,a,img,select,input,span,textarea,lable
h标题标签(块级标签)
<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>python24期</title> </head> <body> <h1>我是h1</h1> <h2>我是h2</h2> <h3>我是h3</h3> <h4>我是h4</h4> <h5>我是h5</h5> <h6>我是h6</h6> </body> </html> ''' h标签是HTML的标题标签,分为6级,标签可以帮我们规范字体的大小,标题的作用是可以作为页面目录结构,可以使网页的目录结构更加清晰,h标签是一个块级标签,块级标签就是一个标签占满一整行,会与别的标签之间自动换行 '''
内联标签(行级标签)
'''
内联标签:和其他内联元素从左到右在一行显示
不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
内联元素的宽高是由本身内容的大小决定（文字、图片等）
内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）
'''
#注释
<!-- 注释 -->
#加粗标签
<b>我是加粗</b>
<strong>我是加粗</strong>
#斜体标签
<i>我是斜体</i>
<em>我是斜体</em>
#上下标
<sup>我是上标</sup>
<sub>我是下标</sub>
#下划线与中划线
<del>中划线</del>
<s>中划线</s>#标签是html4中的中划线,html5中用del标签
<u>下划线</u>
#换行符(单边标记)
<br/>换行,br标签是一个行内标签
#内容标签(常用)*************
<span>我是一个内容标签<span>
# img标签(单边标签)************
<img src="" alt="" width='200px' height='200px' title='链接'>
'''
width和height表示的是像素,比如可以用来设置一个照片的的宽和高(一般设置一个就可以了)
src和alt都是img标签的一个属性,属性等号后面的内容都要用引号引起来
src表示的是source资源的意思,比如可以引入一个图片等,这个图片的地址可以是一个网络地址,也可以是一个本地地址,
alt是对src引入内容的一个描述,当引入的内容加载不出来的时候,就会用alt描述信息来显示,title属性是当鼠标悬浮到这个超链接的时候的提示信息
'''
#a标签(超链接标签,带下划线)************
<a href='http://www.baidu.com' target='_blank' >我是一个超链接</a>#href没有值得情况下,点击刷新当前页面,文本有效果,加上了下划线和文本颜色
<a href='mailto:邮箱地址'>联系我们</a>#也可以跳转到邮箱里,给你设置的邮箱发邮件
<a href='#'>回到顶部</a>#点击可以跳转到网页的顶部
<a href='#xxx'>回到xxx</a>#如果想要跳转到页面的某一个地方,就再这个地方的标签中添加一个属性id,在href中设置#id值,那么点击这个超链接,就能跳转到这个页面
'''
href属性可以链接一个网络资源,点击就可跳转到那个网址,这个超链接显示的链接文字试a标签内的文本,tanget属性可以指定试再当前页面跳转还是大家一个新的页面,target默认属性是_self,就是在当前页面直接跳转,_blank是打开一个新的页面跳转,
'''
特殊字符
''' HTML有一个特性,叫做空白折叠,不管在标签的内容中连续写多少个空格,html都会把这些连起来的空格折叠成一个空格显示出来,要想达到多个空格的效果就要用 这个特殊字符来表示(一个空格),在html标签中大于小于号用来表示标签的,如果想要在文本终显示大于小于号,也要用到特殊字符<(小于号)>(大于号)来表示,有点类似转义的意思 ''' ：空格 （non-breaking spacing，不断打空格） <：小于号（less than） >：大于号（greater than） &：符号& "：双引号 '：单引号 ©：版权© ™：商标™ 要背过的特殊字符： 、<、>、©
排版标签
1:#p标签段落标签 ''' p标签是一个段落标签,会自动在段落之间加上空白,用来区分每一个段落 p标签是一个文本级标签,不可以在p标签内部嵌套别的块级标签 ''' 2:#div标签(常用) ''' div标签是一个什么样式都没有的块级标签,和span一样,都是没有任何样式,但是span是内联标签,div是一个块级标签 ''' 3:#center标签 ''' 居中显示,在center标签里的内容,会显示在这一行中间,不常用,已经逐渐废弃 ''' 4:#<hr>分割线(单闭合标签) ''' hr标签会在屏幕上显示一条分割线 '''
列表标签
1:#ul无序列表 #不设置属性或者设置为disc默认为实心圆点 <ul type='disc'> <li>旧手机</li> <li>就家具</li> </ul> #设置不显示任何样式 <ul type="none"> <li>旧手机</li> <li>就家具</li> </ul> #设置显示空心圆点 <ul type="circle"> <li>旧手机</li> <li>就家具</li> </ul> #设置显示实心方块 <ul type="square"> <li>旧手机</li> <li>就家具</li> </ul> ''' ul标签中只能嵌套li标签,li标签中可以嵌套别的标签,ul和li标签都是块级标签,子啊屏幕显示的时候,默认会在每一个内容前面加上一个圆点,可以设置ul标签的type属性来更改内容前面的圆点显示,type设置为none的时候,可以去掉圆点,设置为circle的时候可以吧实心圆点变为空心圆点,设置为square的时候可以吧圆点设置为实心方块 ''' 2:#ol有序列表(了解,不常用) #设置以小写字母排序,start设置从第几个开始,就是设置起始位置,默认从第一个开始 <ol type="a" start="2"> <li>长头发</li> <li>旧手机</li> <li>就家电</li> </ol> #设置以大写字母排序 <ol type="A" start="2"> <li>长头发</li> <li>旧手机</li> <li>就家电</li> </ol> #设置以数字排序,默认就是以数字显示 <ol type="1" start="2"> <li>长头发</li> <li>旧手机</li> <li>就家电</li> </ol> #设置以罗马数字排序 <ol type="I" start="2"> <li>长头发</li> <li>旧手机</li> <li>就家电</li> </ol> ''' ol标签中同样只能嵌套li标签,ul标签是无序的,ol标签是有序的,默认在屏幕显示的时候会把每个li标签的内容按照数字进行排序,同样可以使用type来设置ol的属性,可以设置以大小写字母,罗马数字等进行排序显示,默认是用数字来排序,start是用来设置起始值,类似有enmerate的起始值一样 ''' 3:#dl定义列表 <dl> #dt是dl标签中用来定义标题的一个标签 <dt>标题</dt> #dd是dl标签中用来书写内容的标签 <dd>哈哈</dd> <dd>呵呵</dd> <dd>哦哦</dd> </dl> ''' dl标签有两个子标签,dt标签是用来设置标题的,dd是用来书写内容的,dd标签内容的显示会缩进到dt标题中,可以用来设置多级内容 '''
表格标签table
''' 表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。 表格的基本结构： ''' <table border='1'> <thead> #标题部分,代表第一行的表头部分 <tr> #一行 <th>序号</th> #一个单元格代表一个表头的数据写多个代表有多列 <th>姓名</th> <th>爱好</th> </tr> </thead> ''' thead可以不写,这样就没有表头的样式了,只有内容部分 ''' <tbody> #内容部分,指的是对应每个表头的内容部分 <tr> #一行 <td>1</td> #一个td对应一个表头的数据,有几个表头就定义几个内容列 <td>Egon</td> <td>杠娘</td> </tr> <tr> <td>2</td> <td>Yuan</td> <td>日天</td> </tr> </tbody> </table> border: #表格边框. cellpadding:# 内边距 （内边框和内容的距离） cellspacing: #外边距.（内外边框的距离） width: #像素 百分比.（最好通过css来设置长宽） rowspan: #单元格竖跨多少行 colspan: #单元格横跨多少列（即合并单元格） ====================================== # 不写thead只写tbody 就没有表头样式 <table border="1" cellpadding="10px" cellspacing="5px"> <tbody> <tr> <td colspan="2">第一个值</td> <td>qqxing</td> </tr> <tr> <td>第二个值</td> <td>wahaha</td> <td rowspan="2">ab钙</td> </tr> <tr> <td>第二个值</td> <td>wahaha</td> </tr> </tbody> </table>
from表单(重要)
-
from表单的作用
#from表单的功能: 表单用于向服务器传输数据，从而实现用户与Web服务器的交互 表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含textarea、select、fieldset和 label标签。
-
from表单属性
属性 描述 accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。 action 规定向何处提交表单的地址（URL）（提交页面）。 autocomplete 规定浏览器应该自动完成表单（默认：开启）。 enctype 规定被提交数据的编码（默认：url-encoded）。 method 规定在提交表单时所用的 HTTP 方法（默认：GET）。 name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 novalidate 规定浏览器不验证表单。 target 规定 action 属性中地址的目标（默认：_self）。 -
input标签
form : 表单标签 #action : 提交到的地址,把表单中的数据提交到对应的地址上 input : #type种类:text,password,radio,checkbox,submit #name\value :把数据提交到后台的,提交的是input标签的name值和value值 #对于选择框 : checked属性表示默认选中 #readonly :对于输入框的禁止修改 可以提交 #disabled :对于所有元素不能修改 也不能提交 button : #input的submit类型和button放在form表单中都表示提交 <form action="http://127.0.0.1:9000"> <input type="text" name='username' value = 'alexander' placeholder="请输入用户名或密码" readonly> <input type="password" name="password" value="3714" disabled> #<!--注意:如果设置了readonly,只能给输入框的模式设置,那么不能修改,但是可以提交--> #<!--注意:如果设置了disabled,可以给所有的表单元素设置,那么不能修改,也不能提交--> <input type="radio" name="sex" value="1" checked disabled> 男 <input type="radio" name="sex" value="2" disabled> 女 <input type="checkbox" name="hobby" value="a" checked> 抽烟 <input type="checkbox" name="hobby" value="b" checked> 喝酒 <input type="checkbox" name="hobby" value="c"> 抠脚 <input type="submit" value="表单按钮"> <button>提交按钮</button> #<!--注意 input的submit类型和button放在form表单中都表示提交--> </form> -
input标签的其他type
#reset hidden button file date #注意: 如果是file类型的input标签需要修改表单的enctype类型Multipart/form-data <form> #隐藏输入框,页面会把这个属性的输入框隐藏掉 <input type="hidden"> #重置按钮,会把已经输入的内容清空或重新返回默认的时候,不是刷新页面 <input type="reset"> #就是个普通按钮没啥作用,但是在from表单里的里的话,直接用button标签的话和submit一样 <input type="button" value="普通按钮"> #文本选择框,可以在电脑中选择上传的文件 <input type="file"> #日期选择框,可以选择日期 <input type="date"> </form> -
input属性
type属性值 表现形式 对应代码 text 单行输入文本 {#<input type=text" />#} password 密码输入框（不显示明文） {#<input type="password" />#} date 日期输入框 {#<input type="date" />#} checkbox 复选框 {#<input type="checkbox" checked="checked" name='x' />#} radio 单选框 {#<input type="radio" name='x' />#} submit 提交按钮 {#<input type="submit" value="提交" />#} #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新 reset 重置按钮 {#<input type="reset" value="重置" />#} #页面不会刷新，将所有输入的内容清空 button 普通按钮 {#<input type="button" value="普通按钮" />#} hidden 隐藏输入框 {#<input type="hidden" />#} file 文本选择框 {#<input type="file" />#}
lable标签
1:#label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容 2:#<label> 标签的 for 属性值应当与相关元素的 id 属性值相同 for属性,点击lable中的内容,让for标示的id对应的元素获得焦点 <label for="user">姓名 : </label> <input type="text" name='username' id="user" >
textarea多行文本标签
''' 会在屏幕上先是一个文本输入框,可以输入多行文本,还可以放大缩小文本框 ''' <textarea name="" id="" cols="30" rows="10"></textarea> name：名称 rows：行数 #相当于文本框高度设置 cols：列数 #相当于文本框长度设置 disabled：禁用 maxlength：显示字符数，例如：maxlength='10' 最多输入十个字符
select设置下拉框
#select选择框:
multiple:设置多选框
size:选择框显示大小
#option选项:
selected:默认选中
<select name="city" id="a" size="3">
<option value="1" selected>北京</option>
<option value="2">上海</option>
<option value="3">天津</option>
</select>
<select name="" id="" multiple>
<option value="" selected>抽烟</option>
<option value="" selected>喝酒</option>
<option value="" >烫头</option>
</select>
#<!--注意:默认是单选-->
#<!--注意:使用multiple属性设置为多选:按住鼠标下拉,按住ctrl选,按住shift选-->
#<!--注意:使用multiple属性设置为多选:提交属性的时候提交的数据样式为:city:['a','b']-->
CSS
CSS介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）
CSS语法
#每个CSS的样式由两个部分组成:选择器和声明.声明又包括属性和属性值。每个声明之后用分号结束
#CSS注释
/*这是注释*/
CSS三种引入方式
行内引入
<!--行内引入(内联样式)方式就是在标签的内部添加tyle属性,设置CSS样式--> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS的引入方式</title> </head> <body> <p style="color: blue;background: green">Helloworld</p> </body> </html> <!--color是用来设置字体的颜色,backgroup是用来设置背景色,可以单独设置一个-->
内部样式
<!--内部样式(嵌入式)就是将CSS样式集中写在<head>头标签中的style标签中-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<style>
div{
color:red;
background: blue}
</style>
</head>
<body>
<div>HelloWorld</div>
</body>
</html>
<!--在<head>头标签中的style标签中对标签引入CSS样式,如果定义的是div标签,那么body主题标签中的所有div标签的字体都会变成style标签中设置的样式-->
<!--注意在style中引入的CSS样式为CSS语言,注释的时候于HTML不同使用 /*内容*/的方式注释-->
外部样式(推荐使用)
<!--外部样式就是将所有要引入的CSS样式,写入到一个单独的文件中,然后在HTML页面中引入即可-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<link rel="stylesheet" href="link.css" type="text/css">
</head>
<body>
<div>HelloWorld</div>
</body>
</html>
<!--第一步:新建一个CSS文件,文件的格式是:stylesheet-->
<!--第二步:将要引入的CSS样式写在CSS文件中,定义好样式-->
/*div标签使用*/
div{
color:red;
background: aquamarine;
}
<!--第三部:在HTMl页面中将CSS样式文件引入进来,在<head>头标签中,使用<link>标签,rel代表的是文件格式,href代表的是文件路径-->
基本选择器
元素选择器
<!--元素选择器就是在style中定义CSS样式,用指定的样式修改指定的标签-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<style>
div{
color:red;
background: blue}
</style>
</head>
<body>
<div>HelloWorld</div>
<div>你好</div>
<div>世界</div>
</body>
</html>
<!--元素选择器的方式,在上面的代码中,如果有多个div标签,就会把所有的div标签都改变-->
ID选择器
<!--ID属性就是将拥有指定ID值的标签,修改成指定的CSS样式-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<style>
#name{
color: red;
background: antiquewhite;
}
</style>
</head>
<body>
<div id="name">HelloWorld</div>
<div >HelloWorld</div>
<div >HelloWorld</div>
</body>
</html>
<!--ID选择器是指定ID来使用CSS样式,在HTML页面代码中,ID属性是唯一的,不可以重复-->
<!--#号代表的是ID属性,name指的是值,将ID为name的标签使用CSS样式-->
类选择器
<!--类选择器是指定拥有一样class属性的标签使用CSS,点代表的就是class属性,后面是值-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<style>
.python{
color: red;
background: antiquewhite;
}
div.python{
color:blue;
background: antiquewhite}
</style>
</head>
<body>
<div id="name">HelloWorld</div>
<div >HelloWorld</div>
<div >HelloWorld</div>
<div class="python">你好</div>
<div class="python">世界</div>
<div class="python">helloworld</div>
</body>
</html>
<!--类选择器有两种使用方式,第一种是将所有拥有相同class属性的标签都使用CSS样式,第二种是指某一种标签中拥有相同class属性的使用CSS样式-->
通用选择器
<!--通用选择器就是把所有的标签都设置上CSS样式,*代表所有-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<style>
*{color:blue;
background: antiquewhite}
</style>
</head>
<body>
<div>HelloWorld</div>
<div>你好</div>
<div>世界</div>
</body>
</html>
组合选择器
后代选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<style>
div p{
color: blue;
background: red;
}
</style>
</head>
<body>
<div>
<div>
<p><span>子孙</span></p>
</div>
<p>儿子</p>
</div>
</body>
</html>
<!--后代选择器指定一个标签内某一个标签使用CSS样式,不管嵌套在哪一层-->
儿子选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<style>
div>p{
color: blue;
background: red;
}
</style>
</head>
<body>
<div>
<div>
<p><span>子孙</span></p>
</div>
<p>儿子</p>
</div>
</body>
</html>
<!--后代选择器指定一个标签内某一个标签使用CSS样式,上面的示例中,div的子标签p标签使用css样式,只能是子集,或者说p标签的父级是div标签的都会变-->
毗领选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<style>
div+p{
color: blue;
background: red;
}
</style>
</head>
<body>
<p>你好</p>
<div>不好</div>
<p>不大的</p>
</body>
</html>
<!--在上面的示例中,紧挨着div标签的p标签,会使用CSS样式,如果有多个p标签只会变一个,就是紧挨这div的,代码是从上往下执行,所以下面的会变,上面的不会变-->
弟弟选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<style>
div~p{
color: blue;
background: red;
}
</style>
</head>
<body>
<p>你好</p>
<div>不好</div>
<p>不大的</p>
</body>
</html>
<!--在上面的示例中,div标签之后的p标签,都会变,毗邻选择器是只会变一个,弟弟是所有都变,只要是div标签之后的,代码是从上往下执行,所以下面的会变,上面的不会变-->
过滤选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<style>
div.c1{
color: blue;
background: red;
}
</style>
</head>
<body>
<p>你好</p>
<div class='c1'>不好</div>
<p>不大的</p>
</body>
</html>
<!--在上面的示例中,是指所有div标签中有c1这个类属性的标签,会变,他和后代不同,后代中有空格,这个没有-->
属性选择器
<!--属性选择器是选择带有指定属性的元素,或者选择带有指定属性和值的元素-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<style>
div[id='name']{
color: yellow;
background: red;
}
div[id]{
color: blue;
background: red;
}
</style>
</head>
<body>
<div id="name">你好</div>
<div id="n">你好</div>
<div id="a">你好</div>
</body>
</html>
<!--在上面代码中,div标签中有id属性都会变,还有div标签中有id属性且id值为name的会变,同一个选择器设置两种样式,就和上面的示例一样,都是使用div中的id属性时,那个在下面的样式就会把上一个样式中同样的覆盖掉-->
分组和嵌套
<!--分组-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<style>
div,p[id='name']{
color: yellow;
background: red;
}
</style>
</head>
<body>
<div id="name">你好</div>
<div id="n">你好</div>
<div id="a">你好</div>
<p>哈哈</p>
<p>哈哈</p>
</body>
</html>
<!--在设置样式的时候,对多个标签更改样式,以逗号分割,表示这一组的标签都会变-->
<!--嵌套是指多种选择器混合使用,比如.python类内部所有p标签设置样式(后代选择器)-->
伪类选择器
示例代码:
<!--可以根据标签的不同状态再进行进一步的区分，比如一个a标签，点击前，点击时，点击后有不同的三个状态-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{ /* a标签访问前设置样式 */
color:red;
}
a:active{ /* a标签鼠标点下去显示样式 */
color: green;
}
a:visited{ /* a标签访问后显示样式 */
color: pink;
}
a:hover{ /* 鼠标悬浮到a标签时显示样式 */
color:purple;
}
div:hover{ /* 鼠标悬浮到div标签时显示样式 */
background-color: green;
}
input:focus{ /* input标签捕获光标时的样式显示 */
background-color: orange;
}
</style>
</head>
<body>
<a href="http://www.92py.com/">校草网</a>
<div>
</div>
<input type="text">
</body>
</html>
伪元素选择器
first-letter:文本内容首字母设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div:first-letter{
color:red;
font-size: 40px;/*设置大小*/
}
</style>
</head>
<body>
<div>
鹅鹅鹅,曲项向天歌
</div>
</body>
</html>
<!--first是给文本中首字母进行设置,上面的示例中只有第一个鹅会变-->
before,在元素之前插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div:before{
content: '?';/*要插入的内容*/
color:red;
}
</style>
</head>
<body>
<div>
鹅鹅鹅,曲项向天歌
</div>
</body>
</html>
<!--上面的代码中,在每个div标签前面插入一个内容-->
after,元素之后插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div:after{
content: '?';
color:red;
}
</style>
</head>
<body>
<div>
鹅鹅鹅,曲项向天歌
</div>
</body>
</html>
<!--上面的代码中,在每个div标签后面插入一个内容,于before正好相反-->
权重
权重越高,对应选择器的样式会被优先显示
组合选择器,各选择器的权重相加
权重不进位,11类选择器组合到一起,也没有一个id选择器的优先级大,小就是小
默认css样式是可以继承的,继承的权重为0
权重相同的选择器,谁后写的,用谁的
<a标签设置样式,需要选中设置,不能继承父级标签的样式,是一个比较特殊的,不受继承作用>
<!--在css中有继承,意思是设置一个标签的样式,那么这个标签里嵌套的标签都会变,但是有一些属性是不能继承的比如:border, margin, padding, background等,在css中继承的权重是非常低的,比元素选择器还要低-->
<div {color:'red'!important;}最高级别的权重*****>
CSS样式
高度宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度宽度</title>
<style>
div{
/*width设置标签的宽度,这个值也可以写百分比,按照父类标签的值,进行百分比取值*/
width: 200px;
/*height设置标签的高度*/
height: 200px;
/*设置标签的背景颜色*/
background: blue;
}
span{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div>你好世界</div>
<span>你好世界</span>
</body>
</html>
<!--注意给标签设置宽度高度的时候,只有块级标签可以设置高度和宽度,内联标签的宽度和高度由标签内的内容决定-->
字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<style>
div{
/*font-family给标签内容设置字体,当有多个字体时,从左往右找,找到浏览器支持的字体,未找到就是用默认字体*/
font-family:'黑体','楷体';
/*font-size给标签的文字设置大小*/
font-size: 20px;
/*font-weight设置字体的粗细*/
font-weight:bold;
/*color设置字体的颜色,十六进制的方式,由红,绿,蓝组成(第一种)*/
color: #FF0000;
/*直接标明要使用的颜色*/
color: red;
/*r代表红,g代表绿,b代表蓝,每个颜色为0-255之间选择*/
color:rgb(255.0.0.);
/*使用rgba设置字体颜色,最后一位代表字体的透明度,取值范围在0-1之间*/
color:rgba(255.0.0.0)
}
</style>
</head>
<body>
<div>你好世界</div>
</body>
</html>
<!--十六进制的方式设置字体颜色:前两位是表示红，中间两位表示绿，后面两位表示蓝，F是最高级别，0表示最低级别（无色)-->
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
文字属性
文字对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字对齐</title>
<style>
div{
/*text-align设置字体的的对其方式,center是居中*/
text-align: center;
/*text-align设置字体的的对其方式,left是左对齐,为默认格式*/
text-align: left;
/*text-align设置字体的的对其方式,right是右对齐*/
text-align: right;
}
</style>
</head>
<body>
<div>你好,世界</div>
<div>你好,世界</div>
</body>
</html>
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
文本装饰
<!--text-decoration 属性用来给文字添加特殊效果。-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字装饰</title>
<style>
div{
/*给文本增加下划线*/
text-decoration:underline ;
/*给文本内容上面增加一条线*/
text-decoration:overline ;
/*给文本增加一条穿过文本的线,中划线*/
text-decoration: line-through;
/*不给文本增加多余的线*/
text-decoration: none;
}
a{
/*可以使用text-decoration: none的方式把a标签的下划线去除*/
text-decoration: none;
}
</style>
</head>
<body>
<div>你好世界</div>
<a href="https://www.baidu.com/" target='_self'>百度</a>
</body>
</html>
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
首行缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首行缩进</title>
<style>
/*使用text-indent属性使文本内容的第一行缩进指定的像素,一个文字的默认像素是16px*/
div{
text-indent:32px
}
</style>
</head>
<body>
<div>使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片减少频繁的图片请求，就是我们刚才说的雪碧图。。</div>
</body>
</html>
背景属性
<背景颜色>
background-color: red;
<背景图片>
background-image: url('1.jpg'); #url里面是图片路径，如果和你的html文件在一个目录下，使用这种相对路径就行了，来个葫芦娃图片试一下
background-repeat: no-repeat;
=============================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性</title>
<style>
.c2{
/*这是标签边框的大小和颜色*/
border: 10px ridge red;
width: 600px;
height: 600px;
/*选择填充标签的图片路径(可以放相对路径和网络路径)*/
background-image:url("http://img4.imgtn.bdimg.com/it/u=3749716983,3304951715&fm=15&gp=0.jpg") ;
/*设置填充的方式,默认为填充整个标签,no-repeat是取消填充*/
background-repeat:no-repeat ;
/*选择填充图片的位置,这种方式是把标签划分为一个9宫格形式,来选择填充的位置*/
background-position:right center;
/*使用像素填充的位置,第一个是距离左边边框的距离,第二个是距离上边边框的位置*/
background-position:300px,200px ;
}
</style>
</head>
<body>
<div class="c2"></div>
</body>
</html>
<!--简写方式-->
<!--backgroup:yellow url() no-repeat 100px 50px -->
<!--属性顺序是:背景颜色,背景图片地址,是否平铺,图片填充的位置-->
===========================================
背景重复
repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
使用九宫格的形式选择图片的位置,center代表中间,top代表上面,bottom代表下面,left代表左边,right代表右边
background-position: right bottom; 图片位置(右下)
background-position: 100px 50px; 图片位置,100px是距离左边的距离,50px是距离上面的距离
边框属性
/*border-style: dotted;*/ 样式
/*border-color: red;*/ 颜色
/*border-width: 10px;*/ 宽度
简写形式:
/*border: 10px solid yellow;*/
四个边框可以单独设置:
border-left:10px solid yellow ;
border-right:10px dashed red ;
border-bottom:10px dashed red ;
border-top:10px dashed red ;
设置圆角
border-radius: 5%; /* 设置圆角,比例达到50%的时候就会变成一个圆形 */
=================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框属性</title>
<style>
div{
/*设置边框的宽度*/
border-width: 3px;
/*设置边框的格式*/
border-style:dotted ;
/*设置边框的颜色*/
border-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>你好世界</div>
</body>
</html>
==================================================
document.body.contentEditable=true;可以修改页面的值,任何网页,只能改当前页面的显示内容，改不了真实的值，并且页面一刷新，这个指令就失效了，需要重新输入
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
滚动背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动背景图示例</title>
<style>
* {
margin: 0;
}
.box {
width: 100%;
height: 500px;
background: url("http://img4.imgtn.bdimg.com/it/u=3749716983,3304951715&fm=15&gp=0.jpg") no-repeat center center;
/*可以设置图片在屏幕上的位置,不管怎么滚动屏幕,图片都锁定在屏幕上的一个位置*/
background-attachment: fixed;
}
.d1 {
height: 500px;
background-color: tomato;
}
.d2 {
height: 500px;
background-color: steelblue;
}
.d3 {
height: 500px;
background-color: mediumorchid;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="box"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
div{
border: 3px solid red;
/*可以把块级标签变成内联标签,*/
display: inline;
/*可以让标签同时拥有块级标签和内联标签的属性,比如设置高度宽度,但是不会占满一行*/
display: inline-block;
width: 200px;
height: 200px;
}
span{
border: 2px solid red;
/*可以把内联标签变成块级标签,占满一行,设置属性*/
display: block;
/*none是把标签隐藏掉,并且不在占据原来的位置*/
display: none;
/*也是隐藏标签但是还会占据原来的元素位置,只不过看不见,变成了空白*/
visibility:hidden;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>哈哈哈</div>
<span>你好世界</span>
</body>
</html>
====================================================
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
| 值 | 意义 |
|---|---|
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
CSS盒子模型
CSS盒子模型属性
#在css里面，每个标签可以称为一个盒子模型： #1.margin: 外边距：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。如果两个标签都设置了margin那么就选最大的作为双方的距离 #2.padding: 内边距：用于控制内容与边框之间的距离； #3.Border(边框): 围绕在内边距和内容外的边框。 #4.Content(内容): 盒子的内容，显示文本和图像。 一个标签在页面占用的空间大小是connect+padding+border
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.c1,.c3{
height:200px;
width: 200px;
/*设置边框的大小,上下左右都是10px*/
border: 10px solid red;
/*设置内边距,上下左右都是20px*/
padding: 20px 20px;
/*设置外边距,上下左右都是20px*/
margin: 20px 20px;
}
.c2{
height:200px;
width: 200px;
border: 10px solid green;
padding: 20px 20px;
margin: 20px 20px;
}
</style>
</head>
<body>
<div class="c1">你好世界</div>
<div class="c2">你好世界</div>
<div class="c3">你好世界</div>
</body>
</html>
<!--设置padding的两种简写方式-->
方式1:padding 20px 30px; --->设置上下为20px ,左右为30px
方式2:padding 20px 10px 15px 17px; 设置上为20右10下15左17,顺序是上右下左
<!--设置margin的两种简写方式-->
方式1:margin 20px 30px; --->设置上下为20px ,左右为30px
方式2:margin 20px 10px 15px 17px; 设置上为20右10下15左17,顺序是上右下左
<!--单独设置padding四个方向-->
padding-left: 10px;
padding-top: 8px;
padding-right: 5px;
padding-bottom: 5px;
<!--单独设置margin的四个方向-->
margin-top: 10px;
margin-left: 100px;
margin-bottom: 50px;
margin-right: 200px;
浮动float
floa#t浮动的作用和问题
#作用:
浮动一般用来进行页面布局,浮动会脱离正常的文档流
#问题:
会造成父级标签的塌陷问题
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.c1{
width: 200px;
height: 200px;
border: 1px solid red;
background: red;
/*设置标签右浮动*/
float:right;
}
.c2{
width: 200px;
height: 200px;
border: 1px solid green;
background: green;
/*设置标签左浮动*/
float:left;
}
.c3{
height: 200px;
border: 1px solid yellow;
background: yellow;
}
</style>
</head>
<body>
<div class="c1">你好世界</div>
<div class="c2">你好世界</div>
<div class="c3">你好世界</div>
</body>
</html>
<!--当便签设置浮动的时候,会脱离正常的文档流,然后父级标签没有内容就会塌陷,由下面的标签顶上去,当同一行内有浮动的时候,比如上面的例子.c2左浮动,.c3会顶上去,但是.c3的文本内容会被往右挤,这也是浮动的特性,浮动会造成父类标签的塌陷问题-->
解决父类标签的塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
.c1{
width: 200px;
height: 200px;
border: 1px solid red;
background: red;
float:right;
}
.c2{
width: 200px;
height: 200px;
border: 1px solid green;
background: green;
float:left;
}
.c3{
height: 200px;
border: 1px solid yellow;
background: yellow;
/*方式二:可以给下级标签设置clear清除浮动*/
clear: both;
}
/*方式一:可以给父级标签设置高度这样就会吧父级标签撑起来,不会造成塌陷*/
.cc{
height: 200px
}
/*方式三:可以往父级标签中添加一个空值,然后独占一行,再清除浮动,这样父级便签就会下来,下面的标签就不会顶上去*/
.clearfix:after{
content:'';
display: block;
clear:both;
}
</style>
</head>
<body>
<div class="cc clearfix">
<div class="c1">你好世界</div>
<div class="c2">你好世界</div>
</div>
<div class="c3">你好世界</div>
</body>
</html>
clear清除浮动标签
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
overflow溢出属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>溢出</title>
<style>
div{
height: 200px;
width: 200px;
border: 3px solid red;
/*文件溢出后,对溢出的文件进行隐藏.但是隐藏的内容就无法查看*/
overflow: hidden;
/*文件溢出后,添加一个滚轮,可以滑动滚轮来查看文本*/
overflow: scroll;
}
</style>
</head>
<body>
<div>相对定位是相对于该元素在文档流中的原始位置，
即以自己原始位置左上角为参照物。有趣的是，
即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，
即占据文档流空间。对象遵循正常文档流，
所以不会出现像浮动那种父级标签塌陷的副作用，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。往上移动:top:-100px（注意是负值）或者bottom：-100px（负值），往左移动：left:-100px（也是负值）或者right：-100px，往下移动:bottom：100px（正值）或者top：100px（正值），往右移动：right:100px（正值）或者left：100px。大家记住一点昂，凡是标签要进行移动，
不管是float还是relative还是线面的absolute
，都是按照元素自己的左上角进行计算的</div>
</body>
</html>
<!--当标签的文本信息超过文本的大小时,标签内部无法全部显示内容就会造成文件溢出-->
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
|---|---|
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
圆形图像设计
<!--方式一:-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆形图像</title>
<style>
.c1{
height: 100px;
width: 100px;
border: 1px solid red;
/*使用overflow溢出属性,设置图片在标签内部,当图片溢出时可以隐藏*/
overflow: hidden;
/*设置div标签为圆形*/
border-radius: 50%;
}
div>img{
/*设置图片标签的大小属性,设置百分比,img标签的大小会使用父级也就是div的标签大小,图片也会同步缩放*/
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="c1">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3293099503,606929711&fm=26&gp=0.jpg" alt="头像">
</div>
</body>
</html>
<!--方式二:-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆形图像</title>
<style>
.c1{
height: 100px;
width: 100px;
border: 1px solid red;
overflow: hidden;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="c1">
<!--也可以设置img标签的高宽属性,同样设置使用父类标签的100%,也可以达到效果-->
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3293099503,606929711&fm=26&gp=0.jpg" alt="头像" width="100%" height="100%">
</div>
</body>
</html>
定位
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
.c1{
width: 200px;
height: 200px;
background:red ;
}
.c2{
width: 200px;
height: 200px;
background: green;
/*相对定位是相对于标签原来的位置进行移动*/
/*相对定位移动之后,还会把原来的空间位置占着*/
/*使用定位移动了标签之后,标签也是脱离了文档流,移动到别的标签位置上的时候会把别的标签给盖住*/
position: relative;
/*left的意思是相对于原来左边的标签移动200,就是向右移动*/
left: 200px;
/*top的是相对于原来上边边框的位置移动200px就是向下移动*/
top: 200px;
}
.c3{
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
<!--相对移动是相对于标签原来的位置进行移动的,相对移动的方式有left,top,right,bottom四种方式,设置那个方向,就是相对于原来的位置移动移动,可以设置负数,就是往相反的方向移动,也可以理解为比如设置left:100px,就是相对于标签原来的位置往右移动100px-->
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
body{
/*body标签margin属性默认会带有8px的宽度用来隔离和html页面之间的宽度*/
margin: 0;
}
.c1{
width: 200px;
height: 200px;
background:red ;
}
.c2{
width: 200px;
height: 200px;
background: green;
/*绝对定位是设置之后,标签不会占着原来的空间位置,下面的标签会顶上去*/
/*绝对移动在父标签或者祖辈标签都没有设置相对定位的时候,是相对于整个HTML页面来移动的 */
/*如果父级或者祖父级标签设置了相对定位,就会按照父级或祖父级标签的位置移动*/
/*如果父级或者祖父级标签设置了相对定位,子级标签使用绝对定位之后,不管父级如何移动,自己也会跟着移动,*/
position: absolute;
left: 200px;
}
.c3{
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
div{
width: 400px;
height: 600px;
background: red;
}
#top{
width: 70px;
height: 30px;
/*fixed固定定位,标签会固定在你浏览器窗口的位置,不管窗口怎么变,都会保持在那个位置*/
position: fixed;
right: 50px;
bottom: 70px;
line-height: 30px;
background: #5df8ff;
color:white ;
font-size: 10px;
text-align: center;
border-radius: 10%;
text-decoration: none;
}
</style>
</head>
<body>
<a name="lijie">这是顶部</a>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<a id="top" href="#lijie">回到顶部</a>
</body>
</html>
定位总结
#static（无定位)
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的
#relative（相对定位）
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置左上角为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，所以不会出现像浮动那种父级标签塌陷的副作用，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative定位,在不移动标签的前提下,他还是在原来的位置
#absolute（绝对定位）
定义：设置为绝对定位的元素框从文档流完全删除，也会有父级标签塌陷的问题，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
#fixed（固定）不管页面怎么动，都在整个屏幕的某个位置
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
Z-index
Z-index概念
1:#Z-index设置对象的层叠顺序,一般是用在静态对话框上 2:#z-index 值用来表示谁压着谁，数值大的压盖住数值小的， 3:#只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index 4:#z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素 5:#从父现象：父亲怂了，儿子再牛逼也没用,如果父级标签设置了Z-index值相对较低,那么就会被别的标签压住,这样就算子标签的Z-index值再高,也没用
模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态对话框</title>
<style>
.c1 {
position: fixed;
/*设置上下左右的属性,来铺满屏幕*/
top: 0;
bottom: 0;
right: 0;
left: 0;
/*设置标签的背景颜色和透明度*/
background-color: rgba(0, 0, 0, 0.8);
Z-index: 99;
}
.c2 {
position: fixed;
width: 440px;
height: 480px;
background-color: white;
top: 50%;
left: 50%;
margin-top: -240px;
margin-left: -220px;
Z-index: 100;
}
.c2 h2, .c2 h3 {
text-align: center;
font-family: '黑体', '楷体';
}
.xxx {
margin-top: 5px;
margin-right: 5px;
/*鼠标悬浮上去的时候会变成小手的样式*/
cursor: pointer;
text-align: right;
}
</style>
</head>
<body>
<div>你好世界你还呀</div>
<div class="c1"></div>
<div class="c2">
<div class="xxx">X</div>
<h2>python24期</h2>
<h3>登录</h3>
<span>
用户名:<input name="lijie" type="text"><br>
密码:<input name="lijie1" type="password">
</span>
</div>
</body>
</html>
opaity透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度</title>
<style>
.c1{
width: 100px;
height: 100px;
/*rgba设置透明度是针对于标签背景来设置的*/
background-color: rgba(255,0,0,0.3);
}
.c2{
width: 100px;
height: 100px;
background-color: maroon;
/*opacity设置透明度是设置整个标签的透明度,字体也会变的透明*/
opacity: 0.3;
}
</style>
</head>
<body>
<div class="c1">你好</div>
<div class="c2">世界</div>
</body>
</html>
javascript-js
JS介绍
#ECMAScript和JavaScript的关系
该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。二是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性,因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
#一个完整的javascript的三个部分
1:ECMAscript js的一种标准化规范 标出了一些基础的js语法
2:DOM document object model 文本对象模型 主要操作文档中的标签(整合js，css，html)
3:BOM browser object model 浏览器对象模型 主要用来操作浏览器（整合js和浏览器）
简单地说，ECMAScript 描述了JavaScript语言本身的相关内容
JavaScript 是可插入 HTML 页面的编程代码 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行
js的引入
<!--方式一:直接在HTML页面的script的标签里写-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*alert是控制浏览器的弹窗的,运行文件就会在页面上显示一个弹窗,*/
alert('nihao shijie ')
</script>
</body>
</html>
<!--方式二:引入js文件的方式-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--创建一个js文件,然后通过script标签的src属性引入进来-->
<script src="firse.js"></script>
</body>
</html>
js的结束符和注释
//结束符: ;分号是js代码的结束符 //单行注释 /*多行注释*/
js的特点
（1）简单易用：可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。 （2）解释执行（解释语言）：事先不编译、逐行执行、无需进行严格的变量声明。 （3）基于对象：内置大量现成对象，编写少量程序可以完成目标
js变量的定义
//变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字，变量区分大小写也就是说A和a是两个变量 //js保留字 abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto,implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile //变量的定义和赋值 var a = 100; - var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”，定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。变量名：我们可以给变量任意的取名字。 #创建变量的关键字是var var a=1; #创建变量可以不指定数据类型 #创建变量但是不赋值:var a; a创建出来的就是一个undefined未定义的数据类型
js输入输出
#弹出框
alert('hello')弹出框中的内容为hrllo
#弹出输入框
var inp=prompt('问句');弹出输入框,输入的内容会返回给inp
#控制台输出
console.log('变量或者值')
基础数据类型
数字(number)
#js中小数和整数丢都是数字类习惯 var a=1; bar b=0.1; #查看数据类型typeof,括号可以加,可以不加 typeof(a); typeof b; #小数点的保留 var num = 2.379 var newNum = num.toFixed(2) console.log(newNum) #NaN是数字类型的一个关键字,意思是不是一个数字,但是他的数据类型也是number,布尔值为false #Infinity是一个数字类型的关键字,意思是无限大的意思,他的Boolean的值为true
字符串string
#单引号和双引号都可以,都是字符串的表达方式
#.length,返回长度:注意length不用加括号,它是一个属性不是一个方法
console.log(a.length)
#trim 去除字符串两边的空格
var str = ' 我的天呢 ';
console.log(str.trim());//我的天呢
#cancat 返回字符串值,用来两个或者多个字符串的值
var str1 = 'alex';
var str2 = 'sb';
console.log(str1.concat(str2,str2));//alexsbsb
#charAt 返回指定索引位置的字符
var str = 'alex';
var charset = str.charAt(1);
console.log(charset);//l
#indexOf/search 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。
var str = 'alex';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1
console.log(str.search('e'));//2
console.log(str.search('p'));//-1
#slice(start，end) 切片。左闭右开 分割数组 接收负参数
var str = '小马哥';
console.log(str.slice(1,2));//马
#substr(start,length) 返回一个字符串：从指定位置开始,取指定字符数.
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.substr(0,4));//我的天呢
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.substr(9,6));
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.substr(-3,3));
#substring(indexStart,indexEnd) 切子字符串。顾头不顾尾
如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
如果省略 indexEnd，substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN，则被当作 0。
如果任一参数大于 stringName.length，则被当作 stringName.length。
如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样
#replace(a,b) 将字符串a替换成字符串b
var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755
#split('sep',n) 切割,根据n保留切割的数组长度
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.split('a'));//["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"] 如果第二个参数没写，表示返回整个数组
console.log(str.split('a',2));//["我的天呢,", "是嘛,你在说什么呢?"] 如果定义了个数，则返回数组的最大长度
#toLowerCase():全部变成小写:
var str = 'EVA';
console.log(str.toLowerCase())；//eva
#toUpperCase():全部变成大写:
var str = 'xiaomage';
console.log(str.toUpperCase());
| 方法 | 说明 |
|---|---|
| .length #不加括号的是属性 | 返回长度 |
| .trim() #得到一个新值 | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .concat(value, ...) #s1='hello';s.concat('xx');得到helloxx | 拼接 |
| .charAt(n) #n类似索引，从0开始，超过最大值返回''空字符串 | 返回第n个字符 |
| .indexOf(substring, start) #这个start是从索引几开始找，没有返回-1 | 子序列位置 |
| .substring(from, to) #不支持负数，所以一般都不用它，了解一下就行了 | 根据索引获取子序列 |
| .slice(start, end) #var s1='helloworld';s1.slice(0,-5)看结果，就用它 | 切片 |
| .toLowerCase() #全部变小写 | 小写 |
| .toUpperCase() #全部变大写 | 大写 |
| .split(delimiter, limit)#分隔,s1.splite(' '),后面还可以加参数s1.split(' '，2),返回切割后的元素个数 | 分割 |
布尔值boolean
#true或者false 注意:首字母小写 var b1 = false; console.log(typeof b1) #在js代码中'',0,NaN,null,undefined的布尔值都是false
空元素
#空元素打印布尔值为false #null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null; var c1 = null;//空对象. object console.log(c1)
未定义类型
#undefined打印的布尔值为false #undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined, var d1; //表示变量未定义:undefined console.log(typeof d1)
object类型
#JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象
#示例:
var a='123456';
typaOf(a)//String
var b= new String('123456')
typeOf('b')//object
#通过new实例化出来的对象都是object类型,虽然看起来都是字符串但是打印的数据类型是不同的,字符串,数字类型,数组等内置对象都是object类型
typeof类型查询
undefined - 如果变量是 Undefined 类型的 boolean - 如果变量是 Boolean 类型的 number - 如果变量是 Number 类型的 string - 如果变量是 String 类型的 object - 如果变量是一种引用类型或 Null 类型的，需要注意的是typeof null返回为object,因为特殊值null被认为是一个空的对象引用。
内置对象类型
数组Array
#数组的作用:
使用单独的变量名来存储一系列的值。类似于Python中的列表
#数组的创建
var colors = ['red','color','yellow']; //字面量方式创建（推荐）
var colors2 = new Array();//使用构造函数的方式创建 使用new关键词对构造函数进行创建对象
#数组的赋值,通过下标的方式一一赋值
var arr = [];
//通过下标进行一一赋值
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿'
#数组的常用方法
#concat方法：列表的拼接
var north = ['北京','山东','天津'];
var south = ['东莞','深圳','上海'];
var newCity = north.concat(south);
console.log(newCity)
#join方法：将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串
var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);//98|78|76|100|0
#toString方法：将数组转换成字符串
var score = [98,78,76,100,0];
//toString() 直接转换为字符串 每个元素之间使用逗号隔开
var str = score.toString();
console.log(str);//98,78,76,100,0
#slice(start,end)：切片(左闭右开)
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.slice(1,3);
console.log(newArr);//["李四", "王文"]
#pop方法：删除尾元素
var arr = ['张三','李四','王文','赵六'];
var item = arr.pop();
console.log(arr);//["张三", "李四"，"王文"]
console.log(item);//赵六
#push方法：向数组末尾添加一个元素或多个元素，并返回新的长度(返回值)
var arr = ['张三','李四','王文','赵六'];
var newLength= arr.push('小马哥');//可以添加多个，以逗号隔开
console.log(newLength);//5
console.log(arr);//["张三", "李四"，"王文"，"赵六"，"小马哥"]
#reverse()方法：翻转数组
var names = ['alex','xiaoma','tanhuang','angle'];
names.reverse();
console.log(names);
#sort()方法：排序:js的排序会把值变成字符串没在判断每个元素第一个值的ascii码顺序
var names = ['alex','xiaoma','tanhuang','abngel'];
names.sort();
console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]
//关于sort()需要注意：
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。如果想按照其他标准进行排序，就需要提供比较函数，也就是自己提供一个函数提供排序规则，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
示例：
function sortNumber(a,b){
return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)
#Array.isArray(被检测的值)：判断是否为数组
布尔类型值 = Array.isArray(被检测的值) ;
# shift()：删除并返回数组的第一个元素
var arr = [1,2,3]
var n = arr.shift()
console.log(arr)
console.log(n)
# unshift():向数组的开头添加一个或更多元素，并返回新的长度
var arr = [1,2,3]
var n = arr.unshift(0)
console.log(arr)
console.log(n)
var arr = [1,2,3]
var n = arr.unshift('alex','wahaha')
console.log(arr)
console.log(n)
#清空数组的几种方式
var array = [1,2,3,4,5,6];
array.splice(0); //方式1：删除数组中所有项目
array.length = 0; //方式2：length属性可以赋值，在其它语言中length是只读
array = []; //方式3：推荐
#forEach方法，设定每一个元素执行某函数
var arr = ['alex','wusir']
arr.forEach(fn)
function fn(item,index){
console.log(index,item)
}
#map方法，循环每一个元素完成某操作返回新的值组成新数组
var arr = ['alex','wusir']
var ret = arr.map(fn)
function fn(name,index) {
console.log(index,name)
return name+'sb'
}
console.log(ret)
#数组打印的数据类型为:object类型
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() #在原数组上改的 | 反转 |
| .join(seq)#a1.join('+')，seq是连接符 | 将数组元素连接成字符串 |
| .concat(val, ...) #连个数组合并,得到一个新数组，原数组不变 | 连接数组 |
| .sort() | 排序 |
| .forEach() #讲了函数再说 | 将数组的每个元素传递给回调函数 |
| .splice() #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素) | 删除元素，并向数组添加新元素。 |
| .map() #讲了函数再说 | 返回一个数组元素调用函数处理后的值的新数组 |
自定义对象
var str1 = '{"name": "chao", "age": 18}';//json格式的字符串
var obj1 = {"name": "alex", "age": 18};//自定义对象
var obj2 = {name:'chao',age:18};//自定义对象
//自定义对象可以使用字典的方式取值也可以使用对象点的方式取值,使用字典的方式取值的时候中括号内的键要写成字符串的格式,否则会报错
obj1.name//'alex'
obj1['name']//'alex'
obj2['name']//'chao'
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
遍历对象中的内容
var a = {"name": "Alex", "age": 18};
for (var i in a){
console.log(i, a[i]);
}
数据类型装换
字符串转数字
#使用parseInt()函数把字符串转成int
var a='123456';
parseInt(a)//123456
var b='123456lijie';
parseInt(b)//123456 parseInt会帮你自动过滤掉字符
var c='lijie';
parseInt(c)//NaN 全是字符的时候会返回一个NaN关键字,他是数字类型的一个关键字
typeof(NaN)//number 返回的也是一个数字类型
#使用parseFloat()函数可以把字符串转成一个小数
var d='1.233';
parseFloat(d)//1.233
数字类型转字符串
#数字类型转换成数字类型使用String的字符串关键字来转
var a=123456;
String(a)//'123456'
#还可以使用数字类型自带的方法toString转换成字符串
var b=123456;
b.toString();//'123456'
转换成Boolean值
#任何数据类型都可以转换成Boolean类型
var a='123456';
Boolean(a)//true
Boolean(NaN)//false
#布尔值在判断空的数组和空的对象的时候返回的也是true,这是一个坑
运算符
赋值运算符
#以 var x=12,y=7; 为例
比较运算符
#以 var x=5;为例 ==号也被称为弱等于,===称为强等于,==号会把比较的来个那个数据变成一个数据类型再比较,
算数运算符
#以 var a = 5,b=2;为例 //注意:坑 '+': 字符串可相加，数字也可相加，字符串和数字也可以相加。值得注意的是，如果字符串和数字相加会自动把结果转换成字符串 '-':字符串 - 数值 = 数值 #当数字类型执行++操作的时候,需要区分他的优先级 var a=1; a++-1//0,当++写在a的后面的时候就先执行逻辑,然后数字再执行++操作 ++a-1//1,当++写在a的前面的时候先执行++操作,然后再执行运算操作
逻辑运算符
# && 逻辑与 ||逻辑或 !逻辑非 true && true //true 相当于python的and true || false//false 相当于python的or !true // false 相当于python的not
if流程判断
简单的流程判断
var a=5;
#判断条件使用括号括起来,大括号是满足条件的执行结果,用分号表示结束,在js中没有明确的换行操作
if (a>4){console.log('你好世界');};
- **多条件判断操作**
```javascript
#在js中没有elif,elif使用else if 表示
var a=4;
if (a>4){
console.log('大于');
}else if(a<4) {
console.log('小于');
}else{
console.log('等于');
};
switch切换
var a=1;
#swith的括里面必须是一个值或者是一个值的算数才行,这个值和后面的写的case条件后面的值逐个比较,满足其中一个就执行case下面的console语句,然后break停止,如果没有break就继续执行下面的判断
switch(a++){
case 1:
console.log('等于1');
break;
case 2:
console.log('等于2');
break;
case 3:
console.log('等于3');
break;
#当上面的case都不满足的时候就执行default语句
default:
console.log('都不满足');
}
for循环
#打印0-9的数字,先申明一个变量,然后写上限制条件,每次i的值自增,不满足条件就会停止
//for (;;){console.log(i)},不写参数和条件的时候就会变成一个死循环
for(var i=0;i<10;i++){
console.log(i)
}
#循环数组
var a=[1,2,3,4,5,6,7,8];
//遍历数组的时候,这个i返回的是这个数组每个元素的索引,可以根据索引取值,
for (var i in a){
console.log(i,a[i])
}
#遍历自定义对象
var b={1:'hhe',2:'ejje',3:'jej'};
//遍历自定义对象的时候,这个i返回的是自定义对象的每个键,可以根据键来获取值
for (var i in b){
//在遍历的时候不能使用对象点的方式来获取值,i是一个字符串,只能使用中括号的形式来取值
console.log(i,b[i])
}
while循环
#方式一:
var a=0;
while(a<10){
console.log(a);
a++;
}
#循环加条件判断
while (a<10){
console.log(a);
if (a===5){
break;
}
a++;
}
三元运算
var a=5;b=3; #如果a>b的这个条件成立,就返回冒号前面的值,条件不成立就返回条件后面的值 var c=a>b ? a:b;
函数
#普通函数
//function相当于python中的def 后面写上括号,{}号里写函数执行的代码块
function f(){
console.log('你好')
}
f();//函数名加括号执行函数
#带参数的函数
function f1(a,b){
console.log(a+b)
}
f1(1,6);//执行函数
#带返回值的函数
function f2(a,b){
return a+b;
//返回值不能有多个,写多个会返回最后一个值
return a,b;
//想要返回多个值,可以使用数组的方式返回值
return [a,b]
}
#匿名函数
//匿名函数需要吧定义出来的这个函数赋给一个变量
var f3=function(){
console.log('123')
}
f3();//执行匿名函数
#自执行函数
//函数定义时直接在函数的后面加括号执行 ,就是自执行函数
(function(a,b){console.log(a+b)})(1,2)
函数的全局变量和局部变量
#局部变量: 在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，局部变量就会被删除 #全局变量: 在函数外声明的变量是*全局*变量，网页上的所有脚本和函数都能访问它。 #变量的生命周期: //全局变量在页面关闭之后,变量消失 //局部变量在函数运行结束之后消失
作用域
#首先会在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层
#示例1:
var a='lijie';
function f(){
var a='tiancai'
function f1(){
var a='tianghang';
console.log(a);
}
f1();
}
f();//打印tianhang
#示例二:
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret();//beijing
闭包
#闭包和python是一样的格式
var a='lijie';
function f(){
var a='taincai';
function f1(){
console.log(a);
}
return f1;
}
var ret=f();
ret();
面向对象
#面向对象，在ES5中没有类的概念，只有个构造函数，命名的首字母要大写，实例化的时候使用new关键字进行实例化
//使用构造方法来构造一个类
function Person(name){
this.name=name
}
//使用prototype原型链方法来给Person中添加一些方法,
Person.prototype.f1=function(){
console.log(this.name,'帅')
}
//通过new关键字来实例化一个对象
var p1 = new Person('lijie');
//所有的方法和属性都只能通过对象来调用.不能使用类名来调用
p1.name//lijie
p1.f1()//lijie 帅
Date对象
#方法一:
var d1 = new Date();//获取当前的时间
console.log(d1.toLocaleString());//当前时间的字符串显示
//打印结果:2019/9/16 下午7:48:08
#方式二:
var d = new Date('2019/9/16 19:46');//参数为日期字符串
console.log(d.toLocaleString());
//打印结果：2019/9/16 下午7:46:00
#方式三：
var d3 = new Date(5000); //参数为毫秒数(时间戳)
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
#常用方法：
var d = new Date();
//getDate() 获取日
//getDay () 获取星期 ，数字表示（0-6），周日数字是0
//getMonth () 获取月（0-11,0表示1月,依次类推）
//getFullYear () 获取完整年份
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜),时间戳
RegExp对象
#创建正则对象的方式一:
//创建RegExp对象方式（逗号后面不要加空格），假如匹配用户名是只能字母开头后面是字母加数字加下划线的5到11位的
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
// 匹配响应的字符串
var s1 = "bc123";
//RegExp对象的test方法，测试一个字符串是否符合对应的正则规则，返回值是true或false。
reg1.test(s1); // true
#简写方式
// /填写正则表达式/匹配模式（逗号后面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
reg2.test(s1); //true
#坑:
//使用reg2.text();的时候text方法里如果什么都不写,那么默认变成reg2.text('undefined'),如果undefined满足你的正则要求,返回的也是true,要注意
#string使用正则的一些方法:
var s='hello world!';
//match,查找符合正则条件内容,/o/g 后面的这个g的意思是匹配所有的,返回的是一个数组,没有null
s.match(/o/g);//结果:(2) ["o", "o"]
s.match(/o/);//结果:["o", index: 4, input: "Hello World!", groups: undefined]
//search查找字符串中符合正则表达式的内容位置，返回第一个配到的元素的索引位置加不加g效果相同,如果没有查找到匹配的元素,就返回-1;
s.search(/h/g);//结果:0;
//split按照正则表达式对字符串进行分割,得到一个新值,元数据类型不变
s.split(/l/);//结果: ["he", "", "o Wor", "d!"]
//replace按照正则表达式对字符串的元素进行替换,返回一个新值
s.replace(/l/,'j');//结果:"Hejlo World!"
s.replace(/l/g,'j');//结果:"Hejjo Worjd!"
#text注意事项:
//在正则表达式中,如果使用加上g之后,使用text匹配时,test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找
// 该属性值默认为0，所以第一次仍然是从字符串的开头查找。
// 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
// 因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
var reg3 = /a/g;
var s1 = 'alex is a xiaosb';
reg3.lastIndex -- 0
reg3.test(s1); -- true
reg3.lastIndex -- 1
reg3.test(s1); -- true
reg3.lastIndex -- 9
reg3.test(s1); -- true
reg3.lastIndex -- 13
reg3.test(s1); -- false
//把lastIndex置为零:
reg3.lastIndex=0;
math对象(类似内置函数)
Math.abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。//返回 e 的 x 次幂。e 代表自然对数的底数，其值近似为2.71828。 floor(x) 小数部分进行直接舍去。 log(x) 返回数的自然对数（底为e）//返回x 的自然对数,参数必须大于0 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。
BOM
BOM概念和window对象与子对象
BOM的概念
//BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
window对象(了解)
//Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。 #window.innerHeight 获取浏览器窗口的内部高度 #window.innerWidth - 浏览器窗口的内部宽度 #window.open(); 打开一个新的窗口 #window.close(); 关闭当前页面(前提是必须是用windiw.open打开的页面)
navigator对象(了解)
navigator.appName // Web浏览器全称 navigator.appVersion // Web浏览器厂商和版本的详细字符串 navigator.userAgent // 客户端绝大部分信息 navigator.platform // 浏览器运行所在的操作系统
screen对象
screen.availWidth - //可用的屏幕宽度 screen.availHeight - //可用的屏幕高度
history对象
#浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面 history.forward() // 前进一页，其实也是window的属性，window.history.forward() history.back() // 后退一页
location对象
#window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面 location.href //获取当前页面的url地址 location.href='http//:www.baidu.com';//跳转到指定页面(重定向) location.reload(); //刷新当前页面
弹出窗
//可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
#警告框 警告框经常用于确保用户可以得到某些信息。
alert('123456');//如果正确弹出,点击确定返回一个true
#确认框 确认框用于使用户可以验证或者接受某些信息。
comfirm('是否确定?');//点击确定返回一个值为true,点击取消返回一个值为false;
#提示框 提示框经常用于提示用户在进入页面前输入某个值
prompt('请输入:','默认值')//如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为默认值，就是第二个参数，如果没有默认值那么返回null
定时器(重要)
setTimeout()定时器
#设置一段时间之后执行某个内容,只执行一次
var t=setTimeout("JS语句",毫秒) //第一个参数js语句多数是写一个函数，不然一般的js语句到这里就直接执行了，先用函数封装一下，也可以用引号把js语句引起来,返回值t其实就是一个id值（浏览器给你自动分配的）,第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）
var r=setTimeout(function(){console.log('nihao');},2000);
var r=setTimeout('console.log("你好")',2000);
clearTimeout(清除定时器)
#clearTimeout清空定时器,与setTimeout对应
// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);
setInterval()定时器
//setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
var b = setInterval('console.log('你好')',1000);
clearInterval()清除定时器
#于setInterval对应
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
DOM
DOM概念DOM树
DOM概念
//DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
//DOM标准规定HTML文档中的每个成分都是一个节点(node)：
文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)
//JavaScript 可以通过DOM创建动态的 HTML：
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应（鼠标点击事件，鼠标移动事件等）
直接查找标签
#和css一样想要操作某个标签就要先找到这个便签
//document.getElementById()
根据ID来获取一个标签
//查找id为d1的标签赋值给divELe变量
var divEle =document.getElementByID('d1');//直接返回一个元素对象
//document.getElementByClassName()
根据ClassName来获取一个标签
//查找className为c1的标签赋值给divELe变量
var divEle=document.getElementByClassName('c1');//返回元素组成的数组
//document.getElementsByTagName()
根据标签名获取一个标签合集(数组)
//查找所有的P标签,返回一个数组,赋值给divEle变量
var divEle=document.getElementsByTagName('p');//返回元素组成的数组
间接查找标签
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
#示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="d1">
are you ok?
<span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
</div>
<div class="c1 c2">
div2
</div>
</body>
</html>
#想要操作便签先获取这个标签:
var divEle=document.getElementById('d1');//查找id为d1的字段
#查看父节点的标签元素
divEle.parentElement;//返回父级标签
#查看所有的子标签
divEle.children;
//结果:HTMLCollection(3) [span#s1, span#s2, span#s3, s1: span#s1, s2: span#s2, s3: span#s3] 返回的是一个数组
#查看第一个子标签的元素
divELe.firstElementChild;//返回第一个子标签
#查看最后一个子标签的元素
divEle.lastElementChild;//返回最后一个子标签
#下一个兄弟标签
divEle.nextElementSibling;//返回下一个同级标签
#上一个兄弟标签
divEle.previousElementsibling;//返回上一个同级标签,没有就返回null
标签操作
创建节点(创建标签)
var divEle=document.createElement('标签名');
//divEle就是一个新创建出来的标签对象
#示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" id="d1">
are you ok?
<span id="s1">span1</span>
<span id="s2">span2</span>
<span id="s3">span3</span>
</div>
<div class="c1 c2">
div2
</div>
</body>
</html>
添加标签
#追加一个子节点(作为最后一个节点)
//先获取要操作的标签
var divEle=document.getElementById('d1');
//创建一个要添加子标签
var aEle=document.createElement('a');
//往标签中添加一个子标签
divEle.appendChild(aEle);
#往某个节点前面增加一个节点
//先获取要操作的标签
var divEle=document.getElementById('d1');
//创建一个要添加子标签
var aEle=document.createElement('a');
//可以往子标签中添加属性和text文本
aEle.href='www.baidu.com';
aEle.innerText='百度';
//查找divEle标签中所有的子标签
var divEl = divEle.children;
//把aEle标签添加到divEle某个子标签的前面
divEle.insertBefore(a,divEl[0])
删除节点
#获得要删除的元素，通过父元素调用该方法删除
父级标签.removeChild(要删除的节点)
//获取父级标签
var divEle = document.getElementById('d1');
//获取要删除的标签
var divRe = document.getElementById('s2');
//使用removeChild方法删除标签
divEle.removeChild(divRe);
替换节点
#父节点.replaceChild(新标签,旧儿子)
//获取父级标签
var divEle = document.getElementById('d1');
//获取要被替换的标签
var divRe = document.getElementById('s2');
//新建一个要替换的标签
var div = document.createElement('a');
//替换标签
divEle.replaceChild(div,divRe);
标签(节点)的文本操作
//divEle.innerText
输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
//divEle.innerHTML
获取的是该标签内的所有内容，包括文本和标签
//获取要操作的标签
var divEle = document.getElementById("d1");
//获取所有的文本内容
divEle.innerText;
//获取所有的标签加上文本内容
divEle.innerHtml;
//设置文本内容
divEle.innerText='xxx';
divEle.innerHtml='<a href="">百度</a>';
标签的属性操作
//获取要操作的标签
var divEle = document.getElementById("d1");
//给标签添加一个属性
divEle.setAttribute('age','18');
//获取标签的属性
divEle.getAttribute('age');
//删除一个标签属性
divEle.removeAttribute('age');
//如果是标自带的属性是可以直接用赋值的方式设置值
<a href="http://www.baidu.com">百度</a>
//给a标签设置值
var a = document.getElementsByTagName('a');
a[0].href; 获取值
a[0].href = 'xxx'; 设置值
获取值的操作
//elementNode.value 适用于以下标签，用户输入或者选择类型的标签：
1.input
2.select
3.textarea
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);
类名操作
//获取要操作的标签
var divEle = document.getElementById("d1");
//获取对象的所有class类值
divEle.classList;
//删除指定的类值
divEle.classList.remove(cls);
//添加一个类值
divEle.classList.add(cls)
//判断有没有这个类值, 存在返回true，否则返回false
classList.contains(cls)
//存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个
classList.toggle(cls)
css设置
//1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如:
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
//2.2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件
//onclick
当用户点击某个对象时调用的事件句柄。
//ondblclick
当用户双击某个对象时调用的事件句柄。
//onfocus
元素获得焦点。 输入框
//onblur
元素失去焦点. 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
//onchange
域的内容被改变. 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
//onkeydown
某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
//onkeypress
某个键盘按键被按下并松开。
//onkeyup
某个键盘按键被松开。
//onload
一张页面或一幅图像完成加载。
//onmousedown
鼠标按钮被按下。
//onmousemove
鼠标被移动。
//onmouseout
鼠标从某元素移开。
//onmouseover
鼠标移到某元素之上。
//onselect
在文本框中的文本被选中时发生。
//onsubmit
确认按钮被点击，使用的对象是form。
//简单示例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cc1 {
width: 100px;
height: 100px;
background-color: red;
}
.cc2{
background-color: green;
}
</style>
</head>
<body>
<div class="cc1 xx xx2" id="d1">
</div>
<script>
//当用户点击ID为d1的标签的时候,触发事件
var divEle = document.getElementById('d1');
divEle.onclick = function () {
divEle.style.backgroundColor = 'purple';
}
</script>
</body>
</html>
绑定事件的两种方式
#方式1:
<script>
var divEle = document.getElementById('d1'); //1.找到标签
divEle.onclick = function () { //2.给标签绑定事件
divEle.style.backgroundColor = 'purple';
}
</script>
//下面的this表示当前点击的标签
var divEle = document.getElementById('d1');
divEle.onclick = function () {
this.style.backgroundColor = 'purple';
}
#方式二:
//标签属性写事件名称=某个函数();
<div class="cc1 xx xx2" id="d1" οnclick="f1();"></div>
<script>
//js里面定义这个函数
function f1() {
var divEle = document.getElementById('d1');
divEle.style.backgroundColor = 'purple';
}
</script>
//获取当前操作标签示例,this标签当前点击的标签
<div class="cc1 xx xx2" id="d1" οnclick="f1(this);"></div>
function f1(ths) {
ths.style.backgroundColor = 'purple';
}
动态显示时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="timer">
<button id="start">开始</button>
<button id="end">结束</button>
</body>
<script>
var a;
// 获取当前时间,并赋值到input标签中
function f1() {
var d = new Date();
var dStr = d.toLocaleString();
var inp = document.getElementById('timer');
inp.value = dStr;
}
var startBtn = document.getElementById('start');
startBtn.onclick = function () {
f1();
if (a === undefined){
a = setInterval(f1,1000); //开启定时器,重复执行f1函数 a=111
}
};
// 点击结束按钮,清除定时器
var endBtn = document.getElementById('end');
endBtn.onclick = function () {
clearInterval(a);
a = undefined;
}
</script>
select省级联动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>select联动</title>
</head>
<body>
<select id="province">
<option>请选择省:</option>
</select>
<select id="city">
<option>请选择市:</option>
</select>
<script>
var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
var provinceSelect = document.getElementById('province');
var citySelect = document.getElementById('city');
// 显示省份
for (var pro in data){
var proEle = document.createElement('option');
proEle.innerText = pro;
provinceSelect.appendChild(proEle)
}
provinceSelect.onchange = function () {
// console.log('xxxxx');
// console.log(this.selectedIndex);
citySelect.innerHTML = '<option>请选择市:</option>';
console.log(this.options[this.selectedIndex].innerText);
var citys = data[this.options[this.selectedIndex].innerText];
for (var i in citys){
// citys[i]
var cityEle = document.createElement('option');
cityEle.innerText = citys[i];
citySelect.appendChild(cityEle);
}
}
</script>
</body>
</html>
jQuery
jQuery引入
#方式一: //jQuety官网下载地址 'https://jquery.com/' //首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。 #方式二: 'https://www.bootcdn.cn/jquery/' //在这个网站复制jQyery的在线链接,然后在script标签中的src属性中写上这个接口 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> #注意:引入jQuery文件需要单独写一个script文件,然后在单独写一个script,用来写jQuery代码
jQuery对象和DOM对象
jquey方法找到的标签对象称为jquery对象 原生js找到的标签对象称之为DOM对象 dom对象只能调用dom对象的方法,jquery对象只能用jquery方法,不能互通
JQurey对象和DOM对象互相转换
#$('')是jQuery对象的固定写法
//jquery对象 转换成 dom对象 :
$('#d1')[索引] -- dom对象
通过中括号索引的方式在jQuery中获取的对象都是DOM对象
//dom对象转换为jquery对象 :
$(dom对象) -- jquery对象
查找标签
基础选择器
#$('')是jQuery的固定标签
//ID选择器:
$('id值')
//标签选择器:
$('标签名')
//Class选择器:
$('.CLassName')
//所有元素的选择器:
$('*')
//配合使用的选择器:
$("div.c1") #找到有c1 class类的标签
//组合选择器:
$('#id,.className,tagName')//tagName标签名
层级选择器
#x和y可以是任意选择器,和css的差不多
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
基本选择器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
示例写法:
$('li:has(span)');
$("div:has(h1)")// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来
$("div:has(.c1)")// 找到所有后代中有c1样式类（类属性class='c1'）的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
//和前面使用冒号的一样:first等，只不过冒号的那个是写在选择器里面的，而下面的这几个是方法
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
绑定事件的简单方法
// 绑定事件的方法
$('#btn').click(function () {
$('.mode')[0].classList.remove('hide');
$('.shadow')[0].classList.remove('hide');
//jquery写法:
$('.mode,.shadow').removeClass('hide');
})
属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
//多用于找form表单里面出现的input标签，当然通过属性选择器找肯定也是没问题的，这样就是写着简单一些
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
//示例:
$(":checkbox") // 找到所有的checkbox
$(':text') //找到type为text的input标签
表单对象属性
:enabled //找到所有可用的标签
:disabled //知道到所有不可使用的标签
:checked //找到所有被选中的input标签
:selected // 找到所有被选中的option
#示例:
<div>
用户名: <input type="text">
</div>
<div>
密码: <input type="password" disabled>
</div>
<div>
sex:
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex">不详
</div>
<select name="" id="">
<option value="1">怼姐</option>
<option value="2">珊姐</option>
<option value="3">华丽</option>
<option value="4">亚索</option>
</select>
//操作:
//找到可以用的标签
$(':enabled')
//找select标签被选中的option标签
$(':selected')
#注意使用checked的时候会把所有input和select中被选中的标签都筛选出来,所以使用的时候要在冒号前面申明input标签
链式表达式
<ul>
<li>陈硕</li>
<li>子文</li>
<li class="c1">李业</li>
<li>吕卫贺</li>
<li>峡谷先锋珊姐</li>
<li class="c2">怼姐</li>
<li>骚强</li>
</ul>
#示例:
$('li:first').next().css('color','green').next().css('color','red');
//链式表达式就是在一句代码中可以同时对多个标签进行设置
筛选器方法
下一个元素(从上往下找)
$("#id").next() //找到下一个标签
$("#id").nextAll() //找到下面所有的标签(包括后代)
$("#id").nextUntil("#i2") //直到找到id为i2的标签就结束查找，不包含它
#示例代码:
<ul>
<li>陈硕</li>
<li>子文</li>
<li class="c1">李业</li>
<li>吕卫贺</li>
<li>峡谷先锋珊姐</li>
<li class="c2">怼姐</li>
<li>骚强</li>
</ul>
#操作示例:
$('li:first').next() //找到第一个标签的下一个标签
$(".c1").nextAll() //找到id为c1的标签后面所有的标签
上一个元素(从下往上找)
$("#id").prev() //找到上一个标签
$("#id").prevAll() //找到上面所有的标签
$("#id").prevUntil("#i2") //直到找到id为i2的标签就结束查找，不包含它
父元素
//$("#id").parent()
查找当前元素的父辈元素
//$("#id").parents()
查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
//$("#id").parentsUntil('body')
查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
儿子和兄弟元素
//$("#id").children();
找到所有的子标签(后代)
//$("#id").siblings();
找到所有的同级标签，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选
查找find
//find 找的是后代
$("div").find("p") -- 等价于$("div p")
这个函数是找出正在处理的元素的后代元素的好方法。
筛选
//filter()
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
//示例:
$("div").filter(".c1") --等价于 $("div.c1")
//从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签
操作标签
样式操作
//addClass(); 添加指定的CSS类名。 //removeClass(); 移除指定的CSS类名。 //hasClass(); 判断样式存不存在 //toggleClass(); 切换CSS类名，如果有就移除，如果没有就添加。
CSS样式操作
//单个方式:
$('div').css('background-color','green');
//多个方式:
$('div').css({'background-color':'yellow','width':'400px'});
位置操作
//offset()
获取匹配元素在当前窗口的相对偏移或设置元素位置
//position()
获取匹配元素相对父元素的偏移，不能设置位置
//position和offset的区别:
offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position()的差别在于： .position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。
//示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 100px;
width: 100px;
display: inline-block;
}
.c2{
background-color: green;
height: 100px;
width: 100px;
display: inline-block;
}
</style>
</head>
<body>
<div class="cc">
<div class="c1"></div><div class="c2"></div>
</div>
<script src="jquey.js"></script>
</body>
</html>
#======================================
//$(window).scrollTop()
滚轮向下移动的距离
//$(window).scrollLeft()
滚轮向右移动的距离
//示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1,.c3{
background-color: red;
height: 500px;
width: 200px;
}
.c2{
background-color: green;
height: 500px;
width: 200px;
}
#back_top{
height: 40px;
width: 80px;
position: fixed;
right: 40px;
bottom: 40px;
background-color: black;
text-align: center;
line-height: 40px;
}
#back_top a{
color:white;
text-decoration: none;
}
.hide{
display: none;
}
</style>
</head>
<body>
<a name="xxx">这是顶部位置</a>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<span id="back_top" class="hide">
<a href="#xxx">回到顶部</a>
</span>
</body>
<script src="jquery.js"></script>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() >= 200){
$('#back_top').removeClass('hide');
}else {
$('#back_top').addClass('hide');
}
})
</script>
</html>
尺寸操作
//height() 盒子模型content的大小，就是我们设置的标签的高度 //width() 盒子模型content的大小，就是我们设置的标签的宽度 //innerHeight() 内容content高度 + 两个padding的高度 //innerWidth() 内容content高度 + 两个padding的宽度 //outerHeight() 内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度 //outerWidth() 内容高度 + 两个padding的宽度 + 两个border的宽度
文本操作
//html()
取得第一个匹配元素的html内容，包含标签内容
//html(val)
设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
//text()
取得所有匹配元素的内容，只有文本内容，没有标签
//text(val)
设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
值操作
//文本输入框获取值的方式
$('input[type="text"]').val()
//input单选框取值方式
$('[type="radio"]:checked').val();
当没有设置value属性的值的时候,获取单选框的值返回的就是一个on,表示没有设置value值
//input多选框取值方式
多选框可能有多个值的情况,通过val()方法无法直接获取多个值,只能取一个值,想要取多个值,可以使用循环的方式取值
var a=$('[type="checkbox"]:checked');获取多选框中被选中的标签
for (var i=0;i<a.length;i++){
console.log(a.eq(i).val())
}
//select单选下拉框的取值方式
$('#s1').val();
//select多选下拉框的取值方式
$('#s1').val(); 和单选框的取值方式一样,多个值返回的是一个数组
#********************************************
//文本输入框设置值
$('[type="text"]').val('你好');
//input单选框设置值的方式
$(':radio').val(['1']); 一定要加中括号
找到所有的radio,然后通过val设置值,达到一个选中的效果.给单选或者多选框设置值的时候,只要val方法中的值和标签的value属性对应的值相同时,那么这个标签就会被选中.
如果不加中括号,这样设置值,,意思是将所有的input,type=radio的标签的value属性的值设置为1.
//input多选框设置值的方式
$(':checkbox').val(['1','2'])
//select单选下拉框设置值
$('#c1').val('1')或者$('#c1').val(['1'])
//select多选下拉框设置值
$('#c1').val(['1','2']);
属性操作
//attr(attrName)
返回第一个匹配元素的属性值
$('#d1').attr('age');
//attr(attrName, attrValue)
为所有匹配元素设置一个属性值
$('#d1').attr('age','18');
//attr({k1: v1, k2:v2})
为所有匹配元素设置多个属性值
$('#d1').attr({'age':'18','age1':'18'});
//removeAttr()
从每一个匹配的元素中删除一个属性
$('#d1').removeAttr('age');
#****************************************************
//prop查看属性值
$('#d1').prop('checked');返回的是布尔值,选中就返回true,没有选中就返回false
//prop设置值
$('#d1').prop('checked':true);默认选中所有
$('#d2').prop('checked':false);默认取消全选
#****************************************************
//prop和attr的区别
1:对于标签上有的能看到的属性和自定义属性都用attr
2:对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
//具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
//checked示例:
//attr():
查看值,checked 选中--'checked' 没选中--undefined
$('#nv').attr({'checked':'checked'});
设置值,attr无法完成取消选中
$('#nv').attr({'checked':undefined});
//prop():
查看值,checked 选中--true 没选中--false
$(':checkbox').prop('checked');
设置值:
$(':checkbox').prop('checked',true);
$(':checkbox').prop('checked',false);
文档处理
//添加到指定元素内部的后面
$(A).append(B) //把B元素添加到A元素内部的最后
$(A).appendTo(B)// 把A元素添加到B元素内部的最后
//append添加示例:
方式一:
var a=document.createElement('a'); 创建标签
$('a').text('百度'); 添加文本
$('a').href('www.baidu.com'); 添加href属性
$('#d1').append(a); 把a标签添加到id为d1的标签的内部的最后
方式二:
$('#d1').append('<a href="www.baidu.com">百度</a>')可以直接添加标签字符串形式,append能都识别标签
//appendTo添加示例:
var a=document.createElement('a'); 创建标签
$('a').appendTo('#c1');在前面的括号里只能是对象所以用第一种方式
#***********************************************************
//添加到指定元素内部的前面(和上面的使用方式一样)
$(A).prepend(B)// 把B元素添加到A元素内部的前面
$(A).prependTo(B)// 把A元素添加到B元素内部的前面
//添加到指定元素外部的后面(就是在下面添加一个兄弟标签)(使用方式同上)
$(A).after(B)// 把B元素添加到A元素的后面
$(A).insertAfter(B)// 把A元添加到B元素后面
//添加到指定元素外部的前面(就是在上面一个兄弟标签)(使用方式同上)
$(A).before(B)// 把B元素添加到A元素的前面
$(A).insertBefore(B)// 把A素添加到B素的前面
//移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
$('#c1').remove(); 删除整个标签
empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在
$('#c1').empty(); 删除标签的所有子标签和所有的文本内容,但是会保留标签本身
//替换标签
replaceWith()
示例:
$('#d1').replaceWith(a);//用a标签替换前面的标签
replaceAll()
$(a).replaceAll('#d1');//用a标签替换后面的标签
克隆
//clone()// 参数，看下面的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="btn">屠龙宝刀,点击就送!</button>
</body>
<script src="jquery.js"></script>
<script>
$('.btn').click(function () {
// var btnEle = $(this).clone(); // 不带参数的克隆不能克隆绑定的事件
var btnEle = $(this).clone(true); // 参数写个true,就能复制事件
$(this).after(btnEle);
})
</script>
</html>
事件
绑定事件的两种方式
//方式一:
$("#d1").click(function () {
$(this).css('background-color','green');
})
//方式二:
通过on的方式来绑定事件,第一个参数放事件名称字符串,第二个参数是函数,就是事件执行的内容
$('#d1').on('click',function () {
$(this).css('background-color','green');
})
常用的事件
click(function(){...}) //鼠标点击触发的事件
hover(function(){...}) //hover事件 鼠标进进出出的事件
blur(function(){...}) // 失去光标触发的事件
focus(function(){...}) // 获取光标触发的事件
change(function(){...}) // 域内容发生变化触发的事件,一般用于select标签
keyup(function(){...}) //键盘抬起时,获取按键的事件
keydown(function(){...})// 键盘按下时,获取按键的事件
on('input',function(){...})//输入内容实时触发的事件,input事件只能on绑定
mouseenter(function() {...})// 鼠标进入触发的事件
mouseout(function() {...})// 鼠标离开触发的事件
mouseover(function (){...})//鼠标悬浮时触发的事件
mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
//示例:
// 获取光标触发的事件
$('#username').focus(function () {
$(this).css('background-color','green');
});
// 失去光标触发的事件
$('#username').blur(function () {
$(this).css('background-color','white');
});
// 域内容发生变化触发的事件,一般用于select标签
$('#s1').change(function () {
// $('#d1').css('background-color','black');
console.log('xxxxx')
});
$('#xxx').change(function () {
console.log($(this).val());
})
//输入内容实时触发的事件,input事件只能on绑定
$('#xxx').on('input',function () {
console.log($(this).val());
});
//绑定多个事件 事件名称空格间隔
$('#xxx').on('input blur',function () {
console.log($(this).val());
})
//鼠标进入触发的事件
$('#d1').mouseenter(function () {
$(this).css('background-color','green');
});
// 鼠标离开触发的事件
$('#d1').mouseout(function () {
$(this).css('background-color','red');
});
//hover事件 鼠标进进出出的事件
$('#d1').hover(
// 鼠标进入
function () {
$(this).css('background-color','green');
},
// 鼠标离开
function () {
$(this).css('background-color','red');
}
);
// 鼠标进入触发的事件
$('#d1').mouseenter(function () {
console.log('xxx');
});
// 鼠标悬浮时触发的的事件
$('#d2').mouseover(function () {
console.log('ooo');
});
// 键盘按下
//e代表的是事件对象
$(window).keydown(function (e) {
//keyCode 时当前按下键盘符的编码
console.log(e.keyCode);
});
// 键盘抬起
$(window).keyup(function (e) {
console.log(e.keyCode);
});
移除事件(不常用)
off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
$("li").off("click")；就可以了
1.events： 事件
2.selector: 选择器（可选的）
3.function: 事件处理函数
事件冒泡
// 事件冒泡,子标签和父标签(祖先标签)绑定了相同的事件,比如点击事件,那么当你点击子标签时,会一层一层的往上触发父级或者祖父级等等的事件
$('.c1').click(function () {
alert('父级标签!!!');
});
$('.c2').click(function (e) {
alert('子标签~~~');
// 阻止事件冒泡(阻止事件发生)
return false; //方式1
e.stopPropagation() // 方式2
})
//冒泡的意思就是因为html可以嵌套，如果你给儿子标签绑定了点事件或者没有绑定点击事件，父级标签绑定了点击事件，那么你一点击子标签，不管子标签有没有绑定事件，都会触发父级标签的点击事件，如果有，会先触发子标签的点击事件，然后触发父级标签的点击事件，不管子标签有没有点击事件，都会一级一级的还往上找点击事件
事件委托
<div id="d1">
<button class="btn">屠龙宝刀,点击就送!</button>.
</div>
// 事件委托
标签属性为.btn的子标签吧点击事件委托给了id为d1的父级(祖父级)标签,
$('#d1').on('click','.btn',function () {
// $(this)是你点击的儿子标签
var a= $(this).clone();
$('#d1').append(a);
});
//事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。
页面载入
//方式一:
window.onload:
原生js的window.onload事件:// onload 等待页面所有内容加载完成之后自动触发的事件
window.onload = function(){
$('.c1').click(function () {
$(this).addClass('c2');
});
};
//方式二:
jquery页面载入:简写方式
$(function () {
$('.c1').click(function () {
$(this).addClass('c2');
});
})
非简写方式
$(document).ready(function(){
// 在这里写你的JS代码...
})
//jQuuery和window.onload的区别
1:window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
2:jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
jQuery的each
//循环数组:
var a = [11,22,33];
$.each(a,function(k,v){
console.log(k,v);
})
//循环标签对象
$('li').each(function(k,v){
console.log(k,$(v).text());
})
//在循环标签对象的时候可以使用return false提前结束each循环,类似于break
//在循环过程中直接使用return 不写false,就是跳出本次循环的意思,类似于continue
简单动画效果
// 基本
//show([s,[e],[fn]]) $('.c1').show()
show(5000),就是5秒之后显示出来这个标签，并且有一个动画效果
//hide([s,[e],[fn]]) $('.c1').hide()
hide(5000),就是5秒之后隐藏这个标签，并且有一个动画效果，
//toggle([s],[e],[fn])
这几个toggle的意思就是你原来是什么效果，我就反着来
// 滑动（拉窗帘一样）
slideDown([s],[e],[fn])
使用的时候别忘了给标签设置一个高度和宽度，其实就是控制你的标签高度，如果你写 $('#di').slideUp(5000)；意思就是5秒内把你的高度变为0
//还有如果你直接操作的是img标签和操作img标签的父级标签，两个的效果是不同的
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出（控制透明度）
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]]) o参数是透明度，0-1的区间，意思是淡入或者淡出到多大的透明度
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
//点赞加1示例
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0 //1秒之后透明度变为0，注意写法，animate({属性：值},毫秒数)
}, 1000)
})
</script>
data方法
//.data(key, value): 设置值
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
//.data(key): 取值，没有的话返回undefined
//.removeData(key): 删除值
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
扩展插件extend
//jQuery.extend(object)
//jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
<script>
jQuery.extend({
min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function
max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>
//jQuery.fn.extend(object)
//一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。
<script>
jQuery.fn.extend({ //给任意的jQuery标签对象添加一个方法
check:function(){
return this.each(function(){this.checked =true;});
},
uncheck:function(){
return this.each(function(){this.checked =false;});
}
});
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>
BootStrap
简介
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。 它支持响应式布局，并且在V3版本之后坚持移动设备优先。 就是复制黏贴一把梭，html\css\js代码的封装组合 #************************** 在Bootstrap出现之前： 命名：重复、复杂、无意义（想个名字费劲） 样式：重复、冗余、不规范、不和谐 页面：错乱、不规范、不和谐 在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。 下载地址: https://www.bootcss.com/
目录结构
bootstrap-3.3.7-dist/
├── css // CSS文件
│ ├── bootstrap-theme.css // Bootstrap主题样式文件,官方提供的，一般不用
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css // 主题相关样式压缩文件
│ ├── bootstrap-theme.min.css.map
│ ├── bootstrap.css //引用的时候，引用这一个或者下面那个bootstrap.min.css文件就可以了
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css // 核心CSS样式压缩文件，其他的文件都是在这个核心文件的基础上加了一些其他的样式
│ └── bootstrap.min.css.map
├── fonts // 字体文件
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js // JS文件
├── bootstrap.js
├── bootstrap.min.js // 核心JS压缩文件
└── npm.js
#由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。
BookStrap引入
//在head标签中引入CSS样式文件
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
table标签导入
<table class="table table-bordered table-striped table-hover"> class='table' //导入CSS样式, table-bordered //加上表格 table-striped //给表格加上斑马线效果 table-hover //鼠标悬浮效果
Bookstrap基础模版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">//屏幕适配
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
布局容器
//.container 类用于固定宽度并支持响应式布局的容器 <div class="container">//标签位于屏幕正中间 ... </div> //.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 <div class="container-fluid"> ... </div>
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。//自动捕获屏幕宽度,栅格系统可以进行嵌套
class = 'row'; //导入栅格系统,这一行会分成12列
class = 'col-md-6'//说明占的栅格的个数
如果这一行的栅格系统超过12列,那么就换行
md指的是中性屏幕
sm指的是小型屏幕,格式可以一起写,
针对不同屏幕进行适配
列偏移
//使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
标题排版
//HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
//在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
//<small>标签的文字会变小