前端知识碎片(2017.6-2017.10)

2017.6.28

浮动的元素,如果没有设置宽度,那么将自动收缩为文字宽度

2017.7.11

任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"

2017.7.12

IE6 IE7 IE8 在position : relative时存在fadeIn() fadeOut()显示的bug,如果fadeIn的元素的子元素有position属性时,以relative值为最严重,有position属性的元素不会出现fadeIn的效果

今天遇到的这个问题非常有趣,也花了我很长时间才得以解决,本来我以为是因为IE的fadeIn()/fadeOut()显示bug导致的,但是最后通过测试发现实际原因居然是IE对图片的位深度和格式要求的严格导致的,IE不能显示本来是jpg格式直接改成png格式的图片,也不能显示位深度24的图片,需要通过ps转换一下

2017.7.13

使用first-child伪类时要保证其前面没有兄弟节点
需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作

2017.7.20

z-index属性不会作用于窗口对象,如select控件

只有在相同的stacking context下才会用z-index来决定先后,不同时则由stacking context的z-index来决定

2017.7.21

做完项目应该写好使用文档:),这是一个非常好的习惯

2017.7.25

overflow:hidden 影响布局的问题
使用vertical-align: bottom解决,vertical-align 属性设置元素的垂直对齐方式,bottom是把元素的顶端与行中最低的元素的顶端对齐

jquery中复选框全选全不选问题

$("#all").click(function(){   
    if(this.checked){   
        $("#list :checkbox").prop("checked", true);  
    }else{   
    $("#list :checkbox").prop("checked", false);
    }   
});

2017.8.1

在sublime中用快捷键选中多行Ctrl+鼠标单击可以同时对多行进行代码编辑

2017.8.28

控制台中灰色的是计算出来的样式

2017.8.30

父窗口中获取iframe中的元素
$("#iframe的ID").contents().find("#iframe中的控件ID").click();
iframe中获取父窗口的元素
$('#父窗口中的元素ID', parent.document).click();

2017.9.1

http://gallery.echartsjs.com/editor.html?c=xSy6oGlXOW
一个用Echarts图表做的扫雷游戏

2017.9.5

iframe子父页面相互调用的方法

$().contents().find().xxx();
$(window.parent.document).contents().find().xxx();

####2017.9.7
>简单的设备识别方法
$(function(){
                if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
            if(window.location.href.indexOf("?mobile")<0){
                try{
                    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
                        window.location.href="http://www.baidu.com";
                    }else if(/iPad/i.test(navigator.userAgent)){
                    }else{
                        window.location.href="http://www.baidu.com"
                    }
                }catch(e){}
            }
        }

2017.9.13

$.each方法

$.each( [1, 2, 3] , function(i, item){
        alert("索引=" + i + "; 元素=" + item);
    } );

根据数组内对象属性值对对象进行排序

var arr = [{g:3,v:2},{g:14,v:2}{g:11,v:2},{g:55,v:2}];
                function compare(property){
                return function(obj1,obj2){
                    var value1 = obj1[property];
                    var value2 = obj2[property];
                    return value2 - value1;//降序,改成1-2是升序
                  }
               }
               var sortArr = arr.sort(compare('g'));

$(function(){})的适用与不适用情况有很大区别
$('body').on('click', 'xxx', function() { }),直接给动态生成的新节点加方法是无效的,因为新生成的节点没有被js算在内,要重新加载一遍,才能把新的节点加进去,这个写法可使动态事件绑定在新加的节点的父节点上,或者body上,这样每次事件触发,会扫描一遍子节点,把js动态生成的新节点也加进去触发
如果用text()方法获取一个div中的内容时要注意在<div></div>这样写时,内容和''的相等成立,但如果和结束标签之间有空格,那么内容和''就是不相等的,此时可以先用一个变量获取text()值,再判断是否与这个变量相等来解决这个问题

2017.9.14

获取由0-9随机生成数字组成的三位数字 在前面加个''可以将等式转换为拼接字符串而不是相加

