在前端开发过程中，要善于观察和抽象。尤其是在项目前期，不要着急写代码，一定观察项目的原型图或者设计稿，想想哪些部分是可以拆分成可以复用的公共组件的。这样做能让你后面的工作，事半功倍。
38、前端rem适配
37、jQuery暂停计时函数
36、jquery动效网站：jquery之家，插件库
35、输入框监听
// 输入框监听
$("#keyWords").on('input propertychange',function (e) {
var inputStrs = $(this).val();
/* $("#appendTagList") */
});
34、div背景色切换
$(function(){
$(".box").click(function(){
$(this).toggleClass('red');
})
})
33、Html Table 合并单元格
32、jquery-读取form表单中的所有数据列表
var d = {};
var t = $('form').serializeArray();
$.each(t, function() {
d[this.name] = this.value;
});
alert(JSON.stringify(d));
31、jQuery中国省市区地址三级联动插件Distpicker
30、刮刮乐插件
29、js对日期加减指定天、时、分、秒
28、无限滚动
27、Clipboard.js : 移动端浏览器实现网页内容复制
26、选中移除事件监听
$('a').mouseover(function(){$('div').hide();}).mouseout(function(){$('div').hide()});
25、方方正正正方形
.personalcenter .head .avatorBox {
position: relative;
width: 20%;
height: 0;
padding-top: 20%;
border-radius: 50%;
border: 2px solid #CFD0D1;
}
.personalcenter .head .avatorBox .avatorImg {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 50%;
}
24、进度条斜线斜线斜线样式
width: 0;
height: 100%;
border-radius:22px;
background-image:-webkit-linear-gradient(-45deg, rgb(240, 152, 38), rgb(240, 152, 38) 25%, rgb(251, 194, 100) 25%, rgb(251, 194, 100) 50%, rgb(240, 152, 38) 50%, rgb(240, 152, 38) 75%, rgb(251, 194, 100) 75%, rgb(251, 194, 100));
background-image:-moz-linear-gradient(-45deg, rgb(240, 152, 38), rgb(240, 152, 38) 25%, rgb(251, 194, 100) 25%, rgb(251, 194, 100) 50%, rgb(240, 152, 38) 50%, rgb(240, 152, 38) 75%, rgb(251, 194, 100) 75%, rgb(251, 194, 100));
background-image:linear-gradient(-45deg, rgb(240, 152, 38), rgb(240, 152, 38) 25%, rgb(251, 194, 100) 25%, rgb(251, 194, 100) 50%, rgb(240, 152, 38) 50%, rgb(240, 152, 38) 75%, rgb(251, 194, 100) 75%, rgb(251, 194, 100));
background-size:20px 20px;
23、HTML/CSS 自定义开关按钮控件(switch)样式
22、 给页面布局完成之后添加的控件添加点击事件的方法：
$("body").on("click", "deleteBtn", function(){
// 点击需要处理的事件
});
21、 函数式编程
// 注意所有函数方法需要在这里调用
$(function(){
wxObject.init();
orderInfo.init();
orderInfo.initListener();
orderInfo.computerPrice();
});
// 函数方法实现
var orderInfo = {
init: function(){
// 初始化需要调用的方法实现写在这里
};
initListener：function(){
// 初始化监听的方法写到这里
};
computerPrice: function(){
// 其他方法写到这里
};
};
20、 拼接html
// 第一种方式
//添加一行
$('.addbtn').click(function () {
var table1 = $("#propertyTable");
var tableBody = $("#propertyTbody")
var row = $("');
html.push('');
if (user.avatar == "") {
if (user.phone = "") {
html
.push('');
} else {
html
.push('');
}
} else {
html.push('[站外图片上传中……(3)]');
}
html.push('');
html.push('');
if (user.nickname == "") {
html.push('- 客户：【匿名】
');
} else {
html.push('- 客户：' + user.nickname + '
');
}
html.push('-
');
html.push('- 手机：' + user.phone + '
');
html.push('- 访问IP：******
');
html.push('- 地址：北京市*****
');
html.push('- 注册时间：' + new Date(user.createTime).format("yyyy-MM-dd")
+ '
');
html.push('
');
html.push(' ');
return html.join("");
}
19、 控件隐藏显示
jQuery.show();
jQuery.hide();
18、水平垂直居中
body {
display: flex; align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
17、 高度为0时的解决方案
.article-item:after {
content:"";
display: block;
clear: both;
}
16、滑动到div滚动条最低端
// 清空输入框$("#inputMessage").val("");// 滚动到最低端$('html, body, #content, #chattingView').animate({ scrollTop: chattingView[0].scrollHeight}, 500);
15、页面复制粘贴属性设置使用 CSS user-select 控制选择范围
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
14、修改控件html内容（jQuery）
$("#registerBtn").html("请检查手机号！");
13、jquery一个div怎么获得焦点和失去焦点
// 获得焦点
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
// 失去焦点
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
12、用JS获取方法中包含的所有参数
【JS获取URL中参数值（QueryString）的4种方法分享】
function getArgs(func) {
// 先用正则匹配,取得符合参数模式的字符串.
// 第一个分组是这个: ([^)]*) 非右括号的任意字符
var args = func.toString().match(/function\s.*?\(([^)]*)\)/)[1];
// 用逗号来分隔参数(arguments string).
return args.split(",").map(function(arg) {
// 去除注释(inline comments)以及空格
return arg.replace(/\/\*.*\*\//, "").trim();
}).filter(function(arg) {
// 确保没有 undefined.
return arg;
});
}
function myCustomFn(arg1, arg2,arg3) {
// ...
}
// ["arg1", "arg2", "arg3"]
console.log(getArgs(myCustomFn));
11、 页面出现之后新增的div添加点击事件
$("body").on("click", ".address", function () { $("#addressReceiptDiv").children().find(".address").removeClass("radioboxChecked");
$(this).addClass("radioboxChecked");
selectAddress = $(this);
});
10、
一、CSS字间距、字与字之间间隔距离 - TOP
使用CSS单词：letter-spacing对应教程：http://www.divcss5.com/rumen/r75.shtml
二、HTML空格代码输入 - TOP
使用HTML代码字符：“ ”对应html空格字符代码输入与实现教程：http://www.divcss5.com/html/h389.shtml
三、CSS段首空格效果 - TOP
使用CSS单词：text-indent段落空格效果真正名字叫，CSS缩进又叫CSS段首文字缩进，缩进的字符多少可以通过CSS设置，可设置2个中文字宽度空格效果，可宽可窄对应教程：http://www.divcss5.com/rumen/r400.shtml
9、获取自定义data-属性
.data( key, value )
.data( obj )
.data( key )
.data()
8、div滑动到顶部、底部
$(".pop-content-content").scroll(function(event){
var scrollTop = $(this).scrollTop();
var ks_area = $(this).innerHeight();
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
nScrollHight = $(this)[0].scrollHeight;
if(scrollTop + ks_area >= nScrollHight-50){
console.log("到底了");
} else if($(this).scrollTop() <=0){
console.log("到顶部了");
}
});
7、input输入框text限制输入字符串长度
function len(s){
s=String(s);
return s.length+(s.match(/[^\x00-\xff]/g) || "").length;
}
function limit(obj,limit){
var val=obj.value;
if(len(val)>limit){
val=val.substring(0,limit);
while (len(val)>limit){
val=val.substring(0,val.length-1);
};
obj.value=val;
}
}
$(document).ready(function(){
$("#txt").keyup(function(){
limit(this,10);
})
})
$(window).on('scroll',function(){
if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
console.log("滚动到页面底部啊啊啊啊啊啊啊啊啊啊啊啊啊啊");
}
});
// 获取页面顶部被卷起来的高度
function scrollTop(){
return Math.max(
//chrome
document.body.scrollTop,
//firefox/IE
document.documentElement.scrollTop);
}
// 获取页面文档的总高度
function documentHeight(){
//现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
// 获取页面浏览器视口的高度
function windowHeight(){
return (document.compatMode == "CSS1Compat")?
document.documentElement.clientHeight:
document.body.clientHeight;
}
5、滚动到底部加载更多
// 监听滚动条
$("body").scroll(BottomJumpPage);
$("body").load(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
/* 判断页面初始时是否有数据 */
var customListHeight = $("#orderContentList").height();
if (customListHeight == 0 || customListHeight < windowHeight-120) {
$(".page__bd").hide();
}
});
// 判断是否到达底部
function BottomJumpPage() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
console.dir("scrollTop" + scrollTop);
console.dir(scrollHeight);
console.dir(windowHeight);
if (scrollTop + windowHeight == scrollHeight) { //滚动到底部执行事件
console.dir("我到底部了");
var pageIndex = parseInt($("#pageIndex").val()) + 1;
/* for(var i=0; i<10; i++) {
var html = getOrderHtml();
$("#orderContentList_table").append(html);
} */
var url=window.location.search;
if(url ==""){
url = "/admin/order/customer/list?pageIndex="+pageIndex;
}else{
if(url.indexOf("pageIndex")!=-1){
var a = url.split("pageIndex");
url = "/admin/order/customer/list"+a[0]+"pageIndex="+pageIndex;
}else{
url = "/admin/order/customer/list"+url+"&pageIndex="+pageIndex;
}
}
$.getJSON(url,function(data) {
/* if (data.list.length < 15) {
$(".page__bd").hide();
} else {
$(".page__bd").show();
} */
$.each(data.data.models, function(index, user) {
/* alert(data.data.pageIndex);
*/ console.log("第几次加载"+pageIndex);
$("#pageIndex").val(data.data.pageIndex);
var html = getOrderHtml(user);
$("#orderContentList_table").append(html);
});
});
}
4.时间戳与时间字符串互转
3.webpack使用优化（基本篇）
- 设置div对齐方式
vertical-align: top // 顶部对齐
- 消除span直接的空白间隙
设置父试图的font-size:0 再依次设置子元素的font-size