- 博客(44)
- 收藏
- 关注
RSS订阅原创 JS实现螺旋数组遍历通用方法
/**遍历螺旋数组通用方法* sn空数组 用于接收扁平化处理后的元素*/fn(arr,sn){for(var i=0;i<arr.length;i++){if(Array.isArray(arr[i]) === true){fn(arr[i],sn)}else{sn.push(arr[i])}}}举例：//[1,2,['3',4,[5,'6',[7,8]]],9] 转为 [1,2,'3',4,5,'6',7,8,9]totateArray(){let arr = [1,
2021-02-21 16:20:05
285
原创 图形（Figure）元素
今天学到一个小技巧，平时用以下代码标记图片<img src="images/Yi01.jpg"/><p>this is ...</p>这种方法没有富有语义的将图片和文字说明进行关联我们可以使用figure及figcaption标签将图形说明文字与图形配对起来。figure标签能独立的表示文档流内容（图片、图表、代码等），figure 元素的内容应该与...
2020-02-13 16:40:47
611
原创 js当函数名与变量重名
今天遇到一个面试题function bar(){return foo;foo=10;function foo(){}var foo=11;}alert(typeof bar());这个题我的答案是undefined；正确答案是function；bar()函数输出了function。我根本没有考虑到 函数与变量重名时，函数的优先级更高；...
2019-04-23 21:33:16
214
原创 css权重问题
1.什么是css权重？“css权重关系到你的css规则是怎样显示的”。当很多规则作用到一个元素上，权重会决定那种规则会生效，也就是优先级的问题。如果两个选择器同时作用在一个元素上，则权重高者生效。2.权重分为四个等级1）、行内样式，指html里的style（它的权重值是1000）行内样式对你的元素直接产生作用。<div style="color:red"></div&...
2019-04-09 17:30:02
182
原创 css中clear属性both、left、right的用法
虽然经常在用clear，但是今天突然仔细一琢磨发现并没有那么简单。经过自己查找方法和无数次的实验，终于弄明白了几个属性值的用法。自己总结了几个要注意的点，具体戳http://ons.me/434.html写的很不错。1.clear的用法官方解释为“元素盒子的边不能和前面的浮动元素相邻”。怎么理解呢？clear很善良，它只会让自己离开不会让他周围的元素离开。举个栗子：比如：clear：left，因...
2019-04-08 22:38:12
690
原创 清除元素浮动的方法
一、为什么要清除浮动父元素没有设置高或者高设置为auto或者父元素的高度小于子元素高度时，子元素若浮动即脱离文本流（这时无论你怎么调子元素的高度，父元素的高度都不会有变化），父元素高度就会出现所谓的坍缩（即高度为0或者为你设置的高度），这可能会影响页面下面的布局，所以在设置了浮动后要清除浮动。二、清除浮动的方法1、用overflow：hidden 清除浮动：在子元素设置浮动后，如果父元素没...
2019-04-08 22:08:41
513
原创 内置对象、宿主对象、自定义对象
在javascript中的对象分为三种：内置对象、宿主对象和自定义对象1、内置对象：由ECMAScript提供的，不依赖于宿主环境对象，这些对象在程序执行前就已经存在了。即无论在何种环境中都存在内置对象。javascript中的内置对象有：Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象，...
2019-04-04 16:30:43
344
原创 javascript的全局函数
JavaScript中只有global全局对象，并没有window全局对象，window对象是浏览器厂商实现的。
2019-04-03 09:09:04
4521
原创 支持响应式设计meta标签的用法
**meta标签里的name（页面描述信息），content（指定实际内容）**如：如果指定level(等级)为value(值)，则Content可能是beginner(初级)、intermediate(中级)、advanced(高级)。控制手机全屏的content里多个属性的意思：width - viewport的宽度 height - viewport的高度initial-scale -...
2019-04-03 09:04:52
1083
原创 css伪类给元素添加特殊效果
CSS伪类用于向某些选择器添加特殊的效果。:active 向被激活的元素添加样式。:focus 向拥有键盘输入焦点的元素添加样式。:hover 当鼠标悬浮在元素上方时，向元素添加样式。:link 向未被访问的链接添加样式。:visited 向已被访问的链接添加样式。比如鼠标移动到按钮并点击，触发的顺序是：link–>visited—>hover—>active即记为l...
2019-04-03 08:41:41
1298
原创 行内元素和块级元素、替换元素和不可替换元素
一般我们习惯性将html元素分为行内元素和块级元素：行内元素：1.和其他元素都在一行2.高度、宽度以及内边距都是不可控的3.宽高就是内容的高度，不可以改变4.行内元素只能行内元素，不能包含块级元素5.行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,paddin...
2019-04-03 08:23:12
899
原创 内联元素和块级元素之间的转换
内联元素和块级元素之间的转换方法：比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。知识拓展一、内联元素又名行内元素(inline element)，和其对应的是块元素(block element)内联元素的特点：1、和其他元素都在一行上；...
2019-04-01 23:11:49
3129
原创 用JS写淘宝放大镜
在写这个例子时，用到了自定义属性，之前对自定义属性不太了解在HTML5规范里增加了一个自定义data属性， 这个自定义data属性的用法非常的简单，就是你可以往HTML标签上添加任意以 "data-"开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。下面看一下放大镜的例子：html代码：<div class="block"> &l...
2019-03-27 07:33:13
88
原创 JS里函数内部和外部声明的变量重复问题
今天遇到了这么一个问题var a=10; function fun(){ console.log(a);//undefined var a=20; console.log(a);//20 } fun();有人会有这样的疑惑，为什么第一个输出的是undefined而不是10呢这又要谈到作用域了。函数在执行时，会先在自己的函数体里查...
2019-03-21 19:45:35
1405
原创 JS如何在外部调用函数内部的函数
在外部调用函数内部的函数是行不通的。因为每执行环境通过作用域链只能一级一级的往上查询函数，不能往下级搜索函数。举个栗子：var a=10; function numberone(){ var b=20; function numbertwo(){ var c=30; console.log(c);//由于函...
2019-03-21 19:11:32
23148
11
原创 作用域及执行环境
每一个函数都有自己的执行环境。代码在一个环境中执行时，会有一个作用域链来保证执行环境对变量和函数有序的访问。有序是指：保证每个环境在访问时，先在自己的变量对象（环境）里搜索变量和函数，搜索不到时，再一级一级的往上查询变量和函数，直到查找到了全局变量对象（例如window）；但是任何环境都不能向下级中搜索变量和函数。举个栗子：var a=10; function numberone(){...
2019-03-21 17:56:47
105
原创 typeof操作符
typeof操作符是用来检测给定变量的数据类型的一种操作符。对一个值使用操作符可能返回下列某个字符串：“undefined”——表示这个值未定义；“boolean”——表示这个值是布尔值；“string”——表示这个值是字符串；“number”——表示这个值是数值；“object”——表示这个值是对象或者null；“function”——表示这个值是函数；举个栗子：var mes...
2019-03-13 23:00:43
774
原创 递归
递归函数是函数反复调用自己，直到执行到最终结果，然后跳出。举个栗子：//5的n!function f(num){ if(num<=0){ return 1; }else{ return num*f(num-1); }}f(5);上面的函数表面看起来没有问题，但是下面的代码可能会导致它出错var anothe...
2019-03-13 18:24:09
67
原创 闭包
1.变量作用域要理解闭包首先要理解js的特殊的变量作用域。变量的作用域有两种：全局变量和局部变量。js语言中：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。注意：在函数内部声明变量的时候，一定要用var命令。如果不用的话，他就是一个全局变量。2.如何从外部读取函数内部的局部变量？举个栗子：function a(){ var i=0; ...
2019-03-13 17:22:27
78
原创 switch语句
switch语句与if语句的关系最为密切，switch语句的语法如下：switch(expression){case value:statement break;case value:statement break; case value:statement break; case value:statement break; default:statement...
2019-03-12 15:42:24
156
原创 label语句
使用label语句可以再代码中添加标签，可由break或continue语句引用，加标签的语句一般都要和for语句等循环语句配合使用。<script>var num=0;outermost:for(var i=0;i<10;i++){ for(var j=0;j<10;j++) { if(i==5&&j++5){...
2019-03-11 23:06:48
279
转载 document.documentElement和document.body区别介绍
body是DOM对象里的body子节点，即 标签；documentElement 是整个节点树的根节点root，即 标签；没使用DTD情况即怪异模式BackCompat下：document.documentElement.clientHeight=0document.body.clientHeight=618 使用DTD情况即标准模式CSS1Compat下：document.docu...
2019-03-07 15:16:45
150
转载 document.compatMode介绍
转载：http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html对于document.compatMode，很多朋友可能都根我一样很少接触，知道他的存在却不清楚他的用途。今天在ext中看到 document.compatMode的使用，感觉这个对于我们开发兼容性的web页面还是很有帮助，我们都知道，IE对盒模型的渲染在 Sta...
2019-03-07 15:12:48
55
原创 document.documentElement和document.body的区别
Document类的documentElement属性指代文档的根元素，在HTML文档中，它总是指代元素。document.body是一个HTML文档的元素，document.head是元素，它们指的是子节点。...
2019-03-06 22:25:56
1893
原创 事件的委托
一、事件的委托是把当前子元素的事件委托给父类代替执行。二、用事件的委托的原因事件的委托是为了优化代码的性能。在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委...
2019-03-06 09:00:18
93
原创 事件的冒泡及阻止事件的冒泡
事件冒泡的原理：当在子元素里执行一个事件（例如：click）时，父元素也被执行了这个事件。用event.stopPropagation()阻止事件的冒泡例如：<body><div class="block"><button class="btn">按钮</button></div><script>
2019-02-23 11:37:14
631
原创 事件的移除
对于不同的事件添加方式，事件的移除也不同1.用addEventListener添加事件，事件的移除用removeEventListener例：<script> var btnlist=document.getElementsByClassName("classname");for(var i=0;i<btnlist.length;i++){ btnlist...
2019-02-23 10:55:59
659
原创 给dom元素添加事件的监听
一、addEventListener给dom元素添加事件的监听有两种方式1.用匿名函数方式添加事件的监听例&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;&
2019-02-23 10:28:10
6931
原创 js绑定事件的方式
一、在行内绑定时间例：在行内写事件，在js里写事件的方法<head lang="en"> <meta charset="UTF-8"> <title></title> <script> function winload(){ alert("窗体刷新了&
2019-02-17 18:03:42
978
原创 函数或变量的提前声明
1.变量提前编译showname();function showname(){ //变量提前 console.log(a);//变量提前声明/预编译 var a=10; console.log(a);}结果如下:变量a在第一次输出时被提前声明，但并未赋值，所以结果为undefined，变量a在第一次输出前已被声明和赋值，所以第二次输出值为10。2.函数...
2019-02-17 16:21:50
511
原创 break和continue
continue是中止本次循环，进入下一次循环，而break是完全终止整个循环，执行循环后面的代码。代码如下：<script>for(var i=0;i<5;i++){ for(var j=0;j<5;j++) { document.write('j的值为：'+j); //当i>=2时，使用break中止循环...
2019-02-10 20:27:59
103
原创 for in 循环
for in循环有两个作用：①遍历数组里所有的数组元素②遍历javascript对象的所有属性for in 循环的格式如下：for(index in object){statement...}当遍历数组时，for循环的循环计数器是数组元素的索引值。如下代码：<script>//定义数组var a=['hello','javascript','world'];/...
2019-02-10 19:29:09
647
原创 for循环
大部分情况下，for循环可以代替while循环、do while循环。for循环的基本格式如下： for（initiaization;test condition;iteration statement） { statements...}用for循环代替white循环，代码如下：<script>for(var count=0;count<10;...
2019-02-10 18:29:20
227
原创 do while循环
do while循环与while循环的区别是：while循环是先判断循环条件，只有条件为真的才执行循环体；而do while循环则是先执行循环体再判断循环条件，如果循环为真，则执行下一次循环，否则终止循环。do while的语法格式如下：do{statement...}while(expression)例如以下循环：<script>//定义变量countvar co...
2019-02-10 15:43:55
404
原创 while循环
while循环的格式如下： while(expression){ statement...}当循环体只有一行语句时，循环体的花括号可以省略。while的循环作用是：先判断expression逻辑表达式的值，当值为true时，执行循环体；当值为false时，则结束循环。看如下代码：<script type="text/javascript"> ...
2019-02-10 15:29:21
244
原创 DOM元素的获取
DOM是文档对象模型(Document Odject Model)的简称。dom元素获取1.dom元素获取方式1：getElementsByClassName获取出来的对象是集合类型也可以说是数组类型，class可以绑定多个元素。获取出来是集合类型 ,就有长度属性 length 代表长度.<body><button class="btn">按钮1</but...
2019-02-08 11:23:46
267
原创 类型转换
一、自动类型转换代码如下： <script > var a="3.145";/*定义字符串变量*/ /*让字符串变量分别进行加法和减法运算*/ var b=a-2; var c=a+2; alert(b+"\n"+c); </script>上面代码中，a是值为3.145的字符串，让...
2019-01-01 21:37:40
171
原创 变量作用域
1、根据变量定义的范围不同，变量有全局变量和局部变量之分。在全局范围（不在函数内）定义的变量（不管是否使用var）、不使用var定义的变量都是全局变量，全局变量可以被所有脚本访问；在函数里定义的变量是局部变量，只在函数内有效。<script > //定义全局变量test var test="全局变量"; //定义函数my f...
2018-12-27 22:36:01
70
原创 定义变量的方式
javascript支持两种方式引入变量：1、隐式定义：直接给变量赋值； <script > a="hello world"; alert(a); </script>如图：2、显式定义：使用var关键字定义变量； <script > var a; a=true; alert(...
2018-12-27 21:59:12
1462
原创 CSS3伪类选择器及伪元素
1.伪类选择器概述在CSS中，可使用伪类选择器把相同的元素定义成不同的样式，如针对p元素，可以做以下定义。p.right{text-align:right}p.center{text-align:right}在css中，除了上述类选择器之外，还有一种伪类选择器，这种伪类选择器与类选择器的区别是，类选择器可以随便起名，如上面的p.right和p.center,也可以命名为p。class1和p...
2018-12-20 16:17:01
590
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人