前端基础知识学习
目录javascript
- 第十一章 前端开发
- 11.1 html基础
- 11.2 CSS基础
- 11.3 CSS 浮动
- 11.4 CSS清除浮动+定位+BFC
- 11.5 CSS 定位层级z-index
- 11.6 JavaScript基础
- 11.7 BOM 、DOM
- 11.8 jQuery基础一
- 默认+内容回顾
- 1.列出至少5个以上数组的经常使用方法，并说明它们的含义
- 2.列出数学对象Math经常使用的三个方法，并说明它们的含义
- 3.函数对象中，能够经过哪两个方法改变函数内部this的指向？
- 4.javascript的基本数据类型和引用数据类型有哪些？
- 5.对DOM的理解
- 6.获取节点对象的三种方式
- 7.如何设置节点对象的样式，属性，类？
- 8.节点对象的建立，添加，删除分别用什么方法？
- 9.列出你所知道的js中的事件？
- 10.定时方法有哪两个？写出对应的方法，并说明它们的含义
- 11.设置值的操做
- 今日内容
- 1.jquery介绍
- 2.jquery的选择器
- 3.jq对象和js节点对象转换
- 4.基本选择器和高级选择器
- 5.属性选择器
- 6.过滤选择器和筛选方法
- 7.经常使用事件
- 8.样式操做
- 9.类操做
- 10.属性操做
- 11.动画的方法
- 11.9 jQuery 基础二
第十一章 前端开发
11.1 html基础
| 浏览器 | 内核 |
|---|---|
| IE | trident |
| chrome | blink |
| 火狐 | gecko |
| Safari | webkit |
PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。css
- 总结：渲染引擎是兼容性问题出现的根本缘由。
- 首页：index.html(64,32). Index.htm(32位)
1. 建立html文件
html全称HyperText Mackeup Language，翻译为html
超文本标记语言前端
，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。好比字体、颜色、大小等。html5
- 超文本：音频，视频，图片称为超文本。
- 标记 ： <英文单词或者字母> 称为 标记， 一个HTML页面都是由各类标记组成。
做用：HTML是负责描述文档语义的语言。java
注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。python
2. 基本格式
- webstrom：重量级html编辑器
- stylesheet css文件
- javascript file js文件
- 文件名：全英文、命名规范
- 标签也称为标记：双闭合标签、单闭合标签
# ctrl + / 注释
<!DOCTYPE html> # html5的声明。随着版本的变化而变化
<html lang='en'> # 开始标记
<head>
<meta charset='utf-8'> # 元信息, charset属性，名值对,配置网站信息
<title>Title</title> # 标题，搜索引擎首先查找title
<link rel='stylesheet' href='index.css'> # 连接css文件
<script src='index.js'></script> # 链接js文件，弹出框
</head>
<body>正文</body>
</html>
- css样式定义
# 行内嵌css，style段独立
<style>
body{
backgroud-color:red;
}
</style>
- js弹出框
# js文件 var a='warning'; alert(a);
3. head标签(5)
- meta 基本网站元信息标签
- titile 网站的标题
- script 连接javascript文件：动态
- link 连接css文件：静态装饰
- style 直接把link文件写进html文件，内嵌颜色
4. body标签(7)
4.1 标题标签
# h1-h6 <h1>一级标题</h1> <h2>二级标题</h2> 若是是h7，则认为是普通文本
4.2 段落标签
# 段落标记， 表示一个空格 <p>\ \ 段落</p>
4.3 超连接
- href：连接的网址，默认有下划线，#top：锚点
- tartget：默认_self当前页面打开, 可使用_blank，# 表示空链接
- sytle：行内样式，text-decoration:none取消下划线，color：指定字体颜色
- title：悬浮显示
<a href='localhost' target='_self' style='text-decoration:none; color:red;' title='小圆圈'>哈哈哈</a> <h6 id='#top'> <h6> <a href='#top' target='_self' style='text-decoration:none; color:red;' title='小圆圈'>实现跳转</a>
4.4 img标签
- src：路径、title：标题
- class：类
- style：每一个标签都有的行内属性
- alt：图片加载失败时显示的文本
- width等比例缩放、height，改变图片大小
<img src='路径' alt='校花' width='200'>
- 其余
换行标签<br> 分割线<hr> 特殊字符© © <u>下划线</u> <strong>字体加粗</strong> <em>斜体</em> <i>斜体2</i>
4.5 列表标签
- 有序列表
type表示顺序a，A，1，I，i，start='3'从3开始
<ol type="A" start="3">
<li>echo</li>
<li>dean</li>
<li>henry</li>
</ol>
- 无序列表
- 000 白 111/222/777灰 FFF 黑
- li独占一行
type还有circle，默认实体的circle <ul type="square" > <li>python</li> <li>linux</li> <li>golong</li> </ul>
- 自定义列表(经常使用于网站底端)
<dl> <li>python</li> <li>linux</li> <li>golong</li> </dl>
4.6 表格
- border：边框，cellspacing：边框之间间隙，width：等比例缩放(或设置height)
<table border="1px" cellspacing="0" width="50px">
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr>
<td>1</td>
<td>henry</td>
</tr>
<tr>
<td>2</td>
<td>echo</td>
</tr>
</table>
4.7 表单
# <form action='域名:端口号' method='get/post'> </form> # action默认self， method默认get 文本输入框/密码输入框/表单按钮 表单控件 # 请求的方式 get(明文，网址最大2k byte) / post(密码，密文提交使用post)
# 文本输入框
# get：明文不安全、网址栏显示且内容不能超过2k，key:value&key2:value
# post：安全，提交任意内容
<!--form表单-->
<form action="提交服务器地址" method="post" enctype="multipart/form-data">
<p id="username">
<input type="text" name="username" value="">
</p>
<p>
<!--密文显示-->
<input type="password" name="pwd" value="">
</p>
<!--单选，给每一个name定一个相同的名字产生互斥效果-->
<h3>单选</h3>
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
<!--多选-->
<h3>多选</h3>
<p>
<input type="checkbox" name="A" checked>A
<input type="checkbox" name="B">B
<input type="checkbox" name="C">C
</p>
<!--单选+多选-->
<h3>单选+多选</h3>
<p>
<select name="hobby" id="" multiple>
<option value="musics">音乐</option>
<option value="reading"selected>阅读</option>
<option value="movies">电影</option>
</select>
</p>
<!--时间选择-->
<h3>时间选择</h3>
<input type="datetime-local">
<!--多行文本-->
<p><textarea name="" cols="30" rows="10"></textarea></p>
<!--提交表单-->
<h3>提交表单</h3>
<p><input type="submit" value="登陆"></p>
</form>
Note(5)
- 空白折叠：换行和空格都成为一个空格
- 自动换行，每一个标签都有style属性
- 标题独占一行
- % 表示空格
11.2 CSS基础
1. div标签
- 盒子标签，divison：分割，把网页分割成不一样的独立的逻辑区域
- span：能够包裹文本，利用class，能够在head标签中定义文本格式
# 命名，id和class
<head>
<style type='text/css'>
#top{ # id选择器
height=40px, # 盒子高
line-height=40px, # 行高
background-color:#333
text-align:center; # 水平居中(left,right,center)
}
a{
text-decoration:none;
color:#b0b0b0;
font-size=14
}
</style>
</head>
<body>
<div id='top'>
<div calss='top-l'>小米顶部</div>
<a href='#'>小米商城</a>
<span class='sep'>|</span>
<a href='#'>loi</a>
<span class='sep'>|</span>
<a href='#'>MIUI</a>
<div calss='shop'>shop</div>
<div calss='user_login'></div> # 从右往左
</div>
<div id='nav'>导航</div>
<div id='bottom'>底部</div>
</body>
- .sep：类选择器，做用：选中标签
- div/span/table：选中全部的div/span的标签
2. lable标签
- label值和input的id(惟一不重复)值同样能够点击，快速定位
- for属性和表单控件的id属性关联
<form action=''> <label for='username'>用户名</label> <input type='text' id='username'> <label for='pwd'>用户名</label> <input type='text' id='pwd'> </form>
- h1标签只能有一个
- https://www.baidu.com/s?wd=111
<form actin='https://www.baidu.com/s'> <input type='text' name='wd'> <input type='submit' value='百度一下'> </form>
2. css(层叠样式表)
- 行内样式
<div style='color:red;'>
henry
</div>
<body>
<div id='box' style='color:red;'>
henry
</div>
</body>
- 内嵌式
在head标签内部书写sytle <style> /*css代码/ </style>
<head>
<style>
#box{
backgroud=greenyellow;
}
</style>
<link href='css/index.css' rel='stylesheet'>
</head>
<body>
<div id='box' style='color:red;'>
henry
</div>
</body>
- 外接式
<link href='css/index.css' rel='stylesheet'>
- 三种引入的优先级：行内>内嵌=外接
- 内嵌和外嵌要看顺序，在后面的会覆盖前面的
3. css选择器
3.1 基础选择器
- id选择器，类选择器，标签选择器
- #id，id是惟一
- .xxx类能够重复，可设置多个
<style>
/*类选择器*/
.box{
width=200px,
height=200px,
backgroud-color:yellow
}
/*类选择器*/
.active{
border-radius:200px;
border-radius:4px; /*圆角*/
}
/*id选择器*/
#box{
color=red;
}
/*标签择器*/
div{
border:1px solid #000;
}
a{
text-decoration:none; 或
text-decoration:underline;
}
input{
border:none; /*边框线*/
outline:none; /*外线*/
}
#box{
/*内容的宽高*/
width:200px;
height:200px;
backgroud:red;
/*border到内容的距离*/
padding:50px;
/*表示上下为0，左右为10*/
padding:0 10px;
/*上、左右、下*/
padding:0 10 20;
padding-left/right/top/bottom
/*外边距*/
margin-lfet:30px;
border:1px solid;
}
</style>
<div class='box active' id='box'></div>
<div class='box'></div>
<div class='box'></div>
<form actin='https://www.baidu.com/s'>
<input type='text' name='wd'>
<input type='submit' value='百度一下'>
</form>
- 盒模型
- 外边距
- 内填充padding
3.2 高级选择器
- 后代选择器(256之内，通常不超过8层)、子代选择器(>)、组合选择器、交集选择器
<style>
.box{
width=200px;
height=200px;
background-color:yellow;
/*显示行内*/
display:inline;
}
a{
width=100px;
height=40px;
backgroud-color:red;
/*显示块*/
display:block;
/*left，right，center*/
text-align:center;
/*行高等于文本高，垂直居中*/
line-height=40px;
/*underline、overline、line-through(del标签)*/
text-decoration:none;
color:#333333;
}
</style>
- 块级标签：独占一行，可设置宽高
- 行内标签：一行显示，不可设置宽高，尽可能不要嵌套块
- input / img是行内块，能够设置宽高 display inline-block;
- body默认8px、p默认16px、ul默认有margin
- 块级标签能够嵌套块级和行内标签
- p标签不要嵌套div和p标签，能够嵌套a、img、表单控件
/*重制样式*/
<style>
p,ul,ol,body{
margin=0;
padding=0;
}
input,textarea{
boder:none;
outline=0;
}
</style>
3.3 层叠性和继承性
- 继承
- css中某些属性有继承性：color、text-xxx、line-height、font-xxx
- 盒子属性没有继承
- p标签是一个透明色
- 行内1000>id100>类10>标签1
- 继承来的属性权重为0
- 权重比较
- 数选择器的数量：id、类、标签，权重大的优先级高
- 选中标签的优先级永远大于继承来的属性权重
- 同是继承来的属性
- 描述近的优先级高
- 描述的同样近，回归到第1条
- !important 通常用于调试
- 四条线，基线、文本底线
11.3 CSS 浮动
内容回顾：
1.div和span标签在网页中的做用
div:将网站分割成独立的逻辑区域 division 分割jquery
span: 小区域标签,在不影响文本正常显示的状况下，单独设置对应的样式linux
<style>
span.active{
font-weight:bold;
}
</style>
<p>
<span class='active'>央视网消息</span>（新闻联播）：北京人民大会堂亲切会见出席第九届世界华侨华人社团联谊大会和中华海外联谊会五届一次理事大会的全体表明，表明党中央、国务院向你们表示热烈欢迎和衷心祝贺，向世界各地华侨华人致以诚挚问候。
</p>
2.css基础选择器和高级选择器有哪些？
选择器的做用：选中标签es6
基础选择器
- id选择器 特定属性的元素（标签）
- 类选择器 class = 'active' .active 类是能够重复，而且能够设置多个
- 标签选择器
高级选择器
- 后代 子子孙孙
- 子代 只包括儿子
- 组合 html,body,div,p,ul....
- 交集 span.active
3.盒子模型的属性有哪些？并说明属性的含义，画出盒子模型图
width:内容的宽度 height:内容的高度 border:边框 padding:内边距 margin: 外边距
4.如何让文本垂直和水平居中？
<style>
div{
width:200px;
height: 60px;
background-color: red;
text-align:center;
line-height: 60px;
}
</style>
<div>
wusir
</div>
让行高等于盒模型的高度实现垂直居中
使用text-align:center；实现文本水平居中
5.如何清除a标签的下划线？
text-decoration: none; none;无线 underline:下划线 overline:上划线 line-through:删除线
6.如何重置网页样式？
reset.css
html,body,p,ul,ol{
margin: 0;
padding: 0;
}
/*通配符选择器 */
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
input,textarea{
border: none;
outline: none;
}
7.如何清除input和textarea标签的默认边框和外线？
8.在css中哪些属性是能够继承下来的？
color,text-xxx,font-xxx,line-height,letter-spacing,word-spacing
9.如何正确比较css中的权重？
若是选中了标签
数选择器的数量 id class 标签 谁大优先级越高 若是同样大，后面优先级越大
若是没有选中标签，当前属性是被继承下来，他们的权重为0，与选中的标签没有可比性
都是继承来的，谁描述的近，就显示谁的属性（就近（选中的标签越近）原则），若是描述的同样近，继续数选择器的数量。
!important 它设置当前属性的权重为无限大，大不过行内样式的优先级
10.块级标签和行内标签
块级标签
1.能够设置高度，若是不设置宽度，默认是父标签的100%的宽度 2.独占一行 p div ul ol li h1~h6 table tr form
行内标签
1.不能够设置宽高 2.在一行内显示 a span b strong em i
行内块标签
1.能够设置宽高 2.在一行内显示 input img
今日内容：
伪类选择器
对于a标签，若是想设置a标签的样式，要做用于a标签上，对于继承性来讲，a标签不起做用的
“爱恨准则”
LoVe HAte
/*LoVe HAte*/
/*a标签没有被访问时候设置的属性*/
a:link{
/*color: red;*/
}
/*a标签被访问时候设置的属性*/
a:visited{
color:yellow;
}
/*a标签悬浮时设置的属性*/
a:hover{
color: deeppink;
}
/*a标签被摁住的时候设置的属性*/
a:active{
color: deepskyblue;
}
属性选择器
input[type='text']{
background-color: red;
}
input[type='checkbox']{
}
input[type='submit']{
}
伪元素选择器
p::first-letter{
color: red;
font-size: 20px;
font-weight: bold;
}
p::before{
content:'@';
}
/*解决浮动布局经常使用的一种方法*/
p::after{
/*经过伪元素添加的内容为行内元素*/
content:'$';
}
经常使用格式化排版
1.字体属性
2.文本属性
参考：https://book.apeland.cn/details/351/
盒子模型
margin:在水平方向上不会出现问题，垂直方向上会出现塌陷问题
布局-浮动
先参考一下：https://book.apeland.cn/details/355/
明天再详细讲浮动
今日做业：
11.4 CSS清除浮动+定位+BFC
默写+内容回顾：
1.伪类选择器
a:link{} 没有被访问过期a标签的样式
a:visited{} 访问事后的
a:hover{} 悬浮时
a:active{} 摁住的时候
2.如何在p标签的后面添加''&'内容？
<style>
p::after{
/*行内元素*/
content:'&',
color:red;
font-size: 20px;
}
</style>
<p>wusir</p>
3.设置网页字体使用哪一个属性，备选字体如何写？
font-family:'宋体','楷体';
4.如何设置文字间距和英文单词间距？
文字间距:letter-spacing 英文单词间距:word-spacing
5.字体加粗使用哪一个属性，它的取值有哪些？
font-weight:lighter| normal | bold |bolder| 100~900 字体加粗 font-style:italic;/*斜体*/
6.文本修饰用哪一个属性，它的取值有哪些？
text-decoration:none| underline | overline | line-through
7.分别说明px，em,rem单位的意思
px: 绝对单位 固定不变的尺寸
em和rem :相对单位 -------> 和font-size有关
em:相对于当前的盒子
rem:相对于根元素（html）
8.如何设置首行缩进，通常使用什么单位？
em 首行缩进text-indent: 2em;
9.文本水平排列方式是哪一个属性，它的取值有？
text-align:left | center | right | justify(仅限于英文，两端对齐)
10.如何让一个盒子水平居中？
盒子必须有宽度和高度，再设置margin: 0 auto; 让文本水平居中： text-align:center; 让文本垂直居中：line-height = height 文本垂直居中：vertical-align: middle;
11.margin在垂直方向上会出现什么现象？
外边距合并，“塌陷” 尽可能避免出现塌陷问题，只要设置一个方向的margin
12.若是让两个盒子并排在一行上显示？
1.float浮动属性 2.设置盒子的显示方式 display:inline | inline-block;
13.简单阐述一下，浮动对盒子产生了什么现象？
1.脱离标准文档流，不在页面上占位置 “脱标” 2.文字环绕 设置浮动属性的初衷 3.“贴边” 现象： 给盒子设置了浮动，会找浮动盒子的边，若是找不到浮动盒子的边，会贴到父元素的边，若是找到了，就会贴到浮动盒子的边上 4.收缩效果 有点像 一个块级元素转成行内块
今日内容：
浮动
布局方案
做用：实现元素并排
浮动的现象
脱离了标准文档流，不在页面上占位置
贴边现象
收缩效果
浮动的带来问题（撑不起父盒子的高度）
清除浮动的方式
给父元素添加固定高度 （不灵活，后期不易维护）
- 应用：万年不变导航栏
内墙法：给最后一个浮动元素的后面添加一个空的块级标签，而且设置该标签的属性为clear:both; 问题：冗余
伪元素清除法 推荐你们使用 .clearfix::after{ content:''; display: block; clear: both; /*visibility: hidden;*/ /*height: 0;*/ }overflow:hidden; 经常使用 由于overflow:hidden;会造成BFC区域，造成BFC区域以后，内部有它的布局规则 计算BFC的高度时，浮动元素也参与计算 可是当心overflow：hidden它本身的本意
定位
position:static | relative | absolute | fixed;
静态 相对 绝对 固定
相对定位 relative
特征：
- 与标准文档流下的盒子没有任何区别
- 留“坑”，【占着原来的位置】会影响页面布局
- 不脱标，在页面上占位置
做用：
作“子绝父相”布局方案的参考
参考点：
以原来的盒子为参考点
绝对定位 absolute
参考点
脱标了，在页面上不占位置
若是单独设置一个盒子为绝对定位，
绝对定位：脱标 以top描述，它的参考点是以body的（0，0）为参考点 以bottom描述，它的参考点是以浏览器的左下角为参考点
子绝父相
子元素：绝对定位 以最近的父辈元素的左上角为参考点进行定位 设置相对定位【压盖，有坑，保留原来的位置】，不会脱标，不会有任何变化
特征
1.脱标 2.压盖 3.子绝父相
11.5 CSS 定位层级z-index
内容回顾+默写
1.浮动有哪些现象？
1.脱离标准文档刘 2.贴边 3.收缩 4.文字环绕
浮动带来问题：不去计算浮动元素的高度，致使撑不起父盒子的高度
2.清除浮动的方式？
1.给父盒子添加固定高度
2.内墙法：给最后一个浮动元素添加一个空的块级标签，设置该标签的属性为clear:both;
3.伪元素清除
给父元素添加一个类
.clearfix::after{
content:'',
display:block;
clear:both
}
4.overflow:hidden; BFC区域
3.overflow:hidden和overflow:scroll属性的做用？
overflow:hidden;超出部分隐藏 overflow:scroll;出现滚动条 清除浮动
4.定位有哪几种？
position: static | relative | absolute | fixed
5.相对定位的元素有哪些特征？它的参考点是谁？
1.给一个标准文档流下的盒子单纯的设置相对定位，与普通的盒子没有任何区别 2.top|bottom|left|right 参考点：以原来的位置为参考点 应用：1.微调元素 2.作“子绝父相”
6.绝对定位的元素由哪些特征？它的参考点？
现象：
1.脱标
2.压盖现象
参考点：
是否有定位（相对定位，绝对定位，固定定位）的祖先盒子进行定位，若是没有定位的祖先盒子，以body为参考点
重要： “子绝父相”
7.阐述一下，“子绝父相”布局方案的好处
8.引用效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css">
<!--<link rel="stylesheet" href="css/index.css">-->
<style>
.box{
width: 200px;
height: 200px;
background-color: #000;
margin: 100px auto;
position: relative;
transition: all .2s linear; # 动画特效
}
.box:hover{
top: -2px;
box-shadow: 0 0 20px red; # 阴影部分
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
9.圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
background-color: red;
/*border-radius: 50%;*/
border-radius: 50px; # 圆角
border: 3px solid blue;
}
#box:hover{
background-color: #000;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
10.轮播图左右按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
color: #fff;
}
ul {
list-style: none;
}
#box {
width: 1226px;
height: 100px;
margin: 0 auto;
background-color: #000;
}
#box ul {
/*overflow: hidden;*/
padding: 12px 0 0 30px;
/*width: 500px;*/
height: 88px;
/*background-color: red;*/
}
#box ul li {
float: left;
width: 60px;
height: 58px;
/*padding-top: 30px;*/
}
#box ul li.active {
width: 100px;
height: 88px;
background-color: green;
position: relative;
}
#box ul li.active .box {
position: absolute;
width: 234px;
height: 600px;
background-color: rgba(0, 0, 0, .5);
top: 88px;
left: -30px;
z-index: 80;
}
.clearfix:after {
content: '';
clear: both;
display: block;
}
.swiper {
width: 100%;
height: 460px;
}
.container {
width: 1226px;
position: relative;
margin: 0 auto;
}
.swiper span {
display: inline-block;
width: 41px;
height: 69px;
background: url("icon-slides.png") no-repeat 0 0;
position: absolute;
margin-top: -34px;
top: 50%;
cursor: pointer;
}
.swiper span.prev {
background-position: -83px 0;
left: 234px;
}
.swiper span.next {
background-position: -124px 0;
right: 0;
}
.swiper span.prev:hover{
background-position: 0 0;
}
.swiper span.next:hover{
background-position: -42px 0;
}
</style>
</head>
<body>
<div id="box">
<ul class="clearfix">
<li class="active">
<div class="box"></div>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div class="swiper">
<div class="container">
<img src="xmad.jpg" alt="" width="1226">
<span class="prev"></span>
<span class="next"></span>
</div>
</div>
</body>
</html>
要浮动一块儿浮动，有浮动清除浮动，浮动带来的好处：实现元素并排
今日内容
固定定位
1.脱标
2.固定不变
3.提升层级
参考点：
以浏览器的左上角为参考点
z-index
只适用与定位的元素，z-index:auto;
z-index只应用在定位的元素，默认z-index:auto; z-index取值为整数，数值越大，它的层级越高 若是元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。(与标签的结构有关系) 从父现象。一般布局方案咱们采用子绝父相，比较的是父元素的z-index值，哪一个父元素的z-index值越大，表示子元素的层级越高。
background背景
/*设置背景图*/
background-image: url("xiaohua.jpg");
background-repeat: no-repeat;
/*调整背景图的位置*/
background-position: -164px -106px;
border
border-radius 设置圆角或者圆
阴影
box-shadow: 水平距离 垂直距离 模糊程度 阴影颜色 inset
行内的水平和垂直居中
块的水平和垂直居中
周末做业
1.脑图 主要
2.小米商城 主要
3.预习 ： https://book.apeland.cn/details/358/
11.6 JavaScript基础
预习
判断一个变量是否是undefined，用typeof函数，typeof函数主要是返回的是字符串，主要这么几种："number"、"string"、"boolean"、"object"、"function"、"undefined" null==undefined ======> true null===undefined ======> false
1. js的引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行内js-->
<p id="" class="" style="" onclick="console.log(2);">mjj</p>
<!--内嵌-->
<script type="text/javascript">
//js代码
</script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
2.递增和递减运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var a = 1; # 定义一个变量
a ++;//a+=1;
console.log(a);
var a = 4;
// 先让a的值赋值给c 再对a++
var c = a ++; # 先赋值，再加1，a+=1
console.log(c);//4
console.log(a);//5*/
var c = ++a; # 先a+=1， 再赋值
console.log(c);//5
console.log(a);//5
</script>
</body>
</html>
3.拼接字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var name = 'wusir', age = 28;
var str = name + '今年是' + age + '岁了，快要结婚了，娶了个黑姑娘'; #字符串拼接1
console.log(str);
// es6的模板字符串 ``
var str2 = `${name}今年是${age}岁了，快要结婚了，娶了个黑姑娘`; #字符串拼接2
console.log(str2);
</script>
</body>
</html>
4.数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var arr = [1,'2','mjj'];
//解释器 遇到var声明的变量 会把var声明的变量提高到全局做用域下
var i;
var c;
for(i = 0;i < arr.length;i++){
console.log(arr[i]);
}
function fn(){
var d = 4;
}
// console.log(i,c);
</script>
</body>
</html>
5.流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var score = 100;
if(score > 80){
console.log('能够吃鸡了');
}else if(){
console.log('在家呆着');
}else if{
}else if{}
var weather = prompt('请输入今天的天气');
switch (weather) { # switch： 把输入的值和case的值对比
case '晴天':
console.log('能够去打篮球');
break;
case '下雨':
console.log('能够睡觉');
break;
default:
console.log('学习');
break;
}
// == ===
var a = 2;
var b = '2';
console.log(a == b);//比较的是值
console.log(a === b); //比较是值和数据类型
</script>
</body>
</html>
6.循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var arr = [8,9,0];
//1.初始化循环变量 2.循环条件 3.更新循环变量
for(var i = 0;i < arr.length; i++){
console.log(arr[i]);
}
// 1到100之间的数
// while
var a = 1;
while(a <= 100){
console.log(a);
a+=1;
}
</script>
</body>
</html>
7.函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function fn() {
switch (arguments.length) {
case 2:
console.log('2个参数')
break;
case 3:
console.log('3个参数')
break;
default:
break;
}
}
fn(2, 3);
fn(2, 3, 4)
</script>
</body>
</html>
8.对象Object【python中字典】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1.字面量建立方式
var obj = {};
obj.name = 'mjj';
obj.fav = function(){
//obj
console.log(this);
}
obj.fav();
//点语法 set 和get
console.log(obj.name);
//构造函数
var obj2 = new Object();
console.log(obj2);
obj2.name = 'wusir';
/*console.log(this);
function add(x,y) {
console.log(this.name);
console.log(x);
console.log(y);
}
// console.dir(add);
// add();
// add.call(obj,1,2);
add.apply(obj,[1,2]);
(function () {
console.log(this);
})()*/
class Person{
constructor(name,age){
//初始化
this.name = name;
this.age = age;
}
fav(){
console.log(this.name);
}
showName(){
}
}
var p = new Person('mjj',18);
p.fav();
</script>
</body>
</html>
9.数组的经常使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1,判断当前数组是否为数组，返回值是true,则证实是数组
var num = 123;
var arr = ['red','green','yellow'];
console.log(Array.isArray(arr));
console.log(arr.toString());//red,green,yellow
console.log(num.toString());
console.log(typeof num.toString());
console.log(arr.join('^'));
console.log(arr.push('purple')); //返回了数组的最新的长度
console.log(arr);
console.log(arr.pop());//返回删除的内容
console.log(arr);
//往数组的第一项上添加内容
console.log(arr.unshift('gray','black'));
console.log(arr);
console.log(arr.shift());
console.log(arr);
var names = ['女神','wusir','太白'];
// names.splice() //对数组进行添加，删除，替换操做
//name.slice(1) //对数组进行分割
// for(var i = 0; i < names.length; i++){
// names[i]
// }
names.forEach(function (index,item) {
console.log(index);
console.log(item);
});
function fn(a,b) {
//arguments.length 代指的实参的个数
//arguments它不是一个数组，它被称为叫伪数组
console.log(arguments);
for(var i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
}
fn(2,3,4);
console.log(fn.length);//形参的个数
var str = ' mjj '
</script>
</body>
</html>
10.日期对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var date = new Date();
console.log(date);
console.log(date.getDate());
console.log(date.getMonth()+1);
console.log(date.getFullYear());
console.log(date.getDay());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(date.toLocaleString());
var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
console.log(weeks[date.getDay()]);
var day = weeks[date.getDay()];
document.write(`<a href="#">${day}</a>`);
var a = 1 < 2 ? "yes": "no";
console.log(a);
</script>
</body>
</html>
11.数字时钟案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2 id="time"></h2>
<script>
var timeObj = document.getElementById('time');
console.log(time);
function getNowTime() {
var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
var temp = "" + ((hour > 12) ? hour - 12 : hour);
if (hour == 0) {
temp = "12";
}
temp += ((minute < 10) ? ":0" : ":") + minute;
temp += ((second < 10) ? ":0" : ":") + second;
temp += (hour >= 12) ? " P.M." : " A.M.";
timeObj.innerText = temp;
}
setInterval(getNowTime, 20)
</script>
</body>
</html>
12.window对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var name = 'mjj';
console.log(window);
console.log(window.name);
</script>
</body>
</html>
13.math对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var obj = {name:'mjj'};
function add() {
console.log(this.name);
}
// add();
// add.call(obj);
// add.apply(obj,[]);
//求最大值和最小值
var values = [1,2,36,23,43,3,41];
var max = Math.max.apply(null,values);
console.log(max);
var a = 1.49999999;
console.log(Math.ceil(a));//天花板函数
console.log(Math.floor(a))//地板函数
console.log(Math.round(a))//四舍五入
// 随机数
console.log(Math.random());
// min~ max
//0.113131313
function random(min,max) {
return min+Math.floor(Math.random()*(max-min))
}
console.log(random(100, 400));
// rgb(237,100,10)
</script>
</body>
</html>
11.7 BOM 、DOM
bom对象 dom对象
内容回顾
ECMAScript基础语法
1.基本数据类型和引用数据类型
基本数据类型:number,string,boolean,undefined,null 引用数据类型:Array,Object,Function
2.条件判断和循环
switch(name){
case 'xxx':
break;
case 'xxx':
break;
default:
break;
}
for(var i = 0; i < 10; i ++){
}
三元运算
1 > 3 ? '真的' : '假的';
3.赋值运算符，逻辑运算符
&& 跟py的and || or ! not i++ == 比较的值的 === 比较的值和数据类型
4.字符串的经常使用方法
slice() 切片，有一个参数，从当前位置切到最后，两个参数，顾头不顾尾
substring()
substr() 若是有两个参数，第二个参数表示切字符串的个数
拼接字符串
concat() 返回新的字符串
+
es6的模板字符串
`` 插入变量用${变量名}
//获取索引
indexOf()
lastIndexOf()
//获取字符
charAt()
//获取字符的ASCII码
charCodeAt()
//转大写
toUppercase()
//转小写
tolowercase()
typeof 校验当前变量的数据类型
trim() 清除左右的空格
5.数组的经常使用方法
toString()
join('*')
concat() # 数组拼接
//栈方法 后进先出
push() # 压栈
pop() # 出栈
//堆方法 先进先出
unshift()
shift()
splice(起始位置，删除的个数，添加的元素)； 对数组的增长，删除，替换
slice()
reverse()
sort() #排序 【后面的元素，只和第一个元素对比】
//迭代方法
for
forEach() 仅能在数组对象中使用
在函数中arguments 这个对象是伪数组，不能使用这个方法，只能用for循环遍历
6.对象
var obj = {
name:'mjj',
age:18
}
obj['name']
obj['fav'] = function(){}
obj.name
obj.fav = function(){}
function fn(name){
var obj = {};
obj[name] = 'mjj';
return obj;
}
fn('age')
//遍历对象
for(var key in obj){
obj[key]
}
7.函数
1.建立方法
（1）普通函数
function fn(){
}
fn();
(2)函数表达式
var fn = function(){}
(3) 自执行函数
;(function(){
this指向 必定是指向window
})()
全局做用域下，函数做用域，自执行函数都指向了window,函数做用域中this指向能够发生改变，可使用call()或者apply()
var obj = {name：'mjj'};
function fn(){
console.log(this.name);
}
fn();//是空值，由于函数内部this指向了window
fn.call(obj)//此时函数内部的this指向了obj
做用： 解决冗余性代码，为了封装
构造函数
new Object();
new Array();
new String();
new Number();
//使用构造函数来建立对象
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
//es6用class来建立对象
class Person{
constructor(x,y){
this.x = x;
this.y = y
}
toString(){
}
}
var p = new Person();
8.日期对象
var date = new Date(); date.getDate(); date.getMonth(); date.getDay(); date.getHours(); date.getMinutes(); date.getSeconds() date.toLocaleString() 2018/08/21 21:30:23
9.Math数学对象
Math.ceil();向上取整 天花板函数
Math.floor();向下取整，地板函数
Math.round()；标准的四舍五入
随机数
Math.random(); 获取0到1之间的数
function random(min,max){
return Math.floor(Math.random()*(max-min)) + min;
}
10.数值和字符串转换
1.数值转字符串 toString(); 数字+空的字符串 2.字符串转数值 parseInt() 转整数 parseFloat() 转浮点型 Number()
var a = NaN # not a number isNaN(a) Infinity 无限大的
今日内容
BOM
Browser Object Model 浏览器对象模型
【bom相关的api】
1.系统对话框方法
- alert() 警告框
- confirm() 确认框
- prompt() 提交框
2.定时方法 ***
一次性任务
var timer = setTimeout(callback,2000); clearTimeout(timer);
周期性循环
var timer = setInterval(callback,2000); # 异步 //清除定时器 关闭 clearInterval(timer);
3.location对象的属性和方法
DOM
获取节点对象的方式
标签，div span p
document.getElementById(); #经过id获取元素 document.getElementsByTagName(); # 经过标签名获取与元素 document.getElementsByClassName(); # 经过类名获取与元素
对样式操做
样式操做
style（）
box.style.color box.style.backgroundColor box.style.width ....
对属性设置
setAttribute(name,value); # 设置属性 getAttribute(name);
事件
onclick() # 点击时间 onmouseover() #鼠标通过 onmouseout() #鼠标离开
11.8 jQuery基础一
默认+内容回顾
1.列出至少5个以上数组的经常使用方法，并说明它们的含义
2.列出数学对象Math经常使用的三个方法，并说明它们的含义
Math.ceil() 向上取整 Math.floor() 向下取整 Math.random() 随机数 Math.round() 四舍五入取整
3.函数对象中，能够经过哪两个方法改变函数内部this的指向？
function fn(){
console.log(this);//this指向了window
}
fn.call(obj);
fn.apply(obj)
4.javascript的基本数据类型和引用数据类型有哪些？
基本数据类型：number,string,boolean,undefined,null 引用数据类型：Array,Object,Function,Date
5.对DOM的理解
D:document 文档 O:object 对象 M:model 模型
6.获取节点对象的三种方式
var b = document.getElementById()
document.getElementsByTagName()
var a = document.getElementsByClassName('active')
b.setAttribute();
7.如何设置节点对象的样式，属性，类？
设置样式
obj.style
设置属性
obj.setAttribute(name,value);
obj.getAttribute(name);
obj.className
obj.title
8.节点对象的建立，添加，删除分别用什么方法？
var op = document.createElement('p');
box.appendChild(op);
box.insertBefore(newNode,oldNode)
box.removeChild(op);
9.列出你所知道的js中的事件？
onclick onmouseover onmouseout onchange 聚焦 onselect 选中 onsubmit onload
10.定时方法有哪两个？写出对应的方法，并说明它们的含义
setTimeout(callback,毫秒) 一次性任务，延迟操做，异步 setInterval(callback,毫秒) 周期性循环任务 动画 css transtion tranform
11.设置值的操做
innerText 只设置文本
innerHTML 即设置文本，又渲染标签
针对与表单控件
inputText.value = '123';
<input placeholder=“请输入密码”>
今日内容
1.jquery介绍
jQuery是一个快速，小巧，功能丰富的JavaScript库。
它经过易于使用的API在大量浏览器中运行，
使得HTML文档遍历和操做，事件处理，动画和Ajax变得更加简单。经过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
操做: 获取节点元素对象，属性操做，样式操做，类名，节点的建立，删除，添加，替换
jquery核心：write less,do more
1.1 jquery对象转换js对象
$('button')[0]
1.2 js对象转换jquery对象
$(js对象)
2.jquery的选择器
- 基础选择器
- 高级选择器
- 属性选择器
- 基本过滤选择器
3.jq对象和js节点对象转换
$('.box') jquery对象 伪数组
$('#box')[0] jquery对象转js节点对象
4.基本选择器和高级选择器
- 基础选择器
#id $("#box")
.class $(".box")
element $("div")
- 高级选择器
后代选择器 $("div p") 选择p和p的子代的全部标签
子代选择器 $("div>p") 和p平级的都选
组合选择器 $("div,p")
交集选择器 $("div.box")
5.属性选择器
$('input[type=submit]') 属性选择器
<input type="submit" value='提交'>
6.过滤选择器和筛选方法
基本过滤选择器： :eq() 选择一个 索引从0开始 :first 获取第一个 :last 获取最后一个 :odd 获取奇数 :even 获取偶数 过滤的方法： .eq() 选择一个 索引从0开始 .children() 获取亲儿子 .find() 获取的后代 .parent() 获取父级对象 .siblings() 获取除它以外的兄弟元素
7.经常使用事件
8.样式操做
经过调用.css()方法
若是传入一个参数，看一下这个参数若是是一个字符串表示获取值，若是是对象，表示设置多少属性值，若是是两个参数，设置单个属性值
9.类操做
addClass() removeClass() toggleClass()
10.属性操做
attr(name,value);//设置属性 removeAttr(name);//删除属性
11.动画的方法
- 普通动画
show()
hide()
toggle() 切换【开关】
- 卷帘门动画
slideDown()
slideUp()
slideToggle() 卷帘门切换【开关】
- 淡入淡出效果
fadeIn()
fadeOut()
fadeToggle() 淡入淡出切换
- 自定义动画
.animate({params},speed,callback) #callback回调函数
# 做用：执行一组CSS属性的自定义动画。
第一个参数表示：要执行动画的CSS属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后，当即执行的回调函数（可选）
11.9 jQuery 基础二
1.对属性的操做
attr（） #获取属性（id，class），设置属性（id，class） removeAttr() #移除属性
2.文档的操做
3.事件
1)鼠标事件
<body>
<div id="box">
<div id="child"></div>
</div>
<input type="text">
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// mouseover 鼠标穿过父级元素和子元素都会调用方法
$('#box').mouseover(function(){
console.log('移入进来了');
$('#child').slideDown(1000);
})
$('#box').mouseout(function(){
console.log('移除了');
$('#child').slideUp(1000);
})
$('#box').mouseenter(function(){
console.log('进来了');
$('#child').stop().slideDown(1000);
})
$('#box').mouseleave(function(){
console.log('离开了');
$('#child').stop().slideUp(1000);
})
$('#box').hover(function(){
$('#child').stop().slideDown(1000);
},function(){
$('#child').stop().slideUp(1000);
})
//默认加载页面聚焦行为
$('input[type=text]').focus();
$('input[type=text]').focus(function(){
//聚焦
console.log('聚焦了');
})
$('input[type=text]').blur(function(){
//聚焦
console.log('失去焦点了');
})
$('input[type=text]').keydown(function(e){
console.log(e.keyCode);
switch (e.keyCode){
case 8:
$(this).val(' ')
break;
default:
break;
}
})
</script>
</body>
表单提交事件
增 删 改 查
4.ajax（了解）
<script type="text/javascript">
$(function(){
// 获取首页的数据
$.ajax({
url:'https://api.apeland.cn/api/banner/', # 接口
methods:'get',
success:function(res){
console.log(res);
if(res.code === 0){
var cover = res.data[0].cover;
var name = res.data[0].name;
console.log(cover);
$('#box').append(`<img src=${cover} alt=${name}>`)
}
},
error:function(err){
console.log(err);
}
})
})
</script>
5.jQuery插件
jQuery插件库 https://www.jq22.com/
6.H5小拓展
H5新标签 在05年被普遍使用 #音频 <audio src="static/BEYOND%20-%20情人.mp3" controls=""></audio> #画布 【作小游戏】 <canvas id="" width="" height=""></canvas> #视频 <video src="static/速度与激情7_bd.mp4" controls=""></video>
相关文章
- 1. 前端基础知识学习FreeCodeCamp
- 2. #前端学习#------基础知识
- 3. Python学习-基础篇12 前端知识之Javascript知识
- 4. java前端基础知识
- 5. 前端基础知识
- 6. 前端基础知识---HTML
- 7. 前端基础知识2018
- 8. 前端HTML5基础知识
- 9. Web前端基础知识
- 10. web前端基础知识！
- 更多相关文章...
- • Kotlin 基础语法 - Kotlin 教程
- • Scala 基础语法 - Scala教程
- • Kotlin学习（二）基本类型
- • Kotlin学习（一）基本语法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，帮助设计师远离996
- 2. 错误 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 报告速览，Kubernetes使用率跃升235%！
- 4. TVI-Android技术篇之注解Annotation
- 5. android studio启动项目
- 6. Android的ADIL
- 7. Android卡顿的检测及优化方法汇总（线下+线上）
- 8. 登录注册的业务逻辑流程梳理
- 9. NDK(1)创建自己的C/C++文件
- 10. 小菜的系统框架界面设计-你的评估是我的决策
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 前端基础知识学习FreeCodeCamp
- 2. #前端学习#------基础知识
- 3. Python学习-基础篇12 前端知识之Javascript知识
- 4. java前端基础知识
- 5. 前端基础知识
- 6. 前端基础知识---HTML
- 7. 前端基础知识2018
- 8. 前端HTML5基础知识
- 9. Web前端基础知识
- 10. web前端基础知识！