Css溢出省略号

/*单行*/p {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/*多行*/p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/*多行兼容*/p {
  position: relative;
  line-height: 1.4em;
  height: 4.2em;
  overflow: hidden;
}

p::after {
  content: "...";
  font-weight: bold;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 20px 1px 3px;
  background: #fff;
}

CSS伪元素   ---:before 和 :after

基本用法

/*向元素内容中添加字符串。*/
a:after {
    content: "";
}
/*attr() 调用当前元素的属性*/
a:after {
    content: "(" attr(href) ")";

}
/*引用媒体文件*/
h1::before {
    content: url();
}
/*调用计数器*/
h2:before {
    counter-increment: chapter;
    content: "Chapter" counter(chapter) ". "
}             

元素尾部自动清除浮动

清除外边距

.div:before, .fix1:after {
    display: table;
    content: ‘‘;
}

悬浮出现方括号

a {
    position: relative;
}
a:hover::before, a:hover::after {
    position: absolute;
}
a:hover::before {
    content: "\5B";
    left: -20px;
}
a:hover::after {
    content: "\5D";
    right:-20px;
}

悬浮出现双边框

a {
    position: relative;
}
/* 大框 */
a:hover::before, a:hover::after {
    content: "";
    display: block;
    position: absolute;
    top: -15%;
    left: -14%;
    width: 120%;
    height: 120%;
    border-width: 4px;
}
/* 小框 */
 a:hover::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-width: 2px;
}

CSS清除浮动各种方法：

浮动产生负作用
1.margin padding设置值不能正确显示
2.背景不能显示
3.边框不能撑开

 方法：

1.父级div定义 height 

2.父级div定义 overflow:hidden 或  overflow:auto

3.在浮动元素后面增加一个清除浮动层；

<div>
    <div style="float:left"></div>
    <div style="float:left"></div>
    <div style="clear:both"></div>
</div>

4.父级div定义伪类:after和zoom

.parent:after {
    /*IE8以上和非IE浏览器才支持:after*/
    display: block;
    clear: both;
    content: "";
}
.parent {
    zoom: 1 /*zoom(IE专有属性)可解决ie6,ie7浮动问题*/
}

CSS居中定位    ---3种方法

static(静态) 不能通过z-index进行层次分级。
relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置。

absolute(绝对定位) 脱离文档流，参考最近一个有定位设置的父级对象进行绝对定位。

fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素。

1.绝对定位居中：父元素为body或者声明为position:relative的容器

p {
  position: absolute; /*跳出了内容流*/
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; /*-充其父元素的所有可用空间*/
  margin: auto; /*根据新的边界框重新计算*/
  width: 60%; /*响应式/自适应 */
  height: 60%;
  min-width: 200px;
}
/*内容块一直停留在可视区域内*/
p {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  position: fixed;
  z-index: 999;
}
/*固定于屏幕右侧*/
p {
  position: absolute;
  left: auto;
  right: 20px;
}

优点：

1.支持IE8-IE10.

2.支持百分比%属性值和min-/max-属性

3.不论是否设置padding都可居中（在不使用box-sizing属性的前提下）

6.内容块可以被重绘。

7.完美支持图片居中。

缺点：

1.必须声明高度（可变高度Variable Height）。

2.建议设置overflow:auto来防止内容越界溢出。

3.在Windows Phone设备上不起作用。

2.负外边距

p {
  width: 300px;
  height: 200px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -170px; /*(width+padding)/2*/
  margin-top: -120px; /*(height+padding)/2*/
}

优点：

1.良好的跨浏览器特性，兼容IE6-IE7。

2.代码量少。

缺点：

1.不能自适应。不支持百分比尺寸和min-/max-属性设置。

2.内容可能溢出容器。

3.边距大小与padding,和是否定义box-sizing: border-box有关，计需算。

3.表格单元格

.grandpa {
    display: table;
}
.father {
    display: table-cell;
    vertical-align: middle;
}
.son {
    width: 50%;
    margin: 0 auto;
}

优点：

1.高度可变

2.内容溢出会将父元素撑开。

3.跨浏览器兼容性好。

缺点：

1.需要大量额外的标记，需要三层元素让最内层的元素居中。

一、选择器

1.获取页面所有的div

$("div")
document.getElementsByTagName("div")

2.获取某类名相同的一群元素

$(".my-class")
document..querySelectorAll(".my-class")
document.getElementsByClassName("my-class")

3.更复杂的一些选择器

$(".my-class li:first-child")
$(".my-class").get(0)
document..querySelectorAll(".my-class li:first-child")
document.getElementsByClassName("my-class")
getElementById
getElementsByName
getElementsByTagName

