js统计html页面访问的次数6,JS综合篇--[总结]Web前端常用代码片段整理
IE條件注釋
條件注釋簡(jiǎn)介
IE中的條件注釋(Conditional comments)對(duì)IE的版本和IE非IE有優(yōu)秀的區(qū)分能力，是WEB設(shè)計(jì)中常用的hack方法。
條件注釋只能用于IE5以上，IE10以上不支持。
如果你安裝了多個(gè)IE，條件注釋將會(huì)以最高版本的IE為標(biāo)準(zhǔn)。
條件注釋的基本結(jié)構(gòu)和HTML的注釋()是一樣的。因此IE以外的瀏覽器將會(huì)把它們看作是普通的注釋而完全忽略它們。
IE將會(huì)根據(jù)if條件來(lái)判斷是否如解析普通的頁(yè)面內(nèi)容一樣解析條件注釋里的內(nèi)容。
條件注釋使用方法示例
僅IE5.5可見(jiàn)
僅IE 5.5以上可見(jiàn)
僅IE 5.5以下可見(jiàn)
IE 5.5及以上可見(jiàn)
IE 5.5及以下可見(jiàn)
非IE 5.5的IE可見(jiàn)
html代碼用js動(dòng)態(tài)加載進(jìn)頁(yè)面
//這里面是你要放的html代碼，例如放一個(gè)div的內(nèi)容
把上面的js動(dòng)態(tài)加入到頁(yè)面中
$(function(){
var s=$("#T-pcList").html();//獲得js的html內(nèi)容
$(".picScroll-left .bd").html(s);//把s的內(nèi)容放到class為bd內(nèi)
thisstyle();//執(zhí)行某個(gè)函數(shù)
});
js判斷用戶訪問(wèn)的是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如何判斷用戶是否是用微信瀏覽器
根據(jù)關(guān)鍵字 MicroMessenger 來(lái)判斷是否是微信內(nèi)置的瀏覽器。判斷函數(shù)如下：
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
JS,Jquery獲取各種屏幕的寬度和高度
Javascript:
文檔可視區(qū)域?qū)?#xff1a; document.documentElement.clientWidth
文檔可視區(qū)域高： document.documentElement.clientHeight
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?#xff1a; document.body.clientWidth
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?#xff1a; document.body.offsetWidth (包括邊線的寬)
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線的高)
網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth
網(wǎng)頁(yè)正文全文高： document.body.scrollHeight
網(wǎng)頁(yè)被卷去的高： document.body.scrollTop
網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft
網(wǎng)頁(yè)正文部分上： window.screenTop
網(wǎng)頁(yè)正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度： window.screen.availWidth
JQuery:
$(document).ready(function(){
alert($(window).height()); //瀏覽器當(dāng)前窗口可視區(qū)域高度
alert($(document).height()); //瀏覽器當(dāng)前窗口文檔的高度
alert($(document.body).height());//瀏覽器當(dāng)前窗口文檔body的高度
alert($(document.body).outerHeight(true));//瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?/p>
alert($(document).width());//瀏覽器當(dāng)前窗口文檔對(duì)象寬度
alert($(document.body).width());//瀏覽器當(dāng)前窗口文檔body的寬度
alert($(document.body).outerWidth(true));//瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin
})
jquery對(duì)文本框只讀狀態(tài)與可讀狀態(tài)的相互轉(zhuǎn)化
$('input').removeAttr('Readonly');
$('input').attr('Readonly','true');
js/jquery實(shí)現(xiàn)密碼框輸入聚焦，失焦問(wèn)題
js實(shí)現(xiàn)方法：
html代碼：
js代碼：
window.onload = function(){
var oIpt = document.getElementById("i_input");
if(oIpt.value == "會(huì)員卡號(hào)/手機(jī)號(hào)"){
oIpt.style.color = "#888";
}else{
oIpt.style.color = "#000";
}
oIpt.onfocus = function(){
if(this.value == "會(huì)員卡號(hào)/手機(jī)號(hào)"){
this.value="";
this.style.color = "#000";
this.type = "password";
}else{
this.style.color = "#000";
}
};
oIpt.onblur = function(){
if(this.value == ""){
this.value="會(huì)員卡號(hào)/手機(jī)號(hào)";
this.style.color = "#888";
this.type = "text";
}
};
}
jquery實(shí)現(xiàn)方法:
html代碼：
jquery代碼：
$("#showPwd").focus(function() {
var text_value=$(this).val();
if (text_value =='請(qǐng)輸入您的注冊(cè)密碼') {
$("#showPwd").hide();
$("#password").show().focus();
}
});
$("#password").blur(function() {
var text_value = $(this).val();
if (text_value == "") {
$("#showPwd").show();
$("#password").hide();
}
});
獲取當(dāng)前日期
var calculateDate = function(){
var date = new Date();
var weeks = ["日","一","二","三","四","五","六"];
return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+
date.getDate()+"日 星期"+weeks[date.getDay()];
}
$(function(){
$("#dateSpan").html(calculateDate());
})
時(shí)間倒計(jì)時(shí)(固定倒計(jì)時(shí)的結(jié)束時(shí)間)
function countdown() {
var endtime = new Date("Jan 18, 2015 23:50:00");
var nowtime = new Date();
if (nowtime >= endtime) {
document.getElementById("_lefttime").innerHTML = "倒計(jì)時(shí)間結(jié)束";
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 + "小時(shí)" + __m + "分" + __s + "秒";
}
countdown();
setInterval(countdown, 1000);
10秒倒計(jì)時(shí)跳轉(zhuǎn)
html代碼：
js代碼：
//設(shè)定倒數(shù)秒數(shù)
var t = 10;
//顯示倒數(shù)秒數(shù)
function showTime(){
t -= 1;
document.getElementById('showtimes').innerHTML= t;
if(t==0){
location.href='error404.asp';
}
//每秒執(zhí)行一次,showTime()
setTimeout("showTime()",1000);
}
//執(zhí)行showTime()
showTime();
判斷瀏覽器的簡(jiǎn)單有效方法
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改變圖片的路徑
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);
})()
點(diǎn)擊某個(gè)div區(qū)域之外，隱藏該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 = $(' 目標(biāo)區(qū)域 '); // 設(shè)置目標(biāo)區(qū)域
if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
some code... // 功能代碼
}
});
/* Mark 1 的原理：
判斷點(diǎn)擊事件發(fā)生在區(qū)域外的條件是：
1. 點(diǎn)擊事件的對(duì)象不是目標(biāo)區(qū)域本身
2. 事件對(duì)象同時(shí)也不是目標(biāo)區(qū)域的子元素
*/
js獲取某年某月的哪些天是周六和周日
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+"月份"+"
"
+"周六："+saturday.toString()+"
"
+"周日："+sunday.toString();
document.getElementById("text").innerHTML = text;
}
time(2014,7);
如何在手機(jī)上禁止瀏覽器的網(wǎng)頁(yè)滾動(dòng)
方法一：
方法二：
document.addEventListener('touchmove', function(event) {
event.preventDefault();
})
改變type=file默認(rèn)樣式，"瀏覽"等字體
js判斷變量是否未定義的代碼
一般如果變量通過(guò)var聲明，但是并未初始化的時(shí)候，變量的值為undefined，而未定義的變量則需要通過(guò) "typeof 變量"的形式來(lái)判斷，否則會(huì)發(fā)生錯(cuò)誤。
實(shí)際應(yīng)用：
variable有的頁(yè)面我們不定義,但有的頁(yè)面定義了，就可以需要這樣的判斷方法，沒(méi)有定義的就不執(zhí)行。
if("undefined" != typeof variable){
if(variable=="abc"){
console.log('成功');
}
}
針對(duì)IE6，7的hack，該怎么寫
你可能會(huì)這么回答：使用“>”，“_”，“*”等各種各樣的符號(hào)來(lái)寫hack。是的，這樣做沒(méi)錯(cuò)，但是需要記住每個(gè)符號(hào)分別被哪些瀏覽器識(shí)別，并且如果寫的太亂將造成代碼 閱讀起來(lái)十分困難。學(xué)習(xí)CSS必須抱有一種質(zhì)疑精神，有沒(méi)有一種hack方法可以不寫這些亂七八糟的符號(hào)，并且代碼易維護(hù)易讀呢？我們可以看看好搜首頁(yè)是怎么做的：在頁(yè)面頂端有這樣一句話：
在頁(yè)面的CSS中，會(huì)看到這樣的規(guī)則：
.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
}
行內(nèi)級(jí)元素可以設(shè)置寬高嗎？有哪些？
在面試時(shí)，當(dāng)被問(wèn)到行內(nèi)級(jí)元素可否設(shè)置寬高時(shí)，根據(jù)我們的經(jīng)驗(yàn)往往會(huì)回答不能。但是這樣往往著了面試官的道，因?yàn)橛幸恍┨厥獾男袃?nèi)元素，比如img，input，select等等，是可以被設(shè)置寬高的。一個(gè)內(nèi)容不受CSS視覺(jué)格式化模型控制，CSS渲染模型并不考慮對(duì)此內(nèi)容的渲染，且元素本身一般擁有固有尺寸(寬度，高度，寬高比)的元素，被稱之為置換元素。比如img是一個(gè)置換元素，當(dāng)不對(duì)它設(shè)置寬高時(shí)，它會(huì)按照本身的寬高進(jìn)行顯示。所以這個(gè)問(wèn)題的正確答案應(yīng)該是置換元素可以，非置換元素不可以。
js動(dòng)態(tài)創(chuàng)建css樣式添加到head內(nèi)
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數(shù)量超過(guò)限制而發(fā)生錯(cuò)誤
style.styleSheet.cssText = cssText;
}catch(e){
}
}
//如果當(dāng)前styleSheet還不能用，則放到異步中則行
if(style.styleSheet.disabled){
setTimeout(func,10);
}else{
func();
}
}else{ //w3c
//w3c瀏覽器中只要?jiǎng)?chuàng)建文本節(jié)點(diǎn)插入到style元素中就行了
var textNode = document.createTextNode(cssText);
style.appendChild(textNode);
}
//把創(chuàng)建的style元素插入到head中
head.appendChild(style);
}
//使用
addCSS('#demo{ height: 30px; background:#f00;}');
在IE8以及其低版本瀏覽器下，IE獨(dú)有屬性styleSheet.cssText。所以一般的兼容簡(jiǎn)單寫法：
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表單提交時(shí)設(shè)置編碼格式
//內(nèi)容
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進(jìn)行添加");
}
}
}
addFavorite(document.title,window.location);
打印方法：(整個(gè)頁(yè)面 window.print())
function Printpart(id_str)//id-str 內(nèi)容中的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('
' + el.innerHTML + '');doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0)
{
document.body.removeChild(iframe);
}
}
js強(qiáng)制手機(jī)頁(yè)面橫屏顯示
$( 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代碼：
高級(jí)客戶經(jīng)理
中級(jí)客戶經(jīng)理
jquery代碼：
$(".select-green").change(function(){
var _indx = $(this).get(0).selectedIndex;
$(".selectall .selectCon").hide();
$(".selectall .selectCon").eq(_indx).fadeIn();
});
注：其中(this).get(0)與(this)[0]等價(jià)
獲取上傳文件的大小
html代碼：
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控件與頁(yè)面交互，點(diǎn)擊了否，就無(wú)法獲取size
console.log(e.message); //Automation 服務(wù)器不能創(chuàng)建對(duì)象
filesize = 'error'; //無(wú)法獲取
}
}
return filesize;
}
限制上傳文件的類型
如果是高版本瀏覽器，一般在HTML代碼中寫就能實(shí)現(xiàn)，如：
如果限制上傳文件為圖片類型，如下：
但是在其它低版本瀏覽器就不管用了，需要js來(lái)判斷。
html代碼：
js代碼：
/* 通過(guò)擴(kuò)展名，檢驗(yàn)文件格式。
*@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('上傳類型錯(cuò)誤，請(qǐng)重新上傳');
obj.value = '';
}
}
隨機(jī)產(chǎn)生lowwer - upper之間的隨機(jī)數(shù)
function selectFrom(lower, upper) {
var sum = upper - lower + 1; //總數(shù)-第一個(gè)數(shù)+1
return Math.floor(Math.random() * sum + lower);
};
保留后端傳遞到前端頁(yè)面的空格
var objt = {
name:' aaaa 這是一個(gè)空格多的標(biāo)簽 這是一個(gè)空格多的標(biāo)簽'
}
objt.name = objt.name.replace(/\s/g,'?');
console.log(objt.name);
用firebug查看結(jié)果：
為什么Image對(duì)象的src屬性要寫在onload事件后面？
var image=new Image();
imgae.onload = funtion;
imgae.src = 'url'
js內(nèi)部是按順序逐行執(zhí)行的，可以認(rèn)為是同步的
給imgae賦值src時(shí)，去加載圖片這個(gè)過(guò)程是異步的，這個(gè)異步過(guò)程完成后，如果有onload，則執(zhí)行onload
如果先賦值src，那么這個(gè)異步過(guò)程可能在你賦值onload之前就完成了(比如圖片緩存，或者是js由于某些原因被阻塞了)，那么onload就不會(huì)執(zhí)行
反之，js同步執(zhí)行確定onload賦值完成后才會(huì)賦值src,可以保證這個(gè)異步過(guò)程在onload賦值完成后才開(kāi)始進(jìn)行，也就保證了onload一定會(huì)被執(zhí)行到
跨瀏覽器添加事件
//跨瀏覽器添加事件
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);
}
}
跨瀏覽器阻止默認(rèn)行為
//跨瀏覽器阻止默認(rèn)行為
function preDef(ev){
var e = ev || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue =false;
}
}
跨瀏覽器獲取目標(biāo)對(duì)象
//跨瀏覽器獲取目標(biāo)對(duì)象
function getTarget(ev){
if(ev.target){//w3c
return ev.target;
}else if(window.event.srcElement){//IE
return window.event.srcElement;
}
}
跨瀏覽器獲取滾動(dòng)條位置
//跨瀏覽器獲取滾動(dòng)條位置，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 對(duì)象冒充
function Person(name , age){
this.name = name ;
this.age = age ;
this.say = function (){
return "name : "+ this.name + " age: "+this.age ;
} ;
}
var o = new Object() ;//可以簡(jiǎn)化為Object()
Person.call(o , "zhangsan" , 20) ;
console.log(o.say() );//name : zhangsan age: 20
js 異步加載和同步加載
異步加載也叫非阻塞模式加載，瀏覽器在下載js的同時(shí)，同時(shí)還會(huì)執(zhí)行后續(xù)的頁(yè)面處理。
在script標(biāo)簽內(nèi)，用js創(chuàng)建一個(gè)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);
})();
同步加載
平常默認(rèn)用的都是同步加載。如：
同步模式又稱阻塞模式，會(huì)阻止流覽器的后續(xù)處理。停止了后續(xù)的文件的解析，執(zhí)行，如圖像的渲染。瀏覽器之所以會(huì)采用同步模式，是因?yàn)榧虞d的js文件中有對(duì)dom的操作，重定向，輸出document等默認(rèn)行為，所以同步才是最安全的。
通常會(huì)把要加載的js放到body結(jié)束標(biāo)簽之前，使得js可在頁(yè)面最后加載，盡量減少阻塞頁(yè)面的渲染。這樣可以先讓頁(yè)面顯示出來(lái)。
同步加載流程是瀑布模型，異步加載流程是并發(fā)模型。
js獲取屏幕坐標(biāo)
獲取鼠標(biāo)坐標(biāo)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;
X: Y:
注釋：
1.documentElement 屬性可返回文檔的根節(jié)點(diǎn)。
2.scrollTop() 為滾動(dòng)條向下移動(dòng)的距離
3.document.documentElement.scrollTop 指的是滾動(dòng)條的垂直坐標(biāo)
4.document.documentElement.clientHeight 指的是瀏覽器可見(jiàn)區(qū)域高度
DTD已聲明的情況下：
如果在頁(yè)面中添加這行標(biāo)記的話
IE
document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見(jiàn)區(qū)域?qū)挾?/p>
document.documentElement.clientHeight ==> 可見(jiàn)區(qū)域高度
Firefox
document.documentElement.scrollHeight ==> 瀏覽器所有內(nèi)容高度
document.body.scrollHeight ==> 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop ==> 瀏覽器滾動(dòng)部分高度
document.body.scrollTop ==>始終為0
document.documentElement.clientHeight ==>瀏覽器可視部分高度
document.body.clientHeight ==> 瀏覽器所有內(nèi)容高度
Chrome
document.documentElement.scrollHeight ==> 瀏覽器所有內(nèi)容高度
document.body.scrollHeight ==> 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop==> 始終為0
document.body.scrollTop==>瀏覽器滾動(dòng)部分高度
document.documentElement.clientHeight ==> 瀏覽器可視部分高度
document.body.clientHeight ==> 瀏覽器所有內(nèi)容高度
瀏覽器所有內(nèi)容高度即瀏覽器整個(gè)框架的高度，包括滾動(dòng)條卷去部分+可視部分+底部隱藏部分的高度總和
瀏覽器滾動(dòng)部分高度即滾動(dòng)條卷去部分高度即可視頂端距離整個(gè)對(duì)象頂端的高度。
綜上
1、document.documentElement.scrollTop和document.body.scrollTop始終有一個(gè)為0，所以可以用這兩個(gè)的和來(lái)求scrollTop
2、scrollHeight、clientHeight 在DTD已聲明的情況下用documentElement，未聲明的情況下用body
clientHeight在IE和FF下，該屬性沒(méi)什么差別，都是指瀏覽器的可視區(qū)域，即除去瀏覽器的那些工具欄狀態(tài)欄剩下的頁(yè)面展示空間的高度。
PageX和clientX
PageX:鼠標(biāo)在頁(yè)面上的位置,從頁(yè)面左上角開(kāi)始,即是以頁(yè)面為參考點(diǎn),不隨滑動(dòng)條移動(dòng)而變化
clientX:鼠標(biāo)在頁(yè)面上可視區(qū)域的位置,從瀏覽器可視區(qū)域左上角開(kāi)始,即是以瀏覽器滑動(dòng)條此刻的滑動(dòng)到的位置為參考點(diǎn),隨滑動(dòng)條移動(dòng) 而變化.
可是悲劇的是,PageX只有FF特有,IE則沒(méi)有這個(gè)，所以在IE下使用這個(gè)：
PageY=clientY+scrollTop-clientTop;(只討論Y軸,X軸同理,下同)
scrollTop代表的是被瀏覽器滑動(dòng)條滾過(guò)的長(zhǎng)度
offsetX:IE特有,鼠標(biāo)相比較于觸發(fā)事件的元素的位置,以元素盒子模型的內(nèi)容區(qū)域的左上角為參考點(diǎn),如果有boder,可能出現(xiàn)負(fù)值
只有clientX和screenX 皆大歡喜是W3C標(biāo)準(zhǔn).其他的,都糾結(jié)了.
最給力的是，chrome和safari一條龍通殺!完全支持所有屬性
js拖拽效果
#login{
height: 100px;
width: 100px;
border: 1px solid black;
position: relative;
top:200px;
left: 200px;
background: red;
}
var oDiv = document.getElementById("login");
oDiv.onmousedown = function(e){
var e = e || window.event;//window.event兼容IE,當(dāng)事件發(fā)生時(shí)有效
var diffX = e.clientX - oDiv.offsetLeft;//獲取鼠標(biāo)點(diǎn)擊的位置到所選對(duì)象的邊框的水平距離
var diffY = e.clientY - oDiv.offsetTop;
document.onmousemove = function(e){ //需設(shè)為document對(duì)象才能作用于整個(gè)文檔
var e = e||window.event;
oDiv.style.left = e.clientX - diffX + 'px';//style.left表示所選對(duì)象的邊框到瀏覽器左側(cè)距離
oDiv.style.top = e.clientY -diffY + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;//清除鼠標(biāo)釋放時(shí)的對(duì)象移動(dòng)方法
document.onmouseup = null;
}
}
offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。
js實(shí)現(xiàn)insertAfter方法
DOM里還有一個(gè)insertBefore方法用于再節(jié)點(diǎn)前面附件內(nèi)容，通過(guò)insertBefore和appendChild我們可以實(shí)現(xiàn)自己的insertAfter函數(shù)：
// 'Target'是DOM里已經(jīng)存在的元素
// 'Bullet'是要插入的新元素
function insertAfter(target, bullet) {
target.nextSibling ?
target.parentNode.insertBefore(bullet, target.nextSibling)
: target.parentNode.appendChild(bullet);
}
// 使用了3目表達(dá)式:
// 格式：條件?條件為true時(shí)的表達(dá)式：條件為false時(shí)的表達(dá)式
上面的函數(shù)首先檢查target元素的同級(jí)下一個(gè)節(jié)點(diǎn)是否存在，如果存在就在該節(jié)點(diǎn)前面添加bullet節(jié)點(diǎn)，如果不存在，就說(shuō)明target是最后一個(gè)節(jié)點(diǎn)了，直接在后面append新節(jié)點(diǎn)就可以了。DOM API沒(méi)有給提供insertAfter是因?yàn)檎娴臎](méi)必要了——我們可以自己創(chuàng)建。
jquery中帶命名空間的事件(namespaced events)
帶命名空間的事件(namespaced events)在jQuery 1.2就被加入了，但是沒(méi)有幾個(gè)人用。
舉個(gè)例子
$('a').on('click', function() {
// Handler 1
});
$('a').on('click', function() {
// Handler 2
});
如果我們想要移除第二個(gè)handler, 使用$(‘a(chǎn)’).off(‘click’)確會(huì)把兩個(gè)handler都移除掉！
但是如果使用帶命名空間的事件，就可以搞定：
$('a').on('click.namespace1', function() {
//Handler 1
});
$('a').on('click.namespace2', function() {
//Handler 2
});
使用如下代碼移除：
$('a').off('click.namespace2');
求兩個(gè)數(shù)的和 并以二進(jìn)制輸出
var m=3;
var n=5;
var sum=m+n;
var result = sum.toString(2);
console.log(result); //1000
二進(jìn)制輸出：toString函數(shù)
js使用console.log在console中打印信息影響性能嗎?
問(wèn)：如上圖所示，我看很多的網(wǎng)站在生產(chǎn)環(huán)境并沒(méi)有注釋掉開(kāi)發(fā)的時(shí)候使用的console.log，這樣會(huì)影響網(wǎng)站加載的性能嗎？影響多大？
答：其實(shí)只要調(diào)用函數(shù)，就會(huì)有性能的問(wèn)題，只是影響大與小的問(wèn)題。可以用console.time和console.timeEnd中間代碼執(zhí)行時(shí)長(zhǎng)來(lái)測(cè)試間隔時(shí)間。
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;
設(shè)置select:
設(shè)置select 選中的索引：
$("#ddlregtype ").get(0).selectedindex=index;//index為索引值
設(shè)置select 選中的value：
$("#ddlregtype ").attr("value","normal“);
$("#ddlregtype ").val("normal");
$("#ddlregtype ").get(0).value = value;
JS中的"!!"的作用
該操作相當(dāng)于Boolean()，即轉(zhuǎn)化為布爾型。如：
!!0 == false; //true
!!-1 == true; //true
這兒列舉下其它類型轉(zhuǎn)化為boolean型：
undefined =》 false
null =》 false
布爾值 =》 不用轉(zhuǎn)換
數(shù)字 =》 0，NaN轉(zhuǎn)化成false，其他數(shù)字類型轉(zhuǎn)換成true
字符串 =》 只有空字符串''轉(zhuǎn)換成false，其他都轉(zhuǎn)換成true
對(duì)象 =》 全部轉(zhuǎn)換為true
JS replace()方法全局替換變量
簡(jiǎn)單替換字符：string.replace("a","b"); (把 a 替換成 b)
全局替換字符：string.replace(/a/g,"b");(全局把a(bǔ)替換成b)
但是如果是全局替換一個(gè)變量?jī)?nèi)容，如下,給一個(gè)電話號(hào)碼中間加*號(hào)：
var phone = "15512345678";
var sliceNumber = phone.slice(3,phone.length - 3);
var newPhone = phone.replace(new RegExp(sliceNumber,'g'),'****');
console.log(newPhone); //155****678
總結(jié)
以上是生活随笔為你收集整理的js统计html页面访问的次数6,JS综合篇--[总结]Web前端常用代码片段整理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： c语言正确理解以下名词及其含义,C程序作
- 下一篇： 2017年html5行业报告,云适配发布