ran = ''+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)+Math.floor(Math.random()*10);

js将数组中逗号替换成空格的一个范例

var qualityManDatas = ["雾气:0", "玻璃纤维痕:0", "困气:0", "银丝痕:0", "熔接痕:0", "水波纹:0", "黑点:0", "顶白:0", "变形:0", "缺胶:0", "冷料:0", "进胶口不良:0", "射纹:0", "分层:0", "气泡:0", "烧黑 :0", "龟裂 :0", "缩水:0", "真空气泡:0", "披锋:0", "拖花:0", "其他:0", "不用:0"]  
  
var result = [];  
for (var i = 0,len = qualityManDatas.length; i < len; i += 6) { //每组六个  
    var strObjcet = qualityManDatas.slice(i, i + 6);  
    var str = strObjcet.toString();  
    str = str.replace(/,/g, "         "); //将所有的逗号 替换成空格  
    result.push("<p>" + str + "</p><br/>");  
  
}  
$("#oneName").empty().append(result);  

2017.9.15

冒泡排序

for(var i=0;i<arr.length;i++){
    for(var j=i;j<arr.length;j++){
        if(arr[i]>arr[j]){
            var tmp=arr[i];
            arr[i]=arr[j];
            arr[j]=tmp;
        }
    }
}

打乱数组顺序重新排列

function randomsort(a, b) {
              return Math.random()>.5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较,返回-1或1
              }
              arr.sort(randomsort);

jq转换json格式数据的方法

var bix = $.parseJSON(res['history']);

2017.9.18

jq中text()和html()的使用情景是有区别的,注意区分,当需要换行时,请使用html()方法

2017.9.19

在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。

window.self
功能:是对当前窗口自身的引用。它和window属性是等价的。
语法:window.self
注:window、self、window.self是等价的。

window.top
功能:返回顶层窗口,即浏览器窗口。
语法:window.top
注:如果窗口本身就是顶层窗口,top属性返回的是对自身的引用。

window.parent
功能:返回父窗口。
语法:window.parent
注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。

在框架网页中,一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。

判断当前窗口是否在一个框架中:

var b = window.top!=window.self;
document.write( "当前窗口是否在一个框架中:"+b );

你应当将框架视为窗口中的不同区域,框架是浏览器窗口中特定的部分。一个浏览器窗口可以根据你的需要分成任意多的框架,一个单个的框架也可以分成其它多个框架,即所谓的嵌套框架。

使网页内容无法复制粘贴,无法右键

document.oncontextmenu=new Function("event.returnValue=false");
document.onselectstart=new Function("event.returnValue=false");

重新启用

document.oncontextmenu=""; 
document.onselectstart=true; 

给页面设置的自动刷新

setInterval(function(){
            window.location.reload();
          },3000);

2017.9.20

给页面中包含的iframe刷新的方法

document.getElementById('xxx').contentWindow.location.reload(true);

根据属性选中元素并切换的一个思路

$(xxx).attr('now');
$(xxx).siblings().removeAttr('now');
var type = $("xxx[now]").attr('type');

设置与清除定时器

var ref = setInterval(function(){
            window.location.reload();
          },10000);
clearInterval(ref);

2017.9.22

复制内容按钮

<script type="text/javascript" src="/Public/js/ZeroClipboard.min.js"></script>

<button id="copy" disabled=disabled data-clipboard-target="hao">复制</button>

function clip_board(){
                    var clip = new ZeroClipboard($("#copy"));
                        clip.on("ready",function(readyEvent){
                        clip.on("aftercopy",function(event){
                        alert('号码已复制到剪贴板上');
                        var dataObj = clip.getData();
                        });
                      });
                }
                clip_board();

判断数组中是否有某个元素

if($.inArray(元素,数组 ) >= 0){元素存在于数组时执行}

获取当前页面地址

var href = window.location.href;

控制按钮的禁用、启用

$('button').attr('disabled','disabled');
$('button').removeAttr("disabled");

2017.9.27

利用for循环在interval循环中设置更长时间的循环