二、插入HTML元素

如：<div></div>

$(‘.el‘).append($(‘<div></div>‘));

document.querySelector(‘.e‘).appendChild(document.createElement(‘div‘))

如：<div id=’myDiv’><img src=’im.gif’ /></div>

$(document.body).append("<div id=‘myDiv‘><img src=’im.gif’ /></div>");

document.body.innerHTML+= "<div id=‘myDiv‘><img src=’im.gif’ /></div>";

var frag = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id = "myDiv";
var im = document.createElement("img");
im.src = "im.gif";
myDiv.appendChild(im);
frag.appendChild(myDiv);

document.body.appendChild(frag);

尾部追加DOM元素。

$(parent).append($(child));

parent.appendChild(child);

头部插入DOM元素。

$(parent).prepend($(child));

parent.insertBefore(child, parent.childNodes[0]);

生成DOM元素。

$("p");

document.createElement("p");

删除DOM元素。

$(child).remove();

child.parentNode.removeChild(child);

清空子元素。

$("#elementID").empty();

var element = document.getElementById("elementID");
while(element.firstChild) element.removeChild(element.firstChild);

检查是否有子元素。

if (!$("#elementID").is(":empty")){}

if (document.getElementById("elementID").hasChildNodes()){}

克隆元素。

$("#elementID").clone();

document.getElementById("elementID").cloned(true);
var clonedEl = document.querySelector(‘.el‘).cloneNode(true);

移除元素 

$(‘.el‘).remove();
remove(‘.el‘);

var toRemove = document.querySelector(‘.el‘);
toRemove.parentNode.removeChild(toRemove);

获取父元素

$(‘.el‘).parent();
jQuery.parent(expr);
jQuery.parents(expr);
jQuery.children(expr); //返回所有子节点，不会返回所有的子孙节点
jQuery.contents();     //返回下面的所有内容，包括节点和文本，包括空白文本
jQuery.prev();         //返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll();      //回所有之前的兄弟节点
jQuery.next();         //返回下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll();      //返回所有之后的兄弟节点
jQuery.siblings();     //返回兄弟姐妹节点，不分前后
jQuery.find(expr);

var a = document.querySelector(‘.el‘).parentNode;
var b = a.childNodes;       //获取a的全部子节点；
var c = a.parentNode;       //获取a的父节点；
var d = a.nextSibling;      //获取a的下一个兄弟节点或nextElementSibling
var e = a.previousSibling; //获取a的上一个兄弟节点
var f = a.firstChild;       //获取a的第一个子节点
var g = a.lastChild;        //获取a的最后一个子节点

var h = a.children[0];      //获取a的第一个子元素 

1.增加class、移除class、切换类

var el = document.querySelector(".main-content");

//增加
$(el).addClass("someClass");
el.classList.add("someClass");

//删除
$(el).removeClass("someClass");
el.classList.remove("someClass");

//切换
$(‘.el‘).toggleClass(‘class‘);
el.classList.toggle(‘class‘);

//是否含有某class
if ($(el).hasClass("someClass"))
if (el.classList.contains("someClass"))

//其他类型
el.className += " MyClass";

el.className.replace(/(?:^|\s)MyClass(?!\S)/, ‘‘);

2.设置css样式

var el = document.querySelector(".main-content");

/* jQuery */
$(el).css({
    background: "#FF0000",
    "box-shadow": "1px 1px 5px 5px red",
    width: "100px",
    height: "100px",
    display: "block"
});

/* native equivalent */
el.style.background = "#FF0000";
el.style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red";

element.style.cssText += ‘color:red‘;

3.设置/获取属性 

// jQuery
$(‘.el‘).filter(‘:first‘).attr(‘key‘, ‘value‘);
$(‘.el‘).filter(‘:first‘).attr(‘key‘);

// 原生方法
el.setAttribute(‘key‘, ‘value‘);
el.getAttribute(‘key‘);
imgElement.src = "http://url/to/image";

4.show与hide

/* jQuery */
$(el).show();
$(el).hide();

/* native equivalent */
el.style.display = ‘‘;
el.style.display = ‘none‘;

5.事件绑定 and 事件的监听

浏览器加载页面的顺序：

1、 解析HTML结构

2、 加载外部脚本和样式表文件

3、 解析并执行脚本代码

4、 构造HTML DOM模型==ready()

5、 加载图片等组件

6、 页面加载完毕==onload()

ready事件是在DOM模型构造完毕时触发

load事件是在页面加载完毕后触发

6.ready加载方法

