关于js和css的一些实用笔记

///////////////////////////////////////////////////////////////////////////////jquery插件中预防$冲突的办法：(function($){ //...  })(jQuery);把jQqury传递给插件，用$来获取该参数，这样其他框架中即便占用了$也不影响jQ插件里对$的使用///////////////////////////////////////////////////////////////////////////////setInterval和setTimeout函数部分带引号和不带引号的区别：var a=0;1、setTimeout("hallo(a)",300);//可以传参数a，并且该函数会在300ms之后执行；2、setTimeout("hallo",300);//并不会被执行3、setTimeout(hallo,300);//不可传参数a，300ms之后执行4、setTimeout(hallo(a),300);//可传递参数a，立即执行。setTimeout将变得无意义5、setInterval(hallo(a),300);//立即执行，setInterval变得无效，不会轮询结论：a、不带引号的，不能带括号，带引号的必须带括号。2、4、5实际是错误的写法；b、要想在规定的时间里用setInterval和setTimeout的回调函数来执行函数并且又想传递参数，最好的方式就是使用方法1、"hallo(a)"///////////////////////////////////////////////////////////////////////////////网页更新防止缓存方法：1、<meta forua="true" http-equiv="Cache-Control" content="max-age=86400"/>其中max-age为获新的时间，86400表示一天之后获新，获新内容为所有js、css和image等资源文件///////////////////////////////////////////////////////////////////////////////解决ie8不支持媒体查询：<!--[if lt IE 9]>      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  <![endif]-->  ///////////////////////////////////////////////////////////////////////////////让一个元素不再浮动的css：float:none;///////////////////////////////////////////////////////////////////////////////@media查询中，max-width和max-device-width区别：width指可视宽度，横屏时，会变宽。device-width是设备自带的属性，不会变化。另外，height在有菜单栏的浏览器下会比device-height小判断横屏竖屏方式：@media (max-width:XXXX) and (orientation:landscape | portrait)。其中landscape表示手持，portrait表示横屏，其原理就是比较width和height。///////////////////////////////////////////////////////////////////////////////千万不要将float与&nbsp;原则是：少用&nbsp;///////////////////////////////////////////////////////////////////////////////函数前面加上感叹号“！”有什么用？原因：形如 function(){}()的函数是无法执行的，需要用括号括起来把函数体编程一个表达式：(function(){})()但是函数前面加上!之后，函数就会被正确的解析和调用：!function(){}();这样的方式，效率似乎更高。另外，+、-也有类似功能：+function(){}()、-function(){}();参见：在bootstrap中，自动执行的函数的写法是：!function($){}(window.jQuery);///////////////////////////////////////////////////////////////////////////////几个冷知识：1、但凡有id的dom，会自动生成一个全局对象，不用document.getElementById("id")或$("#id");html:<div id="hallo">aaa</div>js:console.log(hallo.innerHTML);=>aaa   console.log($(hallo).html());=>aaa;2、///////////////////////////////////////////////////////////////////////////////垂直居中的解决方案单行：1、vertical-align:middle;line-height:100%;多行、未知高度：1、内层：position:relative;top:50%;transform:translateY(-50%);top:50%;-webkit-transform:translateY(-50%);只支持ie9以上2、外层：display:table;内层：diaplay:table-cell;vertical-align:middle;///////////////////////////////////////////////////////////////////////////////要想知道一个对象有什么特性及其值，可以使用以下方法：for(var i in obj){console.log(i+":"+obj[i]);}通过此方法，意外的获知：对于<a id="hallo" href="http://www.baidu.com/a/b/c?id=123"></a>，可以获得如下参数1、a标签（对象）的属性中有host：主机名（含接口），hostname不含接口，如：192.168.0.124:8001是host，而192.168.0.124。2、hallo.pathname=>/a/b/c3、hallo.protocol=>http4、hallo.host=>www.baidu.com5、hallo.hostname=>www.baidu.com6、hallo.origin=>http://www.baidu.com7、hallo.search=>?id=123"///////////////////////////////////////////////////////////////////////////////如何利用toString来创建字符和数字结合的编码：console.log(generateRandomAlphaNum(25));//创建25位混排编码        function generateRandomAlphaNum(len) {            var rdmString = "";            for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)) {                console.log(rdmString);            }            return rdmString.substr(0, len);        }///////////////////////////////////////////////////////////////////////////////高效率的位操作符：(12.4/4.13)|0=>相当于：Math.round(12.4/4.13)~~(12.4/4.13)=>相当于：Math.floor(12.4/4.13)!!(a)=>快速转换为布尔值，相当于：boolean(aa);如：!!window=>true///////////////////////////////////////////////////////////////////////////////自定义console.log的样式：function resetConsoleStyle(cssStyle) {    var _log = console.log;    console.log = function () {        _log.call(console, '%c' + [].slice.call(arguments).join(' '), cssStyle);    };}resetConsoleStyle("color:fff;background:#000;");console.log("aaa")=>aaa///////////////////////////////////////////////////////////////////////////////交换两个变量的值，不用第三个变量暂存1vara=1,b=2;a=[b,b=a][0];///////////////////////////////////////////////////////////////////////////////关于动作的设计：鼠标移上和移 出元素产生的动画，分别为进入和离开动作///////////////////////////////////////////////////////////////////////////////一张图解释文档的加载和解析过程没，defer和async的区别///////////////////////////////////////////////////////////////////////////////caller是函数对象的一个属性，他指向调用该函数的函数，可以用fn.caller.toString()将函数转化为字符串callee是arguments对象的一个属性，他指向当前函数体注：caller和callee都是在函数执行时才产生    function callDemo() {        if (callDemo.caller) {            var a= callDemo.caller;            alert(a);        } else{            alert("this is a top function");        }        alert(arguments.callee);    }    !function handleCall() {        callDemo();    }();输出：caller=>function handleCall(){callDemo();}callee=>    function callDemo() {        if (callDemo.caller) {            var a= callDemo.caller;            alert(a);        } else{            alert("this is a top function");        }        alert(arguments.callee);    }二者结合：arguments.callee.caller=>调用此函数的函数，即callDemo函数///////////////////////////////////////////////////////////////////////////////delete obj.para=>删除obj对象中的para属性，但并不会删除属性本身；如：obj.p={};delete obj.p;=>只是接触了obj和p之间的关联，并没有彻底清除p。产生的问题：这并不是一种不严谨的删除方法，容易造成内存泄漏///////////////////////////////////////////////////////////////////////////////js中的三种编码方式：escape：将所有ASCII表以外的字符串进行编码。解码方式：unescapeencodeURI和endoceURIComponent相对来说更强大，对应解码方式分别为：decodeURI和decodeURIComponent推荐方式：endodeURIComponent注：document.cookie没有进行编码，因此，通常情况下建议对cookie进行编码——encodeURIComponent(getCookie(aaa));///////////////////////////////////////////////////////////////////////////////webworker的总结：使用webworker另起一个线程：加载顺序：网页js+css加载完成后，才呈现页面，这样会导致页面加载很慢，于是，可以把那些加载过慢的js模块单拿出来放到异步线程中，这样，页面可以正常显示，而不会因为过慢的模块导致页面加载变慢语法如下：新建：var wk=new Worker("XX.js");分线程XX.js中回传结果：postMessage(a);//假设此处a的值为1主线程添加监听：wk.onmessage=function(event){console.log(event.data);//获取返回来的结果，打印1}关闭线程：wk.terminate();//通常是在获取完event.data之后进行关闭浏览器支持：ie10以下不支持///////////////////////////////////////////////////////////////////////////////this深入解析1、this定义：this所在域（函数）被看成是哪个对象的方法，this指代的就是那个对象2、全局中的this都是指的windowvar obj={    x:0,    y:function(){        var _this=this;        setTimeout(function(){            //this指window，因为setTimeout是window的方法            //_this指obj        })    }}3、call、apply的本质：重新定义函数的执行环境，即重新定义了函数中this的指向function A(n,m){//this指向待定}var obj={};、A.call(obj,1,2);//将A看成是obj的方法，函数中this自然而然指向obj这里提一下bind。bind也是javascript原生的函数，ie9+可支持，与call、apply同样是改变this的指向，区别在于使用方法：bind返回的是函数体，后两者返回的是执行结果，即fun和fun()的区别obj.y.call(o,1,1)=>等价于obj.y.bind(o,1,1)()=>等价于obj.y.bind(o)(1,1);bind方法中，会优先调用bind(paras)中的参数，当发现bind(paras)中参数不足时候，才会去依次调用后面(paras)的参数，obj.y.bind(o,1)(2,3)=>如果obj.y需要的参数是2个，则此时使用的参数是(1,2)，如果需要三个参数，则会使用(1,2,3)bind常可以在setTimeout和setInterval中用到var obj={};obj.stv=setInterval(function(){this=>指向obj而不是window}.bind(obj),100);///////////////////////////////////////////////////////////////////////////////曾经一直困扰我的一个问题：body的高度来源于其内容的高度，故无法满屏解决办法很简单：html,body{height:100%;}。结果：当body内元素不足body的高度时，html和body高度为屏幕高度，当body内元素大于body高度时候，body的offsetHeight不变，始终等于document.body.clientHeight。而document.body.scrollHeight会随着页面内容的增加而自动扩张///////////////////////////////////////////////////////////////////////////////为一个dom添加事件监听之后立即取消该事件监听的精致写法：s.addEventListener("load",function(){this.removeEventListener("load",arguments.callee,false);})///////////////////////////////////////////////////////////////////////////////css、js、dom、img加载顺序：dom树按顺序加载，遇到css文件（link标签）时，dom会继续执行下去，而css标签同步进行加载。dom树遇到js文件（script标签）时，会等到js加载并执行完后再继续下去。而动态加载进来的js则不会阻塞domdom遇到img标签时，会继续执行下去，图片则同步进行加载。并且图片会被延迟加载，直到css加载完成之后才加载图片（因为浏览器不知道图片此时应该以什么样式进行显示）——有待考证DOMContentLoaded是指所有dom及js加载完成之后的状态，包括所有dom节点、所有靠<script>标签（没有defer、async属性的情况下）外部引入的js。不受外部css文件、图片文件和动态加载的js文件的影响别人给出的建议：1、由于图片会在css加载完成后载入，CSS样式表影响了图片的加载速度，然而JS不会影响，如果想让图片尽快加载，就不要给图片使用样式，比如宽高采用标签属性即可。2、JS的加载执行速度影响了DOMContentLoaded事件的触发时间，如果想要尽快触发DOMContentLoaded事件，就将次要的JS采用动态加载的方式加载吧。///////////////////////////////////////////////////////////////////////////////canvas变形方法：canvas.translate(x,y)：定义canvas的(0,0)坐标点（以下所有方法都是相对于此点进行变形）canvas.scale(scaleWidth,scaleHeight)：放大倍数，宽度和高度倍数都不可少canvas.rotate(angle)：旋转角度canvas.transform(a,b,c,d,e,f)：canvas.setTransform(a,b,c,d,e,f)：transform和setTransform中的参数解释：a:水平缩放b:垂直倾斜，0表示无倾斜c:水平倾斜，0表示无倾斜d:垂直缩放，1表示无缩放e:水平位置偏移f:垂直位置偏移1、setTransform会重置0,0坐标点和其他变形为初始状态。scale、rotate、tranform则会依据当前的状态进行相对的变形。比如：transform和setTransform：前者会基于目前已经变形的情况进行进一步变形，而setTransform则是重置所有变形。比如，已经用scale放大了2倍，transform再放大3倍，canvas将变成6倍，而setTransform放大3倍则会重置放大倍数为3倍2、canvas中的变形的相对点是canvas的0,0点。而css3 transform中的变形的相对点永远是元素的中心点。所有倾斜均是逆时针方向///////////////////////////////////////////////////////////////////////////////为某些内置对象增加方法：String.prototype.getHallo=function(a,b){}想调用某些内置对象的方法：情形一：不需要改变this指向的var getHallo=Math.pow;console.log(getHallo(2,5));//=>32情形二：需要改变this指向的（1） "".substr.call(str,2);//=>cdef或者（2） (new String()).substr.call(str,2)//=>cdef 性质同（1）或者（3） var str="abcdef";String.prototype.substr.call(str,2);//=>cdef或者（4） "".__proto__.substr.call(str,2)//=>cdef 性质同（3）///////////////////////////////////////////////////////////////////////////////关于表单元素value值：表单中textarea和input的值均保存在dom.value中，这里的dom.value与自身的value属性并不一样。dom.value会随着onchange自动更新，而自身的value则不会。也就是说getAttribute("value")一旦<ipnut value="111"/>被赋值，则不会再改变，除非js动态改变其value值textarea和input：举例：<input id="hallo" type="text" value="111"/>hallo.value=>111hallo.getAttribute("value")=>111input输入222hallo.value=>222hallo.getAttribute("value")=>111设置value属性值hallo.setAttribute("value","333")hallo.value=>333hallo.getAttribute("value")=>333结论：dom.value总是会自动更新，而html标签-value属性值则与data-xxx并无差别，要想改变该值，都需要setAttribute()///////////////////////////////////////////////////////////////////////////////用以下几行代码来解释一下作用域和bind以及闭包的应用：首先，看一下原始形态：var obj={};obj.stv=setTimeout(function(){    console.log(this); //<b>},100);<b>处指向window，因为setTimeout是window的对象，事实上我们希望这里指向当前对象obj变形：var obj={};obj.stv=setTimeout(function(){    console.log(this); //<b>}.bind(obj),100);<b>处指向obj，bind将指向做了改变但是，我们希望不要再bind中使用obj，而是，直接用this指向当前对象，于是变形：var obj={};obj.stv=function(){    console.log(this);//<a>    setTimeout(function(){        console.log(this); //<b>    }.bind(this),100);}();咦，似乎与我们想要的结果不太一样，函数体将自动执行，<a>处和<b>的this都指向了window，这是因为该函数在定义时就被执行，并未被赋值给任何对象再变形：var obj={};obj.stv=function(){    console.log(this);//<a>    setTimeout(function(){        console.log(this); //<b>    }.bind(this),100);};obj.stv();这就是我们想要的结果了，但看起来好像仍然不够完美，因为，函数内部和外部环境没有分离开，于是，我们给他一个闭包var obj={};obj.stv=function(){    return function(){        console.log(this);//<a>        setTimeout(function(){            console.log(this); //<b>        }.bind(this),100);    };}();obj.stv();这样，就完美了///////////////////////////////////////////////////////////////////////////////用call来优化笨重的上下文切换设想一下，如果我们写一个改变dom颜色的函数，并可能会被频繁调用如下：function changeColor(c){    this.style.color=c;}如何使用？div1.changeColor("#f90") 肯定会报错，因为changeColor不是dom自带的方法，一般情况下，我们可能会去给dom写拓展，比如：!function(dom){    dom.changeColor=function(c){        //循环、赋值。。。。    }}(NodeList.prototype);或者干脆调用时将要操作的dom对象作为传过去function changeColor(ele,c){    ele.style.color=c;}第一种方法是一种封装，对于频繁使用的内容可以这么做，但是总不能对所有的涉及到dom操作的都拓展到prototype上吧，那样太不人道了第二种方法比较low，就不细说了用下面的方法：function changecolor(c){this.style.color=c;}调用时：changeColor.call(ele,c)///////////////////////////////////////////////////////////////////////////////关于函数节流：当用户通过某些操作而频繁调用某一函数时，尤其是涉及到dom重流重绘时，会导致性能浪费，于是对某些操作做一定延时处理，比如窗口resize：var resizeTimer=null;$(window).on('resize',function(){if(resizeTimer){clearTimeout(resizeTimer)}resizeTimer=setTimeout(function(){console.log("window resize");},400);});我们将函数节流成为throttle，以上是基本原理，以后细细研究///////////////////////////////////////////////////////////////////////////////jquery中map的应用：场景：<div class="hallo">1</div><div class="hallo">2</div><div class="hallo">3</div>现在想要获取.hallo中的值并组成一个数组：var arr=[];$(".hallo").each(function(){    arr.push(this.innerHTML);});console.log(arr);有了map，可以更加简单：arr=$(".hallo").map(function(){    return this.innerHTML;}).get();console.log(arr);这里的map是一个jquery封装的数组，需要用get()方法就能得到标准的数组了///////////////////////////////////////////////////////////////////////////////