Difference between revisions of "JQuery"
(→CorMVC - jQuery-powered Model-View-Controller Framework: It evolved out of the authors recent presentation) |
(Change source-code blocks to standard format) |
||
(12 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | + | [[w:jQuery|jQuery]] is a cross-browser [[JavaScript]] library designed to simplify the client-side scripting of HTML. It was released in January 2006 at [[w:BarCamp|BarCamp]] NYC by [[w:John Resig|John Resig]]. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | jQuery is [[Open Source|free, open source software]], [[w:Dual-licensing|dual-licensed]] under the [[w:MIT License|MIT License]] or the [[w:GNU General Public License Version 2|GPL v2]]. jQuery's syntax is designed to make it easier to navigate a document, select [[w:Document Object Model|DOM]] elements, create animations, handle events, and develop [[w:Ajax (programming)|Ajax applications]]. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications. | |
− | |||
− | |||
− | + | == jQuery plugins and libraries powered by jQuery == | |
− | + | *[http://jplayer.org/latest/demos/ jPlayer] ''- cross-platform audio/video embedding for web pages'' | |
− | + | == jQuery File Upload == | |
− | + | *[http://blueimp.github.com/jQuery-File-Upload/ Demo] | |
− | + | *[https://github.com/blueimp/jQuery-File-Upload/wiki/ Wiki] | |
− | + | *[https://github.com/blueimp/jQuery-File-Upload/wiki/Plugin-extensions Extending the plugin] | |
− | + | *[https://github.com/blueimp/jQuery-File-Upload/archives/master Source code] | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
=== jFormer - jQuery Form Framework === | === jFormer - jQuery Form Framework === | ||
Line 56: | Line 19: | ||
=== CorMVC - jQuery-powered Model-View-Controller Framework === | === CorMVC - jQuery-powered Model-View-Controller Framework === | ||
− | [ | + | [[CorMVC]] is a jQuery-powered Model-View-Controller (MVC) framework that can aide in the development of single-page, web-based applications. CorMVC stands for client-only-required model-view-controller and is designed to be lowest possible entry point to learning about [[single-page application]] architecture. It does not presuppose any server-side technologies, or a web server of any kind, and requires no more than a web browser to get up and running. |
It evolved out of the author's (Ben Nadel) recent presentation, [http://www.bennadel.com/blog/1730-Building-Single-Page-Applications-Using-jQuery-And-ColdFusion-With-Ben-Nadel-Video-Presentation-.htm Building Single-Page Applications Using jQuery And ColdFusion], and will continue to evolve as he thinks more deeply about this type of application architecture. | It evolved out of the author's (Ben Nadel) recent presentation, [http://www.bennadel.com/blog/1730-Building-Single-Page-Applications-Using-jQuery-And-ColdFusion-With-Ben-Nadel-Video-Presentation-.htm Building Single-Page Applications Using jQuery And ColdFusion], and will continue to evolve as he thinks more deeply about this type of application architecture. | ||
+ | |||
+ | We're building an [[Nodal interface using corMVC|experimental nodal interface]] to make a start on the [[unified ontology]] using corMVC. | ||
;Features | ;Features | ||
Line 65: | Line 30: | ||
*'''No building required:''' This framework does not require you to build the application using scaffolding or any other command-line executables. You just download it and open it up in a browser. | *'''No building required:''' This framework does not require you to build the application using scaffolding or any other command-line executables. You just download it and open it up in a browser. | ||
*'''Small Framework:''' This framework is very small (and excessively commented). It doesn't do anything more than it is supposed to. | *'''Small Framework:''' This framework is very small (and excessively commented). It doesn't do anything more than it is supposed to. | ||
+ | |||
+ | == Sorting lists == | ||
+ | [http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/ Here's] an excellent compact method of sorting list items based on any kind of criteria that uses jQuery without any other plugins. In the example below, the lists on the pages are sorted according to the anchor text in a link contained in the LI item. | ||
+ | <source lang="js"> | ||
+ | var mylist = $('ul'); | ||
+ | var listitems = mylist.children('li').get(); | ||
+ | listitems.sort(function(a, b) { | ||
+ | var compA = $('a',a).html().toUpperCase(); | ||
+ | var compB = $('a',b).html().toUpperCase(); | ||
+ | return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; | ||
+ | }) | ||
+ | $.each(listitems, function(idx, itm) { mylist.append(itm); }); | ||
+ | </source> | ||
== See also == | == See also == | ||
Line 75: | Line 53: | ||
*[http://docs.jquery.com/DOM/Traversing/Selectors JQuery docs - Selectors] | *[http://docs.jquery.com/DOM/Traversing/Selectors JQuery docs - Selectors] | ||
*[http://www.authenticsociety.com/blog/jQueryPluginTutorial_Beginner jQueryPluginTutorial] | *[http://www.authenticsociety.com/blog/jQueryPluginTutorial_Beginner jQueryPluginTutorial] | ||
− | [[Category: | + | *[[The Module pattern]] |
+ | *[http://encosia.com/dont-let-jquerys-document-ready-slow-you-down/ Document.ready may slow load time in the case of load() and ajax()] | ||
+ | :''basically what this is saying is document.ready may slow you down if you do other important jQuery stuff before document.ready - which you shouldn't do --[[User:Nad|nad]] 14:13, 17 February 2012 (PST)'' | ||
+ | [[Category:Libre software]]{{lowercase}} |
Latest revision as of 18:11, 22 May 2015
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 55% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
jQuery is free, open source software, dual-licensed under the MIT License or the GPL v2. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.
Contents
jQuery plugins and libraries powered by jQuery
- jPlayer - cross-platform audio/video embedding for web pages
jQuery File Upload
jFormer - jQuery Form Framework
jFormer is a form framework written on top of jQuery that allows you to quickly generate beautiful, standards compliant forms. Leveraging the latest techniques in web design, jFormer helps you create web forms that:
- Validate client-side
- Validate server-side
- Process without changing pages (using AJAX)
CorMVC - jQuery-powered Model-View-Controller Framework
CorMVC is a jQuery-powered Model-View-Controller (MVC) framework that can aide in the development of single-page, web-based applications. CorMVC stands for client-only-required model-view-controller and is designed to be lowest possible entry point to learning about single-page application architecture. It does not presuppose any server-side technologies, or a web server of any kind, and requires no more than a web browser to get up and running.
It evolved out of the author's (Ben Nadel) recent presentation, Building Single-Page Applications Using jQuery And ColdFusion, and will continue to evolve as he thinks more deeply about this type of application architecture.
We're building an experimental nodal interface to make a start on the unified ontology using corMVC.
- Features
- A large sample application: The whole demo site (including the contacts section) runs off of corMVC as a single-page application.
- No server required: The demo application does not require any additional server-side technologies. If you have a web browser, you can download and run this application immediately.
- No building required: This framework does not require you to build the application using scaffolding or any other command-line executables. You just download it and open it up in a browser.
- Small Framework: This framework is very small (and excessively commented). It doesn't do anything more than it is supposed to.
Sorting lists
Here's an excellent compact method of sorting list items based on any kind of criteria that uses jQuery without any other plugins. In the example below, the lists on the pages are sorted according to the anchor text in a link contained in the LI item.
var mylist = $('ul');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
var compA = $('a',a).html().toUpperCase();
var compB = $('a',b).html().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
See also
- JavaScript
- What does the $ mean?
- 50 amazing examples
- Selector examples
- tablesorter.com
- Isotope - dynamic item sorting and arrangement
- JQuery docs - Selectors
- jQueryPluginTutorial
- The Module pattern
- Document.ready may slow load time in the case of load() and ajax()
- basically what this is saying is document.ready may slow you down if you do other important jQuery stuff before document.ready - which you shouldn't do --nad 14:13, 17 February 2012 (PST)