W_Queen&-CSDN博客

原创第十二章拖拽效果和正则表达式

拖拽效果拖拽思路 onmousedown onmousemove onmouseup 1.首先为需要拖拽的对象添加一个onmousedown事件记录:鼠标点击某个对象时的内部偏移量 e.offsetX e.offsetY 2.鼠标在文档上移动要想让操作的元素动起来,该元素必须有定位移动的过程,实际上改变,元素的left和top 3.停止移动,需要触发onmouseup鼠标抬起时,取消移动 document.οnmοusemοve=null 在html中，元素可用onclick、ondblclic

2020-11-12 21:14:09 252

原创第十一章事件_2

事件流(当某个事件执行时,从子元素向父元素触发或从父元素向子元素触发时称为事件流) 两种模式事件冒泡:从子元素向父元素触发 -->当某个事件触发时,同样的事件会向父元素触发.但并不是所有事件都会产生冒泡问题 onfocus onblur onload 不会产生冒泡问题事件捕获:从父元素触发例题 #father { height: 200px; width: 200px; border: 1px solid red;

2020-11-11 20:35:48 190

原创第十章事件event

outerHtml/innerHTML/innerHTML 简单地说innerHTML和outerHTML,innerText的不同之处在于: innerHtml将元素中所有的内容都获取到包括HTML标签,但是不包括自身标签innerText innerText将元素的内容获取出来不包括HTML标签 outerHtml将自身以及元素所有的内容都获取出来包括HTML标签包括自身标签 <body> <div id="d"> 老王&lt

2020-11-10 19:51:08 304

原创第九章 DOM和BOM

