本周内容整理

内容概览

• 前端
  • HTML
    • head内常见标签
    • body内常见标签
    • 标签两大重要属性
    • 列表标签
    • 表格标签
    • 表单标签
    • 补充知识
  • CSS
    • 选择器
    • 字体样式
    • 背景样式
    • 边框样式
    • display属性
    • 盒子模型
    • 浮动布局
    • 溢出属性
    • 定位
    • z_index
  • JavaScript
    • 变量与常量
    • 数据类型
    • 运算符
    • 流程控制
    • 函数
    • 内置对象
    • BOM
    • DOM
    • 获取用户输入
    • 类属性操作
    • 样式操作
    • 事件
    • jQuery类库
    • Bootstrap框架

前端

HTML

head内常见标签

title：页面标签标题
style：内部编写CSS代码
link：外部导入CSS代码
script：支持内部编写JS代码或从外部导入
meta：通过不同属性可以实现许多功能

body内常见标签

• 基本标签
  h1~h6：标题标签
  p：段落标签
  hr：水平分割线
  br：换行
  u：下划线
  i：斜体
  s：删除线
  b：加粗
• 块级标签与行内标签
  h1~h6/p/hr/br：块级标签，一个标签默认独占一行
  u/i/s/b：行内标签，只占据自身内容大小的空间
• 基本符号
  &nbsp：空格
  &gt：大于
  &lt：小于
  &amp：&
  &yen：￥
  &cope：©
  &reg：®
• 布局标签
  div：块级标签
  span：行内标签
  块级标签可以嵌套任意标签，行内标签只能嵌套行内标签
  p标签属于块级标签，但是不能嵌套块级标签
• 常见标签
  a：链接标签，href链接地址，target打开方式
  img：图片标签，src链接地址，title鼠标悬浮提示信息，alt加载失败提示信息
• 标签两大重要属性
  id：每个页面不能有重复的id，是每个标签都独一无二的
  class：类似于分组，使多个标签归为一类

列表标签

• 无序列表
  ul>li
• 有序列表
  ol>li
• 标题列表
  dl>dt>dd

表格标签

<table>
	<thead>
		<tr>
			<th>name</th>
			<th>age</th>
			<th>gender</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>jason</td>
			<td>23</td>
			<td>male</td>
		</tr>
		<tr>
			<td>kevin</td>
			<td>20</td>
			<td>female</td>
		</tr>
	</tbody>
</table>

表单标签

<form action="" method="">
	文本框<input type="text">
	隐藏文本框<input type="password">
	日期选择<input type="date">
	email格式<input type="email">
	单选<input type="radio">
	多选<input type="checkbox">
	<select>下拉框
		<option>1</option>
		<option>2</option>
	</select>
	单文件<input type="file">
	多文件<input type="file" multiple>
	<textarea cols="50" rows="20">大文本框</textarea>
	提交按钮<input type="submit">
	重置按钮<input type="reset">
	普通按钮<input type="button">
</form>

补充知识

• 获取用户输入的标签两大重要的属性
  1. name属性：类似于字典的键
  2. value属性：类似于字典的值
• 获取用户输入的input标签理论上需要使用label配合
• 获取用户输入的input标签添加背景提示：placeholder属性
• 获取用户输入的标签如果不会传入值，则需要自己填写value
• 选择框默认选中
  1. radio与checkbox：checked属性
  2. select：selected属性

CSS

选择器

• 基本选择器
  标签选择器：标签名 {}
  类选择器：.类名 {}
  id选择器：#id名 {}
  通用选择器：* {}
• 组合选择器
  后代选择器：标签名 标签名 {}
  儿子选择器：标签名>标签名 {}
  毗邻选择器：标签名+标签名 {}
  弟弟选择器：标签名~标签名 {}
• 属性选择器
  查找有某个属性的标签：[属性名] {}
  查找某个指定值的属性的标签：[属性名=“值”] {}
  查找指定标签且指定属性名与值：标签名[属性名=“值”] {}
• 伪类选择器
  没有访问过的连接：a:link {}
  鼠标悬浮在标签上：a:hover {}
  点击链接：a:active {}
  访问过的链接：a:visited {}
• 伪元素选择器
  控制首字母：p:first-letter {}
  标签前添加：p:before {}
  标签后添加：p:after {}

字体样式

p {
font-family:'微软雅黑';  /*字体样式：*/
font-sizi: 24px;  /*字体大小：*/
font-weight:lighter;  /*字体粗细*/
color: red;  /*字体颜色*/
text-indent:28px;  /*缩进*/
text-align: center;  /*文本对齐方式*/
text-decoration: none;  /*文本装饰*/
}

