1. box-sizing：许能够特定的体式格局去定义婚配某个地区的特定元素。
content-box：在划定一个框的宽高之外给这个框加内边距和边框。
border-box：（textarea和select默许值）在划定的一个框的宽高以内给这个框加内边距和边框。
/*看个人习气而用，但平常标签默许属性是content-box，除textarea,select*/
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
2. 美化input框
/*在IE10+浏览器中, 运用css即可隐蔽input文本输入框右边的叉号*/
input[type=text]::-ms-clear,::-ms-reveal{display:none;}
input::-ms-clear,::-ms-reveal{display:none;}
input{
/*去除点击涌现表面色彩*/
outline: none;
-webkit-appearance: none; /*去除体系默许的款式，苹果手机上的暗影*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*点击高亮的色彩*/
/*padding已在重置款式中去除，假如没有去除，记得有padding哦*/
}
3. 美化textarea文本域
textarea{
/*别忘了文本域的box-sizing属性值是border-box;一切的边框和padding都是在你牢固的宽高的基础上绘制*/
/*去除点击涌现表面色彩*/
outline: none;
/*假如有须要，去掉右下角的可拉伸变大小的图标和功用*/
resize: none;
/*padding已在重置款式中去除，假如没有去除，记得有padding哦*/
}
4. 转变placeholder的字体色彩大小
input::-webkit-input-placeholder {
/* WebKit browsers */
font-size:14px;
color: #333;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
font-size:14px;
color: #333;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-size:14px;
color: #333;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
font-size:14px;
color: #333;
}
5. 美化select
/*消灭ie的默许挑选框款式消灭，隐蔽下拉箭头*/
select::-ms-expand { display: none; }
select {
/*Chrome和Firefox内里的边框是不一样的，所以复写了一下*/
border: solid 1px #333;
/*将默许的select挑选框款式消灭*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在挑选框的最右边中心显现小箭头图片*/
background: url("小箭头图片途径") no-repeat right center transparent;
/*为下拉小箭头留出一点位置，防止被笔墨掩盖*/
padding-right: 14px;
/*去除点击涌现表面色彩*/
outline: none;
}
6. 美化button按钮
button{
/*自身有2px的边框，平常的button都不须要边框*/
border: none;
/*自身有的背景色，能够用其他色彩庖代*/
background: #333;
/*padding已在重置款式中去除，假如没有去除，记得有padding哦*/
}
7. 美化单选框、多选框或者是上传文件按钮
/*由于用input[type="radio"]和input[type="cheakbox"]都不能直接转变它们的款式，这个时刻要用到label标签关联，然后隐蔽input标签，直接给label标签款式就好了。选中label就是选中了此标签*/
<label for="sex">男</label>
<input type="radio" id="sex" value="男" />
8. 多出笔墨用省略号示意
/*单行笔墨的时刻*/
white-space: nowrap; /* 强迫不换行 */
overflow:hidden; /*内容超越宽度时隐蔽超越部份的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显现省略标记(...) ，需与overflow:hidden;一同运用*/
/*多行笔墨的时刻*/
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 2行 */
-webkit-box-orient: vertical;
9. 挑选器-挑选非第一个子元素
HTML：
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
要领一：
div > span :not(:first-child) {
margin-left:10px
}
要领二：兄弟元素挑选器
div > span + span {
margin-left:10px
}
HTML：
<div>
<span></span>
<p></p>
<span></span>
<span></span>
</div>
要领：
div > * :not(:first-child) {
margin-left:10px
}
10. jQuery限定字符字数的要领
$(document).ready(function(){
//限定字符个数
$(“.zxx_text_overflow”).each(function(){
var maxwidth=23;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+’…’);
}
});
});
11. css页面点击笔墨涌现蓝色底色去掉要领
-moz-user-select: none; /* 火狐 */
-webkit-user-select: none; /* webkit浏览器 */
-ms-user-select: none; /* IE10 */
-khtml-user-select: none; /* 初期浏览器 */
user-select: none;
12. 在碰见图标的垂直位置很难调解的时刻能够用这个属性
vertical-align: 30%;
vertical-align: middle;
13. 怎样让一个div在页面中上下左右居中
div{
width:400px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
}
14. css中设置table中的td内容自动换行，边框线合并为一条
1. 把表格的sytle的table-layout: fixed;
(就是表格牢固宽度，就是表格既要自适应他表面的容器，也不要撑出去)
2. 然后设置td的word-wrap: break-word;
3. table边框线合并为一条：border-collapse: collapse;
15. css让背景居中并充溢全部屏幕
body{
background: url('../img/jxs-banner.png') no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center center;
}
16. H5页面点击按钮的时刻，屏幕总会闪烁一下
-webkit-tap-highlight-color:rgba(0,0,0,0)
//webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color色彩，色彩用数值调治。
17. 处理苹果手机上input输入框的光标高度变化题目
题目发生的缘由：chrome浏览器对光标高度的设置原则为，当没有内容的时刻光标的高度=input的line-height的值，当有内容时，光标从input的顶端到笔墨的底部。
要领1：将line-height的值设置为跟字体大小一致；假如高度达不到，用padding去撑；
要领2：对chrome不设置line-height，它会自动笔墨居中，对ie举行hack设置line-height的值以保证笔墨垂直居中；这里要注重一下，假如在reset的款式文件中有设置line-height等值，请举行line-height的重置，能够用line-height:normal。详细能够看看腾讯好莱坞页面的搜刮框。
18. js
// 在js中写的返回键
onclick = 'history.go(-1)';
// 强迫革新页面
window.location.reload(true);
19. 推断用户运用的是手机照样电脑接见页面，并跳转到响应页面
<script type="text/javascript">
try{
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
window.location.href="mindex.html";
}else{
window.location.href="cindex.html";
}
}catch(e){}
</script>
20. 推断用户运用的是苹果手机照样安卓
<script type="text/javascript">
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
alert('是不是是Android：'+isAndroid);
alert('是不是是iOS：'+isiOS);
</script>
21. cjs完成字数限定，超越部份省略号
// 只显现20个字
function LimitNum(txt,idName) {
var str = txt;
str = str.substr(0,20) + '...' ;
var id=document.getElementById(idName);
id.innerText=str;
}
22. jq完成点击更多睁开，点击收起缩回
假设有很多个更多和收起功用须要展现在同一个页面
// 遍历一切的更多按钮
$('.more').each(function(){
$(this).click(function(){
// 当点击当前的更多按钮时，找到上N级的，或者是同级，反恰是要睁开的div切换类去完成睁开或收回
$(this).parent().prev().toggleClass('show_more');
// 首先在每一个更多按钮中加一个自定义的属性status = "true"
if($(this).attr('status') == 'true'){
// 当第一次点击当前更多的时刻会睁开，“更多”的按钮文本会变成“收起”文本。
$(this).html('收起 ∧');
// 在赋值给status为false
$(this).attr('status','false');
}else{
$(this).html('更多 ∨');
$(this).attr('status','true');
}
});
});
23. jquery 点击元素之外恣意处所隐蔽该元素的要领
$(".menu").on("click", function(e){
$("#menuBox").toggle();
$(document).on("click", function(){
$("#menuBox").hide();
});
e.stopPropagation();
});
$("#menuBox").on("click", function(e){
e.stopPropagation();
});
或
$('body').click(function(e) {
if(e.target.id != 'btn' && e.target.id != 'overlay')
if ( $('#overlay').is(':visible') ) {
$('#overlay').hide();
}
})
24. 取到页面中一切的checkbox怎样做
var doc = document,
domList = doc.getElementsByTagName('input'),
checkBoxList = [],
len = domList.length;
while (len--) {
if (domList[len].type === 'checkbox') {
checkBoxList.push(domList[len]);
}
}
25. jquery 怎样拔取除某个元素外的一切元素
$("div.content *").not(".keep");
// 示意content类的div下除keep类之外的一切元素；别的，注重*示意一切元素
26. 一个多处检察更多和收起的实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tb{
width: 1000px;
}
table{
width: 100%;
border: 1px solid #DDD;
border-collapse: collapse;
}
table tr th{
border: 1px solid #DDD;
width: 25%;
height: 40px;
}
table tr td{
border: 1px solid #DDD;
height: 80px;
line-height: 26px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="tb">
<table>
<tr>
<th>姓名</th>
<th>岁数</th>
<th>备注</th>
<th>名言</th>
</tr>
<tr>
<td>zhangsan</td>
<td>14</td>
<td><span data-text="这部份内容一一一会被省略一部份哦，看不了完全了咯，这里才是完全的，哈哈哈哈哈哈哈哈">这部份内容一一一会被省略一部份哦，看不了完全了咯，这里才是完全的，哈哈哈哈哈哈哈哈</span><a href="javascript:;" class="more">检察更多</a></td>
<td>勤奋让本身变更好</td>
</tr>
<tr>
<td>zhangsan</td>
<td>14</td>
<td><span data-text="这部份内容二二二会被省略一部份哦，看不了完全了咯，这里才是完全的，哈哈哈哈哈哈哈哈">这部份内容二二二会被省略一部份哦，看不了完全了咯，这里才是完全的，哈哈哈哈哈哈哈哈</span><a href="javascript:;" class="more">检察更多</a></td>
<td>天道酬勤</td>
</tr>
<tr>
<td>zhangsan</td>
<td>14</td>
<td><span data-text="这部份内容三三三会被省略一部份哦，看不了完全了咯，这里才是完全的，哈哈哈哈哈哈哈哈">这部份内容三三三会被省略一部份哦，看不了完全了咯，这里才是完全的，哈哈哈哈哈哈哈哈</span><a href="javascript:;" class="more">检察更多</a></td>
<td>心如止水</td>
</tr>
</table>
</div>
<script src="./js/jquery.min.js"></script>
<script>
$(document).ready(function(){
function limit(){
$('table tr td>span').each(function(){
var maxwidth=20;
if($(this).text().length>maxwidth){
// 大于20个字的时刻截取字符串并在背面加上省略号
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}else{
// 小于20个字的时刻不涌现检察更多的按钮
$(this).next('a').hide();
}
})
$('.more').click(function(){
var allWords = $(this).prev('span').attr('data-text');
var words = $(this).prev('span').text();
if($(this).text() == '检察更多'){
$(this).text('收起');
$(this).prev('span').text(allWords);
$(this).prev('span').attr('data-text',words);
}else if($(this).text() == '收起'){
$(this).text('检察更多');
$(this).prev('span').text(allWords);
$(this).prev('span').attr('data-text',words);
}
})
}
limit();
});
</script>
</body>
</html>
27. 点击按钮置顶
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#below").fadeIn(600);
} else {
$("#below").fadeOut(600);
}
});
$("#below").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
28. 制止蒙层底部页面追随转动
处理思绪：我们要阻挠页面转动，那末何不将其牢固在视窗（即 position: fixed），如许它就没法转动了，当蒙层封闭时再开释。 固然另有一些细节要斟酌，将页面牢固视窗后，内容会转头最顶端，这里我们须要纪录一下，同步 top 值。
示例代码：
let bodyEl = document.body
let top = 0
function stopBodyScroll (isFixed) {
if (isFixed) {
top = window.scrollY
bodyEl.style.position = 'fixed'
bodyEl.style.top = -top + 'px'
} else {
bodyEl.style.position = ''
bodyEl.style.top = ''
window.scrollTo(0, top) // 回到本来的top
}
}
30. 为何CheckBox明显是checked=”checked”也不显现选中状况
请把$('input').attr('checked','true')
换成
$('input').prop('checked','true');
31. 点击复制按钮复制链接
$("#copyBtn").on('click',function(event){
var link = $(event.currentTarget).prev('input');
link.select();
document.execCommand('Copy');
layer.msg('复制胜利，快去通知你的小伙伴吧~');
})
32. 自动天生微信二维码
下载jquery.qrcode.min.js，引入文件
var uri = $('#copyLinkText').attr('data-weixin');
$('#wxCode').qrcode(uri);
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
// 微信二维码中心加logo图，给二维码增添一个自定义的logo，会让你的二维码看上去更专业，默许的Jquery.Qrcode是不支持增添自定义Logo的，这里比较简单的完成计划就是，针对每一个二维码增添一个img标签，让img在二维码地区相对居中显现即可。
<img id="qrCodeIco" src="~/images/logo.png" style="position: absolute;width: 30px; height: 30px;" />
//掌握Logo图标的位置
var margin = ($("#qrCodeDiv").height() - $("#qrCodeIco").height()) / 2;
$("#qrCodeIco").css("margin", margin);
33. 分享到微博
$('.share_weibo').on('click',function(){
var weibo_url = "http://service.weibo.com/share/share.php?";
var p = {
url: uri += '?f=3',
title: desc,
/*分享题目(可选)*/
// pic: item.Cover,
/*分享图片的途径(可选)*/
searchPic: "true"
};
var s = [];
for (var i in p) {
s.push(i + '=' + encodeURIComponent(p[i] || ''));
}
weibo_url += s.join("&");
window.open(weibo_url);
});
34. 分享到QQ空间
$('.share_qzone').on('click',function(){
var qzone_url = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
var p = {
url: uri += '?f=4',
showcount: '1',
/*是不是显现分享总数,显现：'1'，不显现：'0' */
desc: desc,
/*默许分享来由(可选)*/
summary: '分享注册送现金红包啦！快来注册吧~',
/*分享择要(可选)*/
title: '信诚恒通新用户注册',
/*分享题目(可选)*/
site: '信诚恒通',
/*分享泉源 如：腾讯网(可选)*/
// pics: item.Cover,
/*分享图片的途径(可选)*/
style: '203',
width: 98,
height: 22
};
var s = [];
for (var i in p) {
s.push(i + '=' + encodeURIComponent(p[i] || ''));
}
qzone_url += s.join("&");
window.open(qzone_url);
});
35. vue设置header头
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name=csrf-token]').getAttribute('content');
36. 换行，不换行，字间距
37. 猎取验证码及其验证码倒计时
JS:
//发送验证码函数
function sendsms(e) {
/*发送验证码功用*/
countdown(e); //若发送验证码胜利，则挪用倒计时函数
}
//倒计时函数
var time = 60;
function countdown(e) {
if (time == 0) {
//e.setAttribute('disabled',false); 对没有disbaled属性的span标签，此要领无效
e.setAttribute("onclick", "sendsms(this)");
$(".send-code").html("猎取验证码");
time = 60;
} else {
//e.attr('disabled',true); 对没有disbaled属性的span标签，此要领也无效
//e.setAttribute("onclick", ''); 如许写也能够
e.removeAttribute("onclick");
$(".send-code").html(time + "秒后从新取得");
time--;
setTimeout(function () {
countdown(e)
}, 1000)
}
}
HTML:
<span class="send-code" onclick="sendsms(this);">猎取验证码</span>
38. 单页面和多页面运用
39. vue怎样完成点击li，li增添一个class，其他的li去掉这个class
<ul class="list">
<li v-for="(item,index) in items" v-on:click="addClass(index)" v-bind:class="{ red:index==current}">{{item.title}}</li>
</ul>
new Vue({
el:'.list',
data:{
current:0,
items:[
{title:'item1'},
{title:'item2'},
{title:'item3'},
{title:'item4'}
]
},
methods:{
addClass:function(index){
this.current=index;
}
}
})
40. vue $refs的基础用法
<div id="app">
<input type="text" ref="input1"/>
<button @click="add">增添</button>
</div>
<script>
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="22"; //this.$refs.input1 削减猎取dom节点的斲丧
}
}
})
</script>
41. css设置转动条款式
.test-1::-webkit-scrollbar {/*转动条团体款式*/
width: 10px; /*高宽离别对应反正转动条的尺寸*/
height: 1px;
}
.test-1::-webkit-scrollbar-thumb {/*转动条内里小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.test-1::-webkit-scrollbar-track {/*转动条内里轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
