Javascript small skills summary (recommended)

/*
 @@Seave the string length, Chinese characters count 2 characters
 @@return [string]+'...'
 */
var subString = function(str, len) {
var newLength = 0;
var newStr = "";
var chineseRegex = /[^\x00-\xff]/g;
var singleChar = "";
var strLength = (chineseRegex, "**").length;
for (var i = 0; i < strLength; i++) {
singleChar = (i).toString();
if ((chineseRegex) != null) {
newLength += 2;
} else {
newLength++;
}
if (newLength > len) {
break;
}
newStr += singleChar;
}
if (strLength > len) {
newStr += "...";
}
return newStr;
}
--------------------------------------------------------------------------------
/*
 @@Hide visible elements
 @@:visible determines whether it is a courseware element
 */
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{ 
();
}
} 
--------------------------------------------------------------------------------
/*
 @@Reference different styles to devices that hold different devices
 @@ if determines whether a device is a certain type of device
 */
<script type = "text/javascript" >
if (/(iPad|iPod|iOS)/()) { 
setActiveStyleSheet(""); 
} else if (/(Android)/()) {
setActiveStyleSheet(""); 
}else if (/(iPhone6)/()) {
setActiveStyleSheet(""); 
}
function setActiveStyleSheet(filename){
("<link href="+filename+" rel=stylesheet>");
}
</script>
--------------------------------------------------------------------------------
/*
 @@Back to top animation
 @@
 */
$('').click(function (e) {
();
$().animate({scrollTop: 0}, 800);
});
--------------------------------------------------------------------------------
/*
 @@Check whether the image has been loaded
 @@Sometimes you may have to check whether the image is fully loaded before you can perform subsequent operations in the script:
 @@You can also check whether a specific image is loading by replacing the img tag with ID or class.
 */
$('img').load(function () {
('image load successful');
});
--------------------------------------------------------------------------------
/*
 @@The correct number Repair damaged pictures
 @@If you find that the image links of your website are hung up, it will be troublesome to replace them one by one.  This simple code can help a lot;
 @@Even if you don't have any broken links, adding this code won't have any effect.
 */
$('img').on('error', function () {
$(this).prop('src', 'img/');
});
--------------------------------------------------------------------------------
/*
 Class toggle on @@Hover
 @@If the user's mouse hovers over a clickable element on the page, you want to change the visual representation of the element.  You can use the following code to add a class to the element when the user hovers; remove this class when the user's mouse leaves:
 */
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
-----------or---------
$('.btn').hover(function () {
$(this).toggleClass('hover');
});
--------------------------------------------------------------------------------
/*
 @@Disable input field
 @@Sometimes you might want to make the form's submission button or its text input box unavailable until the user performs a specific behavior (such as confirming the "I've read this clause" checkbox).  Add disabled attribute to your input to achieve the desired effect
 */
$('input[type="submit"]').prop('disabled', true);
$('input[type="submit"]').prop('disabled', false);
--------------------------------------------------------------------------------
/*
 @@Stop link loading
 @@ Sometimes you don't want the link to jump to a page or reload that page, but hope to do something else, like triggering other scripts.  The following code is a tip for prohibiting default behavior
 */
$('-link').click(function (e) {
();
});
--------------------------------------------------------------------------------
/*
 @@fade/sliding switch
 @@Fake in and swipe are animation effects we often use jQuery.  Maybe you just want to show an element when the user clicks something, using fadeIn and slideDown is great.  But if you want the element to appear on the first click and disappear on the second click, the following code can be done well
 */
// Fade
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
$('.element').slideToggle('slow');
});
--------------------------------------------------------------------------------
/*
 @@Simple accordion effect
 @@This is an easy way to quickly achieve the accordion effect
 */
// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function () {
var next = $(this).next();
('fast');
$('.content').not(next).slideUp('fast');
return false;
});
--------------------------------------------------------------------------------
/*
 @@Make the two Divs the same height
 @@Sometimes you might want two divs to have the same height, no matter what they have:
 */
$('.div').css('min-height', $('.main-div').height());
This example sets min-height，Meaning it can be more important than div Bigger，But it can never be smaller。But there is a more flexible way to iterate over a set of elements' settings，Then set the height to the highest value in the element：
var $columns = $('.column');
var height = 0;
$(function () {
if ($(this).height() > height) {
height = $(this).height();
}
});
$(height);
If you want all columns to have the same height：
var $rows = $('.same-height-columns');
$(function () {
$(this).find('.column').height($(this).height());
}); 
--------------------------------------------------------------------------------
/*
 @@On the new tag/Open an off-site link in the window
 @@Open external links in a new tab or window, and make sure that the site links will open in the same tab or window:
 */
$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' +  + '"]').attr('target', '_self');
--------------------------------------------------------------------------------
/*
 @@Finding elements through text
 @@ By using the contains() selector in jQuery, you can find the text in an element.  If the text does not exist, the element will be hidden:
 */
var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();
--------------------------------------------------------------------------------
/*
 @@Visual change trigger
 @@ When the user focuses on another tag, or returns to the tag, trigger JavaScript:
 */
$(document).on('visibilitychange', function (e) {
if ( === "visible") {
('Tab is now in view!');
} else if ( === "hidden") {
('Tab is now hidden!');
}
});
--------------------------------------------------------------------------------
/*
 Error handling of @@Ajax calls
 @@When an Ajax call returns an error of 404 or 500, error processing will be performed.  But if the processing is not defined, other jQuery codes may stop working.  You can define a global Ajax error handling through the following code
 */
$(document).ajaxError(function (e, xhr, settings, error) {
(error);
});
--------------------------------------------------------------------------------
/*
 @@Plugin chain call
 @@jQuery supports chained calls to slow down repeated DOM queries and create multiple jQuery objects.  See the following sample code
 */
$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();
The above code，Can be greatly improved through chain operation：
$('#elem').show().html('bla').otherStuff();
There is another way，Cache elements in variables（The prefix is $ ）：
var $elem = $('#elem');
$();
$('bla');
$();
--------------------------------------------------------------------------------
/*
 @@Jq Traversal Select all No select non-select
 @@
 */
//Select all$('#checkAll').click(function () {
//Judge whether it is selectedvar bischecked = $('#checkAll').is(':checked');
var fruit = $('input[name="check"]');
bischecked ? ('checked', true) : ('checked', false);
});
//Deselect traversal checkbox If it is currently selected, set to Unchecked and the same is true.$("#tabVouchList tr").each(function () {
if ($("td:eq(0) input[name='check']", $(this)).is(':checked')) {
$(this).attr('checked', false);
} else {
$(this).attr('checked', true);
}
});