背景属性

p {
background-color: red;  /*背景颜色*/
background-image: url;  /*背景图片*/
background-replace: no-replace;  /*背景重复*/
background-position: left;  /*背景位置*/
/*可以简写为 background: red url no-replace left*/
}

边框属性

p {
border-color: red;  /*边框颜色*/
border-sizi: 1px;  /*边框粗细*/
border-style: solid;  /*边框样式*/
border-radius: 50%;  /*设置为圆形*/
}

display属性

用以控制HTML的展示效果
none：不会展示
block：获得块级标签的特点
inline：获得行级标签的特点

盒子模型

margin：外边距
border：边框
padding：内边距
content：内容

浮动布局

float-left：向左浮动
float-right：向右浮动
clear属性：使左、右或两边不能有浮动标签

溢出属性

overflow
visible：默认值，会超出边框
hidden：超出边框会被裁剪
scroll：超出边框会被裁剪，提供滚动条查看被裁减内容
auto：超出边框会被裁剪，提供滚动条查看被裁减内容

定位

static：默认值，静态，不能通过定位修改位置
relative：相对定位，按照当前所在位置进行定位
absolute：绝对定位，按照已经定位的标签进行定位
fixed：固定定位，基于浏览器窗口进行定位

z-index

z-index值越高，层级也越高，层级更高的会优先展示

JavaScript

变量与常量

变量：使用var、let定义，可以修改绑定的值
常量：使用const定义，一旦定义不能修改

数据类型

• 数值类型(number)
  包含整数与小数
  NaN：代表不是一个数字，也是数值类型
• 字符类型(string)
  可以使用单引号、双引号和反引号
  反引号可以使用格式化
• 布尔类型(boolean)
  全字母小写
  0、none、‘’、[]、{}都属于false
• 对象(object)
  JS也是一切皆对象
  对象之数组：相当于Python中的列表
• 自定义对象(object)
  相当于Python中的字典
  两种定义方式：
  1. let d1 = {}
  2. let d1 = new Object()

运算符

• 算数运算符
  加+；减-；乘*；除/
  自增：++
  自减：–
• 比较运算符
  大于>；小于<；等于==；不等于!=
  强等于：===
  强不等于：!==
• 逻辑运算符
  &&：and
  ||：or
  !：not
• 赋值运算符
  =、+=、-=、*=、/=

流程控制

• 分支结构
  1. 单if分支：if(条件){条件成立执行的代码}
  2. if…else分支：if(条件){条件成立执行的代码}else{条件不成立执行的代码}
  3. if…else if…else分支：if(条件1){条件1成立执行的代码}else if(条件2){条件2成立执行的代码}else{条件都不成立执行的代码}
• 循环结构
  1. for循环：for(let i,条件,一次循环结束后执行的操作){循环体代码}
  2. while循环：while(条件){循环体代码}

函数

function 函数名(形参){
函数体代码
return 返回值
}
匿名函数：
function(形参){
函数体代码
return 返回值
}
箭头函数：
形参 => 返回值

内置对象

• Date日期对象
  getDate：获取日
  getDay：获取星期
  getMonth：获取月
  getYear：获取年
  getFullYear：获取完成年份
  getHours：获取小时
  getMinutes：获取分钟
  getSeconds：获取秒
  getTime：获取时间戳
• JSON序列化对象
  stringify：序列化
  parse：反序列化
• RegExp正则对象
  两种使用方式：
  1. let reg1 = new RegExp(‘正则语句’)
  2. let reg2 = /正则语句/

BOM

通过写JS代码与浏览器交互
关键字：window
window.open()：打开新网页
window.close()：关闭网页

• navigator浏览器对象
  window.navigator.userAgent()：获取客户端信息
• history浏览历史对象
  window.history.forward()：前进一个网页
  window.history.back()：后退一个网页
• location对象
  window.location.href：获取当前网址
  window.location.href = 网址：去指定网址
  window.location.reload()：重新加载
• 弹出框
  alert()：警告框
  confirm()：确认框
  prompt()：提示框
• 定时器相关
  setTimeout(JS语句,毫秒数)：指定多少秒后触发一次JS语句
  clearTimeout(定时器)：取消定时任务
  setInterval(JS语句,毫秒数)：周期性的触发JS语句
  clearInterval(定时器)：取消周期性的定时任务

DOM操作

通过写JS代码与HTML交互
关键字：document

• 查找标签
  document.getElementId()：通过id查找
  document.getElementsClassName()：通过类查找
  document.getElementsTagName()：通过标签查找
