Javascript小技能总结(推荐)

废话不多说，直接上干货。。

具体代码如下所示：

var subString = function(str, len) {
var newLength = 0;
var newStr = "";
var chineseRegex = /[^x00-xff]/g;
var singleChar = "";
var strLength = str.replace(chineseRegex, "**").length;
for (var i = 0; i < strLength; i++) {
singleChar = str.charAt(i).toString();
if (singleChar.match(chineseRegex) != null) {
newLength += 2;
} else {
newLength++;
}
if (newLength > len) {
break;
}
newStr += singleChar;
}
if (strLength > len) {
newStr += "...";
}
return newStr;
}
--------------------------------------------------------------------------------

function close_window(){
var flag=false;
$(".dialog_con").each(function(){
if($(this).is(":visible")){
flag=true;
}
})
if(flag==true){
$(".dialog_con").hide();
$(".dialogbox").hide(); 
}else{ 
window.android.callAndroidFinish();
}
} 
--------------------------------------------------------------------------------


--------------------------------------------------------------------------------

$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
--------------------------------------------------------------------------------

$('img').load(function () {
console.log('image load successful');
});
--------------------------------------------------------------------------------

$('img').on('error', function () {
$(this).prop('src', 'img/broken.png');
});
--------------------------------------------------------------------------------

$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
-----------或---------
$('.btn').hover(function () {
$(this).toggleClass('hover');
});
--------------------------------------------------------------------------------

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

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

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

// 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').css('min-height', $('.main-div').height());
该例设置了 min-height，意味着它可以比主要 div 更大，但永远不能更小。但有一个更加灵活的方法是遍历一组元素的设置，然后将高度设为元素中的最高值：
var $columns = $('.column');
var height = 0;
$columns.each(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$columns.height(height);
如果你想让所有列都有相同高度：
var $rows = $('.same-height-columns');
$rows.each(function () {
$(this).find('.column').height($(this).height());
}); 
--------------------------------------------------------------------------------

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

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

$(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!');
}
});
--------------------------------------------------------------------------------

$(document).ajaxError(function (e, xhr, settings, error) {
console.log(error);
});
--------------------------------------------------------------------------------

$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();
上面这段代码，可以通过链式操作大大改进：
$('#elem').show().html('bla').otherStuff();
还有另外一种方法，把元素缓存在变量中（前缀是 $ ）：
var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();
--------------------------------------------------------------------------------

//全选 全不选
$('#checkAll').click(function () {
//判断是否被选中
var bischecked = $('#checkAll').is(':checked');
var fruit = $('input[name="check"]');
bischecked ? fruit.attr('checked', true) : fruit.attr('checked', false);
});
//反选 遍历checkbox 如果当前为选中 就设置为 不选中 反之相同
$("#tabVouchList tr").each(function () {
if ($("td:eq(0) input[name='check']", $(this)).is(':checked')) {
$(this).attr('checked', false);
} else {
$(this).attr('checked', true);
}
});

以上所述是小编给大家提供的js小技巧总结，希望对大家有所帮助！