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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,242评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,769评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,484评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,133评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,007评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,080评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,496评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,190评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,464评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,205评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,567评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2赞 335