Javascript Tricks

发表于   |   分类于   |     |   次阅读

最开始学习JS的资料是JavaScript高级程序设计，非常厚的一本书，当然，我没有看完，工作中需要什么东西我就学什么东西，所以有很多地方并不了解实现的原理，所以就填了很多坑咯。一边填坑一边快乐的编程。

正如标题所说，我介绍一下自己常用的一些javascript小技巧。

URL取相应的字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//获取URL参数，这个是从当前页面取得连接
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}
//获取URL一组参数
function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^/])/,'/$1'),
        relative: (a.href.match(/tps?:\/\/[^/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };
}
var testURL = parseURL('http://yangcongtao.com/h5/product?product_id=374&method=info&app_ver=1.3&platform=3&uid=0&channel_num=wx351');
console.log(testURL.params);

整数的操作

1
2
var foo = (12.4 / 4.13) | 0; //结果为3
var bar = ~~(12.4 / 4.13); //结果为3

禁止别人以iframe加载你的页面

1
if (window.location != window.parent.location) window.parent.location = window.location;

JS生成随机字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function generateRandomAlphaNum(len) {
    var rdmString = "";
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
}

generateRandomAlphaNum(5);


function getCategory(age) {
    var category = "";
    switch (true) {
        case isNaN(age):
            category = "not an age";
            break;
        case (age >= 50):
            category = "Old";
            break;
        case (age <= 20):
            category = "Baby";
            break;
        default:
            category = "Young";
            break;
    };
    return category;
}

getCategory(5)

var numbers = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Math, numbers);
var minInNumbers = Math.min.apply(Math, numbers);

console.log(maxInNumbers);
console.log(minInNumbers);

判断非空
var hello;
if (typeof hello !== "undefined" && hello !== null) {
    alert("hello isn't a null object!");
}
判断是否是数字
function isNumber(n){
    return !isNaN(parseFloat(n)) && isFinite(n);
}

JS对数组的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var argArray = Array.prototype.slice.call("hello world");
console.log(argArray);

var array1 = [12 , "foo" , {name: "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
console.log(array1);

var arr = ["a", "b", "c"];
typeof arr;   // return "object"
arr  instanceof Array // true
arr.constructor();  //[]

String.prototype.trim = function(){return this.replace(/^s+|s+$/g, "");};

"  fgdsg gfdgfd a ds ".prototype.trim = function(){return this.replace(/^s+|s+$/g, "");};

console.log("  fgdsg gfdgfd a ds ".trim())

typeof : a JavaScript unary operator used to return a string that represents the primitive type of a variable, don’t forget that typeof null will return “object”, and for the majority of object types (Array, Date, and others) will return also “object”.
constructor : is a property of the internal prototype property, which could be overridden by code.
instanceof : is another JavaScript operator that check in all the prototypes chain the constructor it returns true if it’s found and false if not.

BACK TO TOP

回到顶部按钮通过使用 jQuery 中的 animate 和 scrollTop方法，你无需插件便可创建一个简单地回到顶部动画,将 scrollTop 的值改为你想要 scrollbar 停止的地方。需要做的就是，设置在800毫秒内回到顶部。

1
2
3
4
5
// Back to top
$('.top').click(function (e) {
  e.preventDefault();
  $('html, body').animate({scrollTop: 0}, 800);
});

1
2
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

预加载图片如果你的页面使用了大量不能初始可见的图片（例如绑定在 hover 上），预加载它们是十分有用的。

1
2
3
4
5
6
7
$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $('<img>').attr('src', arguments[i]);
  }
};

$.preloadImages('img/hover-on.png', 'img/hover-off.png');

检查图片是否加载完毕有时你或许要检查图片是否完全加载完毕，才能在脚本中进行后续操作,也可以通过把 img 标签替换成 ID 或 class，来检查特定图片是否加载完成。

1
2
3
$('img').load(function () {
  console.log('image load successful');
});

自动修复损坏的图片如果你发现自己网站的图片链接挂了，一个一个替换很麻烦。这段简单的代码可以帮上大忙，即使你没有任何损坏的链接，增加这段代码也不会有什么影响。

1
2
3
4
5
$('img').on('error', function () {
  if(!$(this).hasClass('broken-image')) {
    $(this).prop('src', 'img/broken.png').addClass('broken-image');
  }
});

Hover上的Class切换如果用户的鼠标悬停在页面上某个可点击元素时，你想要改变这个元素的视觉表现。可以使用下面这段代码，当用户悬停时，为该元素增加一个class；当用户鼠标离开后移除这个class，如果你仅需增加必须的 CSS。如果需要更简单的方式，还可以使用 toggleClass 方法：

1
2
3
4
5
6
7
8
9
$('.btn').hover(function () {
  $(this).addClass('hover');
}, function () {
  $(this).removeClass('hover');
});

