- 博客(12)
- 收藏
- 关注
原创 js包装类
js包装类BooleanNumberString原始值不能有属性和方法,当给它们添加属性的时候系统会自动进行包装类并销毁。 var num = 3; // new Number(3).len = 2 delete num.len = 2; // new Number(3).len console.log(num.len); //undefined var str = 'abcd'; // new String('abcd').length =
2020-05-29 17:01:58
84
原创 使用原生的ajax的步骤(五个步骤)
1)创建Ajax引擎对象 XMLHttpRequestvar xhr = new XMLHttpRequest();//创建对象2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)//绑定监听对象xhr.onreadystatechange = function () { //监听readyState和status if (xhr.readyState == 4 && xhr.status == 200) { var value = xhr.responseTex
2020-05-15 15:48:29
437
原创 js文档碎片
1、我们要明白当js操作dom时发生了什么?每次对dom的操作都会触发"重排"(重新渲染界面,发生重绘或回流),这严重影响到性能,一般通常采取的做法是尽可能的减少 dom操作来减少"重排"2、什么是文档碎片? document.createDocumentFragment() 一个容器,用于暂时存放创建的dom元素普通方式(操作1000次dom) for (var i = 0;...
2020-05-04 10:53:37
170
转载 CSS Grid 网格布局
一、概况:网格布局(Grid)是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。上图这样的布局,就是 Grid 布局的拿手好戏。Grid 布局与Flex 布局 有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"...
2020-04-14 19:37:22
170
原创 原生JS快速实现拖放实例效果与解析
放是很常见的一种交互效果,很多时候我们都会借助于第三方的控件来实现,其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果:HTMLHTML的内容很简单,就是五个空的容器和一个可以被拖拽的元素:html代码:<body> <div class="droppable"> <div class="draggable...
2020-04-07 16:00:03
131
原创 JS 严格模式
1.“use strict”ECMAscript 6添加了第二种运行模式:”严格模式”(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。2.设立”严格模式”的目的,主要有以下几个:消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;消除代码运行的一些不安全之处,保证代码运行的安全;提高编译器效率,增加运行速度;为未来新版...
2020-04-03 16:49:05
58
原创 jquery中$的理解
JQuery(或者是$)一.作为一般函数调用:$(param)参数为函数:当DOM加载完成后,执行此回调函数 $(function(){})参数作为选择器字符串:查找所有匹配标签,并将它们封装成JQuery对象参数为DOM对象:将dom对象封装成JQuery对象参数为html标签字符串(用得少):创建标签对象并封装成jQuery对象二. 作为对象使用 $.xxx()$.e...
2020-03-19 20:07:53
165
原创 JS事件分类
1.鼠标事件: click/dbclick/mouseover/mouseout/mouseenter/mouseleave/mousemove/mousedown/mouseup2.HTML事件:onload/onunload/onsubmit/onresize/onchange/oninput/onfoucs/onblur/onscroll3.键盘事件:keydown:键盘按下时触发...
2020-03-14 12:54:09
87
原创 client,offset,scroll系列
1.client系列:clientTop: 内容到边框顶部的距离, 即边框的高度.clientLeft: 内容区域到边框左部的区域, 即边框的宽度.clientWidth: 内容区域+左右padding, 表示可视宽度.clientHeight: 内容区域+上下padding, 表示可视高度.2.屏幕的可视区域:<script> // 屏幕的可视区域 w...
2020-03-10 21:53:47
64
原创 防抖节流
1.概念函数防抖(debounce)是指在一定时间内,在动作被连续频繁触发的情况下,动作只会被执行一次,也就是说当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间,所以短时间内的连续动作永远只会触发一次,比如说用手指一直按住一个弹簧,它将不会弹起直到你松手为止。函数节流(throttle)是指一定时间内执行的操作只执行一次,也就是说即预先设定一个执行周期,当调...
2020-03-06 22:11:20
82
原创 Bootstrap的导航栏组件
1、导航栏的类名基础类名: .navbar默认颜色:.navbar-default 反色:.navbar-inverse固定方式: .navbar-fixed-top .navbar-fixed-bottom导航栏的头部: .navbar-header商标品牌: .navbar-brand控制折叠的按钮: .navbar-toggle折叠部分: ...
2020-03-04 09:26:02
241
原创 BFC定义及其应用
一、BFC概念BFC就是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。二、触发 BFC只要元素满足下面任一条件即可触发 BFC 特性:body 根元素浮动元素:float 除 none 以外的值绝
2020-02-25 17:28:47
150
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人