// jQuery
$(document).ready(function(){})
$(function(){});

// 原生方法
$(window).load(function() {});

JS原生方法实现jQuery的ready()

function ready(fn) {
    if (document.addEventListener) {
        document.addEventListener(‘DOMContentLoaded‘, function () {
            //注销事件, 避免反复触发
            document.removeEventListener(‘DOMContentLoaded‘, arguments.callee, false);
            fn();            //执行函数
        }, false);
    } else if (document.attachEvent) {        //IE
        document.attachEvent(‘onreadystatechange‘, function () {
                    if (document.readyState == ‘complete‘) {
                        document.detachEvent(‘onreadystatechange‘, arguments.callee);
                        fn();        //函数执行
                    }
                }
        )
    }
} 

ready()加强版(自JavaScript权威指南)

/*
 * 传递函数给whenReady()
 * 当文档解析完毕且为操作准备就绪时，函数作为document的方法调用
 */
var whenReady = (function () {              //这个函数返回whenReady()函数
    var funcs = [];             //当获得事件时，要运行的函数
    var ready = false;          //当触发事件处理程序时,切换为true

    //当文档就绪时,调用事件处理程序
    function handler(e) {
        if (ready) return;       //确保事件处理程序只完整运行一次
        //如果发生onreadystatechange事件，但其状态不是complete的话,那么文档尚未准备好
        if (e.type === ‘onreadystatechange‘ && document.readyState !== ‘complete‘) {
            return;
        }
        //运行所有注册函数
        //注意每次都要计算funcs.length
        //以防这些函数的调用可能会导致注册更多的函数
        for (var i = 0; i < funcs.length; i++) {
            funcs[i].call(document);
        }
        //事件处理函数完整执行,切换ready状态, 并移除所有函数
        ready = true;
        funcs = null;
    }

    //为接收到的任何事件注册处理程序
    if (document.addEventListener) {
        document.addEventListener(‘DOMContentLoaded‘, handler, false);
        document.addEventListener(‘readystatechange‘, handler, false);//IE9+
        window.addEventListener(‘load‘, handler, false);
    } else if (document.attachEvent) {
        document.attachEvent(‘onreadystatechange‘, handler);
        window.attachEvent(‘onload‘, handler);
    }
    //返回whenReady()函数
    return function whenReady(fn) {
        if (ready) {
            fn.call(document);
        }
        else {
            funcs.push(fn);
        }
    }
})();
//--------------------- test -----function t1() {
console.log(‘t1‘)
console.log(‘t2‘);
// t2-t1-t2whenReady(t1);
t2();
whenReady(t2);

设置disabled属性为true即为不可用状态。

<input type="button" value="提交" id="btn"> 

document.getElementById("btn").disabled=true; 

$("#btn").attr("disabled", true); 

设置checkbox状态:

