【死记硬背】javascript常用代码或注意事项

 

★ 页面跳转

 

window.location.href='main.html'
页面跳转

 

★ 三目运算

 

x?y:z三目运算
x是一个boolean类型,若x为true,结果显示y,若x为false,则结果显示z.

var _this = ￥（this）；
$(this).find('.a').click(function(){
　　$(this).find().....//代表.a
　　_this.find()………………//需要父类的时候
});

★ javascript中new Date方法

new Date(2016, 0, 25);

是2016.1.25

js中月是0-11

 

★ 判断是否手机访问，自动跳转移动端

var is_mobile=function (){
 var arrs=['iphone','android'];
 var info=navigator.userAgent.toLowerCase();
 for(var i=0; i<arrs.length; i++){
  var result=info.indexOf(arrs[i]);
  if(result > -1){
   return true;
  }
 }
 return false;
}

if(is_mobile()){
window.location.href="http://wap.miit.gov.cn";
}

 

★ 网页上弹出新（浏览器）窗口，要求新窗口水平垂直居中

function openWin(qq,sitename) {
    //转向网页的地址;
    var url='http://wpa.qq.com/msgrd?v=3&uin='+qq+'&site=qq&menu=yes';
    //网页名称，可为空;
    var name=sitename;
    //弹出窗口的宽度;
    var iWidth=720;
    //弹出窗口的高度;
    var iHeight=600;
    //获得窗口的垂直位置
    var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
    //获得窗口的水平位置
    var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
    window.open(url, name, 'height=' + iHeight + ',,innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no');
}

 

★ 关于ajax，js原生方法和jquery方法，要求背诵

 

★ 关于添加事件监听器，js原生和jquery方法，要求背诵

 

★ bootstrap url tab

解决Twitter Bootstrap Tab URL链接问题

/**
 * Javascript to enable link to tab
 * 1、检测URL，实现通过URL传参（?id=item1）或（?id=item1#item2?nojump），自动打开指定标签页
 * 2、切换标签页后，修改页面hash(#id?nojump)，实现刷新页面仍留在原标签页上
 */

$(document).ready(function(){
    //得到页面url
    var url = document.location.toString();
    var xhtab = $("#xhTab");
    var newTabObj;
    //截取字符串，打开相应标签
    if (url.indexOf("?nojump")>0) {
        newTabObj = xhtab.find('a[href="'+'#'+url.split('#')[1].split('?nojump')[0]+'"]').tab('show');
    }else if (url.indexOf("?id=")>0) {
        newTabObj = xhtab.find('a[href="'+'#'+url.split('?id=')[1]+'"]').tab('show');
    }
}

    xhtab.find('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
        // 修改页面hash，以便刷新页面仍保留在当前标签页
        window.location.hash = e.target.hash+"?nojump";
    });
});

 

 

★ javascript事件委托和jQuery事件绑定on、off 和one 

需背诵

简要总结

$(XXX).bind("click",function(){}); 不能动态绑定（无法绑定至尚未加载的dom上），解绑使用.unbind("click")

动态绑定

了解即可

.live() 解绑使用 .die() 该方法在jquery 1.3 之后添加，1.7之后废弃，1.9之后删除

.delegate()和undelegate()在jquery 1.7之后被on方法整合替代了

需要记住

jquery 1.7以后推出的，on(),off(),one()

 

★关于Jquery的parent和parents

parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
可以看出parent取的很明确，就是当前元素的父元素；parents则是当前元素的祖先元素。下面列出例子说明：
<div id='div1'>
<div id='div2'><p></p></div>
<div id='div3' class='a'><p></p></div>
<div id='div4'><p></p></div>
</div>

$('p').parent()取到的是div2,div3,div4
$('p').parent('.a')取到的是div3
$('p').parent().parent()取到的是div1，这点比较奇特；不过Jquery对象本身的特点决定了这是可行的。
$('p').parents()取到的是div1,div2,div3,div4
$('p').parents('.a')取到的是div3

 

★屏蔽href跳转

应用场景：

使用锚链接跳转到指定区域：<a href="#artical">跳转到文章</a>

这时候需要js接入添加事件，但是不想浏览器URL中出现http://www.****.com#artical（某些特殊需求下不允许出现）

需要在该a标签绑定的事件的最后添加 return false;

如果 href中有链接，但是不想跳转的话也可以这样。

 

 

★浏览器判断

jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。

在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。 如果要全面支持 IE，并混合使用 jQuery 1.9 和 2.0， 官方的解决方案是：

<!--[if lt IE 9]>
    <script src='jquery-1.9.0.js'></script>
<![endif]-->
<!--[if gte IE 9]>
    <script src='jquery-2.0.0.js'></script>
<![endif]-->

从长久来看，这样有利于在复杂情况下根据浏览器特性进行分别处理， 而不是简单的检测浏览器类型和版本。 但目前很多旧程序的移植恐怕无法直接过渡为根据浏览器支持特性， 所以在网上找了一些能够直接替换的解决办法。

判断浏览器类型：

$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
$.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());

等号后面的表达式返回的就是 true/false， 可以直接用来替换原来的 $.browser.msie 等。