$('.btn').hover(function () {
  $(this).toggleClass('hover');
});

禁用字段

禁用input字段,有时你也许想让表单的提交按钮或其文本输入框变得不可用，直到用户执行了一个特定行为（例如确认 “我已经阅读该条款” 的复选框）。增加 disabled attribute 到你的 input，就可以实现自己想要的效果，

1
$('input[type="submit"]').prop('disabled', true);

当你想把 disabled 的值改为 false 时，仅需在该 input 上再运行一次 prop 方法。

1
$('input[type="submit"]').prop('disabled', false);

停止链接加载有时你不想链接跳转到某个页面或重加载该页面，而希望可以做一些其他事情，比如触发其他脚本。

1
2
3
$('a.no-link').click(function (e) {
    e.preventDefault();
});

选择器缓存，在每次使用jquery都会先来这么几个$(‘.element’)，为了使DOM性能更佳，可以先缓存元素

1
var blocks = $('#blocks').find('li');

OK了，现在你可以任意使用blocks了，从而避免每次去查询这些节点

1
2
3
4
5
6
7
$('#hideBlocks').click(function () {
  blocks.fadeOut();
});

$('#showBlocks').click(function () {
  blocks.fadeIn();
});

淡入淡出与滑动是我们经常使用jQuery做成的动画效果。或许你只是想在用户点击某物时展现一个元素，使用fadeIn和 slideDown 都很棒。但如果想让该元素在第一次点击时显现，第二次点击时消失，下面的代码可以很好地完成这件事情。

1
2
3
4
5
6
7
8
9
// Fade
$('.btn').click(function () {
  $('.element').fadeToggle('slow');
});

// Toggle
$('.btn').click(function () {
  $('.element').slideToggle('slow');
});

手风琴效果

简单的手风琴效果，增加这段脚本后，你所需做的所有事就是，查看脚本是否在必须的 HTML 中正常工作。

1
2
3
4
5
6
7
8
9
10
// Close all panels
$('#accordion').find('.content').hide();

// Accordion
$('#accordion').find('.accordion-header').click(function () {
  var next = $(this).next();
  next.slideToggle('fast');
  $('.content').not(next).slideUp('fast');
  return false;
});

使两个Div高度一样，有时你也许想让两个 div 拥有同样高度，不管它们里面有什么内容：

1
$('.div').css('min-height', $('.main-div').height());

该例设置了 min-height，意味着它可以比主要 div 更大，但永远不能更小。但有一个更加灵活的方法是遍历一组元素的设置，然后将高度设为元素中的最高值：

1
var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

如果你想让所有列都有相同高度

1
2
3
4
var $rows = $('.same-height-columns');
$rows.each(function () {
  $(this).find('.column').height($(this).height());
});

在新标签/窗口打开站外链接，在一个新标签或者新窗口中打开外置链接，并确保站内链接会在相同的标签或窗口中打开，注意：window.location.origin 在 IE 10 中不可用，该 issue 的修复方法。

1
2
3
$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

通过文本找到元素,通过使用jQuery中的contains()选择器，你可以找到某个元素中的文本。如果文本不存在，该元素将会隐藏

1
2
var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

视觉改变触发，当用户焦点在另外一个标签上，或重新回到标签时，触发JavaScript

1
2
3
4
5
6
7
$(document).on('visibilitychange', function (e) {
  if (e.target.visibilityState === 'visible') {
    console.log('Tab is now in view!');
  } else if (e.target.visibilityState === 'hidden') {
    console.log('Tab is now hidden!');
  }
});

Ajax调用

Ajax调用的错误处理，当某次 Ajax 调用返回 404 或 500 错误，就会执行错误处理。但如果没有定义该处理，其他 jQuery 代码或许会停止工作。可以通过下面这段代码定义一个全局 Ajax 错误处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$loading;
function dataLoad() {
    $loading.show();
    $.ajax({
        url: your_url,
        dataType: 'json',
        type: 'get',
        success: function (data) {
            $loading.hide();
        },
        error: function (xhr, status, msg) {
            console.log(msg);
        }
    });
}
$(document).ajaxError(function (e, xhr, settings, error) {
  console.log(error);
});

插件链式调用，jQuery 支持链式调用插件，以减缓反复查询 DOM，并创建多个 jQuery 对象。看下面示例代码：

1
2
3
$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();

上面这段代码，可以通过链式操作大大改进，或者是把元素缓存在变量中（前缀是 $ ）：

1
2
3
4
$('#elem')
  .show()
  .html('bla')
  .otherStuff();

1
2
3
4
var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();

参考文献
https://github.com/AllThingsSmitty/jquery-tips-everyone-should-know