目录
- 前端：
- html：
- 标签：
- 内联标签（行内元素）
- 块级标签（占满一整行）
- css：
- 样式
- 选择器：
- JavaScript：
- 基础的数据类型
- 内置对象类型
- 数据类型之间的转换
- 运算符
- 流程控制
- 函数:
- 正则：
- Date对象
- 面向对象(了解):
- DOM
- BOM
- 练习：
- jQuery
- jquery选择器
- jquery筛选器
- 事件的绑定
- 标签的文本操作（重要）
- 标签的操作
- 标签的属性操作
- 类的操作
- value值
- css样式
- 滚动条
- 盒子模型
- 动画
- 事件
- 页面的加载
- each
- 练习
- bootstrap
- bootstrap框架示例：
- 全局CSS样式：
- 组件
前端：
需要了解的原理：
JS特点：
- js是一个轻量级的语言，可以插入html页面的编程语言处理逻辑
JS和html css的区别：
html是纯文本文件，使用标签来描述问题，而css是描述标签的样式，让页面更好看，而js是一个轻量级的语言，他可以切入到html页面的编程语言，js也是可以处理逻辑
什么是jquery：
jquery是一个快速简洁的js框架，封装了js代码的模块，极大的简化了js的编程
优势：
js代码对浏览器的兼容性做的更好了
隐式循环
链式操作
封装了js代码的模块，封装了dom节点，封装了操作dom节点的简便方法
web端的组成：
html 纯文本文件，使用标签来描述文字的，是一种描述性的标记语言
css 描述了标签的样式，让页面更好看
js/jq 动态的效果
http和socket：
前端是怎么交互的：http基于tcp-socket协议，后端发送的字符串到前端来，前端浏览器进行渲染，然后将发来的内容展示到网页上
http reques ：http请求
http response ：http响应
html：
超文本标记语言就是纯文本文件，使用标签来描述文字的，是一种描述性的标记语言
超文本：图片，音频，视频
标记：所有内容都是包裹在标签中
切记标签一定要闭合
标记（标签）的分类：
双标标记：
单标标记：
（单闭合标记）
标签：
head：一个人的思想
- 写在head标签的内容不不可见
title:
- 9989整个网页的标题，游览器最上方显示
meta:
- 网页的源信息，收录，编码，游览器版本，关键字，网页的描述
boby：显示的代码
#版本，默认html5 #编码 #head下的内容不可见 #百度收录 #重定向
内联标签（行内元素）
注释：
字体标签：b标签加粗，strong标签不换行
斜体：i标签或者em
上下标：sup sub
中划线：del或s del新标签，在字符串中划一条横线
下划线：u
空格：br/ 换行
特性：空白折叠， 空格，< 大于号，> 小于号
span：没有任何样式的标签
img 单边标签-内联：
src 图片的网络地址，（width宽度 height高度）宽高二选一
src 本地路径存放 img/0.jpg
alt 在图片加载失败的时候显示内容，用户体验，爬虫
a 超链接标签：
target：
- self：默认在当前网页打开
- _blank：在新网页跳转打开
- title：鼠标悬浮显示小标题
块级标签（占满一整行）
标题标签：h1-h6
段落标签：
没有样式：
分割线 ：
分割线
列表：
ul：无序列表：常用
属性type:disc(默认)\square(实心方形)\circle(空心圆)\none(不显示样式)- 手机
- 电脑
- 旧电脑
- 旧家具
- 旧电脑
- 旧家具
- 旧电脑
- 旧家具
ol ：有序列表
属性type:1(默认)\a(小写字母)\A(大写字母)\I(罗马数字) 属性start:开始位置（了解）- 长头发
- 旧家电
- 长头发
- 旧家电
- 长头发
- 旧家电
- 长头发
- 旧家电
dl：定义列表：
- title
- alex
- wusir
- 太白
- title
- alex
- wusir
- 太白
list-style：去掉列表样式：
在css中去掉列表的样式 ul,li{ list-style: none; }
表格：
标准表格:thead tbody的内容
tr表示每一行 表头：th表示thead中的每一个元素 内容：td表示tbody中的每一个元素 如果要将两个单元格合并，那肯定就要删掉一个单元格。 单元格的属性： colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。 rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上 border线框 cellpadding内容距离 ellspacing外边框距离第一列 第二列 第三列 第一个值 dudu 第二个值 wahaha ab钙 第三个值 wahaha 不写thead只写tbody 就没有表头样式
第一个值 dudu 第二个值 wahaha ab钙 第二个值 wahaha
from 表单：
input 输入框 ：
form : 表单标签 action : 提交到的地址,把表单中的数据提交到对应的地址上 input : type种类:text,password,radio,checkbox,submit name:value :把数据提交到后台的,提交的是input标签的name值和value值 placeholder:输入框的默认提示文字 checked: checked属性表示默认选中 readonly :对于输入框的禁止修改 可以提交 disabled :对于所有元素不能修改 也不能提交 button : input的submit类型和button放在form表单中都表示提交
其他类型：
reset：重置 hidden：隐藏输入框 button：普通按钮 file：文件选择框 date：日期输入框 注意: 如果是file类型的input标签需要修改表单的enctype类型Multipart/form-datalable+input：
lable: for属性,点击lable中的内容,让for标示的id对应的元素获得焦点textarea 文本框：
#内容较多时使用select 选择框：
select选择框: multiple:设置多选框 size:选择框内显示数量 option选项: selected:默认选中 import socket sk = socket.socket() sk.bind(('192.168.13.80',8899)) sk.listen() try: conn,addr = sk.accept() ret = conn.recv(1024) print(ret) with open('demo-01.html',encoding='utf-8') as f: conn.send(f.read().encode('GBK')) except Exception as e: print(e) finally: conn.close() sk.close()
css：
层叠样式表，作用就是给HTML页面标签添加各种样式
样式
样式的引入：
Title 几个基础样式
qqxingqqxing
选择器：
基本选择器（中要）
标签：div 类：.sp id：#div1 通用选择器:*
标签名直接选择标签,#选择id, .表示class,*表示所有标签
1.样式的继承 : 子元素会继承父元素的样式(但是a标签除外)
2.要想对a标签进行样式设置,必须直接找到a标签的位置,对a单独设置
3.样式之间的重叠部分是有优先级的,继承下来的样式的优先级为0(最低)
#div1{ #内容标签的会进行匹配
color: cornflowerblue;}
.sp{
color: orangered;}
*{ #通用选择器:所有的标签都会被选中
color: yellow;}
#内容id class优先级高
wahaha1
我是一个div1-span
只有span
wahaha2
我是一个div2-span
我是一个div-span
高级选择器
后代选择器:div p 表示div标签下的所有的p标签
子代选择器:div>p 表示div下面一层所有的p标签
毗邻选择器:div+p 找div的兄弟标签中的下一个p标签
弟弟选择器:div~p 找div下的所有弟第p标签
属性选择器:div[title] div[title='aaa'] 找到所有含有title属性的div/找到所有title属性='aaa'的div
并集选择器:ul,li 所有,分隔的标签都要找到
交集选择器:div.aa 找所有class='aa'的div标签
伪类选择器:a:active鼠标按下 link连接未访问之前 visited连接访问后
input:focus 输入框获得焦点
hover:鼠标悬浮
伪元素选择器:first-letter第一个字的样式
before(after)值这个标签的前面(后面)加content,给这个content设置样式
后代\子代：
后代选择器：找的是子孙
子代选择器：只找子代
后代选择器:表示div 标签下的所有span标签
Title
我是div标签的content
西红柿色1
在div-p标签中
西红柿色2
我只是一个单纯的span标签
子代选择器：div>span 表示div下面一层所有的span标签
Title
我是div标签的content
西红柿色1
在div-p标签中
西红柿色2
我只是一个单纯的span标签
毗邻+\弟弟~
毗邻: span+a 找div兄弟标签中的下一个p标签
弟弟: span~a 找div下的所有弟弟p标签
并集交集选择器
并集：逗号分隔的标签都要找到
- u-first
- o-first
交集选择器:只有class中含有box1.box2才可以渲染染色
box1box2
box1
aaa
span标签
属性选择器（属性对应属性）
属性选择器 [属性]/[属性='值']
伪类选择器：
a : link：没有被访问a标签的样式 visited：访问过后的颜色 active：输入点击摁住的颜色
input: focus 输入框获得焦点，框内背景色
通用: hover 鼠标悬浮时候的颜色
京东
校花
伪元素选择器:
first-letter：设置第一个首字母样式
before ：在内容前添加样式
after : 在内容后面添加样式*****
春江水暖鸭先知
css选择器优先级：
行内>id选择器>类选择器>标签选择器>继承
1000 100 10 1 0
所有的值可以累加但是不进位
优先级如果相同,写在后面的生效
aaa #id优先级最高，之后是类，最后是标签
bbb
ccc
ddd
颜色表示：
rgb表示法:
rgb :red green blue 光谱三原色
rgb(255,255,255) 白色
rgb(0,0,0) 黑色
16进制的颜色表示法
#000000-#FFFFFF
#000 - #FFF
单词表示法:
# red green
rgba表示法:
#a表示的是透明度 0-1,0是完全透明,1是不透明
https://htmlcolorcodes.com/zh/yanse-ming/
字体:
我是一个p标签
我是一个p标签
娃哈哈
文本:
text-align 文字的水平对齐
left 左对齐
center 居中
reght 右对齐
text-decoration 文本装饰
none; 没有下划线
line-through; 中划线
overline; 上划线
underline; 下划线
text-indent 文本缩进
text-indent: 2em; em单位是一个相对单位,相对当前字体大小的像素是1em
line-height 行高,设置行高=容器高度,文字自动垂直居中
line-height: 200px;
文字溢出
Title
各国领导人感谢中方作为东道主对各国参展给予的大力支持
各国领导人感谢中方作为东道主对各国参展给予的大力支持
各国领导人感谢中方作为东道主对各国参展给予的大力支持
各国领导人感谢中方作为东道主对各国参展给予的大力支持
背景图片:
background-color: red; 在没有背景图片覆盖的范围显示背景颜色
background-image: url('timg.jpg'); 设置背景图片
height: 400px;
width: 400px;
background-repeat: no-repeat; 设置图片不重复 repeat-x水平重复 repeat-y垂直重复
background-position: right top; 图片的位置 左中右x 上中下y
/*left center right /top center bottom*/
background-attachment: fixed; 在窗口中固定图片的位置，滚动位置不变
background:red url("timg.jpg") no-repeat left center; 把所有的设置综合写在background中
大长腿
边框的设置:
width: 100px;
height: 100px;
border-color: tomato green gray yellow;
border-width: 1px 3px 5px 7px;
border-style: solid dotted dashed double;
/*一个值:上下左右
四个值:遵循顺时针上右下左
三个值:上 右左 下
两个值:遵循上下 左右
border-top-style:dotted; 单独设置顶线的样式(top,left,bottom,right)
border-left-style:solid; 单独设置左边线的样式
border-top-color:red; 单独设置顶线颜色
border:yellow solid 10px; 统一设置边框的颜色 样式 宽度 ***
示例：
海洋
手机
小米商城
块和行内的概念\转换:
- 行内元素：
- 与其他行内元素并排；
- 不能设置宽、高。默认的宽度，就是文字的宽度
- 块级元素：
- 霸占一行，不能与其他任何元素并列；
- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%
示例：
display的属性值 : block块 inline行内 inline-block行内快 none display: block; 独占一行，元素合并在一行内，并且可以设置宽高 display: inline-block; 既可以设置宽高又不会独占一行 行内\块转行内快 ******常用 display: inline; 表示一个行内元素,不能设置宽高 display: none; 不仅不显示内容,连位置也不占了 手机 小米商城
盒模型:
在网页中显示方方正正的盒子称为盒模型
盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。
border : 边框的宽度 padding : 内边距的距离 content : width height 背景包含的部分:padding + conntent 计算一个盒子的总大小: 宽width+2padding+2border 高height+2padding+border 外边距 margin 上下的盒子如果设置bottom和top会导致塌陷,取两个设置的最大值作为外边距 margin: 0 auto;表示左右居中(父盒子宽度,子盒子宽度) 分方向的设置 border-top border-right border-bottom border-left padding-top padding-right padding-bottom padding-left margin-top margin-right margin-bottom margin-left 给图形设置圆角 border-radius: 5px; 盒子模型：盒子的大小 宽+padding*2+边*2 高+padding*2+边*2盒子2盒子居中：
body>你好三角形：
图片变圆：
#img直接行内引用调用style块
浮动:
float：表示浮动的意思。它有四个值。
-
-
- none: 表示不浮动，默认
- left: 表示左浮动
- right：表示右浮动
-
-
示例：
浮动的元素会脱离标准文档流,原本块级元素就不再独占整行了 并且在原页面中也不占位置了,之后的元素会挤到页面上影响页面的排版 清除浮动 clear:both 伪元素清除法: .clearfix:after{ content: ''; clear: both; display: block; }主页的内容示例：主页的内容
overflow:
内容多余标签的大小
示例：
visible 可见(默认) hidden 超出部分隐藏 scroll 超出显示滚动条两只老虎，两只老虎跑得快
两只老虎，两只老虎跑得快
两只老虎，两只老虎跑得快
两只老虎，两只老虎跑得快
两只老虎，两只老虎跑得快
定位:
定位有三种：相对定位、绝对定位、固定定位
position : 相对：relative 绝对：absolute 固定：fixed top:10px; right:10px; bottom:10px; left:10px; 相对定位 :相对自己原来的位置移动,移动之后还占据原来的位置 绝对定位 :固定在页面不会随着页面而走动，不会占据原来的位置,层级的提升 作用：页面布局常见的“父相子绝”，一定要会！！！！ （绝对定位是相对于整个html页面,不会占据原来的位置,层级的提升 如果我们设置了绝对定位的元素 的父元素 没有设置position,那么我们对元素的所有设置都是基于整 个页面 如果设置了position,那么子盒子的absolute位置会根据父盒子的位置定位 父相子绝:子元素设置的绝对位置会对应着祖级元素的相对位置） 固定定位 :固定是相对于整个窗口的，随着窗口移动 作用： 1.返回顶部栏 2.固定导航栏 3.小广告你好你好娃哈哈
z-index 优先级:
指的就是各个盒子重叠在一起谁上谁下的问题。
四大特性，只要你记住了，页面布局就不会出现找不到盒子的情况。 z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。 从父现象：父亲怂了，儿子再牛逼也没用示例：
opacity 透明度：
透明度示例
大长腿
JavaScript：
javascript介绍:
可以处理逻辑
可以和浏览器交互，不够严谨
javascript包含:
ECM Ascript js的一种标准化规范 标出了一些基础的js语法
DOM document object model 文本对象模型 主要操作文档中的标签
BOM browser object model 浏览器对象模型 主要用来操作浏览器
js引入和script标签
方式一:在html页写js代码 方式二: 引入js文件（项目中常用）
结束符和注释
结束符 ; 是js代码中的结束符 单行注释 // alert('hello,world'); 多行注释 /*多行注释*/
变量
创建变量名
变量名 : 数字\字母\下划线\$ 创建变量的关键字var :var a = 1; 创建变量的时候可以不指定数据类型 创建变量但不赋值 :var a; a创建出来就是一个undefined未定义
输入输出：
示例：
弹出框alert alert('hello') 弹出框中的内容是"hello" 弹出输入框 var inp = prompt('问句') 弹出输入框,输入的内容会被返回给inp 控制台输出 console.log(变量或值)
基础的数据类型
查看类型
两种方式： typeof 变量; typeof(变量);boolean 布尔值：
true : [] {} false : undefined null NaN 0 ''null 空和undefined未定义：
null 表示空 boolean值为false undefined 没有定义 创建变量但是不赋值 boolean值为false
number-数字:
数字：
整数 var a = 1 小数 var b = 1.237 保留两位小数 b.toFixed(2) //1.24
str-字符串:
字符串：
var s1 = '单引号' var s2 = '双引号都是字符串的表达方式'字符串常用方法：
属性 : .length 方法: trim() #去空白; ww = ee.trim() concat #拼接： var str1 = "胡"; var str2 = "海洋"; console.log(str1.concat(str2)); 结果：胡海洋 charAt(索引) #给索引求字符 var str1 = "胡海洋"; console.log(str1.charAt(0)); indexOf(字符) #给字符求索引 var str1 = "胡海洋"; console.log(str1.indexOf("洋")); slice(start,end) #切片，顾头不顾尾, var str1 = "胡海洋"; console.log(str1.slice(0,2)); .toLowerCase() #全部变小写 .toUpperCase() #全部变大写 console.log(str.toLowerCase()); console.log(str.toUpperCase()); .split(',',2) #根据(第一个参数)分隔符切割,切前多少个结果，切割完变成列表 var str = '哈哈哈|哒哒哒|嘟嘟嘟'; console.log(str.split('|'));
内置对象类型
数组 Array
数组就是python中的列表：
创建: var arr = ['a','b','c']; var arr2 = new Array(); #创建一个空的列表 索引操作: arr[0] 查看
Array常用的属性和方法
属性:length 方法: var li = ["胡"] index #根据索引进行赋值 li[1]="海" .push() #尾部追加元素 li.push("洋"); .pop() #删除最后一个元素，并获取 li.pop(2) .unshift() #头部插入元素 .shift() #头部移除元素 li.unshift("宝宝") li.shift("宝宝") .slice(start, end) #切片 li.slice(0,1) .reverse() #在原数组上进行反转，有问题可以在翻转回来 li.reverse(); .join(seq) #a1.join('|')， 将数组元素连接成字符串 console.log(li.join("|")); .concat(val, ...) #多个数组合并,得到一个新数组，原数组不变 var li = ["胡", "海", "洋"] var l2 = ["徐","俊","丽"] var l3 = li.concat(l2); .sort() #排序 function sortNumber(a,b){ return a - b} var arr1 = [11, 100, 22, 55, 33, 44] arr1.sort(sortNumber) .splice() li.splice(0,2); #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素) 删除元素，并向数组添加新元素。
自定义类型
示例
var obj = {"name":"海洋"}
JSON：
示例：
#字典key json之后都会变成字符串 var str1 = '{"name": "chao", "age": 18}'; var obj1 = {"name": "chao", "age": 18}; # JSON字符串转换成对象 var obj = JSON.parse(str1); # 对象转换成JSON字符串 var str = JSON.stringify(obj1);
数据类型之间的转换
转换示例
string --> int #字符串转数字 parseInt('123') //123 parseInt('123abc') //123 parseInt('abc') //NaN not a number string --> float parseFloat('1.233') float/int --> String var num = 123 String(123) #小数转字符串 推荐 var str = num.toString() #数字转 任意类型 --> Boolean Boolean(数据) #字符串和数字相加 --> 字符串 #字符串和数字相减 --> 数字
运算符
赋值运算符
= += -= *= /= %=
比较运算符
> < >= <= == != 不比较类型 （常用） === !== 比较类型和值(常用)
算数运算符
+ - * / % ** ++ -- var a = 1 undefined var b = a++ // a=2 b=1 var c = ++a // a=3 c=3
逻辑运算符
&& 逻辑与 ||逻辑或 !逻辑非 true && true //true true || false //true !true //false
流程控制
特点
所有的代码块都是用{}标识的 所有的条件都是用()标识的
if 判断语句：
#if 单分支 var ji = 20; if(ji >= 20){ console.log('恭喜你，吃鸡成功，大吉大利') } #if else var ji = 20; if (ji > 2){console.log("大于")} else{console.log("小于")}; #多层if判断 if (true) { //执行操作 }else if(true){ //满足条件执行 }else if(true){ //满足条件执行 }else{ //满足条件执行 }case语句
# 和if语句也可以实现，case多了一个默认输入（了解就行） var err_type = 'info' switch(err_type) { case 'warining': console.log('警告'); break; case 'error': console.log('错误'); break; default: console.log('没错') }
while-循环
var i = 1; #初始化循环变量 while(i<=9){ #判断循环条件 console.log(i); i = i+1; #更新循环条件 }
for-循环
# 方式一: for(var i = 1;i<=10;i++){ console.log(i) } # 方式二: for 相当于python中的range(len(arr)) var arr = [1,2,3,4,5] for (i in arr){ console.log([i]) }
三元运算符
# var 结果 = boolean表达式 ? 为true返回的值:为false返回的值 var a = 1 var b =2 var c = a>b ? a:b //如果a>b成立返回a，否则返回b console.log(c)
函数:
函数结构：
function 函数名(参数){ 函数体 return 返回值 } 函数名(参数) #注意 : 传递的参数可以和定义的个数不一样,但是不要这么写 # 返回值只能有一个
伪数组
#arguments伪数组 function add(){ console.log(arguments); } add(1,2,3,4) function add(a,b){ console.log(arguments); } add(1,2,3,4)
匿名函数
var add = function(){ console.log('hello,world'); } add() #调用
自调用函数
(function(a,b){ console.log(a,b) })(1,2)
正则：
示例：
创建一个正则: var reg = RegExp('正则表达式') //注意,写在字符串中所有带\的元字符都会被转义,应该写作\\ var reg2 = /正则表达式/ //内部的元字符就不会转义了 reg.test('待检测的字符串') //如果字符串中含有符合表达式规则的内容就返回true,否则返回false 在字符串中应用正则 var exp = 'alex3714' exp.match(/\d/) //只匹配从左到右的第一个 exp.match(/\d/g) //匹配所有符合规则的 返回一个数组 var exp2 = 'Alex is a big sb' exp2.match(/a/) //只匹配小写a exp2.match(/a/i) //i表示不区分大小写 A也会被匹配出来 exp2.match(/a/ig) //不区分大小写并匹配所有 exp.search(/正则表达式/i) //不区分大小写,从exp字符串中找出符合条件的子串的第一个索引位置 exp.split(/正则表达式/i,n) //不区分大小写,根据正则切割,返回前n个结果 exp.replace(/正则/gi,'新的值') //i表示不区分大小写,g表示替换所有,将符合正则条件的内容替换成新的值 小问题1 var reg2 = /\d/g //正则表示要匹配多个值 reg2.test('a1b2c3') //多次test会的到true true true false 继续test会循环之前的结果 小问题2 var reg3 = /\w{5,10}/ reg3.test() //如果什么都不写,那么默认test中传递undefined参数,刚好可以符合9位字符串的规则
Date对象
创建时间对象：
#创建对象: var dt = new Date() //获取到当前时间 #时间转换 dt.toLocalString() //转换成'2019/8/13 10:18:12' dt.getFullYear() //年 dt.getMonth() //月 1月是0 dt.getday() //周中天 周日是0 dt.getDate() //月中天 1号是1 dt.getHours() //时 从0开始 dt.getMinutes() //分 从0开始 dt.getSeconds() //秒 从0开始 自定义时间: var dt2 = new Date('2018/1/1 12:12:12') 1月1日 var dt2 = new Date(2018,1,1); 2月1日
Math对象：
Math.abs(x) 返回数的绝对值。 pow(x,y) 返回 x 的 y 次幂。 round(x) 把数四舍五入为最接近的整数。 sqrt(x) 返回数的平方根。 exp(x) 返回 e 的指数。 log(x) 返回数的自然对数（底为e）。 sin(x) 返回数的正弦。 tan(x) 返回角的正切。
面向对象(了解):
面向对象：
function Student(name,age){ this.stu_name = name this.stu_age = age } Student.prototype.show = function(){ console.log(this.stu_name,this.stu_age) } var stu = Student('alex',84) // 实例化 stu.stu_name // 查看属性 stu.stu_age stu.show() // 调用方法 object.prototype.show = function(){ console.log(this.stu_name,this.stu_age) }
DOM
什么是dom：
document object modle 文档对象模型 整个文档就是一颗树 树当中的每一个节点都是一个对象 : 这个对象中维系着 属性信息 文本信息 关系信息 在页面上还有一些动作效果: 根据人的行为改变的 点击 鼠标悬浮 自动在改变的
js是怎么给前端的web加上动作的：
1.找到对应的标签 2.给标签绑定对应的事件 3.操作对应的标签
查找标签
直接查找：（元素就是样式）
var a = document.getElementById('baidu') //直接返回一个元素对象 console.log(a) var sons = document.getElementsByClassName('son') //返回元素组成的数组 console.log(sons) sons[0] //获取到一个标签对象 var divs = document.getElementsByTagName('div') //返回元素组成的数组 console.log(divs) #示例：
间接查找：
#找父亲 var a = document.getElementById('baidu') console.log(a) var foodiv = a.parentNode //获取到父节点的对象 console.log(foodiv) #找儿子 var foo= document.getElementById('foo') foo.children #获取所有的子节点,返回一个数组 foo.firstElementChild #获取第一个子节点 foo.lastElementChild #获取最后一个子节点 console.log(a) #找兄弟 var son1 = document.getElementById('son1') console.log(son1) var son2 = document.getElementById('son2') console.log(son2) var a = son1.nextElementSibling #找下一个兄弟 返回一个对象 son1.previousElementSibling #找上一个兄弟 返回一个对象，如果没有兄弟返回null console.log(a)
操作本身的标签
标签的创建
var obj = document.createElement('标签名') // a div ul li span obj就是一个新创建出来的标签对象
标签的添加
父节点.appendChild(要添加的节点) //添加在父节点的儿子们之后 父节点.insertBefore(要添加的节点,参考儿子节点) //添加在父节点的某个儿子之前 #添加节点，前要先创建好一个标签 #insertBefore
标签的删除
父节点.removeChild(要删除的子节点 # obj.removeChild(obj2) 子节点1.parentNode.removeChile(子节点2)
标签的替换
父节点.replaceChild(新标签,旧儿子)
标签的复制
节点.cloneNode() //只克隆一层 节点.cloneNode(true) //克隆自己和所有的子子孙孙 注意 :如果克隆出来的标签的id是重复的,那么修改之后才能应用到页面上
节点的属性
操作方法：
节点对象.getAttribute('属性名') #获取节点属性 节点对象.setAttribute('属性名','属性值') #设置节点属性 节点对象.removeAttribute('属性名') #删除节点属性
节点的文本：
操作方法：
节点对象.innerText = '只能写文字' 节点对象.innerHTML = '可以放标签' #示例：haiyangxujunli
获取节点值：
操作方法：
#输入框 #获取value var content = document.getElementById('content'); content.value content["value"]
节点的类-Class
操作方法：
BOM
browser object model 浏览器对象模型
事件
onclick：鼠标单击
ondbclick：鼠标双击
onscroll：滚动轴移动
onunload：关闭网页时
onsubmit：表单提交事件
onreset：重置表单时
onmouseover：鼠标悬停，就是鼠标停留在图片上
onmouseout：鼠标移出，鼠标离开图片所在区域
绑定方式
方式一: var btn = document.getElementById('btn') btn.onclick = function () { #onclick 鼠标点击触发 alert('点我干嘛') } 方式二: btn.onclick = clik function clik() { alert('不要点') } 方式三:（了解） function clik() { alert('不要点') }
常见对象：
示例：
alert(); #不同浏览器中的外观是不一样的 confirm(); #兼容不好 prompt(); #不推荐使用 #打开窗口： window.open(url,target) //url：要打开的地址。 //target：新窗口的位置。可以是：_blank 、_self、 _parent 父框架。 #关闭窗口： window.close() 只能关闭用js的window.open()打开的页面 window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度
定时器
setInterval
每隔一段时间就完成某个操作 var ret = setInterval(fn,n) 每隔n毫秒就调用一次fn函数 var ret = setInterval("fn()",n) clearInterval(ret) 清除定时器 #示例： var ret = setInterval(fn,500) function fn(){ var box = document.getElementById('box') box.classList.toggle('box') }
setTimeOut
在设定时间之后执行一次来完成某个操作 var tid = setTimeout(fn,n) n毫秒之后只调用一次fn函数 var tid = setTimeout("fn()",n) clearTimeout(tid) 清除定时器 #示例： var tid = window.setTimeout("fn()",2000) function fn() { alert('wahaha') }
location对象
window的子对象 window.location 属性: window.location.href #查看当前网页的url window.location.href = 'http://www.baidu.com' #修改当前网页的url,修改之后会跳转 方法: window.location.reload(); #刷新页面
navigator
#获取客户端的信息： console.log(navigator.userAgent); #获取浏览器信息 console.log(navigator.platform); #获取系统版本
练习：
设置字体颜色
热烈庆祝23期学生全体就业广告页关闭
python23期皇家赌场开业了,性感荷官在线发牌我是正文内容
红绿灯：
浏览器滚动栏判断-onscroll事件
window.onscoll 在页面的滚动条滚动的时候触发的事件 document.documentElement.scrollTop 针对获取浏览器的垂直滚动条的位置 #示例： 回到顶部
select选择框联动-onchange事件
select对象.options.selectedindex 被选中的选项在options中的索引位置 #示例：
模态框：
jQuery
jquery概念
jquery是一个快速简洁的js框架，极大的简化了js的编程
jquery的优势
1.js代码对浏览器的兼容性做的更好了 2.隐式循环 3.链式操作
jquery是什么?
高度封装了js代码的模块 封装了dom节点 封装了操作dom节点的简便方法
jquery的导入
https://code.jquery.com/jquery-3.4.1.js 未压缩版 https://code.jquery.com/jquery-3.4.1.min.js 压缩版 下载:保存在本地文件里 引入:
$和jQuery的关系
$就是jQuery名字的简写,实际上是一回事儿
for循环注意事项：
#不要用for(i in li_list){}的方式循环一个jq对象 for(let i=0;i
jquery对象和dom对象的关系和转换
jquery封装了dom dom转成jquery : jQuery(dom对象) $(dom对象) jquery转成dom : jq对象[index] #示例： #通过js获取这些元素节点： var myBox = document.getElementById("app"); //通过 id 获取单个元素 var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组 var divArr = document.getElementsByTagName("div"); //通过标签获取的是伪数组 #通过jQuery获取这些元素节点： //获取的是数组，里面包含着原生 JS 中的DOM对象。 console.log($('#app')); console.log($('.box')); console.log($('div'));
jquery选择器
三种选择器
基本选择器： 一般都是通过ID或者class类来进行选择 层级选择器： 可以通过层次进行选择，如后代子代选择器 属性选择器： 可以通过属性进行选择
基础选择器（重要）：
id选择器 .类选择器 标签选择器 *通用选择器 #示例： #id选择器，ID设置不可重复，只选择一个 $('#city') k.fn.init [ul#city] #类选择器，class设置可以重复 $('.box') k.fn.init [div.box] #标签选择器，获取所有li标签 $('li') k.fn.init(4) [li, li, li, li] $('a') k.fn.init(2) [a, a] #通用选择器，选择所有 $('*') k.fn.init(16) [html, head, meta, title, body, div.box, ul#city, li, li, a, li, a, li, p, script, script] #div.c1交集选择器 $('div.box') k.fn.init [div.box] #div,p并集选择器，多选几个 $('div,p,a') k.fn.init(4) [div.box, a, a, p]
层级选择器：
空格 后代选择器，选择div下的所有li标签 $('div li') >子代选择器，表示div下面一层所有的p标签 $('div>ul>li') +毗邻选择器，找兄弟标签中的下一个li标签 $('.baidu+li') k.fn.init [prevObject: k.fn.init(1)] ~弟弟选择器，找兄弟标签中所有弟弟li标签 $('.baidu~li') k.fn.init(3) [li, li, li, prevObject: k.fn.init(1)]
属性选择器：
$("[href]") 必须是含有某属性的标签 $('a[href]') 有某属性的符合前面选择器的标签， #a=选择器 href=属性 $('a[title="luffy"]') 属性名="luffy"的符合选择器要求标签 $('a[title！="luffy"]') 属性名="luffy"不符合选择器要求标签 $('a[href$="com"]') 属性值以xxx结尾的 $('a[href^="http"]') 属性值以xxx开头的 $('a[href*="baidu"]') 属性值包含xxx $('a[href][class="baidu"]') 拥有属性1,且属性二的值='xxx',符合前面选择器要求的
jquery筛选器
基础筛选器（重要）：
$('选择器:筛选器') $('选择器:first') 作用于选择器选择出来的结果 $('a:first') 找第一个 $('a:last') 最后一个 $('a:eq(1)') 通过索引找 $('a:even') 找偶数索引 $('a:odd') 找奇数索引 $('a:gt(1)') 大于某索引的 $('a:lt(1)') 小于某索引的 $('*:not("li")') # not(选择器) 不含 符合选择器 要求的 $('*:has("a[href]")') # has(选择器) 后代中含有该选择器要求的(找的不是后代,找的是本身)
表单筛选器
type筛选器：
#form 表单选择 $(':text') $(':password') $(':radio') $(':checkbox') $(':file') $(':submit') $(':reset') $(':button') 注意 : date type的input是找不到的
状态筛选器：
enabled disabled checked selected $(':disabled') jQuery.fn.init [input] $(':enabled') jQuery.fn.init(15) [input, input, input, input, input, input, input, input, input, input, input, select, option, option, option] $(':checked') jQuery.fn.init(4) [input, input, input, option] $(':selected') $(':checkbox:checked') jQuery.fn.init(2) [input, input] $('input:checkbox:checked') jQuery.fn.init(2) [input, input] #示例：
筛选器方法
筛选示例：
找兄弟 :$('ul p').siblings() 找哥哥 $('ul p').prev() 找上一个哥哥 $('ul p').prevAll() 找所有哥哥 $('ul p').prevUntil('选择器') 找哥哥到某一个地方就停了 找弟弟 : next() nextAll() nextUntil('选择器') 找祖宗 : parent() parents() parentsUntil('选择器') 找儿子 : children()
筛选方法：
first() last() eq(index) not('选择器') 去掉满足选择器条件的 filter('选择器') 交集选择器,在所有的结果中继续找满足选择器要求的 find('选择器') 后代选择器 找所有结果中符合选择器要求的后代 has('选择器') 通过后代关系找当代 后代中有符合选择器要求的就把当代的留下
事件的绑定
绑定示例
标签的文本操作（重要）
文本操作示例
text() $('li:first').text() // 获取值 $('li:first').text('wahaha') // 设置值 $('li:last').html() // 获取值 $('li:last').html('qqxing') // 设置值 $('li:first').html('爽歪歪') //a标签 var a = document.createElement('a') a.innerText = '我是AD钙' $('li:last').html(a) //a 是dom对象，js方式添加 var a2 = document.createElement('a') var jqobj = $(a2) jqobj.text('乳娃娃') $('li:last').html(jqobj) //jqobj是jquery对象，jquery方式 #代码示例：- list1
- list2
标签的操作
增加标签
父子关系: 追加儿子 :(父).append(子) (子).appendTo(父) 头部添加 :(父).prepend(子) (子).prependTo(父) 兄弟关系: 添加哥哥 :参考点.before(要插入的) 要插入的.insertbefore(参考点) 添加弟弟 :参考点.after(要插入的) 要插入的.insertAfter(参考点) 如果被添加的标签原本就在文档树中,就相当于移动#代码示例：- 唱
- 跳
- rap
- 鹿晗
') 例子appendTo var li = document.createElement('li') var jq = $(li).text('张艺兴') jq.appendTo('ul') var dom_ul = document.getElementsByTagName('ul')[0] var li = document.createElement('li') var jq = $(li).text('张艺兴') jq.appendTo(dom_ul) var li = document.createElement('li') var jq = $(li).text('张艺兴') jq.appendTo($('ul')) 对已经存在的内容进行添加 -- 移动 $('li:first').appendTo('ul')头部添加：
$('li:last').prependTo('ul') $('ul').prepend('- 李东宇
') $('- 邓帅
').prependTo('ul')位置插入：
$('#l2').before('- 李东宇
') $('- 李东宇222
').insertBefore('#l2') #在l2上方位置插入 $('#l2').after('- 邓帅
') $('- 邓帅222
').insertAfter('#l2') #在l2下方位置插入
删除 修改 克隆
#删除 : remove detach empty remove : 删除标签和事件,被删掉的对象做返回值 $("li").remove() var obj = $('button').remove() obj是button标签,但是事件已经被删除了 detach : 删除标签,保留事件,被删掉的对象做返回值 $("li").detach() empty : 清空内容标签,自己被保留 $("li").empty() #修改 : replaceWith replaceAll，注意标签之前元素 $(".dada").replaceWith('- 海洋
') 用b替换a $('- 俊丽
').replaceAll(".dada") 用a替换b #复制 : clone var btn = $(this).clone() //克隆标签但不能克隆事件 var btn = $(this).clone(true) //克隆标签和事件
标签的属性操作
通用属性
#示例 百度一下 attr获取属性的值 $('a').attr('href') 设置/修改属性的值 $('a').attr('href','http://www.baidu.com') 设置多个属性值 $('a').attr({'href':'http://www.baidu.com','title':'baidu'}) removeAttr $('a').removeAttr('title') //删除title属性如果一个标签只有true和false两种情况,适合用prop处理 如果设置/获取的结果是true表示选中,false表示取消选中 $(':checkbox').prop('checked') # 获取当前选择状态 $(':checkbox:checked').prop('checked',true) # 表示选中 $(':checkbox:checked').prop('checked',false) # 表示取消选中
```
类的操作
类操作示例：
```js
添加类 addClass
$('div').addClass('red') //添加一个类，所有的div标签全部都会添加
$('div').addClass('red bigger') //添加多个类删除类 removeClass
$('div').removeClass('bigger') //删除一个类
$('div').removeClass('red bigger')转换类 toggleClass //有即删 无即加
$('div').toggleClass('red')
$('div').toggleClass('red bigger')
```
value值
值得操作：
$('input').val() #获取输入框的值 $(':text').val('值') #向输入框内输入值 $(':password').val('值') #没有 对于选择框 : 单选 多选 下拉选择 设置选中的值需要放在数组中 : $(':radio').val([1]) $(':radio').val([1,2,3]) #默认选择哪个
css样式
样式示例：
css('样式名称','值') css({'样式名1':'值1','样式名2':'值2'}) #示例： $('div').css('background-color','red') # 设置一个样式 $('div').css({'height':'100px','width':'100px'}) # 设置多个样式皇家赌场开业,性感荷官在线发牌 皇家赌场开业,性感荷官在线发牌 皇家赌场开业,性感荷官在线发牌
滚动条
滚动条示例：
scrollLeft() scrollTop() $(window).scrollLeft() #页面水平滚动 $(window).scrollTop() #页面上下滚动
盒子模型
盒子示例：
内容宽高 : width和height $('div').width(100) $('div').height(100) 内容+padding : innerWidth和innerHeight $('div').innerWidth(200) $('div').innerHeight(200) #内边距的距离：$('div').css('padding','30') 内容+padding+border : outerWidth和outerHeight $('div').outerWidth(350) $('div').outerHeight(350) #外边距的距离：$('div').css('border','blue solid 10px') 内容+padding+border+margin : outerWidth(true)和outerHeight(true) 设置值：变得永远是content的值 #代码示例：
胡海洋
```
表单操作
表单示例：
```js
如果返回false不提交
如果返回true不提交
```
作业练习
表格全选和反选示例：
# 姓名 爱好 胡海洋 抽烟、喝酒、烫头 俊丽 吃 俊丹丹 吃
动画
动画方法：
show系列 显示动画：show 隐藏动画：hide 开关显示动画：toggle slide滑动系列 滑入动画：slideDown 滑出动画：slideUp 滑入滑出动画：slideToggle(时间,回调函数) fade淡入淡出系列 淡入动画：fadeIn 淡出动画：fadeOut 淡入淡出动画：fadeToggle 动画的停止 stop 永远在动画开始之前,停止动画 #示例：购物车(0)动画特效示例：
事件
事件绑定
# bind 参数都是选传的,接收参数e.data $('button').bind('click',{'a':'b'},fn) #{'a':'b'} 发送参数 function fn(e) { #e 接受参数 console.log(e.data) console.log(e.data.a) } $('button').bind('click',fn) function fn(e) { console.log('wahaha') } # 简写的事件名称当做方法名 $('button').click({'a':'b'},fn) function fn(e) { console.log(e.data) console.log(e.data.a) } $('button').click(fn) function fn(e) { console.log('wahaha') } $('button').unbind('click') #解锁
解除绑定
$('button').unbind('click')
各种事件
click(function(){...}) // 单机事件 blur(function(){...}) // 失去焦点 focus(function(){...}) // 获得焦点 change(function(){...}) // input框鼠标离开时内容改变触发 keyup(function(){...}) // 按下的键盘触发事件 27对应的是esc键 获取键盘编号 e.keyCode mouseover/mouseout // 如果给父元素绑定了over事件,那么这个父元素如果有子元素,每一次进入子元素也 触发父元素的over事件 mouseenter/mouseleave = hover(function(){...}) //鼠标的悬浮
blur focus change示例：**
keyup-键盘控制：
Title 皇家赌场
out_over
Title
事件冒泡
#冒泡就是点击子节点，会向上触发父节点，可以使用一下两种方法进行处理Title
事件委托
$('div').on('click','button',{'a':'b'},function (event) { console.log(event.data) alert('不许点') }) 相当于把button元素的点击事件委托给了父元素div 后添加进来的button也能拥有click事件 #示例：Title
页面的加载
示例：
document.onload = function(){ //js 代码 } window.onload = function () { $('button').click(function () { alert('不许点') })} onload要等到所有的文档 音视频都加在完毕才触发 onload只能绑定一次 //jquery的方式,只等待文档加载完毕之后就可以执行,在同一个html页面上可以多次使用 $(document).ready( function () { //文档加在完毕之后能做的事情 }) //jquery的方式(简写)***** $(function () { //文档加在完毕之后能做的事情 }) //示例 $(function () { $('button').click(function () { alert('不许点') }) }) //jquery中等待所有的资源包括视频 音频都加载完才执行function中的代码,可以使用多次 $(window).ready( function () { alert('123') })
each
Title
- 选项一
- 选项二
- 选项三
练习
1.form表单的验证提示信息用focus和blur事件完成
2.表格操作 使用事件委托
3.小米购物车
4.模态对话框
bootstrap
bootstrap框架：
bootstrap框架提供样式和组件，可以快速搭建网站页面的开源项目，而且支持自适应
bootstrap组件样式地址：
https://v3.bootcss.com/components/
矢量图地址：
http://www.fontawesome.com.cn/examples/
https://www.iconfont.cn/search/index
js的代码 :
选项卡 轮播图
bootstrap框架示例：
导入bootstrap：
Title
全局CSS样式：
栅格系统：
Title
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4 #列偏移
.col-md-6
.col-md-6
嵌套列：
Title
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
表格:
Title
第一列
第二列
第三列
第二.一列
第二.二列
第二.三列
第三.一列
第三.二列
第三.三列
表单：
#表单这里还有单选框多选框和禁用
Title
按钮框删除：
选项卡：
# 每点击一个按钮就是一个页面
Title
111
222
333
444
可消失的弹出提示框：
#鼠标悬浮在框上，弹出提示框
Title
轮播图：
# 轮播图，轮流播放图片
Title
组件
bootstrap矢量图示例：
Title
#选择矢量图样式
下拉菜单：
#给按钮添加多个扩展功能
Title
按钮/分裂时按钮下拉菜单：
Title
输入框组：
# 输入框可以用在网页登录输入账号密码
Title
输入账号
输入密码
标签：
#可变的字体
Default
Primary
Success
Info
Warning
Danger
徽章：
#隐藏显示未读的消息
Title
巨幕：
# 将数字放大展示在页面上
Title
页头：
Title
俊丽 海洋
缩略图：
# 缩略图加图片
Title
警告框：
# 可关闭的警告框，警告框内还可以添加链接
Title
Warning! Better check yourself, you're not looking too good.
带动画的进度条
Title