如需要检查是否为 IE6时，可以这么写：

// Old
if ($.browser.msie && 7 > $.browser.version) {}
// New
if ('undefined' == typeof(document.body.style.maxHeight)) {} 

检查是否为 IE 6-8：

if (!$.support.leadingWhitespace) {} 

下面  我们采取的思路是 使用jquery的继承机制 对jquery 1.11.1版本 进行扩展 使其支持 $.browser 方法，已达到兼容之前组件的目的。

jQuery.extend({
    browser: function() 
    {
        var
        rwebkit = /(webkit)\/([\w.]+)/,
        ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
        rmsie = /(msie) ([\w.]+)/,
        rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,    
        browser = {},
        ua = window.navigator.userAgent,
        browserMatch = uaMatch(ua);

        if (browserMatch.browser) {
            browser[browserMatch.browser] = true;
            browser.version = browserMatch.version;
        }
        return { browser: browser };
    },
});

function uaMatch(ua) 
{
        ua = ua.toLowerCase();

        var match = rwebkit.exec(ua)
                    || ropera.exec(ua)
                    || rmsie.exec(ua)
                    || ua.indexOf("compatible") < 0 && rmozilla.exec(ua)
                    || [];

        return {
            browser : match[1] || "",
            version : match[2] || "0"
        };
}

 

参考链接：

http://www.jb51.net/article/50463.htm

http://blog.csdn.net/loehuang/article/details/32347857

 

===============上面说的几个兼容的方法（都是百度搜来的）貌似都有问题，实测不行，有可能是调用不对？？？

 

我从jquery1.8.3中找到了相应的代码，然后单独建立js文件，放到jquery1.9.0以上版本文件后面引用，测试发现可以使用。

(function() {

    var matched, browser;

// Use of jQuery.browser is frowned upon.
// More details: http://api.jquery.com/jQuery.browser
// jQuery.uaMatch maintained for back-compat
    jQuery.uaMatch = function( ua ) {
        ua = ua.toLowerCase();

        var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
            /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
            /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
            /(msie) ([\w.]+)/.exec( ua ) ||
            ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
            [];

        return {
            browser: match[ 1 ] || "",
            version: match[ 2 ] || "0"
        };
    };

    matched = jQuery.uaMatch( navigator.userAgent );
    browser = {};

    if ( matched.browser ) {
        browser[ matched.browser ] = true;
        browser.version = matched.version;
    }

// Chrome is Webkit, but Webkit is also Safari.
    if ( browser.chrome ) {
        browser.webkit = true;
    } else if ( browser.webkit ) {
        browser.safari = true;
    }

    jQuery.browser = browser;

    jQuery.sub = function() {
        function jQuerySub( selector, context ) {
            return new jQuerySub.fn.init( selector, context );
        }
        jQuery.extend( true, jQuerySub, this );
        jQuerySub.superclass = this;
        jQuerySub.fn = jQuerySub.prototype = this();
        jQuerySub.fn.constructor = jQuerySub;
        jQuerySub.sub = this.sub;
        jQuerySub.fn.init = function init( selector, context ) {
            if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) {
                context = jQuerySub( context );
            }

            return jQuery.fn.init.call( this, selector, context, rootjQuerySub );
        };
        jQuerySub.fn.init.prototype = jQuerySub.fn;
        var rootjQuerySub = jQuerySub(document);
        return jQuerySub;
    };

})();

遇到这个问题的时候，有用到一个插件，那个插件用了上面的方法，导致插件依赖jquery1.8版本，不能更新，后来作者更新了插件，解决了这个问题。

回忆一个这是哪个插件，然后又是怎么解决的 

 

 

★json 

1、拼接成json字符串，只要用遍历耐心拼就好，没什么难点

2、json字符串转为json。

$(function(){
    //测试 结果不是倒的啊，为什么上面那个json对象中的属性倒置了？
    //结果 woc，这货是按字母顺序排序的。
    var jsonA = [];
    var json1 = '{"b":"1","a":"2"}';
    var json2 = '{"b":"2","a":"4"}';
    var json3 = '{"c":"2","d":"4"}';
    console.log(json1);
    console.log(json2);
    jsonA.push($.parseJSON(json1)); //jquery提供的方法
    jsonA.push(JSON.parse(json2));  //浏览器提供的方法，ie9一下可能不兼容
    jsonA.push(eval("(" + json3 + ")")); //eval方法
    console.log(jsonA);
    alert(JSON.stringify(jsonA));
});

 

 

★ js中写一个function，默认是绑定到window对象上的

比如

function f() {
  return '姓名：'+ this.name;
}

var name = "ceshi"

f();//"姓名：window"

因为，
上面等同于 
window.f = function(){ return '姓名：'+this.name }
window.name = "ceshi"

出处：js中的this关键字 http://javascript.ruanyifeng.com/oop/this.html

 

★弹出浏览器小窗口（没有收藏栏标签栏状态栏）

window.open('https://www.baidu.com','addFileWindow','toolbar=no,location=no,resizable=no, height=500, width=300,,scrollbars=no ,left=950,top=100');

适合聊天客服或音乐播放器类页面使用