JS's summary Notes

JS's summary notesI. Lexical structure1. Case-sensitive2. Note//single line/* Multiline comment * /3, the literal quantity (direct quantity literal)12//Number 5.8//decimal "hello" ' hello ' true/js/gi//Regular NULL//null {X:1,Y:2}[1,2,3,4]4, identifier (variable) and reserved word 5, semicolon can be omitted but may cause problems, JS will automatically complement; var y = X+f (a+b). ToString () is equivalent to var y = x+f (a+b). ToString ();ii. types, values, and variables1, the original type number, string and Boolean null null undefined undefined 2, Object Type 3, class Array Function Date RegExp Error4, JS parser integrated garbage collection 5, any JS value can be converted to a Boolean value undef Inednull0-0nan "" are converted to false6. Packaging Objectsvar s= "Hello"; Primitive type (no method) S.len = 4; When a property or method of the original type is called (the original type is not a property and method)////As long as a property or method referencing a string is called, the new string (s) is invoked to wrap the original type into an object//After calling S.len is the property and method that invokes the string object.   Once the reference is finished, the newly created temporary object will destroy var n = s.len; This is Undefinedalert (n);//A temporary object that is created when a property or method of a string Boolean number is called.  The wrapper object shows the definition wrapper object var s = new String ("Hello") var s = "Hello"; are different 7, = = and = = =8. Type conversionvar n = 17;alert (n.tostring (2));  Binary 10001alert (n.tostring (8)); 021alert (N.tostring (16));  0x21alert (n.tostring (10)); Alert (n.tostring ()); 9, toString () valueOf () var date = new Date (2011,1,3);d ate.valueof () returns the number of milliseconds represented by the time 10, JS is the dynamic type var n = 10  ; The type of the variable is not determined until the program is run 11, variable scope function scope and declaration of variable declaration defined in advance function automatically advance to the top of the function 12, scope chain scope chain in the function body without functions, the scope chain has two objects, the first is to define function parameters and local variables of the object, The second is a global object. Within a nested function body, there are at least three objects on the scope chain. When a function is defined, it holds a scope chain. When the function is called, it creates a new object to store its local variables, and adds the object to the saved scope chain, while creating a new "chain" that represents the scope of the function call. For nested functions each time an external function is called, the inner function is redefined again. The scope chain is different each time an external function is called. 13, delete in eval voidFifth Chapter Object1. Basic operation of object create set query Delete Test Enumerate2, object property properties writable enumerable configurable (can be deleted) 3, object's Object attribute object's prototype prototype object type The three ways to add new attributes//create objects to the extended tag of the string object4. Direct volume of objectsvar empty = {};var point = {x:0,y:0};5. New Object Creationvar o = new Object ();  Null object and {} var a = new Array (), 6, Object.create () var O1 = Object.create ({x:1,y:2});       O1 inherits from Object prototype {X:1,y:2}var O2 = object.create (null);  O2 does not inherit any properties and methods var O3 = Object.create (Object.prototype); The empty object is the same as the {} new object ()7. Operation of attributes as an object of an associative arrayObject.propertyobject["Property"] hash map dictionary associative array8. InheritanceJS inheritance can only get the value of the property from the parent class, and cannot modify the prototype chain if the object book is null or undefined book.subtitle.length will error resolution var len = Book && Book.subtitle & amp;& book.subtitle.length; Delete attribute Delete Book.subtitle detection property in Hasownpreperty () propertyisenumerable () var o = {x:1}; "X" in O "toString" in Ohasownpreperty (); Determines whether the property is own. The Inherited property returns Falsepropertyisenumerable () only for its own property, and can be enumerated to get all properties Object.keys () Object.getownpropertynames ()9. Attribute getter and Settervar o = {x:0, y:1, set R (value) {value = THIS.R;}, get R () {return this.x + This.y;}}; X data Properties, R accessor properties10. Attribute PropertiesEcmascript5 old IE does not support the following usage Data property attributes: Value-writable writable enumerable enumerable configurable configurable accessor property attributes: Get Set Enumerable enumerable configurable configurable//return {value:1,writable:true,emunerable:true,configurable:true} Object.getownpropertydescriptor ({x:1},x)//Cannot find property returned undefined attribute property cannot modify inherited property attributes Object.defineproperty ()// Set non-enumerable property var o = {};object.defineproperty (o, "x", {value:1,writable:true,emunerable:false,configurable:true})// Set read-only Object.defineproperty (O, "x", {writable:false}) to modify multiple attribute Properties object.defineproperties () extension Object.prototype book P13711. Three properties of an objectPrototype class extensible attribute the prototype of the query object Ecmascript5 object.getprototypeof (O1) ECMASCRIPT3 O1.constructor.prototype objects created by the object's direct amount or New object () contain a constructor property, which is the object () The constructor of Constructor.prototype is the real prototype p.isprototypeof (O) detects whether the object P is the prototype of O//Gets the type string of the object Object.prototype.toString.call (O1).  Slice (8,-1) 12, whether the object's extensibility object can be added to the property object.preventextensions () Setting object is not extensible object.isextensible () Object.seal () In addition to setting the object to not be extensible, set the property to non-configurable object.freeze () In addition to setting the object to not be extensible, set the property to not be configured, and set the property to read-only8th Chapter Function1. Function call, method callfunction T () {}t (); The function call this is the global object in strict mode is Undefinedvar o = {a:function () {}};o.a () method call this is the object that is currently called2. Constructor callvar o = new Object (); var o= new Object;o inherits from the prototype property of the constructor inside this is this object var r = new O.M ();3, P184The execution of the function is scoped to the scope chain, which is created when the function is defined. The nested function f () is defined in this scope chain where the variable scope is the local variable scope chain call S () will create the function S's execution environment (the calling object), place the object at the beginning of the list, then link the calling object of the function T to the next, and finally the global object.  Then look for the variable from the beginning of the list name call SS () SS () ==> T () ==> windowname= "Lwy";      function T () {var name= "Tlwy";  function S () {var name= "Slwy";      Console.log (name);      } function ss () {Console.log (name);      } s ();  SS ();  } t (); Each time a function is called, a new scope chain is generated. Including the new internal variables what is jquery? Www.github.com?jQuery is actually a bunch of JS function, is the ordinary JS, but the application of a wide range, forming the industry standard. Reference books: Sharp jQuery? Study Reference: http://www.w3school.com.cn/ jquery/? Official website: http://jquery.com/?2. The focus of jquery? 2.1 jquery Entry function (Global Metropolis)? 2.2 jquery selector (actually CSS selector)? 2.3 jquery's Dom operation? 2.4 jquery's style operation? 2.5 jquery's event handlingentry function for 3.jQuery? 3.1 syntax? JQuery (document). Read (function () {});? $ (function () {});//**?window.onlaod = function () {}?$ = = = jquery//$ is the alias of the jquery global function. 3.2 Notes: (emphasis)? Document ready: HTML text File is ready, that is, the DOM tree creation is complete. You can do DOM operations.? IMPORTANT: Is the HTML page download complete and ready? Window.onload: Is the entire page all the resources are loaded complete, pictures, JS, CSS and so on ...? 3.3 Document loading Order: (emphasis)? Download HTML page, parse HTML tag, encounter link tag to load CSS, encounter script to load JS.4. JQuery Select element selection4.1 jquery Selector? 4.1.1 ID Selector (JS generally try to use the ID selector, the most efficient) (focus)? $ ("#id"). html (); 4.1.2 Class selector (emphasis)? $ (". ClassName"). Text (); 4.1.3 Tag Selector (emphasis)? $ (' P '). click ();? 4.1.4 Property selector? $ ("Li[id]"), $ ("li[id= ' link ')"). FadeIn ();? 4.1.5-level selector (focus)? $ ("li. Link"). Show ();? 4.1.6 Parent-Child selector? $ ("ul > li")? 4.1.7 Pseudo class selector? $ ("P:first")? $ ("UL Li:eq (3)")? 4.1.8 form selector? $ (": Text")? $ (": CheckBox")? $ (': Checked ")4.2 Selector Rollup* $ ("*") all elements #id $ ("#lastname") id= "LastName" Elements. Class $ (". Intro") All class= elements of "Intro" element $ ("P") all <p> elements. Class.class $ (". Intro.demo") All class = "Intro" and Class= the "demo" element: First $ ("P:first") the initial <p> element: Last $ ("P:last") Final <p> element: even $ ("tr: Even ") all even <tr> elements: Odd $ (" tr:odd ") all odd <tr> elements: EQ (index) $ (" UL Li:eq (3) ") The fourth element in the list (index  Starting from 0): GT (NO) $ ("UL li:gt (3)") list index greater than 3 element greater Than:lt (NO) $ ("UL Li:lt (3)") list index less than 3  The element less than:not (selector) $ ("Input:not (: Empty)") all non-nullable input elements: header $ (": Header") All header elements 4.3 jquery selection method?4.3.1 getting the parent element?     * $ (selector). parent ();    Get direct parent?? * $ (selector). Parents (' P ');    Get all parent elements until HTML? 4.3.2 gets the elements of descendants and descendants?   * $ (selector). Children ();    Get direct child elements?? * $ (selector). FIND ("span");    Get all the descendant elements??    * The Find method may use more. 4.3.3 Gets the elements of a sibling?    * $ (selector). Siblings ()//All sibling nodes??    * $ (selector). Next ()//Next node??    * $ (selector). Nextall ()//all nodes behind??    * $ (selector). Prev ()//front of a sibling node??    * $ (selector). Prevall ()//front of all sibling nodes? 4.3.4 Filter Method?        * $ ("div p"). Last ();    Take the last element??       * $ ("div p"). First ();    Take the first element??             * $ ("P"). EQ (1);    Go to nth element??  * $ ("P"). Filter (". Intro");    Filter, select all P tags with. Intro class??    $ (' P.intro ')??     * $ ("P"). Not (". Intro"); It's just the opposite of the FILETR.5.jQuery DOM operation 5.1 get HTML content$ (selector). Text ()-Sets or returns the text content of the selected element $ (selector). HTML ()-Sets or returns the contents of the selected element (including HTML tags) $ (selector). Val ()-Sets or returns the value of a form field?    Gets and sets the same method name, using different parameters to determine whether to get or set the value?    $ ("#blin"). Text ("Bever");?? var txt = $ ("#blin"). text ();? Using HTML to create the DOM is more efficient. Much larger than: Document.createelement ();5.2 Style Actions?5.2.1 Basic Style Operation?    $ (selector). CSS ("Color", "Red") |css ({}) Sets or returns the style attributes of the matching element.    $ (selector). Height () Sets or returns the height of the matching element. $ (selector). Offset (). left = {left:99, top:22} returns the position of the first matching element relative to the document.    Left,top??    $ (selector). OffsetParent () returns the nearest positioned ancestor element.?    $ (selector). Position () returns the position of the first matching element relative to the parent element.    $ (window). ScrollLeft () Sets or returns the offset of the matching element to the left of the scroll bar.    $ (window). scrolltop (0) Sets or returns the offset of the matching element at the top of the scroll bar.    <!--onscroll-->??    $ (selector). On ("Scroll", function () {});????    $ (selector). Width () Sets or returns the width of the matching element. 5.2.2 Style class operation as far as possible the style class, less directly manipulate CSS properties?     $ (selector). addclass (' class ');    Adds the specified class name to the matching element.  $ (selector). Removeclass (' class ');    Removes all or the specified class from all matching elements.    $ (selector). Toggleclass (' class ') adds or removes a class from the matching element.?? $ (selector). Hasclass (' class ') checks whether the matching element owns the specified class.5.3 Property Operations$ (selector). attr ("id") Sets or returns the property and value of the matching element $ (selector). REMOVEATTR () removes the specified property from all matching elements.5.4 Dynamic Creation$ (selector). Append ()-Inserts the contents at the end of the selected element $ (selector). Append (node) $ (selector). Append (' <div></div> ') $ (selector). AppendTo ();    -Append to: $ (selector). Prepend ()-Inserts the content $ (selector) at the beginning of the selected element. After ()-Inserts the contents $ (selector) after the selected element. Before ()-Insert a content case before the selected element 04 City selection case. html6. Event Handling6.1 Simple Event binding method?. Click (hander). Click ()//Bind the event or trigger the Click event?. Blur ()//Lost focus event, ibid. Hover (Mousein, MouseLeave)//mouse move in, move out? Mouseout: triggers when the mouse leaves the element and its child elements. MouseLeave: Triggers when the mouse leaves itself, the child element does not trigger. Dbclick () Double click? change changes, such as: text box send changes, down list changes, etc. ...? Focus gets the spotlight? KeyUp, KeyDown, KeyPress: Keyboard keys are pressed.? MouseDown, MouseOver?6.2 How to bind eventsBind mode (not recommended, 1.7 after the jquery version is on replace)? Syntax format:. bind (EventType [, EventData], handler)? parameter description? The first parameter: event type? Second argument: The data object passed to the event response method    , you can omit the. How to get data in an event response method: E.data? The third parameter: Event response method? The second argument can be omitted.    For example:?? $ ("P"). Bind ("click", Function (e) {??//Event Response Method??    });???? $ ("P"). On (' click ', Function (e) {??//Event Response Method?? })6.3 Delegate Way(Recommended, high performance, supports dynamically created elements) * Syntax format: $ (selector). Delegate (selector, EventType, handler) * Syntax Description:-First parameter: selector, sub-selector-second parameter: Event Type-third parameter: Event response method "' For example: $ (". Parentbox "). Delegate (" P "," click ", Function () {//For. Parentbox all the P tag binding events below}); $ (". Parentbox"). On ("click", "P", function () {//For. Parentbox all the P tag binding events below}); "* Advantage: High Efficiency *6.4 How one event is bound*. One (events [, data], handler) For example: $ ("P"). One ("click", Function () {alert (this). text ());    }); $ ("P"). On ("click", Function () {$ (this). Off (' click ');//The event method executes once, immediately unbind the event})6.5 on Bind mode(Consolidated bind, Delegate recommended)) after the jQuery1.7 version, jquery uses on to unify all the method syntax formats for event handling: $ (selector). On (events [, selector] [, data], Handler) parameter description: First parameter: Events, event name the second parameter: selector, similar to delegate the third parameter: The parameter passed to the event response method fourth parameter: handler, event handling methods such as://Bind a method$ ("#dataTable tbody tr"). On ("click", Function () {Console.log ($ (this). text ()); });//Bind events to child elements$ ("#dataTable tbody"). On ("click", "TR", function () {Console.log (). text ()); });//How to bind multiple events$ ("Div.test"). On ({click:function () {$ (this). Toggleclass ("active");      }, Mouseenter:function () {$ (this). AddClass ("Inside");      }, Mouseleave:function () {$ (this). Removeclass ("Inside"); }    });6.6 UnbindUnbind unbound Bind-bound event (jQuery1.7 above by on and off) $ (selector). Unbind (); Unbind all Events $ (selector). Unbind ("click"); Unbind the specified event Undelegate delegate event $ ("P"). Undelegate (); Unbind all delegate Events $ ("P"). Undelegate ("click"); Unbind all the click events off to unbind the on Mode bound event $ ("P"). Off (); $ ("P"). Off (' click '); $ ("P"). Off ("click", "* *"); To unbind all click events, two * represents all $ ("body"). Off ("click", "P", foo);6.7 Triggering events6.7.1 Simple Event Trigger $ (selector). Click (); The trigger Click event 6.7.2 the trigger () method triggers the specified event type for the selected element. $ ("#foo"). Trigger ("click"); 6.7.3 Triggerhandler triggers an event response method that does not trigger the browser behavior (the Triggerhandler () method triggers the specified event type of the selected element. However, the browser default action is not performed and event bubbling does not occur. ) $ ("input"). Triggerhandler ("Focus");Introduction to the 6.8 event objectAdditional parameters for Event.data//passing Extra event response method Event.currenttarget = = = = this//is equivalent to this in the event response method, the current DOM object Event.target//Event trigger source, not necessarily = = = Thisevent.pagex//the mouse position relative to the left edge of the documentevent.pageYevent.stopPropagation ()//block event bubbling E . Preventdefault (); Block default behavior Event.type//Event Type: Click,dbclick...event.which//mouse Key type: Left 1 2 right 3keydown:a,b,cevent.keycode//code C is uppercase7. jquery Animation System 7.1 hidden display* $ (selector). Show (Speed,callback); * $ (selector). Hide (+), * $ (selector). Toggle ("slow"); * Three methods have the same syntax, parameters can be two, The first one is the speed of the animation, and the second is the callback function after the animation is executed. * The first parameter is: can be a word or a number of milliseconds7.2 fade in and fade out$ (selector). FadeIn (Speed, callback) $ (selector). FadeOut (+) $ (selector). Fadetoggle (' Fast ', function () {}) parameter equals 7.1 * $ (selector). FadeTo (. 5); Fade in to 0 transparent, 1 opaque7.3 Slide* $ (selector). Slidedown (Speed,callback); * $ (selector). Slideup (Speed,callback); * $ (selector). Slidetoggle (Speed, callback);7.4 Animations* $ (selector). Animate ({params},speed,callback);        $ ("button"). Click (function () {$ ("div"). Animate ({left: ' 250px ', opacity: ' 0.5 ', Height: ' 150px ',    Width: ' 150px '},2000); }). Animate ({},1000);7.5 End Animation* $ (selector). Stop () * $ (selector). Stop (Stopall,gotoend); case: 8. jquery complements the 8.1 each function global $.each (array, function (index, object) {}) for each method $ ("Li") for ordinary jquery objects. Each (function (index, Element {}) parameters are in the same order.

jquery plug-in encapsulation

// 方法一(function($) {    $.extend($.fn, {        myplugin: function() { // your plugin logic } });})(jQuery);// 方法二(function($) { $.extend($.fn, { myplugin: function() { // your plugin logic } });})(jQuery);

Array Sorting

kdata.sort (function (a, b) { return parseint (A[ "value"]) < parseint (B[ "value"])? 1: parseint (a[ "value"]) = = parseint (b[ "value"])? 0:-1;});         

JS's summary Notes