JS、jQuery插入元素的幾種方法

方法一：

HTML代碼

<div class="pc-container"></div>

JS代碼

var container=document.getElementsByClassName('.pc-container')[0];
var div=document.createElement('div');
div.setAttribute('id','example');// div.id = "example";div.className = "slogan";
div.style.width='120px';
container.appendChild(div);

方法二：

HTML代碼

<div class="pc-container"></div>

JS代碼

var container = $('.pc-container');
$('<img>').attr({
            src:'images/star.png'
        }).css({
                top:'50px',
                left:'50px',
                transform:'scale(.5) rotateZ(90deg)',
                position: 'absolute'
 }).addClass('myImg').appendTo('.pc-container');

20160409121610000.png

方法三：

$(".cover-list").empty();
for (var i = 0; i < imgSrcArr.length; i++) {
    // 創建label標簽組合，并給所有的img標簽賦值
    labelTag = '<label><input type="checkbox" name="cover-img" value="" class="cover-img-checkbox"><img src="';
    labelTag2 = '" class="cover-img" alt="" width="157" height="112"><i class="active-icon"></i></label>';

    $(labelTag + imgSrcArr[i] + labelTag2).appendTo(".cover-list");
}

這里順便總結一下插入元素的幾種方法

JavaScript：

element1.appendChild(element2); 在element1的內部結尾追加element2.

JQuery:

$(A).append(content|fn) 在匹配的元素A內部結尾追加內容
$(A).appendTo(B) 將A的內容追加到B內部結尾
$(A).prepend(content) 在匹配的元素A內部的開頭插入content內容
$(A).prependTo(B) 將匹配到的A元素追加到B的開頭

$(A).after(content) 在匹配的元素A之后插入內容content
$(A).before(content) 在匹配的元素A之前插入內容content
$(A).insertAfter(B) 將A的內容追加到B之后
$(A).insertBefore(B) 將A的內容追加到B之前

通過 jQuery，可以很容易地添加新元素/內容。

添加新的 HTML 內容
我們將學習用于添加新內容的四個 jQuery 方法：
● append() - 在被選元素的結尾插入內容
● prepend() - 在被選元素的開頭插入內容
● after() - 在被選元素之后插入內容
● before() - 在被選元素之前插入內容

jQuery append() 方法在被選元素的結尾插入內容。
實例

$("p").append("Some appended text.");

通過 append() 和 prepend() 方法添加若干新元素
在上面的例子中，我們只在被選元素的開頭/結尾插入文本/HTML。
不過，append() 和 prepend() 方法能夠通過參數接收無限數量的新元素。可以通過 jQuery 來生成文本/HTML（就像上面的例子那樣），或者通過 JavaScript 代碼和 DOM 元素。

在下面的例子中，我們創建若干個新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然后我們通過 append() 方法把這些新元素追加到文本中（對 prepend() 同樣有效）：
實例：

function appendText(){
    var txt1="<p>Text.</p>";               // 以 HTML 創建新元素
    var txt2=$("<p></p>").text("Text.");   // 以 jQuery 創建新元素
    var txt3=document.createElement("p");  // 以 DOM 創建新元素
    txt3.innerHTML="Text.";
    $("p").append(txt1,txt2,txt3);         // 追加新元素
}

jQuery after() 和 before() 方法

jQuery after() 方法在被選元素之后插入內容。
jQuery before() 方法在被選元素之前插入內容。
實例：

$("img").after("Some text after");
$("img").before("Some text before");

after() 和 before() 方法能夠通過參數接收無限數量的新元素。可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建新元素。

在下面的例子中，我們創建若干新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然后我們通過 after() 方法把這些新元素插到文本中（對 before() 同樣有效）：
實例：

