Java Script frameworks Ivan Chyr Frameworks overview

Syntax : : : running code after document load $(document). ready(function(){ // j. Query methods go here. . . });

Syntax : : : j. Query methods • Moving Elements append(), append. To(), before(), after() • Attributes css(), attr(), html(), val(), add. Class() • Events bind(), trigger(), unbind(), live(), click() • Effects show(), fade. Out(), toggle(), animate() • Traversing find(), is(), prev. All(), next(), has. Class() • Ajax get(), get. JSON(), post(), ajax(), load()

Syntax : : : events Event Method Description $(document). ready(function) Binds a function to the ready event of a document (when the document is finished loading) $(selector). click(function) Triggers, or binds a function to the click event of selected elements $(selector). dblclick(function) Triggers, or binds a function to the double click event of selected elements $(selector). focus(function) Triggers, or binds a function to the focus event of selected elements $(selector). mouseover(function) Triggers, or binds a function to the mouseover event of selected elements

Syntax : : : effects animate(), clear. Queue(), delay(), dequeue(), fade. In(), fade. Out(), fade. Toggle(), fade. In(), fade. Out(), hide(), queue(), show(), slide. Down(), slide. Toggle(), slide. Up(), slide. Down(), slide. Up(), stop(), toggle() Effects. html

Syntax : : : DOM manipulation • text() - Sets or returns the text content of selected elements • html() - Sets or returns the content of selected elements (including HTML markup) • val() - Sets or returns the value of form fields • attr() - gets attribute values

Adding new HTML content: • append() - Inserts content at the end of the selected elements • prepend() - Inserts content at the beginning of the selected elements • after() - Inserts content after the selected elements • before() - Inserts content before the selected elements • remove() - Removes the selected element (and its child elements) • empty() - Removes the child elements from the selected element DOMmanipulation. html

Syntax : : : CSS • add. Class() - Adds one or more classes to the selected elements • remove. Class() - Removes one or more classes from the selected elements • toggle. Class() - Toggles between adding/removing classes from the selected elements • css() - Sets or returns the style attribute css({"propertyname": "value", . . . }); CSSmanipulation. html

Syntax : : : Ajax Method Description $. ajax() Performs an AJAX request ajax. Complete() Specifies a function to run when the AJAX request completes ajax. Error() Specifies a function to run when the AJAX request completes with an error ajax. Send() Specifies a function to run before the AJAX request is sent $. ajax. Setup() Sets the default values for future AJAX requests $. get() Loads data from a server using an AJAX HTTP GET request load() Loads data from a server and puts the returned HTML into the selected element $. param() Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests) $. post() Loads data from a server using an AJAX HTTP POST request serialize() Encodes a set of form elements as a string for submission serialize. Array() Encodes a set of form elements as an array of names and values http: //w 3 schools. com/jquery/tryit. asp? filename=tryjquery_ajax 1

Plugins http: //kevinbatdorf. github. com/codaslider/

Summary j. Query is a fast and concise Java. Script Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. j. Query is designed to change the way that you write Java. Script.

Questions ?

Further interesting j. Query resources • j. Query tutorial http: //w 3 schools. com/jquery/default. asp • j. Query basics in less than 2 minutes http: //ejohn. org/apps/learn-jquery/ • Performance proven tricks and tips http: //www. slideshare. net/Addy. Osmani/jquery-proven-performance-tips-tricks • Best sites with j. Query www. bestjquery. com • j. Query tutorials and other stuff http: //docs. jquery. com/Tutorials

Java. Script frameworks links j. Query http: //jquery. com/ http: //api. jquery. com/ Ext. JS http: //habrahabr. ru/blogs/extjs/ http: //www. sencha. com/products/extjs/ YUI http: //developer. yahoo. com/yui/ http: //yuilibrary. com/ Java. Script. MVC http: //javascriptmvc. com/ Spine. JS http: //spinejs. com/ Blackbone http: //backbonetutorials. com/ http: //documentcloud. github. com/backbone/

Thank you for your attention!