【前端】HTML+CSS+JS+JQuery

发表于 更新于 分类于 ， Waline：
涵盖了前端开发中遇到的基本问题及解决方式

HTML

​ 超文本标记性语言(hyper text markup language);

简介

网页:

​ 有图片,文本,超链接,视频,声音等组成,网页显示在浏览器中;

常见的浏览器:

​ ie google firefox safari

内核:

​ 用来对我们用代码写的界面进行渲染和排版

​ 常见的浏览器内核:

​ Trident

HTML语言:

​ 超文本标记性语言(hyper text markup language);全部是由标签组成

​ 标签:由<标签名>,但是能被浏览器所识别的标签名

HTML网页的基本骨架:

1
2
3
4
<html>
	<head> </head>
	<body> </body>
</html>

Html标签:

​ 是一个网页的根标签,所有的网页内容都应该在根标签里面

​ 网页分成head和body

​ head里面包含一些基本的配置信息和网页题目

​ body里面主要是网页显示的内容

标签与标签之间的关系:

父子关系: 包含与被包含的关系

兄弟关系: 两个标签为平级标签

标签的分类:

单标签: <标签名 />

双标签: <标签名> 内容 </标签名>

开发工具

​ Subline:文艺青年用的
​ Webstrom:2b青年用
​ 记事本:高手和傻逼用的
​ Hbuilder:普通青年

常见标签

  • 注释标签: 
    <! --这是一个注释标签 -- >
字体标签: 
    <font color="" size="" face"字号"> 文本标签 </font>
字体加粗、斜体、下划线: 
    <b>这是一个字体加粗的标签</b>   //bold 粗体
    <i>这是一个字体斜体的标签</i>	//italic 斜体
    <u>这是带下划线字体的标签</u>	//underlined 下划线
换行标签: 
    <br />  //break 换行
标题标签: 
    <h1>这是一级大标题</h1>  //header 1 to header 6
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
图片标签:
    <img src="地址" width="500px" title="鼠标放上显示内容" 			alt="加载失败的时候显示的内容"/>  //image 图片
段落标签:
    <p>段落标签,单独占一行</p>  //paragraph段落
空格标签:
    &nbsp    //non-breaking space 不换行空格
分割线:
    <hr/>	//horizontal rule 水平尺
超链接标签:
    <a href="https://www.baidu.com" title="鼠标悬停提示">百度一下</a>		//anchor 锚
    css属性:text-decoration: none;//可以取消默认自带下划线
    跳转新页面属性:
        target="_blank"
    锚点:
        <a href = "#bottom" id="top">跳转底部</a>
        <a href = "#top" id="bottom">跳转顶部</a>
    注:
        1.在head头部加上:<base target="_blank">,设置所有a标签在其他页面打开.
        2.单独标签加:<target = "_self">,设置单独当前打开
        3.a标签跳转及带值<a href="MainServlet?type=餐饮">餐饮</a>  MS为注解,值不要引号
列表:
    有序列表
        <ol> //ordered list 排序列表
            <li><a href="http://www.baidu.com"></a>一列</li>
            <li>第二列</li>   //list item 列表项目
        </ol>
    无序列表
        <ul> //unordered list 不排序列表
            <li><a href="http://www.baidu.com"></a>一列</li>
            <li>第二列</li>
        </ul>
    注:
       li可以设置属性:list-style: none ;/*取消列表的默认样式(点)*/
************************************************************
以下为HOW2J网站补充:
预格式:
    说明:有时候，需要在网页上显示代码，比如java代码 
    格式:<pre>代码</pre>
删除效果:
    说明:实现文本加上删除横线
    格式:<del>文本</del> 推荐这种,支持浏览器较多
        <s>文本</s>
下划线:
    说明:通常来讲，不要给普通文本加下划线，因为用户会误以为是一个超链接
    格式:<ins>使用ins标签实现的下划线效果</ins>
        <u>使用u标签实现的下划线效果，但是不建议使用</u>
 内联框架 
    说明:iframe相当于浏览器里面有个小浏览器，在这个小浏览器中，打				开另一个网页 
    格式:<iframe src="http://how2j.cn/" width="600px" 				height="400px">
        </iframe>