function afterText(){
    var txt1="<b>I </b>";                    // 以 HTML 創建新元素
    var txt2=$("<i></i>").text("love ");     // 通過 jQuery 創建新元素
    var txt3=document.createElement("big");  // 通過 DOM 創建新元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}

用原生的JS刪除標簽中的類名和添加類名

var classVal = document.getElementById("id").getAttribute("class");

//刪除的話
classVal = classVal.replace("someClassName","");
document.getElementById("id").setAttribute("class",classVal );

//添加的話
classVal = classVal.concat(" someClassName");
document.getElementById("id").setAttribute("class",classVal );

//替換的話
classVal = classVal.replace("someClassName","otherClassName");
document.getElementById("id").setAttribute("class",classVal );

讓滾動條回到頂部

$(window).scrollTop(0);

JS和JQuery獲取父級、子級、兄弟元素

原生javascript方法：

var a = document.getElementById("dom");
      del_space(a);              // 清理空格
      var b = a.childNodes;      // 獲取a的全部子節點；
      var c = a.parentNode;      // 獲取a的父節點；
      var d = a.nextSibling;     // 獲取a的下一個兄弟節點
      var e = a.previousSibling; // 獲取a的上一個兄弟節點
      var f = a.firstChild;      // 獲取a的第一個子節點
      var g = a.lastChild;       // 獲取a的最后一個子節點

jQuery方法：

jQuery.parent(expr)   // 找父親節點，可以傳入expr進行過濾，比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr)  // 類似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery.children(expr) // 返回所有子節點，這個方法只會返回直接的孩子節點，不會返回所有的子孫節點
jQuery.contents()     // 返回下面的所有內容，包括節點和文本。這個方法和children()的區別就在于，包括空白文本，
                      // 也會被作為一個jQuery對象返回，children()則只會返回節點
jQuery.prev()         // 返回上一個兄弟節點，不是所有的兄弟節點
jQuery.prevAll()      // 返回所有之前的兄弟節點
jQuery.next()         // 返回下一個兄弟節點，不是所有的兄弟節點
jQuery.nextAll()      // 返回所有之后的兄弟節點
jQuery.siblings()     // 返回兄弟姐妹節點，不分前后
jQuery.find(expr)     // find()會在當前指定元素中查找符合條件的子元素，是對它的子集操作，而filter()則是在當前
                      // 指定的元素集合中查找符合條件的元素，是對自身集合元素進行篩選。

使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素

通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。

$("button").click(function(){
  $("p").hide(1000);
});

$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });
});

jQuery刪除子元素

jQuery empty() 方法刪除被選元素的子元素。

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

jQuery remove() 方法刪除被選元素及其子元素。

$("#div1").remove();

過濾被刪除的元素

jQuery remove() 方法也可接受一個參數，允許您對被刪元素進行過濾。該參數可以是任何 jQuery 選擇器的語法。下面的例子刪除 class="italic" 的所有 <p> 元素：

$("p").remove(".italic");

jquery中children()可以選擇子元素，remove()可以刪除元素，所以可用如下代碼刪除子元素

$(object).children(selector).remove();  // 刪除object元素下滿足selector選擇器的子元素，不填寫則默認刪除所有子元素
$(this).children('li').remove();  // 刪除div下的子元素li

jQuery :gt 選擇器

定義和用法：gt 選擇器選取 index 值高于指定數的元素。index 值從 0 開始。經常與其他元素/選擇器一起使用，來選擇指定的組中特定序號之后的元素（如上面的例子）。
語法：

$(":gt(index)")

實例：
選擇前 3 個之后的所有 <tr> 元素：

$("tr:gt(2)")

當手機hover的時候顯示另一個div

最常見的就是網站右下門的二維碼圖標，當鼠標hover到二維碼圖標的時候就顯示出真正的二維碼。
HTML

<div class='body'>Body content<span class='desc'>description</span></div>
<div class='body'>Body content<span class='desc'>description</span></div>
<div class='body'>Body content<span class='desc'>description</span></div>

jQuery

$(document).ready(function() {
    $(".body").hover(function () {
        $(this).find(".desc").toggle();
    })
})

CSS

.desc {
    display: none;
}

在a標簽上直接發郵件或撥打電話

<!-- 在a標簽上直接發郵箱 -->
<a href = "mailto: abc@example.com">Send Email</a>
<!-- 在a標簽上直接撥打電話號碼 -->
<a href="tel:+6494461709">61709</a>
<a href="tel:1-847-555-5555">1-847-555-5555</a>
<a href="tel:18475555555">Click Here To Call Support 1-847-555-5555</a>

用來驗證16個字符，其中包含中文、字母、數字和下劃線 的正則表達式

/^[a-zA-Z0-9_\u4e00-\u9fa5]{16}$/

js提取字符串中的數字

比如：
1、str = "20px" 提取字符串中的數字 str = str.replace(/[^0-9]/g,"");

2、像“2.89元”、“123愛E族”這樣前面為數字，后面為非數字的字符串，可以直接使用parseFloat()函數即可：
var num1 = parseFloat("2.89元"); //num1: 2.89
var num2 = parseFloat("123愛E族"); //num2: 123

