jerny2017的博客

原创 变量提升

作用域分为全局作用域和局部作用域，全局是window下，局部是函数内部，if for大括号内不是作用域。js代码是先预解析，然后再执行首先检查var function，var初始化为undefined，function是整个函数结构，遇到重名的会覆盖，但是function优先级比较高，同名的var和function，无论先后顺序，都将保留function之后开始执行代码，赋值等变量提升：conso...

转载 (转)jq中的延迟对象详解

ES6已经实现了延迟对象Promise,但是今天主角是JQ里面的延迟对象，套路其实都是差不多的。下面先看一个比较牵强的例子：[xhtml] view plain copy<button id="add">add</button><button id="remove">remove</button>  <div id="content&

转载 sessionStorage localStorage

webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage。Html5中新增的，window.sessionStorage, 方法有：setItem, getItem, remveItem clearsessionStorage中的一次会话跟 session会话有区别，它的一次会话是指浏览器的一个标签页或一个窗口，关闭浏览器或者新开一个标签...

转载 (转)httpSession

What is Session?Session代表着服务器和客户端一次会话的过程。直到session失效（服务端关闭），或者客户端关闭时结束。How does session works？Session 是存储在服务端的，并针对每个客户端（客户），通过SessionID来区别不同用户的。Session是以Cookie技术或URL重写实现。默认以Cookie技术实现，服务端会给这次会话创造一个JSE...

转载 （转）缓存

https://www.cnblogs.com/belove8013/p/8134067.html

原创 分组选择符

var a = (1,2,3)alert(a); //3

原创 NaN， isNaN， Number.isNaN

NaN: 是一个数据类型，属于Number，从这个角度来说，Es6中给出了一个方法Number.isNaN， 只要不是NaN类型的都为false，举几个例子：Number.isNaN(NaN); // trueNumber.isNaN(Number.NaN); // trueNumber.isNaN(0 / 0); // trueNumber.isNaN('NaN');...

转载 七层协议

七层结构：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层tcp属于传输层；http属于应用层。

原创 递归算法

