关于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、不带引号的,不能带括号,带引号的必须带括号。245实际是错误的写法;b、要想在规定的时间里用setInterval和setTimeout的回调函数来执行函数并且又想传递参数,最好的方式就是使用方法1"hallo(a)"
///
网页更新防止缓存方法:
1"true" http-equiv="Cache-Control" content="max-age=86400"/>
其中max-age为获新的时间,86400表示一天之后获新,获新内容为所有js、css和image等资源文件
///
解决ie8不支持媒体查询:
  
///
让一个元素不再浮动的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与 
原则是:少用 
///
函数前面加上感叹号“!”有什么用?
原因:形如 function(){}()的函数是无法执行的,需要用括号括起来把函数体编程一个表达式:(function(){})()
但是函数前面加上!之后,函数就会被正确的解析和调用:!function(){}();这样的方式,效率似乎更高。另外,+、-也有类似功能:
+function(){}()、-function(){}();
参见:在bootstrap中,自动执行的函数的写法是:
!function($){}(window.jQuery);
///
几个冷知识:
1、但凡有id的dom,会自动生成一个全局对象,不用document.getElementById("id")或$("#id");
html:
"hallo">aaa
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]); } 通过此方法,意外的获知: 对于"hallo" href="http://www.baidu.com/a/b/c?id=123">,可以获得如下参数 1、a标签(对象)的属性中有host:主机名(含接口),hostname不含接口,如:192.168.0.124:8001是host,而192.168.0.1242hallo.pathname=>/a/b/c 3hallo.protocol=>http 4hallo.host=>www.baidu.com 5hallo.hostname=>www.baidu.com 6hallo.origin=>http://www.baidu.com 7hallo.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 /// 交换两个变量的值,不用第三个变量暂存 1 vara=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表以外的字符串进行编码。解码方式:unescape encodeURI和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都是指的window var 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则不会阻塞dom dom遇到img标签时,会继续执行下去,图片则同步进行加载。并且图片会被延迟加载,直到css加载完成之后才加载图片(因为浏览器不知道图片此时应该以什么样式进行显示)——有待考证 DOMContentLoaded是指所有dom及js加载完成之后的状态,包括所有dom节点、所有靠

你可能感兴趣的:(前端)