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阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341