递归头， 递归体比如不用循环，创建一个数组，下标和值都是0，1，2，3。。。99function create(arr, num){        var i = 0;        return c(i, arr, num);}function c(i, arr, num){        if(i  < num) { // 递归头               arr[i] = i;  /...

原创 关于json对象的key

var a = {};var aa = {};var b = {key: 'b'};var c = {key: 'c',key1: 'd'};var d = new Date();var e = [1,2,3];var f = [3,5,6];a[aa] = 111;a[b] = 222;a[c] = 333;a[d] = 444;a[e] = 555;a[f] = 666...

原创 hasOwnProperty

obj.hasOwnProperty(attr) 判断是否是原型中的属性，false就是原型中的属性虽然obj.attr存在，有可能是原型对象内的属性function A(){this.name = 'aaa';}A.prototype.age = 20;var a  = new A();alert(a.name); //aaaalert(a.age); //20alert(a.hasOwnPro...

原创 DOM CSS 选择器权重

1. 行内样式 10002. ID 选择器 1003. 类，伪类选择器，属性选择器 104. 元素，伪元素选择器 15. 通配符*，子选择器， 相邻选择器 0

原创 js 中 获取 数据类型

function getType(n){      return Object.prototype.toString.call(n);}null, undefined, number, boolean, stringobject: Array, Date, Function

原创 数组及for循环中 常见的细节问题

for(var i = 0 ; i < 10; i++) {...}alert(i); // 10for(var i=0; i<10;i++){       if(i>3){               break; //这里之后不会走i++        }}alert(i); //4 arr.forEach(function(elem, index){})//不能手动终止循环...

原创 jQuery中 扩展插件

$.extend(obj); 这种方式，调用对象中的方法时，$.fn$.fn.extend(); 这种方式，用 $().fn传一个对象的时候，把对象挂载到jQuery源码中使用，传多个对象时实现了拷贝功能，把后面的对象拷贝到一个对象上拷贝分为浅拷贝和深拷贝$.extend({fn1: function(){},fn2: function(){}})var a ={};$.exten...

原创 jQuery 中 $ 和 jQuery 防冲突处理

(function(window){ var _$ = window.$, _jQuery = window.jQuery; // 把外界的变量存储到私有变量中 window.$ = window.jQuery = jQuery; function noConfilict(deep){ ...

原创 jQuery DOM加载的三种写法

$(function(){});$(document).ready(function(){});$(document).on('ready', function(){});这三种写法本质都是调用了$().ready()实例方法，ready()是写在jQuery.prototype中的方法ready: function( fn ) { // Add the callback ...

原创 碰撞检测

原创 IE 浏览器的 全局捕获

obj.setCapture();  // 给对象设置全局捕获obj.releaseCapture();  // 取消对象的全局捕获ie : 有，并且有效果ff : 有，但是没效果chrome : 没有全局捕获只支持鼠标事件，不支持键盘事件。全局捕获： 全局（包含浏览器外）出现一个鼠标事件，会被设置全局捕获的对象捕获，如果此对象正好有对应的事件函数，                  那么会被触发...

原创 事件：方向键的应用

键盘控制Div移动方向键控制方向定时器控制移动和速度<div id="div1">#div1{width:100px;height:100px;background: red;position: absolute;left:40%;top:30%;} onload = function () { var oDiv = document.getElem...

原创 事件捕获与冒泡

原创 CSS3改变滚动条样式

1、::-webkit-scrollbar 滑块的宽度，width是垂直方向的宽度，height是水平方向的宽度；2、::-webkit-scrollbar-thumb 滑块部分的样式，宽高就不用设置了；3、::-webkit-scrollbar-track 轨道部分的样式，宽高就不用设置了；只有webkit内核的浏览器支持此样式，pc端有兼容问题，移动端可以使用例子：<div...

原创 元素的事件绑定的兼容写法

obj.onclick = fn1;obj.attachEvent("onclick", fn1); // 此方法IE11, Chrome, FF，已经不支持了，而且fn1中的this指向window，按常理说应该指向objobj.addEventListener("click", fn1); //此方法只有IE11, Chrome, FF才有此方法所以兼容写法可以这样写： function bi...

原创 cancelBubble 和 preventDefault

ev.cancelBubble = true; 阻止冒泡ev.preventDefault(); 阻止浏览器的默认行为

原创 box-shadow

box-shadow: inset offset-x offset-y blur-radius spread-radius每个<shadow>被定义为下面这些值的组合： inset关键字，将外部投影转变为内部阴影。默认值是空，为外部投影。 第1个长度offset-x代表阴影x轴向的偏移，正值向右，负值向左。 第2个长度offset-y代表阴影y轴向的偏移，正值向...

原创 构造函数，原型，实例对象的关系

function Person(name){ //构造函数 this.name = name;}Person.prototype = { //构造函数的原型对象 constructor: Person, sayName: function(){ alert(this.name); }}var person = new Person('Jack');...

原创 获取元素的宽度，高度

1. style.width 适合行内样式<div style="width:100px;"></div>2. window.getComputedStyle(elem).width Chrome, FF, IE9+支持此方法3. elem.clientWidth 可视宽度 padding+元素宽度，对于行内元素，元素的宽度获取不了，此属性也不起作用    获取网页的高度：...

原创 box-sizing

box-sizing: content-box|border-box|inherit; inherit: 继承父元素的box-sizing的值content-box: 样式中width的值border-box：样式中的width值=border+padding+内容的宽度

原创 DOM 之 offsetLeft offsetTop, scrollTop, scrollLeft, clientX, clientY

offsetLeft: 到offsetParent的左内边框的距离对于IE8+，chrome，Firefox:（现代浏览器） 如果父元素设置了position定位，即父级是定位父级，那么offsetLeft就是到定位父级的左内边框的距离 如果父元素不是定位父级，那么offsetParent是到html的距离，而不是到body的距离。 值得注意的是：body有个8像素的外边距，一般情况下，会重置bo...

原创 为什么要重置body等元素的样式

不同浏览器body的margin值会不一样，也就是body到html的距离不一样，比如：IE8+，Chrome， Firefox等是8pxIE7，margin-left是10px, margin-top是15px这些差异会使得dom中的一些属性值不一样，比如offsetLeft，offsetTop所以为了解决这些兼容问题，一般情况下，会在样式表中重置body等元素的margin，padding值为...

转载 DOM 之 offsetParent, parentNode

parentNode当前元素的父节点，无兼容问题。offsetParent是定位父级，与定位有关1. 如果当前元素设置为position:fixed，那么offsetParent=null但是firefox的offsetParent是body2. 如果父级元素设置position定位，那么offsetParent就是最近的设置定位的父级3. 如果父级元素都没有设置position定位，那么offs...

原创 利用：浮动元素的遮挡的效果

左边是浮动元素，右边是非浮动元素，这样可以做出来这种效果。另外，自适应的两栏布局两边固定宽度，中间自适应布局<div id="div1"></div><div id="div2"></div><div id="div3">dddddd</div>#div1,#div2{

转载 BFC

元素定位：1. 正常文档流，从上向下，行内从左向右2. 浮动float，在正常的文档流位置显示，根据属性值向左或向右浮动，带来的影响是兄弟元素会在其下面的位置以正常的文档流出现，文字不会被覆盖。3. 绝对定位 position: absolute; 如果没有设置坐标值（top left right bottom），那么在正常的文档流位置显示，兄弟元素会在其下面显示，文字会被覆盖。BFC Block...

原创 Javascript组成部分

三个部分组成：1. ECMAScript 是js的核心部分，规定了语言的语法和基本对象2. DOM，提供了操作网页（html, xml）的方法和接口3. BOM，提供了与浏览器交互的方法和接口ECMAScript是一个标准DOM, document object model，文档对象模型，将网页中的元素划分成层次节点，组成一个树状结构DOM并不是js专属的，还可以由其他语言实现BOM， brows...

原创 DOM 节点

【获取所有的子节点】1. children 获取所有的元素子节点，不包含文本节点，这个没有兼容问题，推荐使用2. childNodes 对于不同版本的IE浏览器有兼容问题：    IE9+: 获取除了元素子节点，还有文本节点（包含换行），注释节点，非法节点（ul下包含p）    IE8-：获取所有的元素子节点，（IE8可以获取非法节点）【获取第一个子节点】1. firstChild: childN...

原创 静态页面总结二

1. 如果一行内需要显示多个有链接的元素，那么可以用标签a2. 纯文本显示可以使用标签 span p3. 图片虽然可以做为背景图片显示，但是想配合后台数据的话，有些还是需要用img标签4. 页面上功能类似的块，文档结构最好做成一样的，css可以针对性的修改，这样有利于后台传过来的list数据的显示5. a标签内可以放置图片，div，p，span等6. font: 14px/32...

原创 静态页面总结

1. box-shadow: inset offset-x offset-y blur-radius spread-radius 每个<shadow>被定义为下面这些值的组合： inset关键字，将外部投影转变为内部阴影。默认值是空，为外部投影。 第1个长度offset-x代表阴影x轴向的偏移，正值向右，负值向左。 第2个长度of...