3、像“生于1999年”、“行駛288公里”這樣字符串中只含有一個整型數值的字符串，直接將使用正則表達式將非數字的字符刪除掉就行：
var str1 = '生于1999年';
var num1 = str1.replace(/[^\d]/g, ''); //num1: 1999

4、 對于字符串中含有多個數值，使用字符串的match方法，通過正則表達式“/\d+(.\d+)?/g”即可提取字符串的所有數字（包括整數和小數）：
var str = '大米:2.57元/斤,白菜:3.65元/斤';
var arr = str.match(/\d+(.\d+)?/g);
//arr: ["2.57", "3.65"]

簡單提示

//簡單提示
function showAlert(str, timeout, callback) {
    $(".show-alert").remove();
    var tips = $('<div class="show-alert slideDown">' + str + '</div>'),
        noop = function() {},
        fn = callback || noop;
    // 添加提示
    $('body').append(tips);
    tips.on('click', function() {
        tips.remove();
        fn();
    });
    // 刪除提示
    setTimeout(function() {
        tips.remove();
        fn();
    }, timeout || 1500);
}

//執行的時候可以像下面這樣：
showAlert("當前為預覽模式，不支持操作");
showAlert("請輸入留言內容", 2000, callback_func_name);

/** 通知彈窗*/
.show-alert {
    z-index: 9999999;
    position: fixed;
    background: rgba(0, 0, 0, .7);
    line-height: 1;
    font-size: 14px;
    color: #fff;
    padding: 15px;
    left: 50%;
    border-radius: 2px;
    text-align: center;
    white-space: nowrap;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.slideDown {
    animation: slideDown 0.5s;
    -webkit-animation: slideDown 0.5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes slideDown {
    0% {
        top: 30%;
        opacity: 0;
    }
    100% {
        top: 50%;
        opacity: 1;
    }
}

@keyframes slideDown {
    0% {
        top: 30%;
        opacity: 0;
    }
    100% {
        top: 50%;
        opacity: 1;
    }
}

倒計時方法

// 倒計時方法
function countDown(_this,second,callback) {
    _this.text(second+"秒可重發").addClass("timing");
    down = function() {
        second--;
        if (second == 0) {
            clearInterval(_interval);
            _this.text("獲取驗證碼").removeClass("timing");
        }else{
            _this.text(second+"秒可重發");
        }
    };
    var _interval = setInterval(down, 1000);
}

// 執行的時候：
countDown(_btn, 60);
_btn是點擊的按鈕，例如：獲取驗證碼按鈕。

原生JS做表單驗證的方法：

/** 任意數字 */
function verificateNum(param) {
    var reg = (/^[0-9]*$/);
    if(reg.test(param)) {
        return true;
    } else {
        return false;
    }
}
// 或者：
function verificateNum(param) {
    var reg = (/^[0-9]*$/);
    return !!reg.test(param);
}

/** 密碼 */
function verificatePassword(param) {
    var reg = (/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/);
    if(reg.test(param)) {
        return true;
    } else {
        return false;
    }
}
// 或者：
function verificatePassword(param) {
    var reg = (/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/);
    return !!reg.test(param);
}

/** 漢字 */
function verificateCN(param) {
    var reg = (/^[\u4e00-\u9fa5]{0,}$/);
    if(reg.test(param)) {
        return true;
    } else {
        return false;
    }
}
// 或者：
function verificateCN(param) {
    var reg = (/^[\u4e00-\u9fa5]{0,}$/);
    return !!reg.test(param);
}

/** 由漢字、英文、數字、下劃線組成 */
function verificateNickname(param) {
    var reg = (/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/);
    if(reg.test(param)) {
        return true;
    } else {
        return false;
    }
}
// 或者：
function verificateNickname(param) {
    var reg = (/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/);
    return !!reg.test(param);
}

/** 英文和數字 */
function verificateCNandNUM(param) {
    var reg = (/^[A-Za-z0-9]+$/);
    if(reg.test(param)) {
        return true;
    } else {
        return false;
    }
}
// 或者：
function verificateCNandNUM(param) {
    var reg = (/^[A-Za-z0-9]+$/);
    return !!reg.test(param);
}

/** Email */
function verificateEmain(param) {
    var reg = (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/);
    if(reg.test(param)) {
        return true;
    } else {
        return false;
    }
}
// 或者：
function verificateEmain(param) {
    var reg = (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/);
    return !!reg.test(param);
}

/** 身份證 */
function verificateIDCard(param) {
    var reg = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
    if(reg.test(param)) {
        return true;
    } else {
        return false;
    }
}
// 或者：
function verificateIDCard(param) {
    var reg = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
    return !!reg.test(param);
}

/** 價格 */
function verificatePrice(param) {
    var reg = (/^\+?[1-9][0-9]*$/);
    if(reg.test(param)) {
        return true;
    } else {
        return false;
    }
}
// 或者：
function verificatePrice(param) {
    var reg = (/^\+?[1-9][0-9]*$/);
    return !!reg.test(param);
}

/** 電話 */
function verificatePhone(param) {
    var reg = (/^\+?[1-9][0-9]*$/);
    if(reg.test(param) && param.length == 11) {
        return true;
    } else {
        return false;
    }
}
// 或者：
function verificatePhone(param) {
    var reg = (/^\+?[1-9][0-9]*$/);
    return !!(reg.test(param) && param.length == 11);
}

提示，以下內容來自：【總結】web前端開發常用到代碼片段

讓IE9以下的版本支持HTML5

// html5 shiv

if (!+[1,]) {
    (function() {
    var tags = [
        'article', 'aside', 'details', 'figcaption',
        'figure', 'footer', 'header', 'hgroup',
        'menu', 'nav', 'section', 'summary',
        'time', 'mark', 'audio', 'video'],
        i = 0, len = tags.length;
    for (; i < len; i++) document.createElement(tags[i]);
    })();
}
// 或者寫成下面這樣
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

2.html代碼用js動態加載進頁面

<script type="text/html" id="T-pcList"> //這里面是你要放的html代碼，例如放一個div的內容</script>

把上面的js動態加入到頁面中

$(function(){var s=$("#T-pcList").html();//獲得js的html內容$(".picScroll-left .bd").html(s);//把s的內容放到class為bd內thisstyle();//執行某個函數});

3.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/";
} 

4.js如何判斷用戶是否是用微信瀏覽器

根據關鍵字 MicroMessenger 來判斷是否是微信內置的瀏覽器。判斷函數如下：

function isWeiXin(){ 
    var ua = window.navigator.userAgent.toLowerCase(); 
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){ 
        return true; 
    }else{ 
        return false; 
    } 
} 
// 或者：
function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    return ua.match(/MicroMessenger/i) == 'micromessenger';
}

5.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
元素距離頁面頂部距離:  document.getElementById("elt_id").offsetTop;

// 滾動條位置
function ScollPostion() {
    var t, l, w, h;
    if (document.documentElement && document.documentElement.scrollTop) {
        t = document.documentElement.scrollTop;
        l = document.documentElement.scrollLeft;
        w = document.documentElement.scrollWidth;
        h = document.documentElement.scrollHeight;
    } else if (document.body) {
        t = document.body.scrollTop;
        l = document.body.scrollLeft;
        w = document.body.scrollWidth;
        h = document.body.scrollHeight;
    }
    return { top: t, left: l, width: w, height: h };
}

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
})

