前端总结
前端总结
页面 => div的层级结构 => 具有采用哪些功能标签显示内容
结构层 > 位置层(布局层) > 内容层
- 行间式
<div style="width: 100px; height: 100px"> </div> <!-- 简单直接,针对性强 -->
- 内联式
<head> <style> 选择器 { width: 100px; height: 100px; } </style> </head> <!-- 解耦合了,可读性强 -->
- 外联式
/* index.css */
选择器 {
width: 100px;
height: 100px;
}
/* 适合团队高效率开发, 耦合性低, 复用性强 */
<!-- index.html --> <link rel='stylesheet' type='text/css' href='./index.css'>
1.没有优先级
2.不同的属性样式协同操作,相同的样式采用覆盖机制,选择逻辑最下方的
3.行间式一定是逻辑最下方的样式
* | div | . | # 通配 < 标签 < 类 < id (优先级:同一标签同一属性) 标签: 一般用于最内层样式修饰 类:使用范围最广,布局的主力军 id:唯一标识的布局,不能重复
/*字体样式*/
.box {
/*字族*/
/*STSong作为首选字体, 微软雅黑作为备用字体*/
font-family: "STSong", "微软雅黑";
/*字体大小*/
font-size: 40px;
/*字重*/
font-weight: 900;
/*风格*/
font-style: italic;
/*行高: 某一段文本在自身行高中可以垂直居中显示 => 文本垂直居中*/
line-height: 200px;
/*字体整体设置*/
/*字重 风格 大小/行高 字族 (风格可以省略) ***** */
font: 100 normal 60px/200px "STSong", "微软雅黑";
}
i {
/*normal清除系统字体风格*/
font-style: normal;
}
.box {
/*水平居中: left | center | right ***** */
/*text-align: center;*/
/*字划线: overline | line-through | underline */
text-decoration: overline;
/*字间距*/
letter-spacing: 2px;
/*词间距*/
word-spacing: 5px;
/*缩进*/
/*1em相当于一个字的宽度*/
text-indent: 2em;
}
a {
/*取消划线*/
text-decoration: none;
}
.box {
/*block: 块级标签, 独占一行, 支持所有css样式*/
/*display: block;*/
/*inline: 内联(行级)标签, 同行显示, 不支持宽高*/
/*display: inline;*/
/*inline-block: 内联块标签, 同行显示, 支持所有css样式*/
display: inline-block;
/*标签的嵌套规则*/
/*①*/
/*block可以嵌套所有显示类型标签, div | h1~h6 | p*/
/*注: hn与p属于文本类型标签,所有一般只嵌套inline标签*/
/*②*/
/*inline标签只能嵌套inline标签, span | i | b | sup | sub | ins */
/*③*/
/*inline-block可以嵌套其他类型标签, 但不建议嵌套任意类型标签 img | input*/
}
- 群组选择器
/* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */
div, #div, .div {
color: red
}
- 后代(子代)选择器
.sup .sub {
后代
}
.sup > .sub {
子代
}
- 兄弟(相邻) 选择器
.up ~ .down {
兄弟
}
.up + .down {
相邻
}
- 交集选择器
section.ss#s {
标签类名id名综合修饰
}
1.与修饰符位置无关
2.属性选择器与类选择器权重相同
3.id 无限大于 类[属性] 无效大于 标签
4.权重只与个数相关,个数(类型)均相同时,最后由位置决定
链接标签四大伪类
:hover(悬浮) | :active(点击集合)
:link :visited
位置相关
:nth-child() | :last-child 先确定位置再匹配类型
:nth-of-type() 先匹配类型再确定位置
取反
选择器:not(修饰词) | div:not(:nth-child(2))
margin + border + padding + content(width x height)
都具有自身区域
margin参与布局,不参与盒子显示,其他都参与盒子显示
border颜色自身定义,padding和content颜色有背景色填充
# 整体设置
padding: 上 右 下 左 (无值边取对边)
# 分开设置
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
# 整体设置
border: 10px solid black;
# 分开设置
border-top: 10px solid black;
border-right: 10px solid black;
border-bottom: 10px solid black;
border-left: 10px solid black;
如何要保证显示区域大小不变,增加了padding和border,可以相应减小content的区域
完成自身布局: margin-left | margin-top
下移|右移: top取正值|left取正值
上移|左移: top取负值|left取负值
作为兄弟,上盒子的垂直布局会影响下盒子垂直方位, 上盒子的结束位置为下盒子的开始位置
/* inline */
/*1.同行显示, 就相当于纯文本, 当一行显示不下, 如就是一个字显示不下,那么显示不下的那一个字就会自动换行,和纯文本的区别就是有标签整体的概念,标签与标签间有一个空格的隔断*/
/*2.支持部分css样式, 不支持宽高 | 行高(行高会映射到父级block标签) | margin上下*/
/*3.content由文本内容撑开*/
/*4.inline标签只嵌套inline标签*/
/* inline-block */
/*1.同行显示, 当一行显示不下, 标签会作为一个整体换行显示*/
/*2.支持所有css样式*/
/*3.content默认由文本(图片)内容撑开,也可以自定义宽高, 当自定义宽高后,一定采用自定义宽高(显示区域不足,内容会在标签内容换行显示,可能超出显示区域)*/
/*4.inline-block标签不建议嵌套任意标签*/
/* block */
/*1.异行显示, 不管自身区域多大, 都会独占一行*/
/*2.支持所有css样式*/
/*3.width默认继承父级,height由内容(文本,图片,子标签)撑开, 当设置自定义宽高后,一定采用自定义宽高*/
/*4.block可以嵌套任意标签*/
/* 本质 */
/*overflow: 处理内容超出盒子显示区域*/
overflow: auto | scroll | hidden
/*auto: 自适应, 内容超出, 滚动显示超出部分, 不超出则正常显示*/
/*scroll: 一直采用滚动方式显示*/
/*hidden: 隐藏超出盒子显示范围的内容*/
/*float: 浮动布局, 改变BFC的参照方位*/
/*为什么要使用: 使用它, 块级盒子就会同行显示*/
float: left | right; 左 | 右 浮动
/*left: BFC参照方向从左向右*/
/*right: BFC参照方向从右向左*/
/*浮动的区域有父级的width决定*/
浮动问题: 子级浮动了,不再撑开父级的高度, 那么父级如果拥有兄弟标签,可能就会出现布局重叠问题
清浮动: 解决上面的问题, 通过使父级获取一个合适的高度, 这样子级就不会和父级的兄弟布局发生重叠
clear: left | right | both
① 设置父级的死高度
② 通过兄弟设置 clear: both
③ 设置父级overflow属性
.sup {
overflow: hidden;
}
④ 通过父级:after伪类
.sup:after {
content: "";
display: block;
clear: both;
}
1.同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局
2.浮动布局的盒子宽度在没有设定时会自适应内容宽度
display: none;
在页面中不占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 不需要用动画处理时
opacity: 0;
在页面中占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 需要采用动画处理时
什么是定位布局: 可以通过上下左右四个方位完成自身布局的布局方式
- 相对定位
参考系: 自身原有位置
position: relative; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.left = -right | top = -bottom
3.布局后不影响自身原有位置
4.不脱离文档流
- 绝对定位
参考系: 最近的定位父级
position: absolute; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.父级必须自己设置宽高
3.完全离文档流
- 固定定位
参考系: 页面窗口
position: fixed; => 打开了四个定位方位
1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
2.相对于页面窗口是静止的
3.完全脱离文档流
- z-index
修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高
1. 百分比
2. vw | vh => max-width(height) | min-width(height)
3. em | rem
将区域整体划分起名 => 对其他区域布局不产生影响
提出公共css => reset操作
当有区域发送显示重叠(脱离文档流导致的), 需要通过z-index调整层级
一定需要最外层,且最外层做自身布局时,不要做过多布局操作
transition属性
transition: 过渡时间(必须) 延迟时间(一般不设) 过渡属性(一般采用all默认值) 过渡曲线(贝赛尔曲线)(cubic-bezier())
过渡属性具体设置给初始状态还是第二状态 根据具体需求
/*过渡的持续时间*/
transition-duration: 2s;
/*延迟时间*/
transition-delay: 50ms;
/*过渡属性*/
/*单一属性 | 属性1, ..., 属性n | all*/
transition-property: all;
/*过渡曲线*/
/*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);
/*结论:*/
/*1.尽量悬浮静止的盒子, 控制运动的盒子*/
/*2.不能确定区间范围的属性值, 不会产生动画效果*/
/*display 不能做动画 | opacity 可以做动画*/
/*x轴偏移量 y轴偏移量 虚化程度 阴影宽度 阴影颜色*/
box-shadow: 0 0 10px 10px black;
/*一个盒子可以设置多个阴影, 每一套阴影间用逗号隔开*/
box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;
/*自身需要定位*/
.box {
position: relative;
}
/*伪类通过定位来完成图层的布局*/
.box:before {
content: "";
/*完成布局*/
position: absolute;
top: 10px;
left: 0;
/*构建图层*/
width: 1px;
height: 100px;
background-color: black;
}
.box:after {
content: "";
position: absolute;
width: 100px;
height: 1px;
background-color: black;
top: 0;
left: 10px;
}
形变、动画、表格
/*1.形变参考点: 三轴交界点*/
transform-origin: x轴坐标 y轴坐标;
/*2.旋转 rotate deg*/
transform: rotate(720deg);
/*偏移 translate px*/
transform: translateX(200px) translateY(200px);
/*缩放 scale 无单位*/
transform: scale(x轴比例, y轴比例)
/*注: 可以多形变, 空格隔开书写在一条transform属性中, 顺序一般会影响形变结果*/
/*形变不改变盒子布局, 只拿形变做动画*/
/*1.设置动画体*/
@keyframes move {
/*起点省略采用的就是初始状态*/
0% {}
33.3% {
margin-left: 800px;
/*在每一个动画节点都需要明确所有做动画属性在该节点的属性值*/
margin-top: 50px;
}
66.6% {
margin-left: 500px;
margin-top: 300px;
}
/*终点需要设置*/
100% {
margin-left: 200px;
margin-top: 50px;
}
}
/*2.设置动画属性*/
/*animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线*/
.box {
animation: move 2s 1 linear;
}
<table> <caption>表格标题</caption> <thead> <tr> <th>标题</th> <th>标题</th> <th>标题</th> </tr> </thead> <tbody> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody> <tfoot> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tfoot> </table> table的全局属性: border="1" 设置边框宽度 cellspacing="10" 单元格间的间距 cellpadding="10" 单元格的内边距 rules="rows | cols | groups | all" 边框的保留格式 td的全局属性 rowspan='2' 合并两行单元格 colspan='3' 合并三列单元格 table的高度: 由内容和设置高度中的大值决定 table-cell: 可以嵌套任意类型标签, 可以快速实现多行文本垂直居中
<div class="sup"> <p>第一行文本</p> <div>第二行文本</div> </div>
.sup {
/*实现多行文本垂直居中 =>
针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/
display: table-cell;
vertical-align: middle;
}
/*注: 如果想调整sup的位置,可以给sup嵌套一个"位置层"*/
/*.box>.sup>p+div*/
JS闭包、面向对象、选择器、事件
// 函数的嵌套定义, 定义在内部的函数就称之为 闭包 // 1.一个函数要使用另一个函数的局部变量 // 2.闭包会持久化包裹自身的函数的局部变量 // 3.解决循环绑定 function outer() { var num = 10; function inner() { // 闭包 // 1.在inner函数中,使用了outer的局部变量num return num; } return inner; } var innerFn = outer(); // 2.借助闭包,将局部变量num的生命周期提升了 var num = innerFn(); console.log(num);
// 1.单一对象 var obj = { // 属性 name: 'Zero', // 方法 teach: function () { console.log("教学"); } }; obj.name | obj.teach() // 2.构造函数 function Person(name) { // 类似于python中的类一样来使用 // this代表Person构造函数实例化出的所有具体对象中的某一个 this.name = name; this.teach = function () { console.log(this.name + "正在教学"); } } // ①通过构造函数实例化出具体对象 // ②通过对象.语法调用属性与方法 var p1 = new Person("张三"); p1.name // 张三, this指向p1对象 var p2 = new Person("李四"); p2.teach // 李四正在教学, this指向p2对象 // 3.ES6类语法 class Student { // 需要构造器(构造函数)来完成对象的声明与初始化 constructor (name) { // 属性在构造器中声明并完成初始化 this.name = name; } // 类中规定普通方法 study () { console.log(this.name + "正在学习"); } // 类方法 static fn() { console.log("我是类方法") } } // 类中的普通方法由类的具体实例化对象来调用 // 类中的类方法由类直接来调用(这类型的方法大多是功能性方法,不需要对象的存在)
-
-
getElement系列(最严谨)
// id获取: // getElementById('id名') // 只能由document来调用 // class获取 // getElementsByClassName('class名') // 可以由document以及所属父级调用 // tag获取 // getElementsByTagName('标签名') // 可以由document以及所属父级调用
- querySelector
// 获取第一个满足要求的目标 // querySelector() // 获取所有满足要求的目标 // querySelectorAll() // 1.参数: 就采用的是css选择器语法 // 2.可以由document及父级来调用 // 3.对id检索不严谨
// js事件: 页面标签在满足某种条件下可以完成指定功能的这种过程, 成之为事件 // 某种条件: 如鼠标点击标签: 点击事件 | 鼠标双击标签: 双击事件 | 键盘按下: 键盘按下事件 // 指定功能: 就是开发者根据实际需求完整相应的功能实现 // 钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能) // 点击事件: 明确激活钩子的条件 = 激活钩子后改处理什么逻辑, 完成指定功能(函数) // 获取页面标签是前提 var div = document.querySelector('.div'); // 钩子条件: 双击 = 指定功能(自身背景颜色变红) div.ondblclick = function () { this.style.backgroundColor = 'red'; }
- 文本内容
// box.innerText // 可以设值, 也可以获取值
- 标签内容
// box.innerHTML // 可以设值, 也可以获取值, 能解析html语法代码 // box.outerHTML // 获取包含自身标签信息的所有子内容信息
- 样式
// box.style.样式名 ==> 可以设值,也可以获取,但操作的只能是行间式 // getComputedStyle(box, null).样式名 ==> 只能获取值,不能设值, 能获取所有方式设置的值(行间式 与 计算后样式) // 注: 获取计算后样式,需要关注值的格式
JS对象高级、事件高级
- 对象的key为字符串类型, value为任意类型
var obj = { name: "name", "person-age": 18 } // 访问 obj.name | obj["name"] obj["person-age"]
- 对象的属性可以任意添加与删除
var obj = { name: "obj" } // 删除 delete obj.name // 添加 obj.age = 18 // 如果age的key已存在就是修改值, 不存在就是添加键值对, 添加的key任意 // 注: 获取的页面元素(标签对象)也可以任意添加/删除属性
ele.getAttribute("alert");
// 获取页面标签ele的alert全局属性的值, 如果没有该全局属性值为null
ele.setAttribute("attr_key", "attr_value");
// 页面标签ele已有该全局属性,就是修改值, 没有就是添加该全局属性并赋相应值
// 注: 一般应用场景, 结合css的属性选择器完成样式修改
// 第一种 box.onclick = function(){} // 只能绑定一个实现体, 如果有多次绑定, 保留最后一次 // box.onclick = null来取消事件的绑定 // 第二种 var fn = function() {} box.addEventListener('click', fn) // 能绑定多个实现体, 如果有多次绑定, 按顺序依次执行 // box.removerEventListener('click', fn)来取消事件的绑定 // 了解: 第三个参数决定冒泡顺序(子父级谁先相应事件)
- 事件对象
// 系统回调事件函数时, 传递了一个 事件(event) 实参 // 如果要使用传递来的实参 事件(event), 定义接收的 形参 即可 box.onclick = function(ev){ // 使用事件对象 // 特殊按键 eg: ev.altKey: true | false // 鼠标触发点: ev.clientX | ev.clientY // 取消冒泡 ev.cancelBubble = true; // 取消默认事件 return false; }
JS总结:常用事件,js盒模型,动画
var box = document.querySelector('.box'); // 1. 点击事件 box.onclick = function () { console.log("单击"); }; // 2. 双击事件(应用场景不广) box.ondblclick = function () { console.log("双击"); }; // 3. 鼠标右键 box.oncontextmenu = function () { console.log("右键了"); return false; }; // 4. 鼠标悬浮 | 移动 | 按下 | 抬起 | 离开 box.onmouseover = function () { console.log("悬浮"); }; box.onmousemove = function () { console.log("移动"); }; box.onmousedown = function () { console.log("按下"); }; box.onmouseup = function () { console.log("抬起"); }; box.onmouseout = function () { console.log("离开"); }
// over | out VS enter | leave // 总结: // 1. 将子级与父级分开考虑, 大家都有各自的悬浮离开事件, 采用 over | out 组合 // 2. 将子级纳入父级考虑范围, 也就是只有父级去相应悬浮离开事件, 采用 enter | leave 组合 // 3. 单独考虑一个盒子的悬浮离开事件, 两套均可以 // 特性 // 从父级移至子级, 会触发out事件, 紧接着触发子级的over事件, 并可以冒泡给父级 // 从父级移至子级, leave事件并不会触发, 它认为子级是属于父级的一部分, enter事件, 也不会再次触发 // 悬浮子级: // sub over => sup over 支持冒泡 // sup enter => sub enter 不支持冒泡
- 键盘事件
// onkeydown: 键盘按下会触发, 长按会持续触发 // onkeyup: 键盘抬起会触发 // ev.keyCode: 按下的键盘键的标号
- 其他事件
// window.onload: 页面加载完毕触发
// window.onscroll | document.onscroll => window.scrollY(页面下滚距离): 页面滚动触发
// content: 通过计算后样式获取 // padding + content: box.clientWidth | box.clientHeight // border + padding + content: box.offsetWidth | box.offsetHeight // 绝对定位top|left: box.offsetTop | box.offsetLeft
// 一次性定时器 var timeout = setTimeout(function(a, b){}, 1000, 10, 20); // 持续性定时器 var timer = setInterval(function(a, b){}, 1000, 10, 20); // 清除定时器 // clearTimeout | clearInterval //结论: // 1. 定时器不会立即执行 // 2. 一次性定时器只执行一次, 持续性定时器不做清除的话会一直执行 // 3. 声明定时器第一个参数为逻辑函数地址, 第二个参数为事件间隔, 第三个为逻辑函数所需参数(可以为多个,一般省略) // 4. 清除定时器可以混用, 本质就是清除创建定时器时的数字标号, 该编号就是创建定时器时的返回值 // 小技巧: 如果页面中有n个定时器 var n = setTimeout(function () {}, 1); for (var i = 1; i < n; i++) { clearInterval(i) }
// DOM: 文档对象模型 => 提高给用户操作document obj的标准接口
// DOM树: 以document为根, 树状展开所有子节点
// 节点分类: 6个
// document | doctype | element | text | attr | comment
- 节点常规操作
var info_node = document.createAttribute("info"); // 创建 console.log(info_node.nodeName); console.log(info_node.nodeType); info_node.value = '123'; // 设置 console.log(info_node.nodeValue); sup1.setAttributeNode(info_node); // 添加
// 父级 console.log(sup.parentElement) // 子级们 console.log(sup.children); // 第一个子级 console.log(sup.firstElementChild); // 最后一个子级 console.log(sup.lastElementChild); // 上兄弟 console.log(sup.previousElementSibling); // 下兄弟 console.log(sup.nextElementSibling); // 注: 文档结构操作是可以采用连.语法 // sup.children[0].parentElement // 自己
// 操作步骤 // 1. 创建div(元素节点) // 2. 设置div属性(单一css | css类名 | 文本 | 子标签 | 事件 | ...) // 3. 添加到(文档结构中)指定位置
// 创建:只能由document调用 var box = document.createElement('div'); // 在body元素的最后追加一个子元素 body.appendChild(box); // 在body元素oldEle之前插入一个子元素 body.insertBefore(box, oldEle); // 从body中删除box元素,可以接受返回值,就是删除的元素 var res = body.removeChild(div); // 将body中oldEle元素替换为box,可以接受返回值,就是被替换的元素 res = bodyreplaceChild(box, oldEle); // true深拷贝,拷贝自身与内容, false浅拷贝,只拷贝自身标签 box.cloneNode()
// ev.target通过父级的事件对象,获取具体相应区域位置的子级元素 // 应用场景 // 1. 父级的子元素类型不同一,采用循环绑定不方便 // 2. 父级子元素较多或不确定
// BOM: Browser Object Model, 提供用户与浏览器交互的标准接口 // BOM的顶级对象为window对象, 页面中出现的其实所有对象都是window的子对象 // 重要的子对象 // document | history | location | navigator | screen
// location => url信息 console.log(location); // 域名:端口号 console.log(location.host); // 域名 console.log(location.hostname); // 端口号 console.log(location.port); // 查询信息 console.log(location.search);
// history
history.back() | history.forward() | history.go(-num | num)
// navigator
console.log(navigator.userAgent)
// Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36
JQ引入与操作
<!-- 下载jq到本地 --> <script src="js/jquery-3.3.1.js"></script>
- CDN
<!-- jq CDN 地址 -->
// jQuery: 具有jq框架规定的所有功能的调用者, 也就是框架产生的唯一对象
// $本质上就是jQuery对象, 开源通过 var JQ = jQuery.noConflict();来自定义jQuery对象
// jq的延迟加载: 文档树加载完毕, 即回调 $(document).ready(function() {}) // 1. 早于window.onload // 2. 可以多次绑定事件 // 3. 可以简写为$(function() {})
- 选择器
// $(css选择器语法) // eg: $('.box') 得到的是一个存放原生js对象的数组, 就是jq对象, 页面中有多少个.box, 该jq对象就承载者多少个对象,. 可以作为一个整体来使用
- 对象间转换
// js对象: box jq对象: $box // 将js对象转换为jq对象: $(box) // 将jq对象转换为js对象: $box[index]
- 文本操作
// 获取原有文本 $box.text() | $box.html() // 设置新文本 $box.text('newData') | $box.html('<b>newData</b>')
- 事件绑定
// $box为jq对象 $box.click(function(ev) { }) // 注: jq对象如果包含多个页面元素对象, 可以一次性对所有对象绑定该事件 // ev事件为jq事件, 兼容js事件 // this为js对象, $(this)就转换为jq对象 // 内部可以通过$(this).index()获取自身在当前结构下的索引(从0开始)
- 类名操作
$box.addClass("newClass") // 添加一个新类名 $box.removeClass("oldClass") // 删除一个已有的类名 // 多类名时,jq操作类名将每个类名最为单一考虑对象,不会影响其他类名
- 样式操作
$box.css('background-color') // 获取背景颜色 $box.css('background-color', 'red') // 设置背景颜色 $box.css('background-color', function() {return 'yellow'}) // 通过函数返回值设置背景颜色
- 文档结构关系
// 父 $sup.parent() // 父,父的父... $sup.parents() // 子们 $sup.children() ***** // 上兄弟 $sup.prev() *** // 上兄弟们 $sup.prevAll() // 下兄弟 $sup.next() *** // 下兄弟们 $sup.nextAll() // 同级别的兄弟们 $sup.siblings() *** // 在sup下查找类名为inner的子级 $sup.children('.inner') // 获得的结果都是jq对象, 还可以接着使用jq方法
JQ选择器,属性操作,css样式设置,事件,动画
- css3语法选择器
$('css3选择器位')
- 索引匹配
$('div:eq(0)') $('div').eq(0)
- 内容
$('div:contains(标签文本内容)') // 注: 采用模糊匹配
- 文本
// 赋值: 有参数 $('.box').html('<i>beat box</i>'); // 取值: 无参数 console.log($('.box').text()); // 表单内容 // $('.inp').val("input 内容 为 value"); console.log($('.inp').val());
- 属性
// 取 console.log($('img').attr('alt')); // 设 $('img').attr('src', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg') // 增 $('img').attr('abc', function () { return "ABC"; })
- 类名
$(this).addClass('active'); // 添加 $(this).removeClass('box'); // 删除 // 如果有active 删除, 反之添加 $(this).toggleClass('active'); // 切换
// 取值 console.log($('.box').css('font-size')); // 设值 $('.box').css('color', 'deeppink') // 单一属性设值 .css({ // 设置多个属性值 // 1.就是给css()函数赋值一个js对象 // 2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法 // 2.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值 width: '300px', 'height': 300, 'background-color': 'cyan', borderRadius: '30px' }) .css('width', function(index, oldWidth) { // 逻辑单一属性设值 if (index == 0) { // 延迟1s // var b_time = new Date().getTime(); // while (new Date().getTime() - b_time < 1000){} return 1.5 * parseInt(oldWidth); } return oldWidth; })
- 绑定方式
// 第一种 on // 四个参数: 事件名, 委派的子级, {key-value传入的数据}, 事件回调函数 $('.box').on('click', 'span', {name: 'hehe'}, function(ev){}) // 第二种 // 两个参数: {key-value传入的数据}, 事件回调函数 $('.box').click({name: 'hehe'}, function(ev){})
- 事件对象
// 为jq事件对象, 兼容js事件对象 // 坐标: ev.clientX | ev.clientY // 按键: ev.keyCode // 数据: ev.data.key名 => eg:ev.data.name
- 冒泡与默认动作
// 冒泡: ev.stopPropagation();
// 默认动作: ev.preventDefault();
- 委派
$('.box').on('click', 'span', {name: 'hehe'}, function(ev){}) // 注: 通过父级box来绑定点击事件,其实将事件委派给其子级span标签
- 系统预定义
// time_num: 动画持续的时间 // finish_fn: 动画结束后的回调函数 // 1. hide(time_num, finish_fn) | show(time_num, finish_fn) | toggle(time_num, finish_fn) // 2. slideUp() | slideDown() | slideToggle() 参数同上 // 3.fadeOut() | fadeIn() | fadeTo() | fadeToggle() 参数同上
- 自定义动画
// 参数: 做动画的样式们 {}, 动画持续时间, 运动曲线, 动画结束后的回调函数 animate({ width: 300, height: 500 }, 300, 'linear', function() { // 动画结束后回调 }) // 动画本体采用的是css动画
JQ文档结构与操作
var $sup = $('.sup'); console.log($sup.children()); // 子们 console.log($sup.parent()); // 父 console.log($sup.prev()); // 上兄弟 console.log($sup.next()); // 下兄弟 console.log($sup.siblings()); // 兄弟们
- 操作步骤
// 1.创建页面元素 var $box = $('<div class="box"></div>') // 2.设置页面元素 $box.text('文本'); $box.click(fn); // 3.添加到指定位置 $box.appendTo($('body'));
- 内部操作
// append(): 父 加 子 到最后 // prepend(): 父 加 子 到最前 // appendTo(): 子 加到 父 到最后 // prependTo(): 子 加到 父 到最前
- 兄弟
$('.box').after('<b></b>'); // 在box后添加一个b标签 $('.box').before('<b></b>'); // 在box前添加一个b标签
- 包裹(添加父级)
$('.box').wrap('<div></div>'); // 为box添加一个div父级
- 替换
$('.box').repleaceWith($('.ele')); // 把box替换为ele $('p').repleaceAll($('b')); // 用p替换所有的b
- 删除
// 1.清空所有子级 $('.box').empty(); // 将box的子级全部删除, 操作的返回值为 自身 // 2.不保留事件的删除 // remove()操作的返回值为 自身 $('.box').remove().appendTo($('body')); // 删除自身再添加到body,原来box已有的事件不再拥有 // 3.保留事件的删除 // detach()操作的返回值为 自身 $('.box').detach().appendTo($('body')); // 删除自身再添加到body,原来box已有的事件依然拥有
