css+js+jq实训笔记
css+js+jq实训笔记
- css第一天
- css第二天
- css第三天
- css第四天
- css第五天
- css第六天
- js第一天
- js第二天
- js第三天
- js第四天
- js第五天
- js第六天
- jq第一天
- jq第二天
- jq第三天
css第一天
1、平时有空多记单词（很多新单词）
2、用谷歌浏览器调试代码
3、多看看公众号和网站（对面试有很大的帮助，也可以帮助了解前端）
4、爱果果（可以去玩一下）
5、egret白鹭科技（游戏开发）
6、小程序API，要学会读懂文档、手册
7、学习PS
8、提高自己的审美
9、计算机网络、数据结构 考研408
10、有空做思维导图
11、先找好要模仿的网站，不能太简单了，一个人一组
12、练好指法 打英文
13、注释 Ctrl+/ 文件后缀要自己打
H5文档头（告诉浏览器要用哪一种方式编译代码） ！+tab
14、阿里巴巴矢量图标库
15、照片放在images中，生成的ico图片放置在主目录
16、 阿里巴巴矢量图标https://www.iconfont.cn/
ico制作 http://www.bitbug.net/
也可以直接去线上获取： 直接在网址后面/favicon.ico+enter
17、引入图片 img + tab
属性： src：图片路径 alt：图片不能正常显示的时候提示内容 title：鼠标移入提示文字
绝对路径：D:/study/代码/1.jpg (绝对路径不利于代码管理）
相对路径：images/1.jpg （相对自身出发寻找文件）
18、双标签：<标签名 k=“v” k=“v”>
单标签<标签名 k=“v” k=“v”/>
k是属性，属性与属性之间用空格隔开。
标题名+tab
19、html+css+js
html：负责页面结构。使用标签的目的不是为了程序员可以看明白，而是为了浏览器。为了SEO。用正确的标签做正确的事情。
css：负责页面样式
js：负责用户交互
20、标题文字h1-h6 h1一般用来引入重要的内容，语义比较重。h1一般用来引入公司的logo。
一般一个页面中h1最多一个 h2不超过两个 h3不超过三个
一级标题
二级标题
三级标题
21、段落文字 在页面中引入一段话或者一段文字
春款打底裤
22、超链接 默认在当前页面跳转
加target="_blank"在新页面中跳转
href：链接地址
笔记
23、结构类似的布局 ul>li
ol>li 8 +tab 有序列表（前面有1、2、3、），现在一般不用了
ul>li8 +tab 无序列表
ol和ul的子级只能是li，li的夫级只能是ol或者ul
24、浏览器有空白折叠现象，不管有多少留白，都只能识别一个
换行：
空格：
25、上标：
下标：
26、锚点：一个小标记
第一步：找到用户所要点击的目标，用a包裹
第二步：找到要跳转的标签用a包裹，取name值
27、选择器：如何选择标签
选择器分类：
：通配符选择所有标签
标签名选择器：直接选择标签名
类名选择器（class=“类名”）：.类名（在head的style里）
交集选择器：p.one（标签是p，.one是类名）< .one.two（类名为one 和two）
并集选择器：div，p，.one 既选择p又选择div还有.one（如果样式都一样，可以用并集选择器。选择器不叠加，只单独计算）
后代选择器：只要被包裹的都是子代 用空格隔开 div p（都选择所有的）
子代选择器：第一级包裹的 用>隔开 div>p（只能第一代包裹的，不会选择父级的）
id选择器：#id
选择器的权重：<标签名<类名
同样的选择器后写的生效。
一个标签名1g，一个类名1kg，一个id名1吨
28、
29、正常情况下，css可以放置在如何位置。但是一般不推荐，一般会有一个文件夹放css
30、使用h1的目的，是为了让文字加粗加黑。这句话是错的。标签的作用和样式一点关系都没有。因为HTML只负责结构。
31、img与background的区别
img：引入重要的图片。占位，能被搜索引擎抓取
background：装饰性图片。不占位，不能被搜索引擎抓取
css第二天
1、样式发展史：table div+css flex
2、div大区域大面积的块状排版
3、盒子模型指的是标签的占位
width height border（边框） padding（内边距：内容和边框的留白） margin（外边距：标签与标签之间的留白）
（width和height指的是内容的内容）
content包含width和height
盒子的宽高就是内容的宽高
盒子没有background
border padding margin都可以只设置一个方向
border-left：1px solid red；
padding-top：2px solid lime；
margin-top或者margin-left等等，只有有其他盒子盒子标签影响才会起作用。
4、border：三个值；值与值之间用空格隔开
第一个值：线的粗细
第二个值：线的类型 solid dashed虚线 dotted点线
第三个值：颜色 transparent（透明色）
5、css禅意花园
6、margin和padding都可以分别写成
一个值：上下左右
两个值：第一个值上下 第二个值左右
三个值：第一个值上 第二个值左右 第三个值下
四个值：上右下左
6、标签分类：
第一种：单标签和双标签
第二种：行内标签（a在同一行，和其他元素并排排列。宽高无效。上下外边距无效，左右有效。内边距有效，上下不占位，左右占位）和块级标签（div p h1-h6 ul ol li 独占一行）
在标准中，行内元素水平，块级元素 垂直排列。标准流最稳定，优先考虑标准流
7、块级标签水平居中，左右外边距auto
margin：10px auto；
8、文本类元素水平居中
text-align:center;
9、img不是标准流，宽高有效，图片一般只设置一个值，另外一个值自适应
10、居中是相对父元素居中的
11、行高：从文字中心基线开始，向上取留白的一半，向下去留白的一半。中间的距离就是行高。
12、文字垂直居中
行高等于容器的高度（单行） line-height：200px
13、css书写方式
嵌入样式：
内联样式（行内样式）：
外联样式：（作业或者项目一定要这样做）
link+tab
14、外联和嵌入的权重一样，后写的生效。
15、*选择所有标签，一般用来清除默认样式
16、标签可以用多个类名，用空格隔开，不能书写多个class属性，只能有一个class属性
17、不浮动就是会独占一行了
18、浮动：脱离标准流，变成行内块。
行内块：在一行排列，设置宽高有效
浮动只有left或者right
浮动： 如果一行不够，自动换行
一个标签浮动， 同级（同一个父级标签）必须一起浮动
有高度的目的，让结构更稳定。
浮动塌陷：如果子级不浮动，父级可以检测子级的高度，如果子级浮动，父级检测不到
第一种解决方法：给父级设置高度（一般不用）
第二种解决方法：给父级加overflow：hidden
19、网站布局：
通屏的内容：一般不设置宽度，自适应
先从整体再局部
版心：页面的版面中心，一般一个网站只有一个版心
20、增加圆角：border-radius：
21、增加鼠标移入样式： 标签：hover
鼠标移入增加小手： cursor:pointer;
22、sublime分屏：Alt+shit+1/2/3
css第三天
1、img引入重要图片
h1-h6引入重要内容 h1一般引入公司logo，一个页面最多一个
h2最多两个
一般h4-h6才是引入标题
p引入一段话或者一段文字
a超链接
div大区域大面积排版
ul>li结构类似的布局
ol>li有序，类似于1 2 3 a b c
2、css的样式没有排他性，只要是标签都可以使用
一个标签浮动，同级必须浮动
3、选择器用法
后代选择器：div p
子代选择器：div>p
并集选择器：div,p,a
交集选择器：div.one
4、项目中，图片名字和文件名字。只能是英文，不能有特殊符号
首页一般是index.html
样式文件是css
5、con>* 选择con的所有子级标签
6、background：none; 去除背景颜色
7、行高和margin-top的关系，有时候需要减去行高留白的的一半
8、vertical align:middle 图片和文字同时存在的时候，可以让文字以图片垂直居中
text-align:center 仅文字的时候
9、css样式文件注释中，不能使用单行注释
10、块级标签比较重要，引入重要的内容。
行内标签一般放置修饰性内容：span b（加粗） u（下划线） i（倾斜）这些都是引入小元素，这些都是属于文本类元素，都可以用p包裹
一般情况下，块级标签可以任意嵌套
p只能放置文本类元素 a img span b u i 自身也不能嵌套
以下都不可以：
h1-h6一般也只能放置文本类元素，类似于p
11、 ul的子级只能是li li 的父级只能是ul或者ol
12、行内标签不嵌套块级标签，但是a除外
13、通过display转化完了以后，标签的显示模式变了，但是语义没有变，只是为了工作方便
display: block 标签转化为块级
display: inline 标签转化为行内
display: inline-block 标签转化为行内块（一行排列，可以设置宽高）
display:none; 隐藏标签
14、数字或者英文换行 work-break:break-all;
修改垂直对齐的方式 vertical-align:top （重心）一行重心对齐
15、浏览器有很多留白，不管有多少留白，都只识别一个
16、行内块与父级一般与父级有留白，一般把行内块 转化为块级 display:block;就会解决
17、块级标签浮动就变成了行内块
块级标签的宽度不设置的话有父级决定
18、一般与文字有关的样式都可以继承
如果自身没有改样式，可以一直向上寻找，直到找到为止 。font-size color font-family line-height
19、标准流（不浮动）存在外边距塌陷（只有一个的外边距 的值生效）
上下外边距的值取决于最大的 上下才会塌陷 两个相邻的div
左右外边距的值可以叠加
第二种塌陷：父级标签嵌套子级标签，设置子级标签margin-top，父级跟着下来 div 里面套着div
第一种解决方法：给父级设置overflow:hidden;
第二种解决方法：不使用margin 使用padding
20、overflow:hidden; 原始的意思是：溢出隐藏
overflow:auto; 超出部分出现滚动条
word-break：break-all 数字和英文换行
overflow:auto; 和word-break：break-all;一起使用可以出现垂直滚动条
21、固定定位：不会随着页面的滚动而滚动。参照物是当前窗口
不占位，脱离标准流，成为行内块
可以通过样式设置 left right bottom top
left 和 right 只设置一个值 top 和bottom 只设置一个值 （）
中间居中：left：50%；
margin-left:-250px;（移动窗口的一半宽度）
top：50px;
margin-top:-25px;（一半高）
22、相对定位 ：相对自身位移。一般用来实现微调。对其余标签影响最小
半脱离标准流：一方面是因为有了四个坐标，另外一方面是因为标签的性质没有改变
left right bottom top 参照物是自身，所占的位置还是原来的位置
23、相对定位占位，固定定位不占位
24、定位的标签才有left right bottom top
定位的标签才有z-index
定位的标签有图层顺序，默认后写的在后面。可以用z-index调整。
默认z-index:0；值越大越靠上 z-index可以为负值，但是不建议（有可能出现没有办法增加hover情况）
z-inedx同级比较才有效，父子没有效。优先考虑父级的z-index。
24、一个标签在另一个标签的上方。不占位，脱离标准
绝对定位：不占位，脱离标准流，变成了行内块；
25、子级绝对定位，父级相对定位（父级不一定相对定位），可以让自己放置在父级的如何位置 left right bottom top
自己绝对定位，会一直向上寻找，直到找到有定位方式的标签，然后以该标签作为参照物。
26、网页布局中，首先是标准流，再次浮动，最后定位。
27、rgba 第四个值是设置透明度 0-1
28、选择4的倍数的标签 ul li:nth-of-type(4n){}
29、旋转 transform:rotate(30deg)
30、增加圆角，值为50%为圆形 border-radius:50%;
31、定位后居中：left：0；right：0；margin：0 auto；
css第四天
1、w3c https://www.w3cschool.cn/ 和 菜鸟教程
2、ul 的高包括li的高和边框的高度，设置li的高时，不能包括边框
3、块级标签不设置宽度的话：margin border padding width 加起来就是父级的宽度
4、form用来进行表单提交 action属性表单提交的地址
提示文字用label包括，input可输入框（type限制类型 text number（不具有普遍性） password radio单选框 checkbox 多选框 submit提交 reset重置）
label的for值和input的id值可以把文字和表单联系起来
id是唯一的，名字不能冲突，整个页面只能有一个，一个标签只能有一个id
5、radio单选框，成为真正的单选框需要有同样的name
6、select 下拉选框
7、input 单行框 textarea文本域
8、HTML5中有 date color week range email
9、input 的name属性可以把几个input连接起来
10、表单属性 placeholder默认提示文字 autoholder自动聚焦（没有值，打开网页自动聚集在它） checked默认选框选中 selected下拉选框选中
11、表单的边框进行操作之前，重写或者去除
border:none;
border:1px solid red;
width:100px;
height:1000px;
outline:none;(去除选中后出现的蓝色框)
12、进行边框颜色修改之前一定要有边框才可以
13、写的文字与边框不靠近 padding-left:5px;
14、禁止伸缩 resize:none;
15、sprite:雪碧图片/精灵图片
很多小图片整合到一张大图片上的技术，然后减少服务器的请求次数
不要拿大的标签来装精灵图片，要拿小元素的标签，如 span，还要设置宽高，变成行内块
16、量精灵图片要量左上角
17、背景图片的位置 backg-position：-155px -125px;
css第五天
1、a标签有继承，要改它必须选中才行
2、网页布局：不是所有的地方都要用div，
文本类元素(不浮动，不绝对定位，不固定定位)input span a b u i img
文本类元素可以用text-align:center;居中，一般用p包裹
ul>li实现结构类似的重要布局，如导航 （ul可以当做块来用，li当小盒子）
3、表单提交一般用form包裹
4、网页布局实现考虑标准流（行内标签，块级标签） 再次是浮动（行内块） 最后定位
绝对定位和固定定位 都不能和浮动同时使用
5、行内标签：a span b u i
行内块标签：img input
块级标签：div h1-h6 ul li ol p
6、div 没有语义的 可以使用header（头部） footer（尾部） nav（导航） section（中间内容一整区域大部分） article（新闻文章） aside（侧边栏） main（轮播图主要内容） video（视频，和img一样的方法使用，autoplay自动播放，loop循环播放/重复播放，controls播放进度条） audio（音频）替代
以上用法和div一样，只是有语义
7、行内标签用display:block;转换成块级标签就可以设置宽高了
8、视屏和音频一般放在media这个文件夹中
9、音频和视频用法一样
10、获取音频和视频：处于播放状态 network shr 刷新 就可以获取了
11、fones图标 第二种：
先把css复制了，引入css，然后拷贝需要的文件，复制到指定文件夹，再改css里面的路径，最后挑选图片，获取类名
12、转换后还是占原来的位置，不影响其他标签的位置 对显示模式为行内的标签转换无效，但可以用其他方式把它转化为其他类型的标签
tansform:rotate(30deg); 旋转：正直顺时针旋转，负值逆时针
tansform:scale(5); 缩放 0-1缩小 大于1放大
tansform:translate(100px,100px); 位移：第一个为水平，第二个值为垂直
还可以这样写三个值，用空格隔开 但是顺序会有影响。因为执行的时候，代码从左到右执行，旋转了坐标系也改变了
tansform:scale(5) translate(100px,100px) rotate(30deg)；（位置可以改变，一个一个执行，位置不一样，效果会不一样）
13、过渡：中间变化过程可见
transition有很多的样式，可以上网找
transition中间变化过程可见 第一个值变化的样式（all 所有的样式） 第二个值时间 第三个值动画曲线 第四个值延迟执行的时间
transition:all 2s;
可以针对不同的样式定义动画，中间用逗号隔开
transition:background 2s ease-in-out 4s,boeder-radius 2s ease 2s;
14、定义动画：
@keyframes 动画名字{各个状态
0%：{}
20%：{background:red;}
100%：{}
}
使用动画
animation：动画名字 持续时间 次数（默认一次 infinite（重复）） 平缓过渡；
15、伪对象时在标签内部增加的行内元素
伪对象一定要有content
::before增加的默认在内容之前
::after增加的默认在内容之后
16、li浮动后ul加overflow
css第六天
1、如果一个东西太大，可以给它放在一个div里面，给div设置 宽高，然后溢出隐藏 overflow:hidden;
2、ul li:nth-of-type(3) a{}
3、:nth-of-type()选择的是同级标签
4、选择器的长度不能超过4个，除了子集选择器
5、background 地址 平铺方式 水平位置 垂直位置 颜色
background-color：值只设置颜色
background-repeat：设置平铺方式
background-position：只修改背景图片的图片的位置，前提有图片
background-size：只修改背景尺寸，前提有图片
6、塌陷 子集浮动检测不到父级的高度，父级加overflow：hidden；可能会溢出隐藏，那就在浮动的子集下面加个div（和li同级），他的样式加个clear：both：就可以解决这个问题（父级就不用加overf了）
7、解决浮动塌陷：
1.父级设置高度
2.父级加overflow:hidden;
3.在浮动标签的同级下面加个块级标签（显示模式），并给块级标签加个clear:both;
4.给父级加个类名clearboth，.clearboth::after{content:"";clear:both;
8、用了绝对定位就不要用浮动
9、子集浮动，父级也要浮动
js第一天
1、JS：主要负责用户交互。JavaScript
2、JS：基本对象，不是面对对象，所以没有封装、继承、多态的特性
3、js：ECMAScript+DOM+BOM
ECMAScript:变量/函数/对象
DOM:操作标签的方式
BOM:控制浏览器
4、js运行在客户端
5、js一般书写在body内部底部，因为代码是从上到下执行的
6、变量的命名规则
1.只能由数字、字母、下划线和$组成
2.不能以数字开头
3.区分大小写，不能有空格
4.最长不能超过255个字符
5.不能是关键字（js前面使用过的）和保留字（保留未来使用的）
7、如果声明变量，用var
8、检查错误，控制台console选项
9、变量类型：检测变量类型typeof(变量)
基本数据类型：
number：数值类型，类似数学中 123 123.0 -12
string：字符串。一段话，一段文字。最明显的是用引号包裹。在js中单引号和双引号用法一模一样，不能自身嵌套自身，单引号内部只能用双引号，双引号内部只能用单引号，就是不能嵌套自己。一般属性的值用双引号
boolean：布尔类型，true/false
undefined：未声明/未定义/未赋值
null：空对象。检测不出来，检测出来object
复合数据类型：
object：对象
10、console.log(a) 在控制台打印a的值
11、js每一条语句结束都要加分号
12、console.log(str) 打印 变量str的值
console.log(‘str’) 打印 字符串str
13、变量的值一最后一次赋值为准
14、js代码从上到下执行
14、对象：把事务的特征抽象出来
15、var stu={属性:值，属性:值，属性:值，score：{math：100，Chinese：70}，hobby:[‘游戏’]}
一般同级属性的后面没有属性了就不用加，
获取属性的值：stu.属性或者stu[属性]（如果属性是变量不加引号，如果是常量加引号）
console.log(stu.score.math)
16、数组：对象类型
var hobby=[‘跳舞’,‘唱歌’]；
17、数组属性对象。数组中的每一个元素都可以是如何类型
var arr=[100,89,[80,56,54],true,‘zsh’,{name:‘ls’}
获取数组元素 数组名字【下标从0开始】
数组后面追加元素 arr.push(‘hello’);
splice（操作额度位置，删除标签的数量，插入的元素）
arr.splice(2,0,1111)
arr[下标]=值；给数组中元素赋值 如果存在该下标，修改值。如果没有该下标，赋值（扩展了数组长度：下标+1）
18、数组.indexOf（元素） 检测元素在数组中的下标。如果没有该元素返回-1
19、es6中 获取数组元素的时候，如果下标为负值，代表从右往左，最右边的-1
20、array所有方法：https://www.w3cschool.cn/javascript/js-obj-array.html
21、余数正负由被除数决定
22、=赋值 ==判断值是否相等，一般值相等即可，类型可以不相等 =一模一样
符合数据类型，不能直接进行简单的相等判断
23、++ a++ ++a
a++属于表达式 a属于变量
a++ 先把a的值作为表达式的值，再把a的值加1
++a 先把a的值加1，再把a的值作为表达式的值
– a-- --a和以上的原理一样，只是加变为减
24、可以同时打印两个值 console.log(a,b);
25、m+=10 等价于m=m+10
m-=10 等价于m=m-10
m*=10 等价于m=m*10
m/=10 等价于m=m/10
26、代码从左到右，一步步执行
27、&& 且/与 只要一个为假，结果就是假
|| 或 只要有一个为真，结果就是真
!a 取反 a为真结果就是为假
28、程序中，undefined null 0为假。不存在就是假，所有的字符串都为真
纯数值的&& ||是特例
29、prompt() 可输入弹出框。一般获取输入框的内容都是字符串
alert() 弹出框（要弹出的东西放进小括号里面） alert(val+2000)
30、- * / 强制转换
隐式转换
数值类型+字符串=字符串
数值类型+布尔类型=数值类型 把true转化1 false转化0
字符串类型+布尔类型=字符串类型
强制转换
parseInt(a) 把以数字开头的值转化成整数类型，否则就是NaN
parseFloat(a) 把以数字开头的值转换成数值类型，否则就是NaN
31、if语句有跳楼现象，如果前面条件符合，执行，然后不会执行下面的if语句
if（条件）{
条件为真的时候，执行
}
if（条件）{
条件为真的时候，执行
}else{
条件为假的时候，执行
}
if（条件1）{
条件1为真的时候，执行
}else if（条件2）{
条件2为真的时候，执行
}else if（条件3）{
条件3为真的时候，执行
}else{
以上条件都为假，执行
}
32、NaN数值类型，和任何数值都不相等 使用isNan(a)判断a是否为NaN
33、while（条件）{
条件为 真的时候执行代码。执行完毕，重新判断条件
}
do{
首先执行代码，再次判断条件，条件为真，再次执行
}while（条件）
34、isNaN(a) 会把a强制转化为 数值类型，不能转化的话结果为true
35、for（a;b;c）{
循环初始化
}
第一步：执行a
第二步：判断是否符合b的条件，符合就执行代码块，否则介绍循环
js第二天
1、continue 结束本次循环
break 直接跳出循环，终止本层循环
2、document.write() 在页面打印东西
3、函数：封装性，把具有特殊功能的代码封装
4、定义函数
function 函数名（和变量名规则一样）（）{
函数体
}
使用函数
函数名（）
5、无参无返回值函数
无参有返回值
有参无返回值
有参有返回值
形参相当于声明变量，使用函数时是实参，实参相当于给变量赋值
6、js中只有函数的作用域
函数也是变量，使用函数，相当于执行函数体代码
变量的作用范围：向上寻找距离该变量最近的开始的函数的{ 变量的作用范围就是该大括号内
7、变量提升：会把变量声明提升到作用域最前面，赋值还是在原来的位置
8、全局变量和局部变量同时存在，局部变量优先
9、如果使用function方式声明变量，会把整个函数提升到作用域最前面
10、没有声明直接赋值的变量。作用域赋值以后都可以直接使用
11、arguments代表用户输入的实参。是一个类数组。
12、id相当于身份证，唯一性，不能重名，一个标签最多一个
13、通过id名选择/获取标签 document.getElementById(‘id名’)
控制html（标签开始和结束中间的内容叫html）
修改html：选择标签.innerHTML=“修改的值”
获取html：选择标签.innerHTML
修改css：选择标签.style.css样式（如果样式中带有中横线，去掉中横线，去掉中横线的英文首字母大写）=‘值’
14、事件结构：
选择标签.on+事件类型（click mouseenter mouseleave mouseover mouseout）=function（）{
执行的代码
}
15、mouseenter和mouseleave效率高 mouseover和mouseout触发子集，效率低
16、控制标签：
设置或修改：选择标签.setAttribute(‘属性名’,‘值’);
删除标签属性：选择标签.removeAttribute(‘属性名’);
获取属性的值：选择标签.getAttribute(‘属性名’);
17、标签属性，所有可以放置在标签后面的内容都叫标签属性
18、控制表单元素的值 focus获取焦点（光标在表单中） blur失去焦点（光标不在表单中）
修改：选择标签.value=‘值’
获取：选择标签.value
19、“”和“ ”不一样，空和空格不一样
20、定时器 setInterval(function(){代码},时间ms) 每隔一段时间执行代码
clearInterval(定时器的名字) 停止定时器
Math.random() 产生0-1之间的随机数，包含0，不包含1
parseInt(Math.random() *10) 0-1的随机数
21、document.getElementsByTagName(‘标签名’) 通过标签名获取标签，得到的是类数组。不能对类数组直接进行操作，即使只有一个标签。只能选择到具体某一个
22、this代表用户当前操作的标签，就是事件源
23、通过父级选择子级 父级标签.children 得到的是类数组
a.parentNode 选择a的父级 a.parentNode.parentNode 选择a的父级的父级
24、arguments代表用户输入的实参。是一个类数组
总结：
1、获取标签：document.getElementById(‘id名’)
2、控制HTML
修改HTML内容：选择标签.innerHTML=‘值’
获取HTML：选择标签.innerHTML
3、修改css 选择标签.style.css样式=‘值’
4、事件结构：
选择标签.on+事件类型=function(){ 事件类型（click mouseenter mouseleave mouseover mouseout）
执行 的代码
}
5、控制标签属性：
设置或修改属性：选择标签.setAttribute(‘属性名’,‘值’)
删除标签属性：选择标签.removeAttribute(‘属性名’)
获取属性的值：选择标签.getAttribute(‘属性名’)
6、表单元素 focus获取焦点 blur失去焦点
修改表单元素的值：选择标签.value=‘值’
获取表单元素的值：选择标签.value
7、定时器
定时器名=setInterval(function(){代码},时间ms) 每隔一段时间执行代码
clearInterval(定时器名) 停止定时器
Math.random() 产生0-1之间的随机数（小数）
8、通过父级选择子级 父级标签.children得到的是类数组 不能对类数组直接进行操作，即使只有一个标签。只能选择到具体某一个。
通过标签名获取标签，得到的是类数组。不能对类数组直接进行操作，即使只有一个标签。只能选择到具体某一个。
js第三天
1、隐藏标签 显示标签的时候根据标签当前的显示模式
2、社区方法
直接通过id名选择标签（id命名不要是关键字和保留字，符合变量的命名规则）
控制标签属性：
修改或者新增：选择标签.属性（如果属性是class写出className）=‘值’
获取：选择标签.属性
3、自定义属性
4、li浮动,ul加::after{ conten:’’; display:block; clear:both;}
5、table实现边框 tr一行 td一列
border-collapse:collapse; 边框合并
6、创建标签 document.creatElement(‘标签名’)
a.appendChild(b) 把b追加到a内部的后面
b.parentNode.insertBefore(a,b) 把a追加到b同级之前
7、a.parentNode.removeChild(a) 删除a的标签
js第四天
1、数组对象方法
js第五天
1、opacity 修改标签透明度 值0-1
2、通过属性方式绑定点击事件 on+事件名=“函数（this实参，用户当前操作的标签）”
3、table
头部 thead
内容 tbody
4、setInterval(add,1000)和setInterval(“add()”,1000) 效果一样
setInterval(add(),1000) 直接调用函数，只执行一次
setInterval(“add()”,1000) 1秒以后，解释字符串，执行函数
单次定时器setTimeout，只执行一次，用法和setInterval一样，停止单次定时器clearTimeot(定时器名字)
5、函数自身调用自身 function sub(){sub()}
6、返回以前访问的站点 history.go(1/-1) 1是下一个，-1是上一个
7、οnclick=“location.href=‘地址’” 点击跳转页面
οnclick=“location.replace=‘地址’” 替换页面
οnclick=“location.reload（）” 刷新页面
8、sel.options获取的是选项
selectedIndex当前点击的下标
9、var tags=document.getElementsByClassName(‘one’);通过类名，得到类数组
js第六天
1、事件默认行为：点击a跳转/表单提交
return false 可以阻止事件默认行为，如让a不默认跳转
2、获取表单元素的方法：document.form的name值.input的name值
3、onkeyup onkkeydown onkeypress
up键盘抬起的时候
down键盘按下，所有的按键都可以识别
press键盘按下 ，只识别字而量（如输入、【】这些不会有反应）
paste 禁止粘贴
4、replace（/条件/,’’） 替换操作 g全局 i不区分大小写
this.value=this.value.replace(/被替换的东西/，‘要替换成的东西’) /g全局检查 /D非数字 /i 不区分大小写
5、str.match(b)检测字符串str是否匹配表达式b 如果匹配返回结果，不匹配返回null
/^开始 $结束/
6、DESKTOP-7NTJLN3(me)(705A0F1A566C对话) 09:03:59
https://www.w3cschool.cn/jsref/jsref-obj-regexp.html
张少华(705A0F1A566C对话) 09:36:18
https://www.w3cschool.cn/jsref/jsref-obj-regexp.html
张少华(705A0F1A566C对话) 09:54:55
https://www.cnblogs.com/baqycl/articles/10269993.html
jq第一天
1、jQuery2.0以后不再支持ie6 7 8 但是支持移动端，一般开发中不建议最新版本
2、jQuery一般不建议用第三方平台的资源
3、jQuery .min.js是压缩过的，项目上线的时候使用
4、jQuery是封装好的js。js库文件
5、第一步 引入库文件：一般框架类内容，在head内部引入
6、选择标签的方式：$（‘css选择器’） 可以直接进行操作
$（‘’）选择所有符合条件的标签。
$（）.eq(index)选择到具体的某一个
（ ‘ . b t n ’ ） . c s s ( ′ c o l o r ′ , ′ r e d ′ ) 7 、 控 制 标 签 c s s 修 改 单 个 样 式 ： 选 择 标 签 . c s s ( ′ 样 式 ′ , ′ 值 ′ ) 修 改 多 个 样 式 ： 选 择 标 签 . c s s ( ′ 样 式 ′ : ′ 值 ′ , ′ 样 式 ′ : ′ 值 ′ ) 获 取 单 个 样 式 ： 选 择 标 签 . c s s ( ′ 样 式 ′ ) 8 、 事 件 事 件 源 . 事 件 类 型 （ f u n c t i o n （ ） 执 行 代 码 ） 10 、 （‘.btn’）.css('color','red') 7、控制标签css 修改单个样式：选择标签.css('样式','值') 修改多个样式：选择标签.css({'样式':'值','样式':'值'}) 获取单个样式：选择标签.css('样式') 8、事件 事件源.事件类型（function（）{ 执行代码 }） 10、 （‘.btn’）.css(′color′,′red′)7、控制标签css修改单个样式：选择标签.css(′样式′,′值′)修改多个样式：选择标签.css(′样式′:′值′,′样式′:′值′)获取单个样式：选择标签.css(′样式′)8、事件事件源.事件类型（function（）执行代码）10、 is not defined jq引入失败
11、jq下载地址 https://www.jq22.com/
jq动画下载地址 https://www.jq22.com/code2905
12、控制标签的HTML：
修改：选择标签.html(‘内容’)
获取：选择标签.html() 会识别到里面的标签
text：控制标签内容，但不能识别标签，把标签当做普通文本
修改：选择标签.text(‘内容’)
获取：选择标签.text() 不会获取到标签
13、表单元素的值：
获取：选择标签.val()
修改：选择标签.val(‘内容’)
14、控制标签的属性：
单个修改或者获取：选择标签.attr(‘属性’,‘值’)
多个修改或者获取：选择标签.attr({‘属性’:‘值’,‘属性’:‘值’})
获取：选择标签.attr(‘属性’)
删除：选择标签.removeAttr(‘属性’)
15、类的封装
增加类：选择标签.addClass(‘类名’)
删除类：选择标签.removeClass(‘类名’)
切换类：选择标签.toggleClass(‘类名’) 有就删除，没有就增加
判断是否有该类：选择标签.hasClass(‘类名’)
16、CheckBox
选中：选择标签.prop(‘checked’,true)
未选中：选择标签.prop(‘checked’,false)
获取选中状态：选择标签.prop(‘checked’)
17、用原生方法获取得到的标签：dom对象
用jq方法获取得到的标签：jq对象
18、dom和jq对象转化
dom转化为jq对象：$(dom对象)
jq对象转化为dom对象：jq对象[下标]或者jq对象.get(下标) $(‘button’)[0].style.color=‘red’; $(‘button’).get(0).style.color=‘red’;
19、this用户当前操作的标签，事件源
$(this).css(‘color’,‘red’)
20、controls 播放控制条
autoplay 自动播放
loop 循环播放
21、play()音乐播放 pause()音乐暂停 都属于原生方法，没有办法用jq
22、HTML DOM Audio 对象 地址：https://www.w3school.com.cn/jsref/dom_obj_audio.asp
animation动画结束后css样式怎么保留最后状态 地址：https://www.jianshu.com/p/2614002e7562
23、animation-play-state:paused; 暂停动画
animation-play-state: ; 开始动画
24、a.sibings()除了a之外的同级标签，如果不限制，选择所有的同级（同一个父级），也可以限制为某一类同级sibings(‘li’) sibings(’.one’)
25、a.children() 选择a的子代，如果不限制，全选，也可以限制某一类a.children(‘li’)
26、a.parent()选择a的父级
27、index用户当前操作标签的索引值 $(this).index ( ′ l i ′ ) . e q ( ('li').eq( (′li′).eq((this).index)
28、CheckBox 修改checked的true或者false值，官方的方法不可用（都会处于选中的状态），要用社区的方法
属性的值都是true或者false都是用社区的方法，不能用官方的方法
29、控制显示与隐藏
显示：.show()
隐藏：.hide()
切换：.toggle()
show(时间ms，function(){动画完毕执行完毕后执行}) hide和toggle同上
不带参数：没有动画直接显示
单独书写时间
30、滑动动画
显示：.slideDown()
隐藏：.slideUp()
切换：.slideToggle()
自带时间
.slideDown(时间ms，function(){动画完毕执行完毕后执行}) .slideUp()和.slideToggle()同上
31、淡入淡出
显示：.fadeIn()
隐藏：.fadeOut()
切换：.fadeToggle()
自带时间
.fadeIn(时间ms，function(){动画完毕执行完毕后执行}) .fadeOut()和.fadeToggle()同上
透明到某一点 .fadeTo(时间，透明度0-1)
32、选择标签.animate({‘样式’：‘值’，‘样式’：‘值’}，时间ms) 只能修改值为纯数值
33、创建标签 $(‘标签’) $(’
34、a.append(b) 把b追加到a的内部后面
a.prepend(b) 把b追加到a的内部前面
35、a.before(b) 把b追加到a的同级之前
a.after(b) 把b追加到a的同级之后
36、a.remove() 删除a的标签
37、a.clone() 克隆a标签 不带时间 在括号里面加true带事件
38、hover复合了mouseenter和mouseleave
$(‘span’).hover(function(){鼠标移入执行代码},function(){鼠标移出执行代码})
$(‘span’).hover(function(){鼠标移入移出都执行代码})
jq第二天
1、浏览器渲染原理 有空看着本书
2、同步与异步
同步：阻塞
异步：非阻塞
3、冒泡:父级和子级有同样的事件的时候，触发子级，把父级也触发
解决方法：
1.给子级加 return false （加在函数结尾）
2.给子级加e.stopPropagation （e是形参，把event改成了e）
4、e.preventDefault() 可以阻止默认行为，也可以解决冒泡问题
return false 也可以解决默认行为
5、window.οnlοad=function(){} 原生函数，在head头部
$(function(){}) 入口函数 在head头部
6、事件委托 给父级增加点击事件，来操作父级内部的标签
e.target 用户当前操作的事件源内部的标签，原生的，e是function(e)
7、给span加click
另外建个span标签
事件委托
在click里面在加个click
8、mousemove() 移动的时候触发事件
9、screen 显示器，原点在左上角
page 页面原点
client 可视窗口
10、.width() .height() 获取标签宽和高
11、scroll（） 窗口滚动的时候触发事件
scrollTop（） 滚动坐标
$(‘himl，boby’).animate({‘scrollTop’:‘0px’} scrollTop不是css，是个例
$(window).scrollTop() 设置滚动坐标
.offset().top 检测标签距离页面原点的坐标
12、stop() 阻止动画排队，在动画之前加它 .stop().animate()
13、box-shadow 添加阴影
第一个值：必须。水平阴影的位置。允许负值
第二个值：必须。垂直阴影的位置。允许负值
第三个值：可选。模糊距离，羽化
第四个值：可选。阴影的大小
第五个值：可选。颜色
第六个值：可选。从外层的阴影（开始时）改变阴影内侧阴影
jq第三天
1、box-sizing:border-box; 标签的占位有宽高决定
2、width:100%; 参照物为父级
width:100vw; 宽为窗口大小的100%，不受父级影响它的大小,算上了右边的滚动条
height:100vh; 高为窗口大小的100%，不受父级影响它的大小,算上了下面的滚动条
3、cacl()计算属性，可以进行基本运算
4、font-size:12rem; rem是相对单位，参照物是HTML文字的大小
5、文字最小不能小于12px，
6、@media（max-width:768px）{
媒体查询 屏幕小于768的时候样式生效
HTML{
font-size:16px;
}
div{
}
}
7、em如果设置文字大小，参照物是父级文字大小。如果设置不是文字，参照物是当前标签文字大小
8、bootstrap 开源易用的前端框架
9、视口标签移动端必须加 上诉三个meta标签必须放在最前面，任何其他内容都必须放到他的后面
10、软考 前端1+X
11、text-overflow: ellipsis; 溢出用…隐藏，需要和下面两个一起使用
overflow:hidden;代表着超出文本的部分不显示
white-space:nowrap;代表强制文本在一行显示。
12、autoplay=“autoplay"有时候不能浏览器不能识别，需要加上muted=”"来使用，就可以自动播放了