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()