$("#a").prop("checked", true)[0];  //jQuery 1.6+
$("#a").prop("checked", false)[0]; //jQuery 1.6+
$(‘#a‘).attr(‘checked‘, ‘checked‘)[0];//jQuery 1.5-
$(‘#a‘).removeAttr(‘checked‘)[0];      //jQuery 1.5-
$("[name=‘checkbox‘]").attr("checked",‘true‘);//全选
$("[name=‘checkbox‘]").removeAttr("checked");//取消全选
/*checkbox是否为选中状态*/
$("#d").is(":checked");   //jQuery 1.5-
$("#d").prop("checked");  //jQuery 1.6+
/*选中所有奇数*/
$("[name=‘checkbox‘]:even").attr("checked",‘true‘);

获取select的状态:

$(‘select option:selected‘).text();//选中的文本
$(‘select option:selected‘) .val();//选中的值
$("select").get(0).selectedIndex;//索引

document.getElementById("sect").value;   //获得选中的值
document.getElementById("sect").options; //获得select中所有的值，是个数组
document.getElementById("sect").selectedIndex;//第几个被选中了
document.getElementById("sect").options[index].text; //被选中的项的文本

获取被选中的单选框radio：使用 :checked 方法

$("input[type=‘radio‘]:checked")[0];

document.querySelectorAll("input.class:checked")[0]

jQuery中判断一个元素是否存在

if($(selector).length) 

JavaScript检查一个字符串是否为空

if (str) {} 

JavaScript中16进制与10进制相互转换

var sHex = (255).toString(16);//ff
var iNum = parseInt("ff", 16);//255 

JavaScript字符与ASCII码间的转换

console.log("\n".charCodeAt(0));//10
console.log(String.fromCharCode(65));//A 

检查一个object是否是jQuery object

if(obj instanceof jQuery)

检查一个数是否为整数或浮点数

function isInt(n) {
    return typeof n === ‘number‘ && n % 1 == 0;
}
// or ,this support ie3
function isInt(n) {
    return typeof n === ‘number‘ && parseFloat(n) == parseInt(n, 10) && !isNaN(n);
}
function isFloat(n) {
    return n === +n && n !== (n | 0);
} 

把一个Array追加到另一个Array上

var a = [1, 2], b = [3, 4, 5];
a.push.apply(a, b);
//a: [1, 2, 3, 4, 5] 

取数组中的最小值和最大值

var arr = new Array();
arr[0] = 100;
arr[1] = 0;
arr[2] = 50;
var min = Math.min.apply(null, arr);
var max = Math.max.apply(null, arr); 

取两个数组交集

function arrayIntersection(a, b) {
    var ai = 0, bi = 0;
    var result = new Array();

    while (ai < a.length && bi < b.length) {
        if (a[ai] < b[bi]) {
            ai++;
        }
        else if (a[ai] > b[bi]) {
            bi++;
        }
        else /* they‘re equal */
        {
            result.push(a[ai]);
            ai++;
            bi++;
        }
    }
    return result;
}
console.log(arrayIntersection([1, 2, 3], [2, 3, 4, 5, 6]));
//[2,3] 

合并两个Array并去重复

Array.prototype.unique = function () {
    var a = this.concat();
    for (var i = 0; i < a.length; ++i) {
        for (var j = i + 1; j < a.length; ++j) {
            if (a[i] === a[j])
                a.splice(j, 1);
        }
    }
    return a;
};
var array1 = ["a", "b"];
var array2 = ["b", "c"];
var array3 = array1.concat(array2).unique();
// ["a","b","c"] 

统计一个字符串中某段子串出现的次数

var temp = "This is a string.";
var count = temp.match(/is/g).length; 

把arguments转换为Array

var args = Array.prototype.slice.call(arguments, 0); 

一万亿以内的人民币小写转大写，暂不考虑连续零的处理

function moneyCaseConvert(num){
    var upperArr=["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"],
            levelArr=["","拾","佰","仟","万","拾","佰","仟","亿","拾","佰","仟","万"],
            numArr=num.toString().split("").reverse(),
            result=[];
    for(var i=numArr.length-1;i>=0;i--)
        result.push(upperArr[numArr[i]]+levelArr[i]);
    return result.join("");
}
console.log(CaseConversion(1234567891234));
//壹万贰仟叁佰肆拾伍亿陆仟柒佰捌拾玖万壹仟贰佰叁拾肆 

数字反转，输入123返回321

//方法一：
function numReverse(num){
    return parseInt(num.toString().split("").reverse().join(""));
}
console.log(numReverse(123456));//654321

//方法二：
function numReverse(num) {
    var numArr = num.toString().split(""),
            len = numArr.length,
            result = 0;
    for (var i = len - 1; i >= 0; i--) {
        result += numArr[i] * Math.pow(10, i);
    }
    return result;
}
console.log(numReverse(123456));//654321

字符串反转，输入123返回321

//方法一：
var str = "abcdefg";
console.log(str.split("").reverse().join(""));

//方法二：
var str = "abcdeg";
var str2 = "";
for (var i = 0; i < str.length; i++) {
    str2 += str.charAt(str.length - i - 1);
}
console.log(str2);

整数转为千分位记数法

//方法一（解析字符串）：
function numFormat(val) {
    var numStr = val.toString(),
            length = numStr.length,
            extra = length % 3,
            count = (length - extra) / 3,
            result = numStr.substr(0, extra);
    for (var i = 0; i < count; i++) {
        result += "," + numStr.substr(extra + i * 3, 3);
    }
    return result.replace(/^,/, "");
}
console.log(numFormat(123456789));//123,456,789

//方案二（正则）：
function numberFormat(val) {
    var numArr = String(val).split(".");
    numArr[0] = numArr[0].replace(new RegExp("(\\d)(?=(\\d{3})+$)", "ig"), "$1,");
    return numArr.join(".");
}
console.log(numberFormat(12345678));//12,345,678

点击li输出index

<ul id=”test”>
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>

//方法一：
var lis = document.getElementsByTagName("li");
for (var i = 0, l = lis.length; i < l; i++) {
    lis[i].setAttribute("index", i);
    lis[i].onclick = function () {
        alert(this.getAttribute("index"));
    }
}

//方法二：
var lis = document.getElementsByTagName("li");
for (var i = 0, l = lis.length; i < l; i++) {
    lis[i].onclick = (function (x) {
        return function () {
            alert(x);
        }
    })(i);
}

JS中浮点数的相等判断不能用 ==

console.log(0.1+0.2 == 0.3);//false
console.log(Math.abs(0.1+0.2 - 0.3) < 0.000001);//true

用JS对URL进行编码

var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);
console.log(myOtherUrl);
//http://example.com/index.html?url=http%3A%2F%2Fexample.com%2Findex.html%3Fparam%3D1%26anotherParam%3D2

正则分组

var testStr = "<div><img src=‘/a.jpg‘ alt=‘‘ /><span>test</span><img src=‘/b.jpg‘ alt=‘‘ /><span>TTest</span><img src=‘/c.png‘ alt=‘‘ /></div>";
var reg = /<img\ssrc=‘(.*?)‘\s+alt=‘‘\s*\/>/g;
var match = reg.exec(testStr)
var results = [];
while (match != null) {
    results.push(match[1]);
    match = reg.exec(testStr);
}
console.log(results);
//["/a.jpg", "/b.jpg", "/c.png"]

JavaScript删除数组中的项 delete vs splice

var myArray = ["a", "b", "c"];
delete myArray[0];
console.log(myArray);
//[1:"b",2:"c"]       //设置为undefined

var myArray2 = ["a", "b", "c"];
myArray2.splice(0, 1);
//["b", "c"]          //真正的删除

根据日计算年龄

function getAge(dateString) {
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m<0||(m===0&& today.getDate()<birthDate.getDate())){
        age--;
    }
    return age;
}
console.log(getAge("1992,8,1"));//6 

