HTML
form表单中的button标签如果没有设置type属性,那么默认属性为submit,点击后会发生页面刷新,如果不需要页面刷新,应设置type为button;
textarea标签书写时不要有空格或者换行,否则在获得焦点的时候光标无法在开始的位置,用户体验很不好;
注意嵌套规则,当把div嵌套在p标签里时,div会自动跑到p标签的外面 ,有几个特殊块级元素只能包含内联元素,不能包含块级元素。这几个特殊标签是 h1~h6、p、dt,行内块可以嵌套块级元素;
查看公众号二维码 在地址栏输入: open.weixin.qq.com/qr/code/?username=微信号
- 360浏览器默认使用极速模式
<meta name="renderer" content="webkit">
- 网页内嵌腾讯视频 需要在服务器环境下运行
<object>
<param name="autostart" value="true">
<param name="movie" value="http://cache.tv.qq.com/qqplayerout.swf?playertype=4&v=p0024bgbsyk">
<param name="allowFullScreen" value="true">
<param name="wmode" value="opaque">
<param name="allowScriptAccess" value="always">
<param name="allownetworking" value="all">
<embed width="780" height="500" class="blog_video" id="blog_video_1479535406954" src="http://cache.tv.qq.com/qqplayerout.swf?playertype=4&auto=0&v=p0024bgbsyk" type="application/x-shockwave-flash" data-playtime="" data-mp4="" data-coverwidth="" data-coverheight="" data-vid="" data-duration="" data-type="" allownetworking="all" allowscriptaccess="always" enablecontextmenu="False"></embed>
</object>
- 输入框的defaultValue属性 可获取初始值,可以把用户的输入值和初始值进行对比,然后做事
JS
阻止冒泡:http://caibaojian.com/javascript-stoppropagation-preventdefault.html
* 加载更多内容方法
function loadMore(){
$.ajax({
type: "post",
contentType: "application/json",
url: "index.json",
beforeSend: function () {
$(".loading").show();
},
success: function (data) {
$("#Items").append("<div class='more'></div>");
var lastDiv = $(".more:last")//chose last div has class more
$(lastDiv).setTemplateElement("Template-Items").processTemplateURL("index.json");
},
complete: function () {
$(".loading").hide();
},
error: function (data) {
console.info("error: " + data.responseText);
}
});
}
/*
* 价格保留2位小数
* @param price 用户输入的价格
*/
float_num2: function(price){
var f_x = parseFloat(price);
if (isNaN(f_x)){
return 0;
}
var f_x = Math.round(price * 100) / 100;
var s_x = f_x.toString();
var pos_decimal = s_x.indexOf('.');
if (pos_decimal < 0){
pos_decimal = s_x.length;
s_x += '.';
}
while (s_x.length <= pos_decimal + 2){
s_x += '0';
}
return s_x;
},
/* 模拟点击a标签打开新窗口 */
var a = $("<a href='http://www.test.com' target='_blank' >test</a>").get(0);
var e = document.createEvent('MouseEvents');
e.initEvent('click', true, true);
a.dispatchEvent(e);
/* return的用法 */
'1.用于结束当前函数,并返回函数的值,
return相当于return null
return false 阻止默认行为,如a标签跳转和form表单提交
return true 结束函数并不阻止默认行为
2.用在$.each()中,return fasle 结束each遍历,如果没有fasle,那么只结束当前遍历函数,进入下一次遍历
3.return 后面可以写多个表达式,返回值取最后一个表达式的值
return console.log("1"),alert("2"),!1; 返回值为最后一个表达式'
/* new Date 设置时间(一个是0点,一个是8点开始) */
var t2 = new Date("2017-06-07")
// Wed Jun 07 2017 08:00:00 GMT+0800 (中国标准时间)
var t3 = new Date("2017,06,07")
// Wed Jun 07 2017 00:00:00 GMT+0800 (中国标准时间)
var t5 = new Date(2017,5,7)
// 如果未加引号,月份需要减1
// 获取当前时间 (年月日时分秒) 在input中显示 "2017-09-27 17:53:26"
// html代码 <input type="" id="clock" name="" value="">
function getNowDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var h = date.getHours();
if (h >= 0 && h < 10) {
h = "0" + h;
}
var m = date.getMinutes();
if (m >= 0 && m <= 9) {
m = "0" + m;
}
var s = date.getSeconds();
if (s >= 0 && s <= 9) {
s = "0" + s;
}
return date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + h + seperator2 + m + seperator2 + s;
}
function clock() {
var t = getNowDate()
document.getElementById("clock").value = t
}
var int = setInterval("clock()", 1000)
// 获取标签名称 input系列属性-复选框选中状态判断
// JQ1.6之后,可以通过attr方法去获得属性,通过prop方法去获得特性;
$("#cb").attr("tagName"); //undefined
$("#cb").prop("tagName"); //INPUT
//获取是否选中
var isChecked = $('#cb').prop('checked');
//或
var isChecked = $('#cb').is(":checked");
//设置选中
$('#cb').prop('checked',true);
//获取选中的下拉选项
jQuery("#select1 option:selected").text();
/**
* 复制操作人姓名和ID
* @param ID 待填充的下拉选择框ID "#XX"
*/
cloneOp:function(id){
$(id).empty();
$('复制源的元素选择器').each(function(){
var oValue = $(this).val().toString();
var oText = $(this).text().toString();
$(id).append("<option value='"+oValue+"'>"+oText+"</option>");
});
$(id).children("option[value="+ $('#current_userid').val()+"]").attr("selected","selected");//设置为当前登录操作人
},
/* 数组转字符串 toString() 方法:会以逗号分隔的字符串形式返回数组项。 */
var arr = [1, 2 ,3, 4];
var str = arr.toString(); //"1,2,3,4"
/* join() 方法:只接受一个参数,即用作分隔符的字符串。会返回以传入分隔符来分隔的字符串形式,如果不传入参数或者传入 undefined ,则与 toString() 方法效果一样。 */
var arr = [1, 2 ,3, 4];
var str1 = arr.join(); //"1,2,3,4"
var str2 = arr.join("|"); //"1|2|3|4"
var str3 = arr.join(""); // "1234"
/* 字符串转数组 split() 方法:基于指定的分隔符将一个字符串分隔成多个子字符串,并将结果放在一个数组中返回。可以接受第二个可选的参数用于指定返回的数组大小。如果不指定分隔符,则将整个字符串放入数组中返回。*/
var colorText = "red,blue,green,yellow"
var colors1 = colorText.split(","); //["red","blue","green","yellow"]
var colors2 = colorText.split(",", 2); //["red","blue"]
var colors3 = colorText.split(); //["red,blue,green,yellow"]
// 显示和关闭导航 注意点:阻止事件冒泡
$("#menu").on("click", function (e) {
$("#navList").slideToggle(400);
$(document).on("click", function () {
$("#navList").slideUp(400);
});
e.stopPropagation();
});
$("#navList").on("click", function (e) {
e.stopPropagation();
});
// 比较两个时间的大小
var yzstart_date="2017-10-24";
var yzend_date="2017-10-24";
if(new Date(yzstart_date.replace(/-/g, "/")).getTime()>new Date(yzend_date.replace(/-/g, "/")).getTime()){
console.log("开始时间不能大于结束时间!");
}else{
console.log("ok")
}
// 发送Ajax请求时获取指定的URL地址
function (){
var url = window.location.protocol +"//" + window.location.host + "/" + "子域名/";
return url;
}
//解决bootstrap时间控件 - 连续点击输入框时不弹出日期控件
$('.datetime_ymd').bind('click.myDatetimepicker',function(){
$(this).focus();
})
jQuery
/* 使用JQ的动画时,需要加上stop(),防止重复和延迟 */
$("el").stop().fadeIn();
/* 让页面回到顶部,使用#相当于重新载入页面,需要平滑滚动时用scrollTo() */
//IE和火狐不支持body的scroll,而支持html的scroll
$("body,html").stop().animate({scrollTop:0},300);
/* JQ绑定多个事件写法,对象的形式 */
$("#box").on({
click:function(){
console.log("click");
},
mouseleave:function(){
console.log("mouseleave")
}
})
// 让页面中的某个输入框获得焦点
setTimeout( function(){
try{
document.getElementById('userName').focus();
} catch(e){}
}, 200);
//"yyyy-mm-dd" 格式的日期校验,已考虑平闰年。
var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/
//获取对象属性的长度,以及将对象属性转为数组
var person = {
"name" : "zhangshan",
"sex" : "man",
"age" : "50"
};
var arr = Object.keys(person);//["name", "sex", "age"]
console.log(arr.length);//3
CSS
/* CSS3禁用点击事件属性 */
.disabled {
pointer-events: none;
}
/* honver时改变其它元素样式(sass语法) */
&:hover {
.introduction_title {
color: #069DFF;
}
}
/* 子元素垂直水平居中flex方案1 */
.box{
width: 60%;
height: 600px;
display: flex;
margin: 0;
border: 1px solid #ccc;
}
.subbox{
width: 300px;
height: 300px;
background-color: #ccc;
margin: auto;
}
/* 子元素垂直水平居中flex方案2 */
.box{
width: 60%;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}
/* 子元素垂直水平居中transform + absolute方案 */
.box {
position: relative;
>.subbox {
position: absolute;
top: 50%;
left: 50%;
/* 尽可能的不要让该元素的宽度或者高度出现奇数,否则可能会导致模糊 */
transform: translate(-50%, -50%);
}
}
/* 子元素垂直水平居中margin + absolute方案 */
.box {
position: relative;
>.subbox {
position: absolute;
top: 50%;
left: 50%;
width:1000px;
margin-left: -500px;/* 适用于尺寸固定的元素 */
}
}
/* 为table设置table-layout属性后,单元格的宽度不再根据其内容进行调整,给th/td标签设置的宽度就起作用了 */
table {
table-layout: fixed;
width: 100%;
}
/* 自定义input输入框光标样式 */
input,textarea {
caret-color: #80D480;
}
/* 单行溢出省略显示 */
.overflow{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 多行行溢出省略显示 */
.overflow{
display: -webkit-box;
-webkit-box-orient: vertical;
/* 设定显示的行数 */
-webkit-line-clamp: 3;
overflow: hidden;
}
/* 设置文本不能被选中 */
.disabled-sel{
user-select: none;
}
/* :required 伪类指定具有required 属性的表单元素
:valid 伪类指定一个通过匹配正确的所要求的表单元素
:invalid 伪类指定一个不匹配指定要求的表单元素
*/
textarea:invalid {
border-color: #D61D1D;
box-shadow: inset 5px 0 0 #D61D1D;/* 实现单侧边框变宽效果 */
}
/* 改变浏览器文本选中色 */
::selection {
color: #fff;
background-color: #6bc30d;
}
/* ::placeholder修饰input的placeholder属性的样式 */
input::-webkit-input-placeholder{
color: #f00;
}
input::-moz-placeholder{
color: #f00;
}
input:-ms-input-placeholder{
color: #f00;
}
/* 消除inline-block的默认空隙 */
.father{
font-size:0; /* inline-block容器,例:li标签没有用浮动就可以用这个 */
.son{
font-size:16px; /* 内容区域 */
}
}
/* 改变浏览器默认滚动条 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-button {
width: 8px;
height:5px;
}
::-webkit-scrollbar-track {
background:#eee;
border: thin solid lightgray;
box-shadow: 0px 0px 3px #dfdfdf inset;
border-radius:10px;
}
::-webkit-scrollbar-thumb {
background:#999;
border: thin solid gray;
border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
background:#7d7d7d;
}
/* 块级元素默认宽度继承100%;但是当使用了定位后,宽度不再继承父元素的,所以必须手动设置宽高 */
/* 制作箭头导航 */
.flow-item {
float: left;
width: 16.66667%;
max-width: 180px;
text-align: center;
margin-bottom: 9px;
padding-right: 2px;
}
.flow-item>div {
position: relative;
padding: 5px 0 5px 12px;
line-height: 20px;
background: #90A4AE;
white-space: nowrap;
overflow: visible;
color: #fff;
}
.flow-item>div:before,
.flow-item>div:after {
content: ' ';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #90A4AE;
position: absolute;
left: 0;
top: 0
}
.flow-item>div:before {
border-left-color: #fff;
z-index: 1
}
.flow-item>div:after {
left: auto;
right: -14px;
z-index: 2
}
.flow-item-0>div:before {
display: none
}
.flow-item-1>div {
background: #1976D2
}
.flow-item-1>div:after {
border-left-color: #1976D2
}
.flow-item-2>div {
background: #4CAF50
}
.flow-item-2>div:after {
border-left-color: #4CAF50
}
.flow-item-1>div:hover {
background: #1565C0
}
.flow-item-1>div:hover:after {
border-left-color: #1565C0
}
.flow-item-2>div:hover {
background: #43A047
}
.flow-item-2>div:hover:after {
border-left-color: #43A047
}
</style>
<div class="flow-item flow-item-0">
<div>主页</div>
</div>
<div class="flow-item flow-item-1">
<div>导航一</div>
</div>
<div class="flow-item flow-item-2">
<div>导航二</div>
</div>
- CSS选择器
- :empty 选择器匹配没有子元素(包括文本节点)的每个元素
li:not(:last-child)::after {
content: attr(data-msg);/* 可以获取元素的自定义属性*/
}
body{
-webkit-overflow-scrolling: touch; /* 兼容移动端滚动条流畅ios5+ */
}
/* 让最外层的容器高度100% body和html无需设置高度100% */
#container {
margin: 0 auto;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
min-width: 1280px;
min-height: 730px;
background: #2d373c;
}
编辑器
- vscode 生成测试文本 Lorem