标签:
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; }
基本用法
/*向元素内容中添加字符串。*/ 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; }
浮动产生负作用
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浮动问题*/
}
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对象: $("#v")[0]; $("#v").get(0); //DOM对象转成jQuery对象: $(document.getElementById("v"));
//在同当前窗口中打开窗口 <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代码(很多问题,不兼容) <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]"
标签:
原文地址:http://www.cnblogs.com/slting/p/5640064.html