Jquery,ajax.animate,svg (Brief study note 20) [end of article]

Source: Internet
Author: User
Tags getscript

1.$ and jquery are the only two variables defined in the global namespace. 2.jquery is a factory function, not a constructor. He returns a newly created object. four ways to call 3.jquery: <1> Pass CSS Selector (string) to the $ () method <2> pass element,document or Window object to the $ () method <3> Pass the HTML text string to the $ () method. such as:
var img=$ ("// Create a new  element                {                    src:url                     , // has HTML attributes                    Css:{borderwidth:5},    //CSS style                    click:handleclick    // event handlers              }                    )

<4> Pass in a function to the $ () method. such as:   
 jquery (function() {    /// ///All jquery code put here} when the document is loaded               )
4.jquery function is the value of jquery or $. This function can be used to create a jquery object that is used to register a handler function to be called when the DOM is ready. <1>jquery Object the jquery object is the object returned by the jquery function. <2>jquery Method The jquery method is the method of the jquery object returned by the jquery function. Example: 5. <1>jquery object is an array of classes    
$ ("body"). Length    //11 documents only one Body property  $ ("body") [0]    //  equals Document.body
<2> Three other properties $ (parameter one, parameter two, parameter three) parameter One : selector parameter Two : The Content property is the context object and, if not passed, is the Document object parameter three : attribute named jqueryExample: <3> prepend () add content to the front of the element, still inside the tag. What is a callback function? several basic methods of <4>jquery jquery's Map () method the each () method of jquery the Is () method of jquery 6.jQuery Setter and Getter 7.jQuery jquery's setter methods, such as CSS (), attr (), addclass (), can pass multiple name value pairs to set properties, and functions to set properties.
    1. Offset () Gets the offset relative to the document
    2. Position () Gets the offset relative to the parent element
8.jQuery getting the element's width and height problem (interesting)
    1. Width (), height (): Gets the width of the content (excluding padding, borders, margins)
    2. Innerwidth (), Innerheight (): Gets the width height including the padding
    3. Outerwidth (), Outerheight (): Gets the width of the border, including the padding,
    4. Outerwidth (True), Outerheight (true): Gets the width of the inner margin, border, margin
See details: http://www.w3school.com.cn/jquery/jquery_dimensions.asp 9. Getting and setting element data (important) jquery defines a getter/setter method called data () that can be used to set or get the documentElements data associated with the document or Window object。 You can associate data with any element. This is also the basis of JQuery's event handler registration and effect queue mechanism. 10.clone () the Clone () method generates a copy of the selected element, including child nodes, text, and attributes. 11.replaceWidth () and ReplaceAll () the difference between the two is that replaceall () cannot be replaced with a function 12. Package element Warp () Yu Unwarp () 13.remove () with detach (), filter () 14.jQuery Event Object jquery hides the implementation differences between browsers by defining their own event objects. 15.bind () advanced features of event registration <1> Syntax : $ ( selector). Bind ( event, data, function)
Example:
$ ("button"). Bind ("click",function() {     $ ("P"). Slidetoggle ();   });
Alternative syntax:

$ (selector). Bind ({event:functionevent:function, ...})
Example:
$ ("button"). Bind ({     click:function() {},     mouseover:function() {},       mouseout: function (){}     });
<2>bind () has three parameters: parameter One: event type string, space separates multiple events parameter two: The extra data passed to the function. parameter three: handler function <3> feature one: One important feature of BIND is that it allows you to specify a namespace for registered event handlers. such as:
$ (' a '). Bind (' mouseover.myfunction ', f)  $ (' a '). Bind (' Mouseover.myfunction1.myfunction2 ', f)       and assigning multiple namespaces
attribute two: The first parameter of bind can be an objectAs with the bind () binding, one () can also bind events. 16.unbind () release of the event <1> Unregister a handler under a namespace
$ (' a '). Unbind ("Mouseover.myfunction1")   // unbind All events under the MyFunction1 namespace (' a '). Unbind ('. MyFunction1 ');    // The click event bound to MyFunction1 under Myfunction2 $ (' a '). Unbind (' Click.myfunction1.myfunction2 ');
17. Event triggering Trigger () 18. Real-time events ( depending on bubbling ) delegate () 19. Animation (animate) <1> Disable animations: jquery.fx.off=true;Animation speed: fast->200ms slow->600msCustom Animation speed: jquery.fx.speeds["Med-fast"]=300; The <2>jquery animation is asynchronous. The default is queued. Of course we can also keep them out of the queue. such as:
$ ("img"). FadeIn. Animate ({"width", "+=100"},{queue:false, duration:1000})                 . FadeOut (500 );
This effect is: Fadein and fadeout are queued. Animate is non-queued. Fadein is the same as animate start time, and fadeout will start as soon as the Fadein is complete. <3> Slow animations Custom Ease animations: jquery.easing["Squr"]=MATH.SQRT; <4> Animation Cancellation (stop), delay, and queue
$ ("img"). Stop (). Animate ()   $ ("img"). FadeTo (100,0.5). Delay (a// fast fade-out to translucent, Wait 200ms, then swipe up
20.jQuery of Ajax load of <1>jquery () $ ("img"). Load (function () {}) One is an event method $ ("img"). Load (' a.txt ') One is the Ajax method the specific invocation of which is determined by the following parameters. What is the difference between post and get? <2>jquery.getscript () dynamically asynchronously loads a script file, which can be used for both homologous and cross-source script loading. applicable: jquery.getscript ("Http://eaxo.com/js/wpsl.js", function () { //Call and execute callback after completion }) = = equals to
$.ajax ({   url:url,   "script",   success:success});
what is MIME? JsonP? <3>jquery.getjson () <4>jquery.get () and Jquery.post () <5> Jquery.browser jquery.contains () Jquery.each () jquery.extend () 21.jQuery plug-in extension key point : Jquery.fn is the prototype object for all JQuery objects. If you add a function to the object, the function becomes a jquery method. Some plugin conventions:  

Jquery,ajax.animate,svg (Brief study note 20) [end of article]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.