一、懒加载 1.什么是懒加载 目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片...以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。 下面以元素element的盒模型为例来介绍它们之间的区别。 ?...1.4.1+ height()新增支持参数为函数(之前只支持数值)。 1.8.0+ innerHeight()支持参数为数值或函数。...整个屏幕的宽度）： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度： window.screen.availWidth...2.当滚动页面时，检查页面所有的img标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时 再去判断它是否已经加载过，如果没有加载，加载它 */
（整个屏幕的高度）： window.screen.height 屏幕分辨率的宽（整个屏幕的宽度）： window.screen.width 屏幕可用工作区高度： window.screen.availHeight...因为我们在函数作用域中定义了与全局变量scope同名的局部变量，导致全局作用域中的变量被隐藏，在函数体内不可见，如果想使用全局作用域中的变量，使用window.var的形式来显示调用。...但在函数体内使用局部变量scope时，又因为使用时没有先定义，所以输出undefined。...s时，将创建由函数s开始的作用域链，首先将函数s作用域置于链表头，然后函数s的执行环境(调用对象)形成的作用域置于链表的下一个位置，然后将函数t的调用对象链接在后面，也就是全局对象window。...当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert(“Button”+i);}这个匿名函数中没有i,根据作用域链，所以到buttonInit函数中找，此时i的值为4
，当再次点击同一元素时，则触发指定的第二个函数。...; ajaxStop(callback) 当所有的AJAX都停止时，执行一个函数。...2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是 jquery对象。...当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over，离开时置为out。...与$(fn)等价 （3）toggle(evenFn, oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。
如果 wait 为 0 并且 leading 为 false, func调用将被推迟到下一个点，类似setTimeout为0的超时。 参数 func (Function): 要节流的函数。...例子 // 避免在滚动时过分的更新定位 jQuery(window).on('scroll', _.throttle(updatePosition, 100)); // 点击后就调用 `renewToken...看下面 demo： 如你所见，我们为 resize 事件使用了默认的 trailing 选项，因为我们只关心用户停止调整大小后的最终值。...相似的使用场景还有，直到用户输完，才验证输入的正确性，显示错误信息。...requestAnimationFrame：可替代 throttle ，函数需要重新计算和渲染屏幕上的元素时，想保证动画或变化的平滑性，可以用它。注意：IE9 不支持。
基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。 45、jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？...只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。 (2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。...1、定义和用法：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。...(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。 65、 jquery中$.get()提交和$.post()提交有区别吗？...只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。 (2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。
❝当强制执行布局时，浏览器会暂停JS主线程，尽管调用栈不是空的。 ❞ 有很多我们耳熟能详的操作，都会触发强制布局。 其中有我们很熟悉的getBoundingClientRect(),下文中会有涉及。...「延迟加载」：将不是立即需要的资源推迟加载，比如在页面滚动到特定位置或用户执行某些操作时再加载。...处理“更多”按钮 当我们胸有成竹的把上述代码运行后，猛然发现，我们还缺失了一个重要的步骤：如何在浏览器中渲染更多按钮。我们也需要考虑它的宽度。 同样，我们只能在浏览器中渲染它时才能获取其宽度。...❝只有在需要根据元素的实际大小调整 UI 而导致的视觉闪烁时使用 useLayoutEffect。对于其他所有情况，useEffect 是更好的选择。...然后，React 遍历应用中的所有组件，“渲染”它们（即调用它们的函数，它们毕竟只是函数），然后生成这些组件表示的 HTML。
7.css3动画如何在动作结束时保持状态不变 使用animation-fill-mode，值为none，表示不改变默认行为；值为forwards，当动画完成后，保持最后一个属性值；backwards，在...transition-timing-function速度效果的运动曲线，如linear,ease-in,ease,ease-out,ease-in-out,cube-bezier transition-delay规定过渡开始前的延迟时间 13.当元素不面向屏幕时其可见性如何定义...18.rem的原理是什么 在做响应式布局时，通过调整html的字体大小，页面上所有使用rem单位的元素都会做相应的调整。...可以为它们指定回调函数callback，就是事先规定，一旦运行结束，调用那些函数，但是，在回调函数方面，jquery的功能非常弱，为了改变这一点，jquery开发设计了deferred对象。...当dom完全加载时，jquery允许你执行代码，使用$(document).ready()最大的好处在于它适用于所有浏览器，jQuery有助于解决跨浏览器兼容性问题。
当我们需要根据设备类型或者某些特殊的特性或参数(比如屏幕分辨率或者浏览器viewport宽度)来调整app的行为时，Media query的技术显得特别有用。...很多media特性都有一个特定的范围，因此可以用min-或者max-等前缀，来标注其最小或最大值。...例如，下列CSS仅当浏览器的viewport宽度小于等于12450px时才生效： For example, this CSS will apply styles only if your browser...在SAP Spartacus里的使用场景如下： ? ?
简单讲就是让一个函数无法在短时间内连续调用，只有当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。 实现一个响应式的正方形 倒计时怎么做？...2.原型链的形成是真正是靠proto 而非prototype 函数里的this什么含义，this的指向问题 1.当函数没有用作构造函数时，this指向window 2.用作构造函数时，this指向新生成的对象...apply与call的区别，有哪些应用 本身无该方法，才选择调用 call方法：call(obj,x,y,z,.....)...2.ready()是当DOM文档树加载完成后执行一个函数 谈谈你对es6箭头函数的理解 在函数被传递后, 如果使用了箭头函数, this 最终将指向其定义处上下文的 this 对象。...('box'); var $box = $(box); jQuery对象转原生DOM对象： var $box = $('#box'); var box = $box[0]; jQuery如何扩展自定义方法
，那就应该先引用jQuery.js然后引用bootstrap.js CSS约定： 除了公共级别样式，其余样式全部有模块前缀 尽量使用直接子代选择器，少用简介子代，避免错杀 2、Bootstrap第三方依赖...——让低版本浏览器可以支持CSS媒体查询功能 条件注释：当满足if条件时，才执行里面的文件 3、视口 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示 目前大多手机浏览器的视口（承载页面的容器）宽度都是980...； 视口的宽度可以通过meta标签设置 此属性为移动端页面视口的设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1） width:视口的宽度 initial-scale:初始化缩放...——嵌入内容——内嵌 将日常使用的一些功能块，提前写好，我们使用时，直接找到对应的demo，做相应调整，就可以了。
（有一些例外，比如.width()如果不提供参数的话就会返回所选元素的宽度，并且不可链式调用） 因此想让我们的插件能够支持链式调用只需要多一行代码： // file: jquery.sketchpad.js...这时我们会需要调用jQuery.noConflict()让jquery不再使用$化名以避免冲突。 这个时候，我们前面的插件就会出问题，因为它编写的时候用到了$化名。...为了能够和其它的诸多插件友好相处，并且能够继续使用方便的$，我们需要把所有代码扔进一个“立即执行函数的表达式”里，传入jQuery作为实参，形参处命名为$： // file: jquery.sketchpad.js...)); 本插件仅作为范例，功能较为简单，只是使用鼠标事件以及 canvas 画线。...如果你想要对特定的某个元素做一些操作的话（比如获取数据属性，计算特定的位置），你就会需要使用each()来枚举这些元素。
文字使用相对尺寸(em,rem)，尽量不用绝对尺寸(px) CSS 中的 1px 并不代表真实物理设备的 1px，如：iPhone4 以后，屏幕为 Retina 屏幕，屏幕大小没有变化，但分辨率提升一倍...列排序数量,控制某列向右或向左移动，并不影响其它的列,主要作用是在特定的屏幕下临时调整列的出现位置 A、col-lg-push-n: 在 lg下，当前列向右移动n 列的距离 B、col-lg-pull-n...JS 插件.Bootstrap 基于 jQuery ，在 jQuery 基础上提供了十几个插件函数，每个都是一个独立的 JS 文件,可以一次性引入全部的 JS 操作 - bootstrap.js，每个插件函数都有两种调用方式...响应式导航条 当屏幕尺寸大于 768px 时候，可以正常显示出所有的内容，当屏幕尺寸小于 768px时候，一部分内容就会隐藏，通过点击弹出，响应式导航条由两部分组成. ①. class .navbar-header...修改Bootstrap组件的细节样式，实现细粒度定制 修改特定的组件对应的less文件,如dropdown.less 55. 项目不允使用Bottstrap时，提取以下css样式文件 (1).
最近在做一个自适应的网站，经常遇到需要文本的溢出地方，我写了一个CSS简单设置文本溢出的方法：用css实现文本溢出div显示省略号 但是IE只能设置单行溢出隐藏，Webkit内核浏览器才支持多行溢出，于是找到了这款插件...插件会自动识别大多数元素的显示方式，调整浏览器大小，省略号会即时更新。 插件的下载和安装 插件官网：http://dotdotdot.frebsite.nl 可以在官网直接下载js文件。...如何使用插件 首先，在页面中引入 nessesary .js 文件（需要jquery支持）。... $("#wrapper").dotdotdot({ callback: function( isTruncated ) {}, /* 截断文本后调用的函数... 在这个函数里，“this”是指该元素 */ ellipsis: "\u2026 ", /* 添加的文本为省略号 */
,每输入一个字符都触发一次 $("input").keyup() //当按钮被松开时触发事件 $(window).scroll() //当用户滚动时触发事件 $(window).resize() //当调整浏览器窗口的大小时触发事件...并且必须返回新的数据（可能是处理过的）传递给success回调函数。 success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。...complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。...使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。...通常只在本地和远程的内容编码不同时使用。 statusCode map 默认: {} 一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。
将其宽度设置为比包装纸宽28像素，然后将其向左微移到适当的位置。 我们还使用border-*-radius以及一些任意填充为它的顶部边缘轻轻地倒圆角。...在页面中包含jQuery和Waypoint，让我们开始吧！ 您首先需要做的是通过在元素上调用.waypoint()方法来注册航点。 当然，这本身不会做任何事情-您必须为事件定义一个处理函数。...当元素的顶部在视口顶部下方的指定距离处时，正值触发路点；当元素的位置在视口顶部上方远处时，负值触发路径。 ）。...当没有什么东西遮挡屏幕的那部分时，这是违反直觉的。 现在我们有了一个导航栏，这变得非常烦人。 这是Ariel Flesler的ScrollTo进行救援的地方。...尽管有更好的方法将函数绑定到click事件，但我们将继续使用最简单的方法： .click() 。 .scrollTo()方法的调用方式与.waypoint()非常相似。
例如，当不使用OpenGL时，场景视图窗口和小型相机预览将被翻转。...为此，向HLSL文件添加BlurSample函数，该函数具有原始UV坐标的参数以及单独的U和V偏移。偏移量以像素为单位定义。我们可以使用U和V坐标的相关屏幕空间导数将偏移量转换为UV空间。...但是，默认的滤镜模式是点，它会钳位到最近的像素，因此当前仅移动图像。我们必须更改MyPipeline.Render，以便它对颜色纹理使用双线性过滤。仅当不在像素中心采样时，此更改才重要。 ?...但是，默认的滤镜模式是点，它会钳位到最近的像素，因此当前仅移动图像。我们必须更改MyPipeline.Render，以便它对颜色纹理使用双线性过滤。仅当不在像素中心采样时，此更改才重要。 ? ?...仅当强度为正时才在“Render ”中调用它，否则执行常规复制。 ? 让我们从强度大于1时总是模糊两次开始。如果没有，我们就可以将单个模糊直接对准相机目标。 ?
image.png 手写bind函数 ? image.png 什么是函数节流？ 简单讲就是让一个函数无法在短时间内连续调用，只有当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。...2.原型链的形成是真正是靠proto 而非prototype 函数里的this什么含义，this的指向问题 1.当函数没有用作构造函数时，this指向window 2.用作构造函数时，this指向新生成的对象...apply与call的区别，有哪些应用 本身无该方法，才选择调用 call方法：call(obj,x,y,z,.....)...2.ready()是当DOM文档树加载完成后执行一个函数 谈谈你对es6箭头函数的理解 在函数被传递后, 如果使用了箭头函数, this 最终将指向其定义处上下文的 this 对象。...('box'); var $box = $(box); jQuery对象转原生DOM对象： var $box = $('#box'); var box = $box[0]; jQuery如何扩展自定义方法
实上，当媒体查询与这些功能一起使用时，它更像是一种补充，而不是一种完整的方法。让我们看看它是如何工作的。...屏幕较小的设备也要下载在大屏幕展现的大尺寸图片。 在网页上使用图像时，我们必须确保它们在分辨率和大小方面得到了优化。...如前所述，我们没有将一个图像（通常是较大的高分辨率版本）发送到所有屏幕尺寸并将其缩放到视口宽度，而是指定了一组图像以在特定情况下使用。...相反，如果60％的值小于600px，则将使用600px作为元素的宽度 限定值 clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用...因此，如果用户在浏览器上调整字体大小，则页面上的所有内容都将根据根大小正确缩放。 例如，当处理根集为16px时，我们指定的数字将乘以该数字乘以默认大小。
· 5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。...box-sizing:content-box 当我们设置box-sizing:content-box;时，浏览器对盒模型的解释遵从我们之前认识到的W3C标准，当它定义width和height时，它的宽度不包括...2.普通的函数调用，函数被谁调用，this就是谁。 3.2. 你是如何测试JavaScript代码的？ 结合自己的项目经验进行讲述。（chrome使用技巧） 3.3....典型用法是： 用来初始化一个变量，这个变量可能被赋值为一个对象。 用来和一个已经初始化的变量比较，这个变量可以是也可以不是一个对象。 当函数的参数期望是对象时，被用作参数传入。...+方法名 $.fn.extend(obj)；对prototype进行扩展，为jquery类添加成员函数，jquery类的实例可以使用这个成员函数。
其中就使用了媒体查询，通过 标签的media属性为样式表指定了设备类型，当然CSS3时代的媒体查询更加丰富。 ? 发现了他们的区别吗？...大家会发现我们又拓展了一个条件，对，就是当设备屏幕的宽度大于960px才会加载style.css样式文件。我们究竟有哪些特性是可以被探测到的呢？...浏览器默认会根据当前屏幕和内容作调整，在webkit内核的浏览器中只需要-webkit-text-size-adjust:none就禁止自动调整，至于是否全局活局部使用看自己的项目需求。 ?...以上除了type=text外，其他的都是新增的，如果浏览器支持这些属性的话，就会自动调用相应组件，如在移动设备中type=number/email/text时，浏览器会调用不同版面的键盘，这样加快用户的输入...（3）盒子边框溢出 当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
