在此记录Javascript学习或工作过程中遇到的问题，或是一些值得分享的小知识，第一次更新是2018.7.x，会持续更新。。。
1.懒加载
核心思想：只加载可视部分元素
实现方式：计算滚动条与页面底部的距离
2.prop与attr的区别(JQuery)
对于HTML元素天生的固有属性，在处理时，使用prop方法
对于HTML元素自定义的DOM属性，在处理时，使用attr方法
3.Zepto与JQuery
- Zepto是为移动端开发的库，是JQuery的轻量级替代品。
4.点击按钮自动刷新页面问题
问题描述：点击
标签，页面进行了刷新发生原因：在W3C浏览器，如Firefox下，
标签按钮会提交表单解决方案：
不会对表单进行任何操作
5.Android与Javascript交互
- Android调用JavaScript
JavaScript写好一个function让Android调用即可
示例代码：
//sTime,eTime分别为原生传来的起始时间与截止时间
function selectDate(sTime,eTime) {
startTime=sTime;
endTime=eTime;
Index_Ajax();
}
- JavaScript调用Android
1.Android配置完毕后，JavaScript可直接通过对象.方法名进行调用
2.或通过请求约定的url，进而让Android捕获，间接调用
示例代码：
// 由于对象映射，所以调用test对象等于调用Android映射的对象
function callAndroid(){
test.hello("js调用了android中的hello方法");
}
// 约定的url协议为：js://webview?arg1=1&arg2=2
function callAndroid(){
document.location = "js://webview?arg1=1&arg2=2";
}
6.获取URL参数转存为数组
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
url=decodeURI(url); //对uri进行解码
var request = new Object();
if(url.indexOf("?")!=-1){
var str = url.substr(1); //将问号截去
var strs = str.split("&");//以&作为分隔符,拆分为数组,例:["name=mike","age=1"]
for(var i = 0;i7.将时间转化为yyyy-MM-dd格式
var date = new Date("2008-8-8");
console.log(timetrans(date)) //2008-08-08
function timetrans(date){
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
return Y+M+D;
}
8.radio、checkbox、select 事件监听与取值方法(jquery)
//radio 初始化/监听事件/取值
$('input:radio[name=""][value=""]').prop('checked', true);
$('input:radio[name=""]').on('click',function () {
console.log($(this).val())
});
var value = $('input:radio[name=""]:checked').val();
//checkbox监听事件与取值
$('input:checkbox[name=""]').on('click',function () {
console.log($(this).prop("checked"))
});
//select监听事件与取值
$('select').on('change',function(){
alert($(this).children('option:selected').val());
})
9.文字多余部分省略号显示
- 常规写法
width:150px;/*要显示文字的宽度*/
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */
- 改版：第n行多余部分显示省略号
width:150px;
overflow:hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2; //第n行
-webkit-box-orient:vertical;
10.css3绝对居中
- 前提:父元素position:relative，有宽高
.son{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
11.bfcache 清除往返缓存
- 最佳方案(用定时器的形式请求数据)
setTimeout(()=>{
this.getHomeData();
},100);
12.黑色遮罩
- z轴由上到下排列顺序：弹窗>遮罩>内容
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
background: rgba(0,0,0,0.6);
z-index: 1;
13.移动端分页
var current_page = 1; //当前页面
var page_size = 20; //每页的数据量
var noMoreData = false; //有无更多数据
var canLoad = false; //可否加载
$(function () {
loadData(); //首次加载数据
initListener(); //监听滚动加载
});
function loadData() {
var params = {
page:current_page,
page_size:page_size,
};
$.ajax({
type: "POST",
url: BASE_URL
data: params,
dataType: "json",
success:function(result){
if (result.return_code == 1) {
var html='';
for(var i=0;i14.点击除指定元素外的区域
$(document).on('click',':not(.className)',function () {
alert(1)
});
$('.className').on('click',function (e) {
e.stopPropagation()
});
15.CSS3动画
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
div{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
16.零碎的发现
字符串转数字 parseInt(String s) parseFloat(String s)【实现跑马灯效果时发现，监听的偏移量为浮点型，却用整型捕捉，导致bug】
font-size:10px 不代表这个文本高度为10px，实际高度大于10px，可通过设置line-height达到预期效果【定位文字初始位置时发现】
bfcache为H5新特性，代表往返缓存 【微信页面中后退，发现页面并没有更新，使用定时器思路解决】
直接读取缓存数据：history.go(0) ； 重连服务器以读得新的页面：location.reload() 【对页面刷新方法对疑问】
苹果手机click事件无效 解决方案：touchstart(坏处：会穿透) 或 cursor:pointer(简直完美) 【实现微信软键盘隐藏过程中发现】
当过渡效果的属性有多个时，使用transition:all 【为首页增添多种动态效果时发现】
为避免重复加载，可在ajax中通过beforeSend与complete事件，来添加/关闭遮罩。【点击按钮出现多次请求的bug】