- 博客(27)
- 收藏
- 关注
RSS订阅原创 第十二章 拖拽效果和正则表达式
拖拽效果拖拽思路 onmousedown onmousemove onmouseup1.首先为需要拖拽的对象添加一个onmousedown事件记录:鼠标点击某个对象时的内部偏移量e.offsetX e.offsetY2.鼠标在文档上移动要想让操作的元素动起来,该元素必须有定位移动的过程,实际上改变,元素的left和top3.停止移动,需要触发onmouseup鼠标抬起时,取消移动document.οnmοusemοve=null在html中，元素可用onclick、ondblclic
2020-11-12 21:14:09
195
原创 第十一章 事件_2
事件流(当某个事件执行时,从子元素向父元素触发或从父元素向子元素触发时称为事件流)两种模式事件冒泡:从子元素向父元素触发 -->当某个事件触发时,同样的事件会向父元素触发.但并不是所有事件都会产生冒泡问题 onfocus onblur onload 不会产生冒泡问题事件捕获:从父元素触发例题 #father { height: 200px; width: 200px; border: 1px solid red;
2020-11-11 20:35:48
119
原创 第十章 事件event
outerHtml/innerHTML/innerHTML简单地说innerHTML和outerHTML,innerText的不同之处在于:innerHtml将元素中所有的内容都获取到包括HTML标签,但是不包括自身标签innerTextinnerText将元素的内容获取出来不包括HTML标签outerHtml将自身以及元素所有的内容都获取出来包括HTML标签包括自身标签 <body> <div id="d"> 老王<
2020-11-10 19:51:08
249
原创 第九章 DOM和BOM
Broswer Object Model 浏览器对象模型window 对象常用的属性和方法三个弹出框:特点阻塞式代码执行alert(“内容”) 弹出框;confirm("提示信息,“默认值”) 确认返回true 取消返回falseprompt (“提示信息”,“默认值”) 输入框 返回数值为字符串 //弹出框且打印数据 alert("heihei"); console.log("xixi"); //注意:弹出框是具有阻塞行为的 //从页面接收数据 //promp
2020-11-10 19:48:10
109
原创 第八章 Math对象,Date对象 ,document的方法
Math对象abs() 返回绝对值ceil() 向上取整floor() 向下取整:类似于parseInt()round() 四舍五入max() 返回最大值或最小值min()random() 返回0-1之间的伪随机数（不可能等于1，有可能等于0）Date()对象 //如果想要使用Date对象首先的实例化 var date=new Date()getFullYear() 返回年份getMonth() 返回月份(从0开始计数)getDate() 返回日期getHours()
2020-11-10 19:47:00
167
原创 第七章 ES5的Array的全局方法,String对象的全局方法
ES5的Array的全局方法 forEach(function(item,index,array){}) // forEach:在循环数组的时候可以使用 var arr = [1,5,6,4]; // arr.forEach(function(item,index,array){ // 本次循环出来的成员 console.log(item) // 本次循环的下标 console.log(index) // 被循环数组本身 console.log(
2020-11-03 20:00:53
91
原创 第六章 对象,JSON,字符串
对象:值得无序集合,一个key:value这种键值对的数据结构,对象也可以被看作是若干个 属性的无序集合. // 声明一个空对象 var o = {} // 声明一个不空的对象 var o = { name:"伟", age:18, sex:"male", married:false, // 方法：如果对象中哪一条属性的属性值是一个函数，那么我们就不太愿意把它叫成属性，而愿意叫做方法。 sayHello:function(){ alert("我叫大伟~O(∩_
2020-11-03 19:59:13
104
原创 第五章 变量的作用域,以及数组的全局方法
变量的作用域全局变量:在全局作用域下声明的变量就是全局变量，这种变量在任何地方都能被访问到.局部变量:在函数体内部声明的变量，这种变量只能在该函数体内部使用，在函数体外无法被访问或操作。在JS中没有块级作用域的概念,只有函数作用域的概念,只有函数才是一个封闭的作用域,在函数体内部声明的变量在函数体外部是无法访问的局部变量和全局变量冲突:以局部变量和全局变量冲突:以局部变量为准.如果想在函数体内部声明一个全局变量,那么只要去掉声明变量的var关键字即可.在布局作用域发生嵌套的时候,内层函数是可以
2020-11-03 19:57:27
114
原创 第三章 函数
函数(一段可以被高度复用的代码) //匿名函数:不常见,就是一个没有名字的函数. function(){ } //声明函数 function 函数名(形参1,形参2,形参3...){ //函数体 ... } //调用函数 函数名(实参1,实参2,实参3...) // 声明函数：做计划 function f1(){ console.log("戴维") console.log("真帅哦")
2020-10-29 17:10:02
141
原创 第二章 语句
语句switch语句 switch(变量){ case 常量1:{ 分支1; break; } case 常量2:{ 分支2; break; } case 常量3:{ 分支3; break; } default:{ 默认分支; break; }
2020-10-29 17:08:43
62
原创 第二章 数据类型的转化以及基本语句
数据类型强制转化的规则强制转换数据类型方法Number(exp) 将表达式的返回值强制转换为数字类型String(exp)…Boolean(exp)转换规则转NumberString:纯数字转换结果是字面量的形式转换,其它所有情况均为NaN.Boolean:true为1,flase为0.转String:所有类型转换为字符串类型就以字面量的形式转换.转BooleanNumber:除了0和NaN以外全部返回true.String:除了空字符串以外其它情况全为true.
2020-10-27 19:12:17
278
1
原创 第十五章 CSS精灵图
CSS Sprite(雪碧图或者CSS精灵图)雪碧图的本质：将项目中所有的小图进行整合，整合为一张大图，然后使用背景图片和background-position属性来进行定位，进而显示出整张大图里某一个小的区域。雪碧图的优势：介绍服务器端硬盘的寻址压力，减少HTTP请求次数；繁忙的网站有必要使用，但不繁忙的网站完全没有必要。劣势：1. 使用麻烦2. 维护起来不能改变原有图片的位置。使用注意事项：1.确定装载图片的容器，并为其设置宽高（图标的宽高）。2.为装载图片的容器设置backgroun
2020-10-26 19:54:50
79
原创 第一章 初始javascript
JS的引入方式内部引入例如css中style标签一样的写入形式,不过要用到的标签不是style而是script的标签,所以在script中写入要写的标签.外部引入 <script src="test.js"></script>行内引入行内样式的写入是在body里面写入onload <body onload="alert('诗和远方')"> </body>JS的组成ECMAScript(核心)DOM(文档对象类型)BOM
2020-10-26 19:38:01
167
原创 第十二章 css3的新增选择器
css3新增的选择器属性选择器 权重和class选择器一样 为10 方括号前面可以加标签名，限制元素[属性名]{} 属性名可以是自定义属性[属性名=“属性值”] 属性名和属性值匹配[属性名^=“值”] 属性值以某个值开头[属性名$=“值”] 属性值以某个值结尾[属性名*=“值”] 属性名中包含某个值伪类选择器 权重值和class选择器一样 为10 0010结构性的伪类child系列父元素 子元素:first-child{} 父元素中的第一个孩子必须和该子元素匹配父元素 子
2020-10-21 14:04:32
88
原创 第十四章 动画
动画 ie9及以下不支持定义动画 @keyframes 动画名{ 关键帧 划分时间 from{} 0% to{} 100% } 5s @keyframes 动画名{ 0%{} 0 20%{} 1s 40%{} 2s 60%{} 3s 80%{} 100%{} } 兼容写法 @-moz-keyframes longer{} @-webkit-keyframes longer{}使用动画ani
2020-10-21 14:03:45
70
原创 第十三章 css3的动画属性
浏览器内核(浏览器的解析代码机制)ie浏览器 Trident内核 -ms-火狐浏览器 Gecko内核 -moz-欧鹏浏览器 Blank内核 -o-谷歌浏览器 Webkit内核 -webkit-过渡的兼容写法 /* 标准写法 */ transition: all 1s; /* 火狐*/ -moz-transition: all 1s; -webkit-transition: all 1s;渐变 ie9及以下不支持线性渐变：background-image/bac
2020-10-21 14:02:37
93
原创 第十一章 表格表单的新增 以及触发BFC
表格和表单的新增表格的新增标题标签 captioncaption-side:top(默认)/bottom 标题的位置 <table> <caption>标题</caption> </table>列标题 th <tr> <th>姓名</th> <th>性别</th> <th>年纪</th> <
2020-10-21 14:01:32
88
原创 第十章 定位(2)
定位固定定位 position:fixed;参考物 浏览器窗口移动距离 left/right/bottom/top特点不会跟随滚动条进行滚动脱离文档流margin: auto;失效宽度自适应会失效，需要重新设置宽度应用场景侧边栏/回到顶部/头部导航/广告粘性定位 position:sticky;参考物 浏览器窗口移动距离 top特点未达到top值之前，普通元素，达到top值之后类似于固定定位锚点实现在同一个页面不同板块之间的跳转利用a标
2020-10-21 13:59:55
162
原创 第九章 定位
定位absolute 绝对定位应用场景元素的水平垂直居中有重叠效果 <div> <img src="img/1.webp" alt=""> <ul> <li class="first"></li> <li></li> <li></li> <li></li> <li
2020-10-21 13:58:50
95
原创 第八章 CSS属性的继承
css属性的继承给元素设置样式之后，该元素的后代都会具有该样式可以继承字体类：font-size(字体大小)font-weight(字体加粗) font-style(字体倾斜)font-family(字体类型)文本类：color(文本颜色) text-indent(缩进) line-height(行高) letter-spacing(字符间距) word-spacing(单词之间的距离) text-align(文本对齐方式)列表属性：list-style不可继承text-decora
2020-10-21 13:58:07
90
原创 第七章 元素类型,溢出属性
img自带的3px的底部留白vertical-align:垂直方向对齐方式 (只对图片生效)baseline 基线 默认值bottom 底线 可以解决bugmiddle 中线 可以解决bugtop 顶线 可以解决bug应用解决图片底部三像素的留白调整小图标和文字对齐的方式元素类型内联元素(inline) span b strong i em a sub sup img宽高不生效，由内容决定在同一行显示盒模型属性padding的左右生效，上下显示不准确;margi
2020-10-21 13:57:03
117
原创 第六章 盒模型
盒模型内容区(content) 显示文字/图片/视频等的区域，宽高确定内容区内填充(padding)padding值的设置一个值 padding:10px 四周两个值 padding:10px 20px; 上下 左右三个值 padding: 10px 20px 30px; 上 左右 下四个值 padding: 10px 20px 30px 40px; 上 右 下 左单方向 padding-方向(left/right/top/bottom): 数值+px;padding值的特点
2020-10-21 13:56:06
91
原创 第五章 HTML的相関概念
HTML的相关概念和建站流程HTML的概念：超文本标记语言HTML的基本组成结构 html/xhtml w3c(万维网联盟)制定规范样式 css w3c(万维网联盟)制定规范行为 js ECMA(欧洲电脑网商联合会)xhtml: 可扩展的标记性语言xhtml和html的区别？？xhtml的单标签后面需要加 /XHTML的标签必须是小写XHTML属性值必须使用双引号HTML的基本结构新建带有.html后缀的文件英文状态下 按! 按tab 生成基本结构<!
2020-10-21 13:53:55
75
原创 第四章CSS的属性
css属性层叠通过不同的选择器选择同一个标签的时候，设置了相同的属性，但是设置了不同的属性值，根据选择器的权重值，权重值高的优先显示，如果没有冲突的样式，正常显示大小写转换 text-transform首字母全部大写 capitalize全部小写 lowercase全部大写 uppercase默认值 none复合写法 fontfont: 字体加粗 字体倾斜 字体大小/行高 字体类型font: bold italic 20px/40px "宋体";字体加粗 字体倾斜为可
2020-10-09 19:35:57
135
1
原创 第三章选择器的使用
选择器伪类选择器 在某种状态下所显示的样式 爱恨原则 love hate超链接:link{} 链接未点击之前超链接:visited{} 链接访问之后任何元素:hover{} 鼠标划过该元素超链接:active{} 鼠标按下的状态css属性白利利(040E3C47E492对话) 11:24:46选择器伪类选择器 在某种状态下所显示的样式 爱恨原则 love hate超链接:link{} 链接未点击之前超链接:visited{} 链接访问之后任何元素:hover{} 鼠标划
2020-10-09 19:34:02
197
1
原创 CSS部分基础知识内容
css内联样式表<div style="width:200px;height:100px;background-color:red;color:blue;"></div>内部样式表在head标签里面，生成一个style的双标签在style的标签里面写对应的css样式 <style> div { width: 200px; height: 200px; background-color: pink
2020-10-09 19:04:32
100
原创 html基本标签
html基本的标签布局标签div 划分网页板块双标签/不带任何自带样式/独占一行span 小文本双标签/不带任何自带样式/在同一行显示列表标签无序列表 <ul> <li><b>哈哈哈</b><> <li><a href="">嘿嘿嘿嘿</a><> <li>嘻嘻嘻<> </ul>应用场景：
2020-10-09 19:03:04
310
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人