js统计html页面访问的次数6,JS综合篇--[总结]Web前端常用代码片段整理
IE條件注釋
條件注釋簡介
IE中的條件注釋(Conditional comments)對IE的版本和IE非IE有優秀的區分能力，是WEB設計中常用的hack方法。
條件注釋只能用于IE5以上，IE10以上不支持。
如果你安裝了多個IE，條件注釋將會以最高版本的IE為標準。
條件注釋的基本結構和HTML的注釋()是一樣的。因此IE以外的瀏覽器將會把它們看作是普通的注釋而完全忽略它們。
IE將會根據if條件來判斷是否如解析普通的頁面內容一樣解析條件注釋里的內容。
條件注釋使用方法示例
僅IE5.5可見
僅IE 5.5以上可見
僅IE 5.5以下可見
IE 5.5及以上可見
IE 5.5及以下可見
非IE 5.5的IE可見
html代碼用js動態加載進頁面
//這里面是你要放的html代碼，例如放一個div的內容
把上面的js動態加入到頁面中
$(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.clientHeight
網頁可見區域寬： 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.availWidth
JQuery:
$(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代碼：
js代碼：
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代碼：
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代碼：
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改變圖片的路徑
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獲取某年某月的哪些天是周六和周日
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);
如何在手機上禁止瀏覽器的網頁滾動
方法一：
方法二：
document.addEventListener('touchmove', function(event) {
event.preventDefault();
})
改變type=file默認樣式，"瀏覽"等字體
js判斷變量是否未定義的代碼
一般如果變量通過var聲明，但是并未初始化的時候，變量的值為undefined，而未定義的變量則需要通過 "typeof 變量"的形式來判斷，否則會發生錯誤。
實際應用：
variable有的頁面我們不定義,但有的頁面定義了，就可以需要這樣的判斷方法，沒有定義的就不執行。
if("undefined" != typeof variable){
if(variable=="abc"){
console.log('成功');
}
}
針對IE6，7的hack，該怎么寫
你可能會這么回答：使用“>”，“_”，“*”等各種各樣的符號來寫hack。是的，這樣做沒錯，但是需要記住每個符號分別被哪些瀏覽器識別，并且如果寫的太亂將造成代碼 閱讀起來十分困難。學習CSS必須抱有一種質疑精神，有沒有一種hack方法可以不寫這些亂七八糟的符號，并且代碼易維護易讀呢？我們可以看看好搜首頁是怎么做的：在頁面頂端有這樣一句話：
在頁面的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表單提交時設置編碼格式
//內容
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('
' + el.innerHTML + '');doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0)
{
document.body.removeChild(iframe);
}
}
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代碼：
高級客戶經理
中級客戶經理
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代碼：
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代碼中寫就能實現，如：
如果限制上傳文件為圖片類型，如下：
但是在其它低版本瀏覽器就不管用了，需要js來判斷。
html代碼：
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 對象冒充
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
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);
})();
同步加載
平常默認用的都是同步加載。如：
同步模式又稱阻塞模式，會阻止流覽器的后續處理。停止了后續的文件的解析，執行，如圖像的渲染。瀏覽器之所以會采用同步模式，是因為加載的js文件中有對dom的操作，重定向，輸出document等默認行為，所以同步才是最安全的。
通常會把要加載的js放到body結束標簽之前，使得js可在頁面最后加載，盡量減少阻塞頁面的渲染。這樣可以先讓頁面顯示出來。
同步加載流程是瀑布模型，異步加載流程是并發模型。
js獲取屏幕坐標
獲取鼠標坐標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 屬性可返回文檔的根節點。
2.scrollTop() 為滾動條向下移動的距離
3.document.documentElement.scrollTop 指的是滾動條的垂直坐標
4.document.documentElement.clientHeight 指的是瀏覽器可見區域高度
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 ==> 瀏覽器所有內容高度
瀏覽器所有內容高度即瀏覽器整個框架的高度，包括滾動條卷去部分+可視部分+底部隱藏部分的高度總和
瀏覽器滾動部分高度即滾動條卷去部分高度即可視頂端距離整個對象頂端的高度。
綜上
1、document.documentElement.scrollTop和document.body.scrollTop始終有一個為0，所以可以用這兩個的和來求scrollTop
2、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拖拽效果
#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,當事件發生時有效
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;
}
}
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，這樣會影響網站加載的性能嗎？影響多大？
答：其實只要調用函數，就會有性能的問題，只是影響大與小的問題?？梢杂胏onsole.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
總結
以上是生活随笔為你收集整理的js统计html页面访问的次数6,JS综合篇--[总结]Web前端常用代码片段整理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c语言正确理解以下名词及其含义,C程序作
- 下一篇： qt中QTreeWidget控件的使用