九、如何跳出双重循环

function foo() {
    dance:
            for (var k = 0; k < 4; k++) {
                for (var m = 0; m < 4; m++) {
                    if (m == 2) {
                        break dance;
                    }
                }
            }
} 

二十二、JavaScript判断浏览器类型及主版本

function getBrowserInfo() {
    var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    if (window.ActiveXObject) {
        Sys.b = "ie";
        Sys.v = parseInt(ua.match(/msie ([\d.]+)/)[1]);
    }
    else if (document.getBoxObjectFor) {
        Sys.b = "firefox";
        Sys.v = parseInt(ua.match(/firefox\/([\d.]+)/)[1]);
    }
    else if (window.MessageEvent && !document.getBoxObjectFor) {
        Sys.b = "chrome";
        Sys.v == parseInt(ua.match(/chrome\/([\d.]+)/)[1]);
    }
    else if (window.opera) {
        Sys.b = "opera";
        Sys.v == parseInt(ua.match(/opera.([\d.]+)/)[1]);
    }
    else if (window.openDatabase) {
        Sys.b = "safari";
        Sys.v == parseInt(ua.match(/version\/([\d.]+)/)[1]);
    }
    return Sys;
}
var bi = getBrowserInfo();
document.write("Browser:" + bi.b + "    Version:" + bi.v);//Browser:ie Version:10

jQuery对象与DOM对象之间的转换

//jQuery对象转成DOM对象：
$("#v")[0];
$("#v").get(0);

//DOM对象转成jQuery对象:
$(document.getElementById("v"));

JS打开新窗口的2种方式

//在同当前窗口中打开窗口
<a href="http://www.jb51.net">Welcome</a>
window.location.href="http://www.jb51.net";

//在另外新建窗口中打开窗口
<a href="http://www.jb51.net" target="_blank">Welcome</a>
window.open("http://www.jb51.net"); 

js关闭当前页面(窗口)的几种方式

//不带任何提示关闭窗口的js代码(很多问题，不兼容)
<a href="javascript:window.opener=null;window.open(‘‘,‘_self‘); window.close();">关闭</a>

//自定义提示关闭
<input id="btnClose" type="button" value="关闭本页" onClick="custom_close()"/>
<script language="javascript">
    // 这个脚本是 ie6和ie7 通用的脚本
    function custom_close() {
        if (confirm("您确定要关闭本页吗？")) {
            window.opener = null;
            window.open(‘‘, ‘_self‘);
            window.close();
        }
        else {
        }
    }
</script>

//不提示关闭
function custom_close() {
  window.opener = null;
  window.open(‘‘, ‘_self‘);
  window.close();
}

类数组对象 -> 数组：

数组 = Array.prototype.slice.call(类数组对象);

//排序：
数组.sort();

判断一个对象是否为数组：

Array.isArray(obj)                    //返回true
Array.prototype.isPrototypeOf(obj)  //返回true
obj instanceof Array                 //返回true
Object.getPrototypeOf(arr) == Array.prototype
Object.prototype.toString.call(obj)== "[object Array]"