var i = 0;
var round = setInterval(function() {
  i++
  if(i > 5){
    i = 0;
  }
},1000);

2017.9.28

以前用过的一个设备识别并应用不同样式的方法

if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
            if(window.location.href.indexOf("?mobile")<0){
                try{
                    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
                                        // <link rel="stylesheet" href="/Public/css/index/plan_mobile.css">
                        // window.location.href="http://www.baidu.com";
                                        function includeLinkStyle(url) {
                                            var link = document.createElement("link");
                                            link.rel = "stylesheet";
                                            link.type = "text/css";
                                            link.href = url;
                                            document.getElementsByTagName("head")[0].appendChild(link);
                                        }
                                        ifwindow = 1;
                                        includeLinkStyle("/Public/css/index/plan_mobile.css");
                    }else if(/iPad/i.test(navigator.userAgent)){
                    }else{
                                    function includeLinkStyle(url) {
                                        var link = document.createElement("link");
                                        link.rel = "stylesheet";
                                        link.type = "text/css";
                                        link.href = url;
                                        document.getElementsByTagName("head")[0].appendChild(link);
                                    }
                                        ifwindow = 1;
                                        includeLinkStyle("/Public/css/index/plan_mobile.css");
                    }
                }catch(e){}
            }
        }else{
            function includeLinkStyle(url) {
                var link = document.createElement("link");
                link.rel = "stylesheet";
                link.type = "text/css";
                link.href = url;
                document.getElementsByTagName("head")[0].appendChild(link);
            }
            ifwindow = 0;
            includeLinkStyle("/Public/css/index/plan_window.css");
        }

2017.10.12

mui点击事件示例(批量绑定用on,用addEventListener()监听某个特定元素上的事件)

  mui(".mui-content").on('tap','.msg_name',function(){
            var tt = $(this).text();
            console.log(tt);
            $('#msg_text').val('@'+tt+' ');
            $('#msg_text').focus();
        });
cell[2].addEventListener('tap', function(event) {
                jQuery('#mc1').hide();
                jQuery('#mc2').show();
                jQuery('#mc2').html('');
                var url = jQuery(this).attr('url')
                var contents = '';
                contents +='<iframe style="border:none;width:100%;height:400px;overflow:hidden;" src="'+url+'"></iframe>';
                jQuery('#mc2').html(contents);
                // jQuery('#Popover_0').hide();
            },false);
false表示事件句柄在冒泡阶段执行

类似微信消息框的显示文本效果

.msg_box {
                background: #BBFFFF;
                min-height: 30px;
                padding: 0 10px 0 10px;
                margin: 5px 5px 0 5px;
                display: inline-block;
                line-height: 30px;
                border-radius: 5px;
                white-space: pre-wrap;
                word-break:break-all;
                overflow:hidden;
            }

mui滚动条设置

mui('#mui_content').scroll({
                deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
        bounce: false,//滚动条是否有弹力默认是true
        indicators: false, //是否显示滚动条,默认是true
    });

2017.10.13

获取scroll 控件当前位置的两种方式:
一、var scrolly = mui('.mui-scroll-wrapper').scroll().y;

二、添加事件监听scroll滚动时会触发该事件,监听事件需要放在mui.plusReady(function()内
document.querySelector('.mui-scroll-wrapper').addEventListener('scroll', function(e) {
var curscroll = e.detail.x;
});
scroll控件中内容更新后,深度并不会随之更新,触发更新可以是手动滑动一下或者使用函数更新。(静态内容不存在该问题)
具体函数:mui('.mui-scroll-wrapper').scroll().reLayout();

2017.10.17

当cdn不可用时使用本地文件代码

<script src="//[http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js**](https://link.zhihu.com/?target=http%3A//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js)"></script>
<script>
if (!window.jQuery) {
                                  var script = document.createElement('script');
                                  script.src = "/js/jquery.min.js";document.body.appendChild(script);
                               }
</script>

####2017.10.25
>现在google浏览器似乎不支持document.writeIn(),会报错,使用document.write()
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容