JavaScript Small skill Summary (recommended) _javascript tips

Don't say much nonsense, directly on dry goods.

The specific code looks like this:

/* @@ 截取 string length, Kanji 2 characters @ @return [string]+ ' ... '/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; --------------------------------------------------------------------------------/* @@ 对 Hide visible elements @@:visible
Determine if the 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{window.android.callAndroidFinish ();} --------------------------------------------------------------------------------/* @@ 对 to different styles for devices that hold different devices @@ 对 judge whether Some kind of equipment * *
<script type = "Text/javascript" > if (/(Ipad|ipod|ios)/i.test (navigator.useragent)) {Setactivestylesheet (" 
Pad.css "); 
else if (/(Android)/i.test (navigator.useragent)) {Setactivestylesheet ("common.css"); 
}else if (/(IPhone6)/i.test (navigator.useragent)) {Setactivestylesheet ("iphone6.css"); function Setactivestylesheet (filename) {document.write ("<link href=" +filename+ "rel=stylesheet>");} </ Script>--------------------------------------------------------------------------------/* @@ 回到 to the top of the animation @@ 回到 * */$ ('
A.top '). Click (function (e) {E.preventdefault (); $ (document.body). Animate ({scrolltop:0}, 800);}); --------------------------------------------------------------------------------/* @@ 检查 whether the picture is loaded @@
Sometimes you may want to check that the picture is completely loaded before you can follow up in the script: @@ 你 can also check that a particular picture is loaded by replacing the IMG tag with ID or class.
*/$ (' img '). Load (function () {console.log (' Image load successful ');}); --------------------------------------------------------------------------------/* @@ 动 damaged picture @@ 动 you find your site's picture link hangs up OneA replacement is very troublesome.
This simple code can be a big help; @@ 即使 If you don't have any broken links, adding this code won't have any effect.
*/$ (' img '). On (' Error ', function () {$ (this). Prop (' src ', ' img/broken.png ');}); 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 this code to add a class to the element when the user hovers, and then remove this class when the user leaves the mouse: */$ ('. btn '). Hover (function () {$ (this). addclass (' hover ');
Function () {$ (this). Removeclass (' hover ');});
-----------or---------$ ('. btn '). Hover (function () {$ (this). Toggleclass (' hover ');}); --------------------------------------------------------------------------------/* @@ 禁用 the input field @@ Sometimes you might want to make the form's submit button or its text input box unavailable until the user performs a specific behavior (such as confirming the check box "I have read this clause").
Add disabled attribute to your input, you can achieve your desired effect * * (' input[type= ' submit "]"). Prop (' disabled ', true);
$ (' input[type= "submit"]). Prop (' disabled ', false); --------------------------------------------------------------------------------/* @@ 停止 link loading @@ Sometimes you don't want the link to jump to a page or reload the page, and you want to do something else, such as triggering other scripts. The following code is a trick to prevent default behavior.
$ (' A.no-link '). Click (function (e) {E.preventdefault ();}); --------------------------------------------------------------------------------/* @@ 淡入/slide switch @@ 淡入 and slide are often used by us The animation effect of JQuery. Maybe you just want to show an element when a user clicks on something, and it's great to use FadeIn and Slidedown.
But if you want the element to appear on the first click, when the second click Disappears, the following code can be well done///Fade $ ('. btn '). Click (function () {$ ('. Element '). Fadetoggle (' slow ');});
Toggle $ ('. btn '). Click (function () {$ ('. Element '). Slidetoggle (' slow ');}); --------------------------------------------------------------------------------/* @@ 简单 accordion Effect @@
This is a quick and easy way to achieve the accordion effect. *//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;
}); --------------------------------------------------------------------------------/* @@ 使 two div heights as @@ 使 you might want to make two div
Have the same height, no matter what they have inside: * * $ ('. Div '). css (' Min-height ', $ ('. Main-div '). Height ()); This example sets the MIn-height means that it can be bigger than the main Div, but never smaller.
But there is a more flexible way to traverse a set of elements and then set the height to the highest value in the element: var $columns = $ ('. column ');
var height = 0;
$columns. each (function () {if ($). Height () > height) {height = $ (this). Height ();}});
$columns. Height (height);
If you want all columns to have the same height: var $rows = $ ('. Same-height-columns '); 
$rows. Each (the function () {$ (this). Find ('. Column '). Height ($ (this). Height ()); --------------------------------------------------------------------------------/* @@ 在 Outbound links in new tabs/Windows @@
Open an external link in a new tab or a new window and make sure that the inbound link opens in the same label or window: * * * (' a[href^= ' http '] '). attr (' target ', ' _blank ');
$ (' a[href^= '//"]). attr (' target ', ' _blank ');
$ (' a[href^= ' + Window.location.origin + ' "]). attr (' target ', ' _self '); --------------------------------------------------------------------------------/* @@ 通过 elements @@ 通过 using the text in JQuery Contains () selector, 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 (); --------------------------------------------------------------------------------/* @@ 视觉 changes trigger @@ 视觉 The user focus is on another label, or back to the label, triggers JavaScript: */$ (document). On (' Visibilitychange ', function (e) {if (e). Target.visibilitystate = = "visible") {Console.log (' Tab is now in view! ');} else if (e.target.visibilitystate = = "Hidde
N ") {Console.log (' Tab is now hidden! ');}); --------------------------------------------------------------------------------/* @Ajax called error handling @@ 当 an Ajax call returns 404 or 500 errors, error handling is performed. But if the processing is not defined, other jQuery code may stop working.
You can define a global Ajax error handling/$ (document) by following this code. AJAXERROR (Function (E, XHR, settings, error) {Console.log (error);}); --------------------------------------------------------------------------------/* @@ 插件 chain call @ @jQuery support chained call Plug-ins, To slow down the query DOM repeatedly and create multiple JQuery objects.
See the following example code * * (' #elem '). Show ();
$ (' #elem '). html (' bla ');
$ (' #elem '). Otherstuff ();
The above code can be greatly improved by chain operation: $ (' #elem '). Show (). html (' Bla '). Otherstuff ();
There is another way to cache elements in a variable (prefixed by $): var $elem = $ (' #elem ');
$elem. Hide ();
$elem. html (' bla ');
$elem. Otherstuff (); --------------------------------------------------------------------------------/* @Jq traverse Select all optional @@ */////////Select All (' #checkAll '). Click (function () {//To determine if V is selected
AR bischecked = $ (' #checkAll '). Is (': checked ');
var fruit = $ (' input[name= "check"]); Bischecked?
Fruit.attr (' checked ', true): fruit.attr (' checked ', false);
}); Anti-Select Traversal checkbox if the current selection is set to unchecked, vice versa $ ("#tabVouchList tr"). each (function () {if ($ ("td:eq (0) input[name= ' Check '), $ (thi s). Is (': Checked ')) {$ (this). attr (' checked ', false);} else {$ (this). attr (' checked ', true);}});

The above is a small series to provide you with the JS tips summary, I hope to help you!