注::table>tr*3>td*4	可以一次性建立 同理可得

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24

    ### 表格标签

    ```html
    table
    	tr:表示一行   //table row 表格中的一行
    	td:表示一个单元格	//table data cell 表格中的一个单元格
    属性:
    	border:边框线
    	width:宽度(按百分比,相对于父元素)
    	height:高度(按百分比,相对于父元素)
    	align:左右居中控制
    	cellspacing:单元格之间的间距
    	cellpadding:内容与单元格边框距离
    	bgcolor:背景色
    	background:背景图片
    td属性
    	valign:单元格中内容的垂直排列方式
    	height:高度
    	align:左右居中
    	bgcolor:背景色
    	background:背景图片
    	colsan:跨列
    	rowspan:跨行

表单

作用:

​ 用来收集用户信息

组成:

​ 提示信息、控件、表单域;

​ 提示信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<br />
用户名:<input type="text" placeholder=" 请输入用户名"/>
<br />
密码: <input type=" password" placeholder=" 请输入密码" />
<br />
单选框:
	 <input type=" radio" name="sex" />男
	 <input type=" radio" name="sex" />女
	 属性:checked 可以设置默认选择 及 不能选择哪个
多选框:
	爱好:<input type="checkbox" name = "hobby"/>吃饭
		<input type="checkbox" name = "hobby" checked/>睡觉
		<input type="checkbox" name = "hobby"/>打豆豆
下拉框:
	<select>
		<option>重庆</opetion>
		<option>荷兰</opetion>
	</select>
下拉框(html5):
		<input type="text" list="select" />
		<datalist id="select">
			<option>御姐</option>
			<option>萝莉</option>
			<option>长得帅的</option>
			<option>长的漂亮的</option>
		</datalist>
		<form action="love" method="get" >
			<input type="text" list="select" 							name="user_choose"/>
			<datalist id="select">
				<option>篮球</option>
				<option>乒乓</option>
				<option>你好</option>
				<option>大家好</option>
			</datalist>
			<input type="submit" />
		</form>
按钮:
	1.<button>点击一下</button>
	2.<input type="button" value="点击一下" />
提交:
	<input type="submit" value="点击提交" />
获取输入框焦点:
	获取当前焦点:
        <label>
            请输入用户名:<input type="text" placeholder="请输入用户名" />
        </label>
	获取任意id焦点:
        <label for="username">用户名</label>
        <input type="text" placeholder="请输入用户名" id="username" />
表单域:
	用来确定向后台提交数据的一个范围
	action:提交的地址,,url(域名),请求
	method:提交请求的方式,常用的方式有两种 get	post
	提交的数据采用键值对的方式:
		键:是表单控件里面的name属性
		值:是表单空间里面的value值
	get:
		请求的数据直接显示在地址栏
	post:
		请求的数据不会出现在地址栏,数据相对安全
	用户需要输入的value值就是用户输入的,对于单选,多选,value值必须在标签里给出
	<form action="login" method="get">
		用户名:<input type="text" placeholder="输入用户名" name="a"/><br />
		密码:<input type="text" placeholder="输入密码" name="p"/><br />
		<input type="submit" />
	</form>
容器类标签:
	<div>这是一个容器,任何东西都可以装,主要使用来定位,页面的布局</div>
	<span>字体格式化标签</div>
	<video src="视频地址" autoplay controls width="400px">       </video>	
************************************************************
以下是HOW2J网站补充知识:
文本域
	说明:与文本框不同的是，文本域可以有多行，并且可以有滚动条
	格式:
		<textarea>abc
                def
		</textarea>
	注:使用属性cols和rows后
		<textarea cols="30" rows="8">
        	123456789012345678901234567890
        	1234567890
        	1234567890
		</textarea>
重置按钮
	说明:可以把输入框的改动复原 
	格式:
        <form action="/study/login.jsp">
        账号：<input type="text" name="name"> <br/>
        密码：<input type="password" name="password" > <br/>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        </form>
	备注:<input type="image" > 即使用图像作为按钮进行form的提交 
按钮标签:
	说明:与<input type="button">不同的是，<button>标签功能更为丰富
			按钮标签里的内容可以是文字也可以是图像,如果button的				type=“submit” ，那么它就具备提交form的功能 
    格式:
        1.button里是图片 
        	<button>
        		<img src="http://how2j.cn/example.gif"/>				</button>
        2. 提交数据 
        	设置type="submit"
            IE下button的type的默认值为button不具备提交功能
            其他浏览器type的默认值是submit
            如下所示:
            <form action="/study/login.jsp">
			账号：<input type="text" name="name"> <br/>
			密码：<input type="password" name="password" > 			<br/>
				 <button type="submit">登陆</button>
  			</form>

元素的分类

块级元素:

​ 1.元素单独占一整行

​ 2.可以设置宽高

1
2
3
常见:
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，
HTML5新增的header、section、aside、footer

行内元素

​ 1.不能设置宽高

​ 2.可以与相邻元素并列在一排

1
2
常见:
span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

注意：设置宽度width无效，设置高度无效，可以通过设置line-height来设 置，设置margin只有左右有效，上下无效，设置padding只有左右 有效，上下无效

行内块元素:

​ 1.可以设置宽高

​ 2.可以与相邻元素并列在一排

​ 常见: a img input video

1
2
**块级**： div | form | table | p | h1-h6 | dl | ul | ol 
**内联**： span | a | label | input | select | textarea | img

三种元素可以互相转换

​ 1.display :block 块级元素

​ 2.display :inline 行内元素

​ 3.display :inline-block 行内块元素

​ 4.display :none 不显示元素,且不会占用位置

CSS

简介

html想要达到我们想要的效果,html并不能满足，为了进行一个统一的规范化的去设置我们想要的样式,CSS诞生了

CSS:cascading style sheet 级联样式表

使用

​ 基本使用方式:

​ 选择器{ 样式名:值; 样式名1:值; }
​ 例:

1
2
3
4
5
6
7
8
/*写在头部*/
<style>
	p{
		color:red;
		/*改变字体大小,常用偶数值*/
		font-size:160px;
          }
</style>

选择器分类

标签选择器

​ 使用方法 : 标签名{样式名:样式值;}

id选择器

​ 使用方法 : #id名{样式名:样式值;}

​ 注意 : 一个元素的id应该是唯一的,另一个元素不应该重复使用

class选择器

​ 使用方法 : .类名{样式名:样式值;} 在页面可以使用多次

​ 注意:可以在标签选择多个类,如下所示:

1
2
3
4
<div class="类名1 类名2 ...">
    
</div>

伪类选择器

​ 作用:规定链接的颜色

​ 使用:

1
2
3
4
5
6
7
8
9
a:link{color:#FF0000} 		/*未访问的链接*/   链接独有
a:visited{color:#00FF00} /*已访问的链接*/ 	链接独有
a:hover{color:#FF00FF}  /*当鼠标悬停在链接上时*/
a:active{color:#0000FF} /*按住鼠标左键不放时*/
注意:
	1.a:hover必须位于 a:link 和 a:visited 之后
	2.a:active必须位于 a:hover
	3.伪类可与css类配合使用

结构伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*li的父亲的第一个儿子*/    起始数为1
   	li:first-child{
       	color: red;
       }
	/*li的父亲的最后一个儿子*/	
       li:last-child{
       	color: blue;
       }
/*li的父亲的第二个个儿子*/
       li:nth-child(2){
       	color: yellow;
       }
/*选择奇数、偶数标签*/(参数为奇数偶数的单词也行odd even)
	li:nth-child(2n+1) 或 li:nth-child(2n)

组合选择器

后代选择器

​ 作用:修改标签中的标签

​ 语法: 标签1 标签2{

​ css属性:值;

​ }

​ 注意:能够找到标签下包括儿子和孙子等的所有代标签,不推荐使用.

组合选择器

​ 作用:选择不同的元素、类、标签

​ 语法: 元素,类,标签{ /注意:可以自由选择/

​ css属性:值;

​ }

相邻元素选择器

1.找标签的相邻标签

​ 作用:只找与标签相邻(只找后面一个)的标签

​ 语法:标签1 + 标签2{

​ /设置的css属性,只对标签2有效/

​ }

2.子元素选择器

​ 作用:找到标签下的亲儿子标签

​ 语法:标签1>标签2{

​ /设置的属性,只对父标签下的所有标签2生效/

​ }

1
2
3
4
.nav>ul>li>a{
	color: green;
}

通配符选择器

*{

​ /* * 号代表所有标签,可以给所有的设置css属性*/

}

属性选择器

作用:选择拥有某一个属性的标签
使用方法: 标签名[标签名中的属性]{
/*css属性/
}

三种写法

内联样式:写在html页面的style标签里面

行内样式:写在标签的style属性里面

外联样式:css样式单独写在一个.css结尾的文件里面,通过link标签引入

三大特性

继承特性

​ 说明:一般可以继承的是 font-xxx line-xxx 格式的属性可以继承

​ 注意:默认已经有的,不能继承父标签的,例如a标签已有默认蓝色属性设置

层叠特性

​ 说明:当多个不同的样式(属性),作用在同一个元素上的时候,那么这 些样式都会显示出来

优先级
说明:权重分为四个等级

​ 继承的权重为0

​ 标签提供的权重为: 0,0,0,1

​ 类选择器,伪类选择器: 0,0,1,0

​ id选择器: 0,1,0,0

​ 行内样式: 1,0,0,0

​ !important: 权重无限大

​ 注:同权重,就近原则

背景图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.nav{
	background-image:url(地址);
	background-size:100% 100%;
	background-position:500px 100px;
	border:1px	red	solid;/*设置边框*/
	background-repeat:no-repeat;
	width:1300px;
	height:500px;
}
**********************************************
How2J网站补充
背景颜色 : background-color 
图片做背景 : background-image:url(imagepath); 
本地测试 : url(background.jpg) 
背景重复 : background-repeat 
背景平铺 : background-size: 
                contain(把图像图像扩展至最大尺寸，以使其宽度和高度完							全适应内容区域。拉伸实现,会有失真) 
				cover(把背景图像扩展至足够大，以使背景图像完全覆盖背						   景区域。背景图像的某些部分也许无法显示在							  背景定位区域中。)

背景颜色

颜色的写法

​ 三原色:红r 绿g 蓝b

​ 在计算机里面,每一个颜色的范围:0-255 00000000 - 11111111

​ 1.直接写颜色: red blue…;

​ 2.或者:rgb(241,66,44)

​ 3.#FFFF00

​ 4.rgba(255,255,204,0.5)

​ a代表不透明度,在0-1之间,0为完全透明

文本位置

1
2
3
text-align:center/*水平居中*/
line-height:400px/*文本行高 = 父级元素的高度*/

圆角设置

1
2
3
4
5
6
border-radius:
	参数1 参数2;/*对应  上左 下右
	参数1 参数2 参数3;/*对应 左上 参数2会赋给右上和左下 右下
	参数1 参数2 参数3 参数4;/*对应 左上 右上 右下 左下 顺时针*/
	注:默认0px,px越大越圆润 设置宽高一样50%会显示一个圆

盒模型

针对块级元素

作用 : 盒模型主要用来网页的布局,将我们需要的元素放入div,放入网页中 的位置即可

内边距::padding

盒模型居中:

1
2
3
4
5
6
margin: 0 auto;
一个参数:同时设置上下左右边距一样
两个参数:参数1(上下边距)  参数2(左右边距),也可以设置auto(自动)
三个参数:参数1(上边距)	参数2(左右边距)	参数3(下边距)	
四个参数: 上 右 下 左

盒模型嵌套

​ 改变外盒内边距会自动将盒子撑大,解决方式,改变内盒外边距方式

盒模型浮动

​ float : left(左浮动)/right(右浮动 );

浮动嵌套:相对于父元素浮动

边界塌陷现象

一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0

由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应,由于在IE比较低版本的浏览器中使用overflow：hidden；是不能达到这样的效果，因此需要加上 zoom:1.所以为了让兼容性更好的话，如果需要使用overflow:hidden来清除浮动，那么最好加上zoom:1;

​ 当两个和模型的边框重合时(盒子嵌套,即两个都没设置边框),给任意一个盒子设置外边距,两个盒子会同时产生效果(等两个边框=一个边框=设置的值).

​ 解决方式:给大的盒子设置 overflow:hidden

​ 具体例子,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.out{
			width: 100px;
			height: 100px;
			background-color: green;
			/*以下设置才会解决此问题*/
			overflow: hidden;
		}
		.in{
			width: 50px;
			height: 50px;
			margin-top: 50px;
			background-color: yellow;
		}
	</style>
	<body>
		<div class="out">
			<div class="in">
			</div>
		</div>
	</body>
</html>

清除浮动

想要效果:浮动后依然占据位置

方式一 : 给父级元素增加属性(给大的盒子设置) overflow:hidden(对脱离文档 流的有效,即脱离文档流的不会重合,未脱离文档流的还是会和脱 离的重合)

方式二 : css的clear属性:规定元素的哪一侧不允许其他浮动元素。具体参数如 下所示
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。|

定位

不加浮点:标准文档流

加浮动:脱离标准文档流

定位:在太空中

定位:定位类型 + 边偏移( left right top bottom 一般只给定两个)

​ 固定位置(fixed):
​ 相对于浏览器窗口进行位置的固定

1
2
3
4
5
例如:
position: fixed;
top: 66px;
right: 0px;

​ 相对定位(relative):
​ 相对于自己本身的位置进行定位,仍然保持对原有位置的占有

​ 绝对定位(absolute):

​ 是相对其父级元素拥有定位的元素进行定位的,如果没有就层层往上找, 如果一直找不到,就相对于body进行定位

一般采用的定位方式为:

​ 子绝父相:子元素使用绝对定位的时候,最好给他的父元素一个相对定位

注:在定位当中可以使用 z-index 解决重叠问题

1
2
3
4
5
6
7
8
9
遇见盒子套图片,盒子的高度比图片多出几像素问题,即设置如下可解决:
position:absolute;
bottom: 0px;
right: 0px;
解决方式亦可如下:
1、img标签添加属性 vertical-align: top;
2、img的父标签添加 font-size:0;
3、img是inline-block元素转成block元素 display:block;

元素显示与隐藏

dispaly:none;/隐藏元素,不会占有原来的位置/

visibility:hidden;/隐藏元素,保持对原有位置的占有/

div:hover img{ display : block; }/鼠标放上,显示标签/

1
2
3
4
5
6
7
8
9
10
11
12
例:
			img{
				/*先隐藏*/
				position: absolute;
				left: 100px;
				display: none;
			}
				/*放上显示*/
			div:hover img{
				display: block;
			}

扩展:动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.nav{
    width:300px;
    height:300px;
    background-color:red;
    /*animation:动画的名字 时间*/
    animation:go 1s; // go 1s infinite 无限重复
}
/*定义动画*/
@keyframes go{
    from{
        width:300px;
    }to{
        width:500px;/*逐渐变宽*/
        height:500px;/*逐渐变高*/
        border-radius:250px;/*逐渐变圆*/
        background-color:green;/*逐渐变绿*/
    }
}

JS

简介

ECMAScript

主要是js相关的基本语法

js的书写位置:

​ 1.写在 head 里面 script 标签里面

​ 2.写在body的标签里面

​ 3.body里面的script标签里面

输出的方式:

​ 1.弹出框 alert(输出内容);

​ 2.document.write(输出内容);/输出到网页/

​ 3.console.log(输出内容);/输出到控制台,一般用于调试/

输入的方式:

​ 1.prompt(“请输入你的大名!”);/前省略了 window./

变量

1
2
3
4
5
var	a = 3;/*定义时赋值*/
var	a;
a=6;/*先定义,后赋值*/
b="哈哈哈"/*直接赋值,不推荐使用*/

数据类型

number 数字型

boolean 布尔类型

String 字符串类型

undefined 未定义

object 对象

array 数组

function 函数

null 空

NaN(not a number)

查看数据类型

​ console.log(typeof 变量名);

类型转换

1
2
3
4
5
var a = 3.14;
var b = parseInt(a);
var c = prompt("请输入一个整数");
console.log(c);

运算符

算术运算符: + - * / % ++ –

1
2
3
4
5
6
7
8
var	a = 5;
var	b = 8;
var c = ++a	+ a++ + b++ + a-- - b-- + a*9/*结果为72*/
		 6     7	b.9	  6		b.8	   
		 6     6	b.8   7		b.9	   54     =6+6+8+7-9+54
重点在于理解	++和--在前 是先赋值再自加或自减
			++和--在后	是先自加或自减再赋值

​ +除了表示数学运算,还可以表示字符串的拼接

比较运算符: > < >= <= ==(值相等) != ===(值和类型都相等) !==

1
2
3
4
5
6
var	a = 8;
var	b = '8';
console.log( a === b )//==只比较值相等  ===(比较值和类型)
var c=true;
console.log( c == 1 )// true 和 1 相等	 false 和 0 相等

赋值运算符: = += -= *= /= %=

逻辑运算符: && || ! & |

分支语句

1
2
3
var	a = "";//任何非0 非空串都会	转换成true
			// 0  "" undefined 都会转换成false

循环

增强for循环:

1
2
3
4
for(var  j  in  a){
	//j是下标,取得值需要a[j]
}

数组

数组变长

可以存储字符串、数字等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr = [1,"2如其人",3,4],;
//求数组常用方法
//求数组长度
arr.length
//往数组的末尾添加元素
arr,push(90); //返回值为 新数组长度
arr.pop();//删除数组的最后一个,返回值是被删除的元素
arr.shift();//删除数组的第一个,返回值是被删除元素
arr.unshift(80);//添加到数组的第一个,返回值为数组的长度
//join()方法,将数组转换成字符串输出
console.log("join的方法默认逗号拼接"+arr.join('-'))//传参可改变拼接方式
赋值方式
	根据下标进行赋值

函数

定义

​ function 函数名(参数列表){函数体;}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1.无返回值
	//定义一个函数,求 a+b 的和
	function sum(a + b){
	console.log(a+b);
	}
	//调用函数
	sum(6,7);

	//函数表达式
	var add = function(a,b){
        console.log(a+b);
    }
    //调用函数
    add(4,6);
2.有返回值
	//有返回值的函数,求两数之差
	function sub(a,b){
        return a-b;
    }
	var sub1 = function(a,b){
        return a-b;
    }
    //将函数当做返回值返回
    function sum(a,b){
        console.log(a-b);
        return function(){
            console.log("返回值是一个函数");
        }
    }
	sum(10,1)();

注意:js在执行前,会执行解析:

​ 1.将变量的声明提升到当前作用域的最前面,赋值不会提升.

​ 2.函数的声明也会提升到当前作用域的最前面,函数的调用不 会提升.

​ 3.先提升var,后提升函数

1
2
3
4
5
6
7
8
9
10
11
12
13
sum();
var a = 9;
function sum(){
    console.log(a); //undefined
}
//原因如下:
var a;
function sum(){
    console.log(a);//undefined
}
sum();
a = 9;

1
2
3
注意:直接赋值
a=9;//那么这个值在任何地方都可以使用

函数作用域链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var b = 100;
function fn(){
    vara=10;
    console.log(a);// 10 
    function sum(){
    	console.log(a); // 10
   		 function sub(){
   			 console.log(b);// 100
         }
        sub();//正确
	}
	sub();//错误
}

匿名函数

1
2
3
4
(function(){
	console.log("匿名函数");
})();

Date类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var date = new Date();
var year = date.getFullYear();//年
var month = date.getMonth();//少一个月,从0开始
var day = date.getDay();//星期几
var da = date.getDate();//日期  一个月的第几天
//hours minutes seconds

1.定义一个当地时间格式
function getLocalDate(){
    var date = new Date();
    var year = date.getFullYear();//年
    var month = date.getMonth();//少一个月,从0开始
    var day = date.getDay();//星期几
    var da = date.getDate();//一个月的第几天
    month = month<10?"0"+(month+1):month+1;
    da = da<10?"0"+da:da;
    return year+"年"+month+"月"+da+"日"+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
}
var getNowTime= getLocalDate();
document.write(getNowTime);

js创建对象

1.json(javascript object notation) 数据交换格式(键值对)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var	zhangsan = {
	name:"张三",
    age:19,
    sex:"男"
    eat:function(){
        console.log("吃饭的方法");
    }
};
console.log(zhangsan.age);
console.log(zhangsan['age']);
//为什么有这两种方式
var str = "age";
console.log(zhangsan[str])//相当于str作为一个变量
zhangsan.eat();

2.借助Object()对象

1
2
3
4
5
6
7
8
9
10
11
12
var	person = new Object();
person.age = 18;
person.name = "李四";
person.sex = "男";
person.eat = function(){
    console.log("吃饭的方法!");
}
//调用属性
console.log(person.age);
//调用行为
person.eat();

上面两种方法一次只能创建一个对象

3.工厂模式

1
2
3
4
5
6
7
8
9
10
function Person(name,age,sex){
    var person = new Object();
    person.name = name;
    person.age = age;
    person.sex = sex;
    return person;
}
var wangwu = Person("王五",18,"男");
console.log(wangwu.name);

4.对象工厂

1
2
3
4
5
6
7
8
function Animal(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
var zhaoliu = new Animal("赵六,19,"女");
console.log(zhaoliu.name);

DOM

文档对象

Document Object model :文档对象模型

基本3种获取文档对象:

​ 1.通过id名获取 /document.getElementById()/

​ 2.通过class名获取 /document.getElementByClassName()/

​ 注:使用增强for in循环不仅仅拿到下标,还有对象相关属性

​ 3.通过标签名获取 /document.getElementByTagName()/

​ 不常用方式:

1
2
3
4
5
6
1.通过name/*只针对IE9以上的才能使用*/
var names = document.getElementByName("test");
2.通过选择器/*只针对IE9以上的才能使用*/
var odiv = document.querySelector(".header");/*只找第一个*/
var odiv = document.querySelectorAll(".header");/*找所有*/

1
2
3
4
5
6
7
8
写入位置:    
	//标签放在前面
    var odiv = document.getElementById("nav");
    //标签可以放在后面,文档加载完成之后执行的内容,只能执行一次
    window.onload = function(){
        var odiv = document.getElementById("nav")
    }

添加事件:

​ 常见事件:

​ 单击 onclick

​ 双击 ondblclick

​ 获取焦点 onfocus

​ 失去焦点 onblur

​ 内容改变时触发事件 onchange

​ 鼠标移入事件 onmouseover

​ 鼠标移除事件 onmouseout

​ ……

1
2
3
4
5
6
7
var btn = document.getElementById("btn");
//绑定事件
btn.onclick = qwe;
var qwe = function test(){   /*要放到前面,因为函数声明会自动提升,导致出现问题*/
    alert("测试一下");
}

获取Dom的属性 dom对象.属性名

修改dom对象的属性值 dom对象.属性名 = 值;

改变元素属性

​ 1.修改style属性的值需要 odiv[0].style.属性名 = ‘新属性值’;

​ 2.可以给标签赋新的css样式

1
2
3
4
5
6
7
8
9
10
11
.hidden{
display: none;
}
<input type="button" id="btn" value="点我，我很帅!!!" />
<div class="nav" > </div>
var btn = document. getElementById("btn");
var odiv = document . getElementsByClassName ("nav");
btn .onclick = function(){
odiv[0] .className = 'hidden' ;/*本来是.class,但class是关键字,所以使用className*/
}

​ disabled可以禁用标签

​ select.disabled = true;

获取元素内容

innerText 只会获取标签里面的文本内容

innerHTML 包含标签及文本内容

改变元素内容

​ Dom对象.innerHTML 会识别标签

​ Dom对象.innerText

样式的操作

1
2
3
4
5
6
7
8
9
10
11
1.方式一
odiv[0] .style .width ='200px' ;
odiv[0] .style .height =' 200px';
odiv[0] .style . backgroundColor ='red';
2.方式二
odiv[0].style.cssText = 'width:200px;height:200px;background-color:red;';
3.
odiv.value = "点我变蓝"/*非css属性,不用写style*/
this.value = "点我变蓝" /*使用this指当前事件对象*/


补充:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if(odiv[0].classList.value ){ /*classList获取到的是样式的集合,这个的作用就是判断是否有值,没有就赋样式*/
    odiv[0].classList.add("hidden");
}else{
    odiv[0].classList.remove("hidden");
}

<a href="https://www.baidu.com">点击一下</a>
<script>
	document . getElementsByTagName ("a")[0].onclick = function(){
	alert("点击了!");
	return false;/*阻止 标签的默认行为,例如在这里可以阻止默认跳转另一个界面*/
</script>


事件的冒泡

点击事件嵌套时,点击最里层时,会层层往上执行上层时间

解决方案1 : event.cancelBubble = true;

解决方案2 : 每层的函数都来个return false;(jQuery,原生js不能使用)

还有一个叫事件的捕获

创建元素

document.createElement(“div”);//创建元素

1
2
3
4
5
6
7
8
9
10
11
12
13
var btn = document.getElementById("btn");
btn.onclick = function(){
    var odiv = document.createElement("div");//创建元素
    //给div属性
    odiv.style.width = "300px"; //css属性
    odiv.innerHTML="<p>aaaa</p>";
    odiv.innerText="aaaa";   //HTML和Text就在于能否放标签
    ...
    //添加到body
    document.body.appendChild(odiv);/*获取到标签就可以添加*/
    //remove可以删除,貌似-  -
}

定时器

js提供了两种定时器

1.setInterval(函数,时间毫秒值)

​ 函数:定时器执行的内容 时间毫秒值:执行间隔时间

1
2
3
4
5
6
7
function test(){
    console.log("执行了");
}
var timer = setInterval(test,3000);
//清除定时器
clearInterval(timer)/*需要明确何时执行清除效果,创建一个按钮吧 - -*/

2.setTimeout(函数名,时间毫秒值)

​ 函数:定时器执行的内容 时间毫秒值:执行间隔时间,只执行一次

​ clearTimeout(param);

获取元素的left或者top值

1
2
3
4
5
6
7
8
console.log(odiv.offsetTop);
console.log(odiv.offsetLeft);
odiv.style.top = odiv.offsetTop + 10 + 'px';
offsetLeft:元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（不包括元素的边框和父容器的边框）。
position().left:使用position().left方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
作业补充知识点:
<audio src = "" autoplay controls></audio>/*视频 自动播放可控*/

动态创建元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var goods = {
    name:"iphone",
    price:1000
}
//增强for循环
for(var j in goods){
    goods[j];//获取所有键
}

//json数组
var goods = [
    {name:"iphone",price:1000},
    {name:"华为",price:1100}
];
//取出数据
goods[0].name + goods[0].price;

//将数据放入页面
	///遍历json数组,做字符串拼接
	tab.innerHTML = "<p>字符串内容</p>";

JSON 对象转换

将json格式字符串转换成json对象

​ /最外面用单引号,字符串全部用单引号/

​ var people =’[{“name”:”张三”,”age”:”19”}]’;

​ var p = JSON.parse(people );

将json对象转换成json格式字符串

​ var heroString = JSON.stringify(hero)

1
2
3
4
5
6
7
8
9
10
11
12
Jackson => 老牌,稳定
Gson => Google出品json转换,可配置性高,功能丰富
Fastjson => 阿里出品,快
//json格式转对象(需要保证对象成员变量名和json变量名一致)
		//将json格式转成json对象
		Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create();
		//转成List
	    List<StuattendanceInfo> stuList = gson.fromJson(allStuMessage, new TypeToken<List<StuattendanceInfo>>() {
		}.getType());
//将对象转json格式
gson.toJson(对象名);

变换

变换:

​ transform

变换过度效果

1
2
3
4
5
6
7
8
平移::translate
img{
    transition: all 1s;
}
img:hover{
    transform:translateX(100PX);
}

1
2
3
4
5
6
7
8
9
旋转::rotate deg度数
img{
    transition: all 1s;/*过度效果*/
    transform-origin:top right;/*旋转中心点*/
}
img:hover{
    transform:rotateZ(180deg);
}

透视

1
2
3
4
img{
    perspective:3px;
}

变换风格

1
2
3
4
img{
    transform-style:preserve=3d;
}

跟小米学了个:

translate3d(x,y,z) 定义 3D 转换。

例:transform: translate3d(0,10px,0); //设置向下

​ transition-duration:800ms;//设置时间

​ 具体:https://www.w3school.com.cn/cssref/pr_transition.asp

事件对象

1
2
3
4
5
odiv.onclick = function(ev){
	ev.pageX;/*获取点击x点坐标*/
	ev.pageX;/**/
}

BOM

Browser Object Model 浏览器对象(最顶级的对象)

关键字::window(可省略)

​ 例::window.ducument

自定义的变量也属于window

1
2
3
4
5
6
window.location.href //获取当前浏览器地址
odiv.onclick = function(){
    //设置浏览器地址
    window.location.href = "https://www.baidu.com";
}

设置图片居中可以使用

margin 0 auto;/上下间距0 左右自动,即水平居中/

margin-left /margin-top margin-bottom margin-right 都可以实现效果/

JQuery

简介

前端框架

​ 框架:对js进行一些封装,函数,半成品

​ 特点:简单,快捷,写的少,做的多

​ JQuery-版本号.js 247kb 一般用于开发过程中(查看源码,找错,找bug)

​ JQuery-版本号-min 93kb 用于产品运行(上线使用),节约带宽,提升效率

​ 导入到当前页面即可

1
2
3
写在head里	
<script src="地址"></script> /*引入文件script标签中间不要再写js代码*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ jquery对象
1.
window.onload = function(){
}//可以写成下面的形式
2.
$(window).load(fuction){
}
例子:
$(function()){ //写在head就必须写这个   文档就绪事件
   //获取div对象 $("#nav") = document.getElementById("nav")
   //js和jquery互相转换
   var odiv = document.getElementById("nav");
	$(odiv)//转成jquery
	$("#nav").get(0)//转成js对象
   }

JQuery选择器

获取属性的值

/* .val() .html() .text 如果不传参数就表示获取对应的属性值*/

id选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("#nav").click(function){
    //jquery.css(键,值);更改元素的样式
    //改单个
    $("#nav").css("background-color","red");
    
    //改多个	.css({json对象})
    $("#nav").css({ 
       "background-color":"red",
        "width":"500px"
    });
    
    // .val	改变value值
    $(this).val("变蓝"); ///先将js对象变成jquery对象再改变
    
    // .html 改变 innerHTML
     $("#nav").html("内容");
    
    // .text 改变	innerText
}

组合选择器

$(“p,span,div”).css(“color”,”green”);

/链式编程,可以一直点css设置属性/

$(“p,span,div”).css(“color”,”green”).css(“font-size”,”32px”);

复合选择器

$(“.nav p”).css(“color”,”red”);

相邻元素选择器

$(“.nav+p”).css(“color”,”red”);/* prev+next选择紧邻的下一个元素*/

prev ~ next/*匹配prev元素之后的所有siblings(同胞)元素(即相同标签)

结构伪类选择器

first last even(偶数) odd(奇数) eq(index) gt(index 大于index的元素)

​ lt(index 小于index的元素)

(“li:even”)

注::wq的index从0开始算

元素的显示与隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<input type="button" id="btn" value="隐藏"/>
<div id = "hidden">
<script>
    $(".btn").click(function(){
    /*方式一*/
    	$("#hidden").css("display","none");
    /*方式二*/
    	$("#hidden").hide(3000);//3000表示显示到完全隐藏的ms
    	$("#hidden").show(3000);//显示	
    /*方式三*/
   $(this).children("选择器").hide;/*不加选择器,默认选择所有亲儿子
  	children() 方法返回返回被选元素的所有直接子元素。
 	find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
 					/*next() 找下一个元素----同代
 					/*prev() 找当前元素的上一个元素---同代
 					/*prevAll() 找当前元素的上面所有元素----同代
 					/*找父亲 parent()
 //筛选,选择所有兄弟,不包括自己
 //$(this).siblings().css("background","white");
});
</script>

多选框的选中与被选中(只能使用此方法)

1
2
3
4
5
6
7
//只有两种状态的属性使用prop("属性名")方法获取
		#("cheack").prop("cheacked");
        #("cheack").prop("disabled");
//只有两种状态的属性的修改,使用prop("属性名",boolean);
		#("cheack").prop("cheacked",true);
        #("cheack").prop("disabled",false);/*disabled false												代表没被禁用*/

属性获取与修改

1
2
3
4
5
6
7
8
9
//获取元素属性 attr("属性名");
$("img").attr("src") //传标签属性名即可获得属性值
//修改元素的属性值 attr("属性名","值");
$("img").attr("src","新属性值") ;
//offset().top left bootom right获取元素相对于页面的位置
//$(this).children("ul").eq(0).position() 获取相对位置
/*得到内容 亦可以设置*/
$(".product_single_all_price>span").eq(0).text("sasaas");

补充:

1
2
3
Number("字符串") /*将字符串转成数字*/
Number("字符串").toFixed(保留几位) /*数字保留几位,传几就保留几位*/

添加删除样式

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    .bgc{
        background-color:blue;
    }
</style>
<script>
    //addClass("类选择器名");    增加样式
    ///removeClass("类选择器名")	删除样式
    $(".nav").addClass("bgc")  //不要 .
	//hasClass("样式名")//可以判断是否应用该样式
	//toggleClass("样式名")//如果有该样式则移除	没有就添加
</script>

获取当前元素的下标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("li").click(function){
    //方式一
    for(var i = 0 ; i< $("li").length ;i++){
        if(this == $("li").length ;i++){
            console.log(i);
            break;
        }
    }
    //方式二
    console.log($(this).index());
//遍历所有元素内容
    $("li").each(function){
        console.log( $(this).html());//打印所有内容
    }
}

链式编程

1
2
3
4
5
6
$("li").mouseover(function(){
	$(this).css("background","red");
}).mouseout(function(){
	$(this).css("background","blue");
})

hover方法

1
2
3
hover(参数1,参数2)//参数1表示鼠标移入时执行操作 参数2移出时操作
hover(参数1)//鼠标移入时 移出时同时执行此操作

动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
例::animate({动画执行之后样式,时间毫秒值,[回调函数]}) /*回调函数,函数执行完做什么*/
靠  animate和css有冲突  靠靠靠
解决方法:
obj.stop(1,0).css({left:0}); //可行，停掉animate的动画
但，因animate改变在css改变的前面，会出现定时器多定住一个时间差，应把css调到animate前面（不需要给css前加stop，因无animate干扰）：
或者:自己全部annimate,设置时间为0就ojbk了

$("div").animate({
    "left":"500px",    //注意,不需要且不能以分号结尾
    "border-radius":"150px"
},1000,funtion(){
    $(this).css("left","0px").css("border-radius","0px");
});
其余自查API

删除元素

1
2
3
4
$("div").empty(); //empty() 清空元素的内容
$("div").remove();//remove() 清除自己
$("div").detach();//detach() 清除自己,但会留下绑定事件等

创建元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 //方式一 上一次的覆盖
$(".nav").html("<p>这是一个p标签</p>");
//方式二 追加的意思
$(".nav").append("<p>这是一个p标签</p>");
//方式三
var html = $("<p>这是一个p标签</p>");
html.appendTo($(".nav"));	
$("<tr><td></td></tr>").appendTo($("table"));

例如下所示(直接创建一个圆):
			$(function(){
				$("<table></table>").appendTo("body");
				$("table").css({
					height : "200px",
					width : "200px",
					backgroundColor : "orange",
					borderRadius : "100px"
				});
			});

注意:在页面加载完再获取元素,要用jquery.on()事件来获取未加载页面元素内容,如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(selector).on(events,[selector],[data],fn)
参数 	描述
events 	一个或多个用空格分隔的事件类型和可选的命名空间。
selector 	可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。
如果选择是空或被忽略，当它到达选定的元素，事件总是触发。
data 	可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。
fn 	该事件被触发时执行的函数。 false值也可以做一个函数的简写，返回false。
例:
html页面：
    <li class="select-result">
    <dl id="dddd">
       <dt>已选条件：</dt>
       </dl> <dd class="select-no">暂时没有选择过滤条件</dd>
    </li>
js：
//on方法要先找到原选择器（dddd),再找到动态添加的选择器（selectC)
    $("#dddd").on("click","#selectC", function () {
        $(this).remove();
        $("#select3 .select-all").addClass("selected").siblings().removeClass("selected");
    });

form表单的数据转成json格式

//serializeArray();方法

1
2
3
4
5
6
7
8
9
10
11
12
<body>
		<form action="#" method="get" id="register">
			两个输入input 用户名和密码
			<input  type="button" id="btn" value="提交"/>
		</form>
</body>
<script type="text/javascript">
		$("btn").click(function(){
			var data = $("#register").serializeArray();
		})
</script>

问题及答案

设置百分比失效问题

以前一直很郁闷一个问题，为什么设置height:100%不生效，尤其是设置body:height:100%不生效，后来就很少使用了这个了。

今天在学习谷歌地图时关于height:100%看到了解答：

1
2
3
In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail to specify a size, they are assumed to be sized at 0 x 0 pixels
具体地讲，所有基于本分比的尺寸必须从父块元素继承，并且如果任一父项未能指定尺寸，则它们的尺寸假定为0 x 0像素

所以我特地有查看了我只设置body的height:100%的情况，发现body的高度就 为0，所以子元素的高度设置为height:100%也为0

Jquery中val()和attr的差别

  • .val() 能够取到 针对text，hidden可输入的文本框的value值.而 .attr(‘value’) 可以取到html元素中所设置的属性 value的值，不能获取动态的如input type=”text” 的文本框手动输入的值

JQuery事件不同位置,执行同样的代码,产生不同的效果

  • 考虑this的执行问题
  • 解决方式:定义一个变量等于this,再使用变量即可