獲取滾動條到頂部的垂直高度 ：$(document).scrollTop()=$(window).scrollTop()
獲取滾動條到左邊的垂直寬度 ：$(document).scrollLeft()=$(window).scrollLeft()
相同的效果,但是$(window).scrollTop()被所有瀏覽器支持.

元素距離頁面頂部距離:  $("#elt_id").offset().top;

6.jquery對文本框只讀狀態與可讀狀態的相互轉化

$('input').removeAttr('Readonly'); 
$('input').attr('Readonly','true'); 

7.js/jquery實現密碼框輸入聚焦，失焦問題

js實現方法：
html代碼：

<input id="i_input" type="text" value='會員卡號/手機號' />

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代碼：

<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();
    }
}); 

8.獲取當前日期

var calculateDate = function(){
var date = newDate();
var weeks = ["日","一","二","三","四","五","六"];
return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+
      date.getDate()+"日 星期"+weeks[date.getDay()];
}
$(function(){
　　$("#dateSpan").html(calculateDate());
})

9.時間倒計時（固定倒計時的結束時間）

functioncountdown(){
    var endtime = newDate("Jan 18, 2015 23:50:00");
    var nowtime = newDate();
    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.10秒倒計時跳轉

html代碼：

<divid="showtimes"></div>

js代碼：

//設定倒數秒數  var t = 10;  
//顯示倒數秒數  functionshowTime(){  
    t -= 1;  
    document.getElementById('showtimes').innerHTML= t;  
    if(t==0){  
        location.href='error404.asp';  
    }  
    //每秒執行一次,showTime()  
    setTimeout("showTime()",1000);  
}  
//執行showTime()  
showTime();