• 间接查找
  parentElement：父节点标签
  children：所有子标签
  firstElementChild：第一个子标签
  lastElementChild：最后一个子标签
  nextElementSibling：下一个兄弟标签
  previousElementSibling：上一个兄弟标签
• 新建节点
  document.createElement(‘标签名’)
• 属性操作
  标签对象.属性：只能点出默认属性
  标签对象.setAttribute()：可以是默认属性与自定义属性
• 文本操作
  标签对象.innerText：标签内的文本
  标签对象.innerHTML：标签内html内容
• 获取用户输入
  标签对象.value：获取普通数据
  标签对象.files：获取文件数据
• 类属性操作
  标签对象.classList：获取标签所有的类
  标签对象.classList.contains()：判断标签里是否有指定类
  标签对象.classList.add()：添加类
  标签对象.classList.remove()：删除类
  标签对象.classList.toggle()：切换，如果有删除，如果没有则添加
• 样式操作
  标签对象.style.样式属性名 = “属性值”

事件

onclick：单击触发
ondblclick：双击触发

onforus：元素获取焦点
onblur：元素时区焦点
onchange：域的内容被改变

onkeydown：键盘按键被按下
onkeypress：键盘按键被按下并松开
onkeyup：键盘按键被松开

onload：页面或图片加载完成

onmousedown：鼠标按键按下
onmousemove：鼠标被移动
onmouseout：鼠标被移开
onmouseover：鼠标移动到某个元素上

onselect：在文本框中的文本被选中时触发
onsubmit：确认按钮被点击，使用的对象时form

• 绑定事件的两种方式
  1. 标签内绑定
     
     function func1(){}
  2. 先查找标签，然后绑定
     let btnEle = document.getElementById(‘d1’)
     btnEle.onclick = function(){}

获取用户输入

获取普通数据：标签对象.value
获取文件数据：标签对象.files

类属性操作

标签对象.classList				//获取所有类
标签对象.classList.contains()	//判断对象中是否有某个类
标签对象.classList.add()			//添加一个类
标签对象.classList.remove()		//删除一个类
标签对象.classList.toggle()		//有某个类就删除,反之则添加

样式操作

标签对象.style.标签样式属性名

事件

相当于让标签在某种条件下触发额外的功能
绑定事件有两种方式：方式1是提前写好函数，在标签中绑定；方式2是先查找标签，然后绑定

jQuery类库

极大地简化JavaScript编程，能够兼容多款浏览器
使用前需要先导入

基本使用

//基本选择器
$('#id')	//id选择器
$('.cls')	//类选择器
$('tag')	//标签选择器

jQuery查找的标签不能够直接使用原来的方法，JS查找到的标签也不能直接使用jQuery的方法；需要先转换再使用

基本选择器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

表单筛选器

只能够在表单中使用
直接使用冒号加类型即可

筛选器方法

$("#id").next()  			// 下一个标签
$("#id").nextAll()			// 后边所有标签
$("#id").nextUntil("#i2")	// 后边所有标签遇到指定标签停止

$("#id").prev()				// 上一个标签
$("#id").prevAll()			// 前边所有标签
$("#id").prevUntil("#i2")	// 前边所有标签遇到指定标签停止

$("#id").parent()			// 父标签
$("#id").parents()  		// 查找当前元素的所有的父辈元素
$("#id").parentsUntil() 	// 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

$("#id").children();		// 儿子们
$("#id").siblings();		// 兄弟们

操作标签

addClass()					// 添加类
removeClass()				// 删除类
hasClass()					// 判断是否有指定类
toggleClass()				// 切换

.css('样式名','样式值')		// 设置css样式

text()						// 标签中文本
html()						// 标签中html代码
val()						// 获取传入的普通数据
[0].files					// 获取传入的文件数据

attr()  					// 设置属性 
prop()						// 设置动态变换的属性(checked)

append()					// 尾部追加
prepend()					// 首部添加
after()						// 当前标签后插入
before()					// 当期标签前插入


remove()					// 移除标签
empty()						// 清空标签

jQuery绑定事件

JS绑定事件
	标签对象.on事件名 = function(){事件代码}
		btnEle.onclick = function(){alert(123)}
jQuery绑定事件
	方式1
		jQuery对象.事件名(function(){事件代码})
			$btnEle.click(function(){alter(123)})
	方式2
		jQuery对象.on('事件名',function(){事件代码})
			$btnEle.on('click',function(){alter(123)})

阻止后续事件与事件冒泡

使用return false即可

事件委托

事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托
$('div').on('click','button',function () {
            alert('123')
        })
上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)

Bootstrap框架

提前写好了所有标签样式，直接拷贝使用即可
使用前需要先导入
Bootstrap涉及到js的部分需要使用jQuery