Broswer Object Model 浏览器对象模型 window 对象常用的属性和方法三个弹出框:特点阻塞式代码执行 alert(“内容”) 弹出框; confirm("提示信息,“默认值”) 确认返回true 取消返回false prompt (“提示信息”,“默认值”) 输入框返回数值为字符串 //弹出框且打印数据 alert("heihei"); console.log("xixi"); //注意:弹出框是具有阻塞行为的 //从页面接收数据 //promp

2020-11-10 19:48:10 143

原创第八章 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 208

原创第七章 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 135

原创第六章对象,JSON,字符串

对象:值得无序集合,一个key:value这种键值对的数据结构,对象也可以被看作是若干个属性的无序集合. // 声明一个空对象 var o = {} // 声明一个不空的对象 var o = { name:"伟", age:18, sex:"male", married:false, // 方法：如果对象中哪一条属性的属性值是一个函数，那么我们就不太愿意把它叫成属性，而愿意叫做方法。 sayHello:function(){ alert("我叫大伟~O(∩_

2020-11-03 19:59:13 150

原创第五章变量的作用域,以及数组的全局方法

变量的作用域全局变量:在全局作用域下声明的变量就是全局变量，这种变量在任何地方都能被访问到. 局部变量:在函数体内部声明的变量，这种变量只能在该函数体内部使用，在函数体外无法被访问或操作。在JS中没有块级作用域的概念,只有函数作用域的概念,只有函数才是一个封闭的作用域,在函数体内部声明的变量在函数体外部是无法访问的局部变量和全局变量冲突:以局部变量和全局变量冲突:以局部变量为准. 如果想在函数体内部声明一个全局变量,那么只要去掉声明变量的var关键字即可. 在布局作用域发生嵌套的时候,内层函数是可以

2020-11-03 19:57:27 156

原创第三章函数

函数(一段可以被高度复用的代码) //匿名函数:不常见,就是一个没有名字的函数. function(){ } //声明函数 function 函数名(形参1,形参2,形参3...){ //函数体 ... } //调用函数函数名(实参1,实参2,实参3...) // 声明函数：做计划 function f1(){ console.log("戴维") console.log("真帅哦")

2020-10-29 17:10:02 170

原创第二章语句

语句 switch语句 switch(变量){ case 常量1:{ 分支1; break; } case 常量2:{ 分支2; break; } case 常量3:{ 分支3; break; } default:{ 默认分支; break; }

2020-10-29 17:08:43 110

原创第二章数据类型的转化以及基本语句

数据类型强制转化的规则强制转换数据类型方法 Number(exp) 将表达式的返回值强制转换为数字类型 String(exp)… Boolean(exp) 转换规则转Number String:纯数字转换结果是字面量的形式转换,其它所有情况均为NaN. Boolean:true为1,flase为0. 转String:所有类型转换为字符串类型就以字面量的形式转换. 转Boolean Number:除了0和NaN以外全部返回true. String:除了空字符串以外其它情况全为true.

2020-10-27 19:12:17 368 1

原创第十五章 CSS精灵图

CSS Sprite(雪碧图或者CSS精灵图) 雪碧图的本质：将项目中所有的小图进行整合，整合为一张大图，然后使用背景图片和background-position属性来进行定位，进而显示出整张大图里某一个小的区域。雪碧图的优势：介绍服务器端硬盘的寻址压力，减少HTTP请求次数；繁忙的网站有必要使用，但不繁忙的网站完全没有必要。劣势： 1. 使用麻烦 2. 维护起来不能改变原有图片的位置。使用注意事项： 1.确定装载图片的容器，并为其设置宽高（图标的宽高）。 2.为装载图片的容器设置backgroun

2020-10-26 19:54:50 134

原创第一章初始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 208

原创第十二章 css3的新增选择器

css3新增的选择器属性选择器权重和class选择器一样为10 方括号前面可以加标签名，限制元素 [属性名]{} 属性名可以是自定义属性 [属性名=“属性值”] 属性名和属性值匹配 [属性名^=“值”] 属性值以某个值开头 [属性名$=“值”] 属性值以某个值结尾 [属性名*=“值”] 属性名中包含某个值伪类选择器权重值和class选择器一样为10 0010 结构性的伪类 child系列父元素子元素:first-child{} 父元素中的第一个孩子必须和该子元素匹配父元素子

2020-10-21 14:04:32 154

原创第十四章动画

动画 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 100

原创第十三章 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 159

原创第十一章表格表单的新增以及触发BFC

表格和表单的新增表格的新增标题标签 caption caption-side:top(默认)/bottom 标题的位置 <table> <caption>标题</caption> </table> 列标题 th <tr> <th>姓名</th> <th>性别</th> <th>年纪</th> <

2020-10-21 14:01:32 131

原创第十章定位(2)

定位固定定位 position:fixed; 参考物浏览器窗口移动距离 left/right/bottom/top 特点不会跟随滚动条进行滚动脱离文档流 margin: auto;失效宽度自适应会失效，需要重新设置宽度应用场景侧边栏/回到顶部/头部导航/广告粘性定位 position:sticky; 参考物浏览器窗口移动距离 top 特点未达到top值之前，普通元素，达到top值之后类似于固定定位锚点实现在同一个页面不同板块之间的跳转利用a标

2020-10-21 13:59:55 216

原创第九章定位

定位 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 134

原创第八章 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 130

原创第七章元素类型,溢出属性

img自带的3px的底部留白 vertical-align:垂直方向对齐方式 (只对图片生效) baseline 基线默认值 bottom 底线可以解决bug middle 中线可以解决bug top 顶线可以解决bug 应用解决图片底部三像素的留白调整小图标和文字对齐的方式元素类型内联元素(inline) span b strong i em a sub sup img 宽高不生效，由内容决定在同一行显示盒模型属性padding的左右生效，上下显示不准确;margi

2020-10-21 13:57:03 161

原创第六章盒模型

盒模型内容区(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 121

原创第五章 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 98

原创第四章CSS的属性

css属性层叠通过不同的选择器选择同一个标签的时候，设置了相同的属性，但是设置了不同的属性值，根据选择器的权重值，权重值高的优先显示，如果没有冲突的样式，正常显示大小写转换 text-transform 首字母全部大写 capitalize 全部小写 lowercase 全部大写 uppercase 默认值 none 复合写法 font font: 字体加粗字体倾斜字体大小/行高字体类型font: bold italic 20px/40px "宋体"; 字体加粗字体倾斜为可

2020-10-09 19:35:57 201 1

原创第三章选择器的使用

选择器伪类选择器在某种状态下所显示的样式爱恨原则 love hate 超链接:link{} 链接未点击之前超链接:visited{} 链接访问之后任何元素:hover{} 鼠标划过该元素超链接:active{} 鼠标按下的状态 css属性白利利(040E3C47E492对话) 11:24:46 选择器伪类选择器在某种状态下所显示的样式爱恨原则 love hate 超链接:link{} 链接未点击之前超链接:visited{} 链接访问之后任何元素:hover{} 鼠标划

2020-10-09 19:34:02 285 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 134

原创 html基本标签

html基本的标签布局标签 div 划分网页板块双标签/不带任何自带样式/独占一行 span 小文本双标签/不带任何自带样式/在同一行显示列表标签无序列表 <ul> <li><b>哈哈哈</b><> <li><a href="">嘿嘿嘿嘿</a><> <li>嘻嘻嘻<> </ul> 应用场景：

2020-10-09 19:03:04 398 1

qq_45983879的博客