笔记
Stirve unremitting
这个作者很懒,什么都没留下…
展开
-
js处理函数的节流与防抖的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> //原创 2020-06-14 23:31:25 · 119 阅读 · 0 评论 -
jquery的节点操作的几种方法
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src = 'jq原创 2020-06-14 23:29:45 · 306 阅读 · 0 评论 -
jquery获取网页元素
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入jquery --&原创 2020-06-14 23:27:59 · 598 阅读 · 0 评论 -
JS实现选择排序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> //原创 2020-06-10 23:40:41 · 117 阅读 · 0 评论 -
JS实现冒泡排序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> v原创 2020-06-10 23:39:53 · 86 阅读 · 0 评论 -
事件委托
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../../utils.js"></script&g原创 2020-06-10 23:37:26 · 78 阅读 · 0 评论 -
JS事件冒泡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #yeye { width: 350px;原创 2020-06-10 23:34:04 · 103 阅读 · 0 评论 -
JS事件的几种类型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px;原创 2020-06-10 23:30:42 · 273 阅读 · 0 评论 -
JS中DOM元素的位置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 200px;原创 2020-06-10 23:25:35 · 405 阅读 · 0 评论 -
JS中 DOM尺寸获取的一些方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../../utils.js"></script&g原创 2020-06-10 23:19:12 · 302 阅读 · 0 评论 -
JS查找节点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div>div1</d原创 2020-06-10 23:15:09 · 426 阅读 · 0 评论 -
JS文档碎片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <ul></ul>原创 2020-06-10 23:13:14 · 220 阅读 · 0 评论 -
JS中元素节点的操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 200px;原创 2020-06-10 23:12:24 · 89 阅读 · 0 评论 -
JS节点的获取方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div> <!原创 2020-06-10 23:11:10 · 240 阅读 · 0 评论 -
JS中innerHTML和innerText的区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button onclick="f原创 2020-06-10 23:09:52 · 143 阅读 · 0 评论 -
JS中获取网页元素id和class的操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button onclick="f原创 2020-06-10 23:02:33 · 1822 阅读 · 0 评论 -
js中获取自定义属性的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <ul> <li原创 2020-06-10 23:01:22 · 584 阅读 · 0 评论 -
JS中Window的事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 当代码执行到这里的时候,div还没有杯渲染出来,所以原创 2020-06-10 23:00:07 · 909 阅读 · 0 评论 -
JS中 querySelector和querySelectorAll选择网页元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1 id=title>ti原创 2020-06-10 22:58:26 · 424 阅读 · 0 评论 -
JS中获取元素的几种方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="box">b原创 2020-06-10 22:45:31 · 1257 阅读 · 0 评论 -
三种键盘事件的区别
onkeyup: 这个事件在用户按下并放开任何字母数字键时发生。系统按钮(例如,箭头键和功能键)无法得到识别。 onkeydown: 这个事件在用户放开任何先前按下的键盘键时发生。onkeypress : 这个事件在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生。 三者之间的执行顺序: 当按下回车时,焦点从文本框移到按钮上。如果把它换成“onkeypress”,焦点不会转移,也不会失去。但是如果换成“onkeyup”,则失去焦点,页面原创 2020-06-05 20:10:43 · 718 阅读 · 0 评论 -
锋利的ES6 — 常用新特性
letlet命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。什么叫代码块?简单地说:使用{}括起来的代码被称为代码块。比如:if、for、try…catch这些都是代码块var a = 20if (a % 2 === 0) { let b = 5}console.log(b) // ReferenceError: b is not defined.我们可以看到,在if块里用let定义的b变量在这个块级外面是不可使用的。let还有一个特点原创 2020-05-12 20:52:23 · 113 阅读 · 0 评论 -
锋利的ES6 — 常用新特性(1)
箭头函数箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。箭头函数的语法是 (param1, param2, …, paramN) => { statements } // 当函数体只有一句而且这一句就是返回值的时候,函数体的{}以及return关键字都可以省略 // 以下相当于:(param1, param2, …, p原创 2020-05-12 00:49:41 · 109 阅读 · 0 评论 -
网格布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ width: 600px; ...原创 2020-03-26 22:28:21 · 106 阅读 · 0 评论 -
移动端适配之流体布局 rem布局详细解说
一、流式布局(百分比布局)使用非固定像素来定义网页内容,也就是百分比布局,(特别适合于电商网站的布局)通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。这样的布局方式,就是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。二、rem布局(局限条件:主要用来适配手机和ipad,除了手机和ipad,其他的都不能适配。)rem布局...原创 2020-03-24 23:52:17 · 286 阅读 · 0 评论 -
移动端适配案列
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"...原创 2020-03-24 23:35:55 · 87 阅读 · 0 评论 -
移动端布局之rem+px+vw单位换算
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} html{ font-size:100px;...原创 2020-03-24 23:34:38 · 764 阅读 · 0 评论 -
HTML移动端适配准备
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"...原创 2020-03-24 23:32:03 · 257 阅读 · 0 评论 -
多列布局之瀑布流案列
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} body{padding: 0 15px;background: url(pb/img1/...原创 2020-03-24 15:11:28 · 101 阅读 · 0 评论 -
响应式布局----媒体查询
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ width: 100px; ...原创 2020-03-24 14:39:09 · 89 阅读 · 0 评论 -
响应式布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 绝大部分项目: PC端 ~~> 官网 移动端 ~~> 移动端网页,a...原创 2020-03-24 14:37:59 · 98 阅读 · 0 评论 -
css弹性盒圣杯布局案列
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{height: 100%;} *{margin: 0;padding: 0;} .b...原创 2020-03-24 14:32:32 · 102 阅读 · 0 评论 -
CSS弹性盒固定两栏布局案列
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} html,body,.box{height: 100%;...原创 2020-03-24 14:31:39 · 407 阅读 · 0 评论 -
CSS弹性盒flex属性
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ width: 600px; ...原创 2020-03-24 14:30:16 · 81 阅读 · 0 评论 -
CSS定位属性的对比与应用
css定位主要有相对定位、绝对定位、静态定位和固定定位。其中静态定位这个是元素的默认定位方式,不能使用top,bottom,left,right和z-index属性,其它三种定位可以使用以上几个属性。我们这里主要介绍后边的这三个定位。1.相对定位:如果想为元素设置层模型中的相对定位,需要设置position:relative;,它还是会占用该元素在文档中初始的页面空间,通过left、right...原创 2020-03-22 20:14:54 · 102 阅读 · 0 评论 -
CSS3弹性盒的anlign-self拉伸的效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ display:flex; ...原创 2020-03-22 14:17:26 · 132 阅读 · 0 评论 -
CSS3项目属性
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} /*body{display:flex;}*/ ...原创 2020-03-22 14:14:34 · 101 阅读 · 0 评论 -
元素flex的对齐属性
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} /*.box span{ width:...原创 2020-03-22 14:12:21 · 278 阅读 · 0 评论 -
怪异盒模型
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box1{ width: 200px; ...原创 2020-03-22 14:10:58 · 79 阅读 · 0 评论 -
CSS3宽高属性值
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box{ width:600px; ...原创 2020-03-19 21:31:11 · 151 阅读 · 0 评论