前端知识碎片(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中的内容时要注意在

这样写时,内容和''的相等成立,但如果和结束标签之间有空格,那么内容和''就是不相等的,此时可以先用一个变量获取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("

" + str + "


"); } $("#oneName").empty().append(result);

2017.9.15

冒泡排序

for(var i=0;iarr[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

复制内容按钮





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)){
                                        // 
                        // 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 +='';
                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不可用时使用本地文件代码




####2017.10.25
>现在google浏览器似乎不支持document.writeIn(),会报错,使用document.write()

你可能感兴趣的:(前端知识碎片(2017.6-2017.10))