JS綜合篇--[總結]Web前端經常使用代碼片斷整理
IE條件註釋
條件註釋簡介javascript
- IE中的條件註釋（Conditional comments）對IE的版本和IE非IE有優秀的區分能力，是WEB設計中經常使用的hack方法。
條件註釋只能用於IE5以上，IE10以上不支持。 - 若是你安裝了多個IE，條件註釋將會以最高版本的IE爲標準。
- 條件註釋的基本結構和HTML的註釋(<!– –>)是同樣的。所以IE之外的瀏覽器將會把它們看做是普通的註釋而徹底忽略它們。
- IE將會根據if條件來判斷是否如解析普通的頁面內容同樣解析條件註釋裏的內容。
條件註釋使用方法示例css
<!–-[if IE 5]>僅IE5.5可見<![endif]–-> <!–-[if gt IE 5.5]>僅IE 5.5以上可見<![endif]–-> <!–-[if lt IE 5.5]>僅IE 5.5如下可見<![endif]–-> <!–-[if gte IE 5.5]>IE 5.5及以上可見<![endif]–-> <!–-[if lte IE 5.5]>IE 5.5及如下可見<![endif]–-> <!–-[if !IE 5.5]>非IE 5.5的IE可見<![endif]–->
html代碼用js動態加載進頁面
<script type="text/html" id="T-pcList"> //這裏面是你要放的html代碼，例如放一個div的內容 </script>
把上面的js動態加入到頁面中html
$(function(){
var s=$("#T-pcList").html();//得到js的html內容
$(".picScroll-left .bd").html(s);//把s的內容放到class爲bd內
thisstyle();//執行某個函數
});
js判斷用戶訪問的是PC仍是mobile
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
var sUserAgent = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
isChrome: u.indexOf("chrome") > -1,
isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),
isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone: u.indexOf('iPhone') > -1,
iPad: u.indexOf('iPad') > -1,
iWinPhone: u.indexOf('Windows Phone') > -1
};
}()
}
if(browser.versions.mobile || browser.versions.iWinPhone){
window.location = "http:/www.baidu.com/m/";
}
js如何判斷用戶是不是用微信瀏覽器
根據關鍵字 MicroMessenger 來判斷是不是微信內置的瀏覽器。判斷函數以下：前端
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
JS,Jquery獲取各類屏幕的寬度和高度
Javascript:
文檔可視區域寬： document.documentElement.clientWidth
文檔可視區域高： document.documentElement.clientHeightjava
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工做區高度： window.screen.availHeight
屏幕可用工做區寬度： window.screen.availWidthjquery
JQuery:android
$(document).ready(function(){
alert($(window).height()); //瀏覽器當前窗口可視區域高度
alert($(document).height()); //瀏覽器當前窗口文檔的高度
alert($(document.body).height());//瀏覽器當前窗口文檔body的高度
alert($(document.body).outerHeight(true));//瀏覽器當前窗口文檔body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器當前窗口可視區域寬度
alert($(document).width());//瀏覽器當前窗口文檔對象寬度
alert($(document.body).width());//瀏覽器當前窗口文檔body的寬度
alert($(document.body).outerWidth(true));//瀏覽器當前窗口文檔body的總寬度 包括border padding margin
})
jquery對文本框只讀狀態與可讀狀態的相互轉化
$('input').removeAttr('Readonly');
$('input').attr('Readonly','true');
js/jquery實現密碼框輸入聚焦，失焦問題
js實現方法：
html代碼：ios
<input id="i_input" type="text" value='會員卡號/手機號' />
js代碼：web
window.onload = function(){
var oIpt = document.getElementById("i_input");
if(oIpt.value == "會員卡號/手機號"){
oIpt.style.color = "#888";
}else{
oIpt.style.color = "#000";
}
oIpt.onfocus = function(){
if(this.value == "會員卡號/手機號"){
this.value="";
this.style.color = "#000";
this.type = "password";
}else{
this.style.color = "#000";
}
};
oIpt.onblur = function(){
if(this.value == ""){
this.value="會員卡號/手機號";
this.style.color = "#888";
this.type = "text";
}
};
}
jquery實現方法:
html代碼：面試
<input type="text" class="oldpsw" id="showPwd" value="請輸入您的註冊密碼"/> <input type="password" name="psw" class="oldpsw" id="password" value="" style="display:none;"/>
jquery代碼：
$("#showPwd").focus(function() {
var text_value=$(this).val();
if (text_value =='請輸入您的註冊密碼') {
$("#showPwd").hide();
$("#password").show().focus();
}
});
$("#password").blur(function() {
var text_value = $(this).val();
if (text_value == "") {
$("#showPwd").show();
$("#password").hide();
}
});
獲取當前日期
var calculateDate = function(){
var date = new Date();
var weeks = ["日","一","二","三","四","五","六"];
return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+
date.getDate()+"日 星期"+weeks[date.getDay()];
}
$(function(){
$("#dateSpan").html(calculateDate());
})
時間倒計時（固定倒計時的結束時間）
function countdown() {
var endtime = new Date("Jan 18, 2015 23:50:00");
var nowtime = new Date();
if (nowtime >= endtime) {
document.getElementById("_lefttime").innerHTML = "倒計時間結束";
return;
}
var leftsecond = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
if (leftsecond < 0) {
leftsecond = 0;
}
__d = parseInt(leftsecond / 3600 / 24);
__h = parseInt((leftsecond / 3600) % 24);
__m = parseInt((leftsecond / 60) % 60);
__s = parseInt(leftsecond % 60);
document.getElementById("_lefttime").innerHTML = __d + "天" + __h + "小時" + __m + "分" + __s + "秒";
}
countdown();
setInterval(countdown, 1000);
10秒倒計時跳轉
html代碼：
<div id="showtimes"></div>
js代碼：
//設定倒數秒數
var t = 10;
//顯示倒數秒數
function showTime(){
t -= 1;
document.getElementById('showtimes').innerHTML= t;
if(t==0){
location.href='error404.asp';
}
//每秒執行一次,showTime()
setTimeout("showTime()",1000);
}
//執行showTime()
showTime();
判斷瀏覽器的簡單有效方法
function getInternet(){
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE"; //IE瀏覽器
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox"; //Firefox瀏覽器
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari"; //Safan瀏覽器
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino"; //Camino瀏覽器
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko"; //Gecko瀏覽器
}
}
每隔0.1s改變圖片的路徑
<div id="tt"><img src="images/1.jpg" alt=""/></div>
js代碼：
(function(){
function chagesimagesrc(t){
document.getElementById("tt").childNodes[0].src="images/"+t+".jpg";
}
setInterval(function(){
for(var i=0;i<2;i++){
setTimeout((function(t){
return function(){
chagesimagesrc(t);
}
})(i+1),i*100)
}
},1000);
})()
點擊某個div區域以外，隱藏該div
通常寫法：
$(document).on("click",function(e){
var target = $(e.target);
if(target.closest(".city_box,#city_select a.selected").length == 0){
$(".city_box").hide();
}
})
更全的方式：
$(document).click(function(e){
var _con = $(' 目標區域 '); // 設置目標區域
if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
some code... // 功能代碼
}
});
/* Mark 1 的原理：
判斷點擊事件發生在區域外的條件是：
1. 點擊事件的對象不是目標區域自己
2. 事件對象同時也不是目標區域的子元素
*/
js獲取某年某月的哪些天是週六和週日
<p id="text"></p>
<script type="text/javascript">
function time(y,m){
var tempTime = new Date(y,m,0);
var time = new Date();
var saturday = new Array();
var sunday = new Array();
for(var i=1;i<=tempTime.getDate();i++){
time.setFullYear(y,m-1,i);
var day = time.getDay();
if(day == 6){
saturday.push(i);
}else if(day == 0){
sunday.push(i);
}
}
var text = y+"年"+m+"月份"+"<br />"
+"週六："+saturday.toString()+"<br />"
+"週日："+sunday.toString();
document.getElementById("text").innerHTML = text;
}
time(2014,7);
</script>
如何在手機上禁止瀏覽器的網頁滾動
方法一：
<body ontouchmove="event.preventDefault()" >
方法二：
<script type="text/javascript">
document.addEventListener('touchmove', function(event) {
event.preventDefault();
})
</script>
改變type=file默認樣式，"瀏覽"等字體
<input type="file" id="browsefile" style="visibility:hidden" onchange="filepath.value=this.value"> <input type="button" id="filebutton" value="" onclick="browsefile.click()"> <input type="textfield" id="filepath">
js判斷變量是否未定義的代碼
通常若是變量經過var聲明，可是並未初始化的時候，變量的值爲undefined，而未定義的變量則須要經過 "typeof 變量"的形式來判斷，不然會發生錯誤。
實際應用：
variable有的頁面咱們不定義,但有的頁面定義了，就能夠須要這樣的判斷方法，沒有定義的就不執行。
if("undefined" != typeof variable){
if(variable=="abc"){
console.log('成功');
}
}
針對IE6，7的hack，該怎麼寫
你可能會這麼回答：使用 「>」，「_」，「*」等各類各樣的符號來寫hack。是的，這樣作沒錯，可是須要記住每一個符號分別被哪些瀏覽器識別，而且若是寫的太亂將形成代碼 閱讀起來十分困難。學習CSS必須抱有一種質疑精神，有沒有一種hack方法能夠不寫這些亂七八糟的符號，而且代碼易維護易讀呢？咱們能夠看看好搜首頁是怎麼作的：在頁面頂端有這樣一句話：
<!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <!--[if lt IE 7 ]><html class="ie6"><![endif]--> <!--[if IE 7 ]><html class="ie7"><![endif]--> <!--[if IE 8 ]><html class="ie8"><![endif]--> <!--[if IE 9 ]><html class="ie9"><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html class="w3c"><!--<![endif]--> </head>
在頁面的CSS中，會看到這樣的規則：
.ie7 #hd_usernav:before, .ie8 #hd_usernav:before {
display: none
}
.ie6 .skin_no #hd_nav li, .ie7 .skin_no #hd_nav li, .ie8 .skin_no #hd_nav li {
border-right-color: #c5c5c5
}
.ie6 .skin_no #hd_nav a, .ie7 .skin_no #hd_nav a, .ie8 .skin_no #hd_nav a {
color: #c5c5c5
}
行內級元素能夠設置寬高嗎？有哪些？
在面試時，當被問到行內級元素能否設置寬高時，根據咱們的經驗每每會回答不能。可是這樣每每着了面試官的道，由於有一些特殊的行內元素，好比img，input，select等等，是能夠被設置寬高的。一個內容不受CSS視覺格式化模型控制，CSS渲染模型並不考慮對此內容的渲染，且元素自己通常擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之爲置換元素。好比img是一個置換元素，當不對它設置寬高時，它會按照自己的寬高進行顯示。因此這個問題的正確答案應該是置換元素能夠，非置換元素不能夠。
js動態建立css樣式添加到head內
function addCSS(cssText){
var style = document.createElement('style');
var head = document.head || document.getElementsByTagName('head')[0];
style.type = 'text/css';
if(style.styleSheet){ //IE
var func = function(){
try{
//防止IE中stylesheet數量超過限制而發生錯誤
style.styleSheet.cssText = cssText;
}catch(e){
}
}
//若是當前styleSheet還不能用，則放到異步中則行
if(style.styleSheet.disabled){
setTimeout(func,10);
}else{
func();
}
}else{ //w3c
//w3c瀏覽器中只要建立文本節點插入到style元素中就好了
var textNode = document.createTextNode(cssText);
style.appendChild(textNode);
}
//把建立的style元素插入到head中
head.appendChild(style);
}
//使用
addCSS('#demo{ height: 30px; background:#f00;}');
在IE8以及其低版本瀏覽器下，IE獨有屬性styleSheet.cssText。因此通常的兼容簡單寫法：
var style = document.createElement('style');
style.type = "text/css";
if (style.styleSheet) { //IE
style.styleSheet.cssText = '/*..css content here..*/';
} else { //w3c
style.innerHTML = '/*..css content here..*/';
}
document.getElementsByTagName('head')[0].appendChild(style);
form表單提交時設置編碼格式
<form name="form" method="post" action="XXXX" accept-charset="utf-8" onsubmit="document.charset='utf-8';"> //內容 </form>
js 加入收藏代碼
function addFavorite(title, url) {
url = encodeURI(url);
try {
window.external.addFavorite(url, title);
}
catch (e) {
try {
window.sidebar.addPanel(title, url, "");
}
catch (e) {
alert("加入收藏失敗,Ctrl+D進行添加");
}
}
}
addFavorite(document.title,window.location);
打印方法：（整個頁面 window.print()）
function Printpart(id_str)//id-str 內容中的id{
var el = document.getElementById(id_str);
var iframe = document.createElement('IFRAME');
var doc = null;
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
doc.write('<div>' + el.innerHTML + '</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0)
{
document.body.removeChild(iframe);
}
}
參考地址：
http://www.cnblogs.com/yeming...
http://www.cnblogs.com/jikey/...
js強制手機頁面橫屏顯示
$( window ).on( "orientationchange", function( event ) {
if (event.orientation=='portrait') {
$('body').css('transform', 'rotate(90deg)');
} else {
$('body').css('transform', 'rotate(0deg)');
}
});
$( window ).orientationchange();
jquery得到select中option的索引
html代碼：
<select class="select-green">
<option value="0">高級客戶經理</option>
<option value="1">中級客戶經理</option>
</select>
jquery代碼：
$(".select-green").change(function(){
var _indx = $(this).get(0).selectedIndex;
$(".selectall .selectCon").hide();
$(".selectall .selectCon").eq(_indx).fadeIn();
});
注：其中(this).get(0)與(this)[0]等價
獲取上傳文件的大小
html代碼：
<input type="file" id="filePath" onchange="getFileSize(this)"/>
js代碼：
//兼容IE9低版本獲取文件的大小
function getFileSize(obj){
var filesize;
if(obj.files){
filesize = obj.files[0].size;
}else{
try{
var path,fso;
path = document.getElementById('filePath').value;
fso = new ActiveXObject("Scripting.FileSystemObject");
filesize = fso.GetFile(path).size;
}
catch(e){
//在IE9及低版本瀏覽器，若是不允許ActiveX控件與頁面交互，點擊了否，就沒法獲取size
console.log(e.message); //Automation 服務器不能建立對象
filesize = 'error'; //沒法獲取
}
}
return filesize;
}
限制上傳文件的類型
若是是高版本瀏覽器，通常在HTML代碼中寫就能實現，如：
<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf">
若是限制上傳文件爲圖片類型，以下：
<input type="file" class="file" value="上傳" accept="image/*"/>
可是在其它低版本瀏覽器就無論用了，須要js來判斷。
html代碼：
<input type="file" id="filePath" onchange="limitTypes()"/>
js代碼：
/* 經過擴展名，檢驗文件格式。
*@parma filePath{string} 文件路徑
*@parma acceptFormat{Array} 容許的文件類型
*@result 返回值{Boolen}：true or false
*/
function checkFormat(filePath,acceptFormat){
var resultBool= false,
ex = filePath.substring(filePath.lastIndexOf('.') + 1);
ex = ex.toLowerCase();
for(var i = 0; i < acceptFormat.length; i++){
if(acceptFormat[i] == ex){
resultBool = true;
break;
}
}
return resultBool;
};
function limitTypes(){
var obj = document.getElementById('filePath');
var path = obj.value;
var result = checkFormat(path,['bmp','jpg','jpeg','png']);
if(!result){
alert('上傳類型錯誤，請從新上傳');
obj.value = '';
}
}
隨機產生lowwer - upper之間的隨機數
function selectFrom(lower, upper) {
var sum = upper - lower + 1; //總數-第一個數+1
return Math.floor(Math.random() * sum + lower);
};
保留後端傳遞到前端頁面的空格
var objt = {
name:' aaaa 這是一個空格多的標籤 這是一個空格多的標籤'
}
objt.name = objt.name.replace(/\s/g,' ');
console.log(objt.name);
用firebug查看結果：
爲何Image對象的src屬性要寫在onload事件後面？
var image=new Image(); imgae.onload = funtion; imgae.src = 'url'
js內部是按順序逐行執行的，能夠認爲是同步的
給imgae賦值src時，去加載圖片這個過程是異步的，這個異步過程完成後，若是有onload，則執行onload
若是先賦值src，那麼這個異步過程可能在你賦值onload以前就完成了（好比圖片緩存，或者是js因爲某些緣由被阻塞了），那麼onload就不會執行
反之，js同步執行肯定onload賦值完成後纔會賦值src,能夠保證這個異步過程在onload賦值完成後纔開始進行，也就保證了onload必定會被執行到
跨瀏覽器添加事件
//跨瀏覽器添加事件
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){//IE
obj.attchEvent('on'+type,fn);
}
}
跨瀏覽器移除事件
//跨瀏覽器移除事件
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){//兼容IE
obj.detachEvent('on'+type,fn);
}
}
跨瀏覽器阻止默認行爲
//跨瀏覽器阻止默認行爲
function preDef(ev){
var e = ev || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue =false;
}
}
跨瀏覽器獲取目標對象
//跨瀏覽器獲取目標對象
function getTarget(ev){
if(ev.target){//w3c
return ev.target;
}else if(window.event.srcElement){//IE
return window.event.srcElement;
}
}
跨瀏覽器獲取滾動條位置
//跨瀏覽器獲取滾動條位置，sp == scroll position
function getSP(){
return{
top: document.documentElement.scrollTop || document.body.scrollTop,
left : document.documentElement.scrollLeft || document.body.scrollLeft;
}
}
跨瀏覽器獲取可視窗口大小
//跨瀏覽器獲取可視窗口大小
function getWindow () {
if(typeof window.innerWidth !='undefined') {
return{
width : window.innerWidth,
height : window.innerHeight
}
} else{
return {
width : document.documentElement.clientWidth,
height : document.documentElement.clientHeight
}
}
}
js 對象冒充
<script type = 'text/javascript'>
function Person(name , age){
this.name = name ;
this.age = age ;
this.say = function (){
return "name : "+ this.name + " age: "+this.age ;
} ;
}
var o = new Object() ;//能夠簡化爲Object()
Person.call(o , "zhangsan" , 20) ;
console.log(o.say() );//name : zhangsan age: 20
</script>
js 異步加載和同步加載
異步加載也叫非阻塞模式加載，瀏覽器在下載js的同時，同時還會執行後續的頁面處理。
在script標籤內，用js建立一個script元素並插入到document中，這種就是異步加載js文件了：
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
同步加載
日常默認用的都是同步加載。如：
<script src="http://yourdomain.com/script.js"></script>
同步模式又稱阻塞模式，會阻止流覽器的後續處理。中止了後續的文件的解析，執行，如圖像的渲染。瀏覽器之因此會採用同步模式，是由於加載的js文件中有對dom的操做，重定向，輸出document等默認行爲，因此同步纔是最安全的。
一般會把要加載的js放到body結束標籤以前，使得js可在頁面最後加載，儘可能減小阻塞頁面的渲染。這樣能夠先讓頁面顯示出來。
同步加載流程是瀑布模型，異步加載流程是併發模型。
js獲取屏幕座標
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="auther" content="fq" />
<title>獲取鼠標座標</title>
</head>
<body>
<script type="text/javascript">
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
document.getElementById('xxx').value = mousePos.x;
document.getElementById('yyy').value = mousePos.y;
}
document.onmousemove = mouseMove;
</script>
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
</body>
</html>
註釋：
1.documentElement 屬性可返回文檔的根節點。
2.scrollTop() 爲滾動條向下移動的距離
3.document.documentElement.scrollTop 指的是滾動條的垂直座標
4.document.documentElement.clientHeight 指的是瀏覽器可見區域高度
DTD已聲明的狀況下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
若是在頁面中添加這行標記的話
IE
document.body.clientWidth ==> BODY對象寬度 document.body.clientHeight ==> BODY對象高度 document.documentElement.clientWidth ==> 可見區域寬度 document.documentElement.clientHeight ==> 可見區域高度
Firefox
document.documentElement.scrollHeight ==> 瀏覽器全部內容高度 document.body.scrollHeight ==> 瀏覽器全部內容高度 document.documentElement.scrollTop ==> 瀏覽器滾動部分高度 document.body.scrollTop ==>始終爲0 document.documentElement.clientHeight ==>瀏覽器可視部分高度 document.body.clientHeight ==> 瀏覽器全部內容高度
Chrome
document.documentElement.scrollHeight ==> 瀏覽器全部內容高度 document.body.scrollHeight ==> 瀏覽器全部內容高度 document.documentElement.scrollTop==> 始終爲0 document.body.scrollTop==>瀏覽器滾動部分高度 document.documentElement.clientHeight ==> 瀏覽器可視部分高度 document.body.clientHeight ==> 瀏覽器全部內容高度
瀏覽器全部內容高度即瀏覽器整個框架的高度，包括滾動條捲去部分+可視部分+底部隱藏部分的高度總和
瀏覽器滾動部分高度即滾動條捲去部分高度便可視頂端距離整個對象頂端的高度。
綜上
一、document.documentElement.scrollTop和document.body.scrollTop始終有一個爲0，因此能夠用這兩個的和來求scrollTop
二、scrollHeight、clientHeight 在DTD已聲明的狀況下用documentElement，未聲明的狀況下用body
clientHeight在IE和FF下，該屬性沒什麼差異，都是指瀏覽器的可視區域，即除去瀏覽器的那些工具欄狀態欄剩下的頁面展現空間的高度。
PageX和clientX
PageX:鼠標在頁面上的位置,從頁面左上角開始,便是以頁面爲參考點,不隨滑動條移動而變化
clientX:鼠標在頁面上可視區域的位置,從瀏覽器可視區域左上角開始,便是以瀏覽器滑動條此刻的滑動到的位置爲參考點,隨滑動條移動 而變化.
但是悲劇的是,PageX只有FF特有,IE則沒有這個，因此在IE下使用這個：
PageY=clientY+scrollTop-clientTop;(只討論Y軸,X軸同理,下同)
scrollTop表明的是被瀏覽器滑動條滾過的長度
offsetX:IE特有,鼠標相比較於觸發事件的元素的位置,以元素盒子模型的內容區域的左上角爲參考點,若是有boder,可能出現負值
只有clientX和screenX 皆大歡喜是W3C標準.其餘的,都糾結了.
最給力的是，chrome和safari一條龍通殺!徹底支持全部屬性 
js拖拽效果
<!doctype html>
<html lang="zn-CN">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#login{
height: 100px;
width: 100px;
border: 1px solid black;
position: relative;
top:200px;
left: 200px;
background: red;
}
</style>
</head>
<body>
<div id="login"></div>
<script type="text/javascript">
var oDiv = document.getElementById("login");
oDiv.onmousedown = function(e){
var e = e || window.event;//window.event兼容IE,當事件發生時有效
var diffX = e.clientX - oDiv.offsetLeft;//獲取鼠標點擊的位置到所選對象的邊框的水平距離
var diffY = e.clientY - oDiv.offsetTop;
document.onmousemove = function(e){ //需設爲document對象才能做用於整個文檔
var e = e||window.event;
oDiv.style.left = e.clientX - diffX + 'px';//style.left表示所選對象的邊框到瀏覽器左側距離
oDiv.style.top = e.clientY -diffY + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;//清除鼠標釋放時的對象移動方法
document.onmouseup = null;
}
}
</script>
</body>
</html>
offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。
js實現insertAfter方法
DOM裏還有一個insertBefore方法用於再節點前面附件內容，經過insertBefore和appendChild咱們能夠實現本身的insertAfter函數：
// 'Target'是DOM裏已經存在的元素
// 'Bullet'是要插入的新元素
function insertAfter(target, bullet) {
target.nextSibling ?
target.parentNode.insertBefore(bullet, target.nextSibling)
: target.parentNode.appendChild(bullet);
}
// 使用了3目表達式:
// 格式：條件?條件爲true時的表達式：條件爲false時的表達式
上面的函數首先檢查target元素的同級下一個節點是否存在，若是存在就在該節點前面添加bullet節點，若是不存在，就說明target是最後一個節點了，直接在後面append新節點就能夠了。DOM API沒有給提供insertAfter是由於真的不必了——咱們能夠本身建立。
jquery中帶命名空間的事件(namespaced events)
帶命名空間的事件(namespaced events)在jQuery 1.2就被加入了，可是沒有幾我的用。
舉個例子
$('a').on('click', function() {
// Handler 1
});
$('a').on('click', function() {
// Handler 2
});
若是咱們想要移除第二個handler, 使用$(‘a’).off(‘click’)確會把兩個handler都移除掉！
可是若是使用帶命名空間的事件，就能夠搞定：
$('a').on('click.namespace1', function() {
//Handler 1
});
$('a').on('click.namespace2', function() {
//Handler 2
});
使用以下代碼移除：
$('a').off('click.namespace2');
求兩個數的和 並以二進制輸出
var m=3; var n=5; var sum=m+n; var result = sum.toString(2); console.log(result); //1000
二進制輸出：toString函數
js使用console.log在console中打印信息影響性能嗎?
問：如上圖所示，我看不少的網站在生產環境並無註釋掉開發的時候使用的console.log，這樣會影響網站加載的性能嗎？影響多大？
答：其實只要調用函數，就會有性能的問題，只是影響大與小的問題。能夠用console.time和console.timeEnd中間代碼執行時長來測試間隔時間。
console.time('console');
console.log('test');
console.timeEnd('console');
jQuery取得select選擇的文本與值
jquery獲取select選擇的文本與值
獲取select ：
獲取select 選中的 text :
$("#ddlregtype").find("option:selected").text();
獲取select選中的 value:
$("#ddlregtype ").val();
獲取select選中的索引:
$("#ddlregtype ").get(0).selectedindex;
設置select:
設置select 選中的索引：
$("#ddlregtype ").get(0).selectedindex=index;//index爲索引值
設置select 選中的value：
$("#ddlregtype ").attr("value","normal「);
$("#ddlregtype ").val("normal");
$("#ddlregtype ").get(0).value = value;
JS中的"!!"的做用
該操做至關於Boolean()，即轉化爲布爾型。如：
!!0 == false; //true !!-1 == true; //true
這兒列舉下其它類型轉化爲boolean型：
-
undefined=》false -
null=》false - 布爾值 =》 不用轉換
- 數字 =》
0，NaN轉化成false，其餘數字類型轉換成true - 字符串 =》 只有空字符串
''轉換成false，其餘都轉換成true - 對象 =》 所有轉換爲
true
JS replace()方法全局替換變量
簡單替換字符：string.replace("a","b"); （把 a 替換成 b）
全局替換字符：string.replace(/a/g,"b");（全局把a替換成b）
可是若是是全局替換一個變量內容，以下,給一個電話號碼中間加*號：
var phone = "15512345678"; var sliceNumber = phone.slice(3,phone.length - 3); var newPhone = phone.replace(new RegExp(sliceNumber,'g'),'****'); console.log(newPhone); //155****678
相關文章
- 1. 『總結』web前端開發經常使用代碼整理
- 2. 前端開發經常使用js代碼片斷
- 3. 前端開發中最經常使用的JS代碼片斷
- 4. 前端開發經常使用代碼片斷（下篇）
- 5. JS經常使用代碼片斷
- 6. 經常使用的js代碼片斷
- 7. js 經常使用代碼片斷
- 8. WEB前端經常使用JavaScript代碼整理
- 9. Web前端經常使用代碼筆記整理（01）
- 10. Web前端經常使用代碼筆記整理（02）
- 更多相關文章...
- • Markdown 代碼 - Markdown 教程
- • Eclipse 代碼模板 - Eclipse 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 『總結』web前端開發經常使用代碼整理
- 2. 前端開發經常使用js代碼片斷
- 3. 前端開發中最經常使用的JS代碼片斷
- 4. 前端開發經常使用代碼片斷（下篇）
- 5. JS經常使用代碼片斷
- 6. 經常使用的js代碼片斷
- 7. js 經常使用代碼片斷
- 8. WEB前端經常使用JavaScript代碼整理
- 9. Web前端經常使用代碼筆記整理（01）
- 10. Web前端經常使用代碼筆記整理（02）