JS常用代码

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>