//設定倒數秒數 var t = 10; //顯示倒數秒數 functionshowTime(){ t -= 1; document.getElementById('showtimes').innerHTML= t; if(t==0){ location.href='error404.asp'; } //每秒執行一次,showTime() setTimeout("showTime()",1000); } //執行showTime() showTime();

11.判斷瀏覽器的簡單有效方法

functiongetInternet(){    
    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瀏覽器  
    }    
} 

12.每隔0.1s改變圖片的路徑

<divid="tt"><imgsrc="images/1.jpg"alt=""/></div>

js代碼：

(function(){
    functionchagesimagesrc(t){
        document.getElementById("tt").childNodes[0].src="images/"+t+".jpg";
    }
    setInterval(function(){
        for(var i=0;i<2;i++){
            setTimeout((function(t){
                returnfunction(){
                    chagesimagesrc(t);
                }
            })(i+1),i*100)
        }
    },1000);
})() 

13.點擊某個div區域之外，隱藏該div

$(document).bind("click",function(e){
    var target = $(e.target);
    if(target.closest(".city_box,#city_select a.selected").length == 0){
    $(".city_box").hide();
    }
}) 

14.js獲取某年某月的哪些天是周六和周日

<p id="text"></p>

<script type="text/javascript">
functiontime(y,m){
    var tempTime = newDate(y,m,0);
    var time = newDate();
    var saturday = newArray();
    var sunday = newArray();
    for(var i=1;i<=tempTime.getDate();i++){
        time.setFullYear(y,m-1,i);
        var day = time.getDay();
        if(day == 6){
            saturday.push(i);
        }elseif(day == 0){
            sunday.push(i);
        }
    }
    var text = y+"年"+m+"月份"+"<br />"
                +"周六："+saturday.toString()+"<br />"
                +"周日："+sunday.toString();
    document.getElementById("text").innerHTML = text;
}
 
time(2014,7);
</script>

15.如何在手機上禁止瀏覽器的網頁滾動

方法一：

<body ontouchmove="event.preventDefault()" >

方法二：

<script type="text/javascript"> document.addEventListener('touchmove', function(event) { event.preventDefault();}) </script>

16.改變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">

17.js判斷變量是否未定義的代碼

一般如果變量通過var聲明，但是并未初始化的時候，變量的值為undefined，而未定義的變量則需要通過 "typeof 變量"的形式來判斷，否則會發生錯誤。實際應用：variable有的頁面我們不定義,但有的頁面定義了，就可以需要這樣的判斷方法，沒有定義的就不執行。

if("undefined" != typeof variable){ 
    if(variable=="abc"){ 
        console.log('成功'); 
    } 
}

19.****行內級元素可以設置寬高嗎？有哪些？****

在面試時，當被問到行內級元素可否設置寬高時，根據我們的經驗往往會回答不能。但是這樣往往著了面試官的道，因為有一些特殊的行內元素，比如img，input，select等等，是可以被設置寬高的。一個內容
不受CSS視覺格式化模型控制，CSS渲染模型并不考慮對此內容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之為置換元素。比如img是一個置換元素，當不對它設置寬高時，它會按照本身的寬高進行顯示。所以這個問題的正確答案應該是置換元素可以，非置換元素不可以。

20.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;}');

21.form表單提交時設置編碼格式

<form name="form" method="post" action="XXXX" accept-charset="utf-8" onsubmit="document.charset='utf-8';"> //內容</form> 

22.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);

23.js強制手機頁面橫屏顯示

<script>
        // Bind an event to window.orientationchange that, when the device is turned,
        // gets the orientation and displays it to on screen.
        $( window ).on( "orientationchange", function( event ) {
             //alert (event.orientation )
            if (event.orientation=='portrait') {
                $('body').css('transform', 'rotate(90deg)');
            } else {
                $('body').css('transform', 'rotate(0deg)');
            }
        });
         
        // You can also manually force this event to fire.
        $( window ).orientationchange();
</script>