Differences

This shows you the differences between two versions of the page.

--- devel:jqueryfaq [2016-01-09 07:57] – edited wrong url torpedo
+++ devel:jqueryfaq [2023-10-19 23:36] (current) – Klap-in
@@ Line 49: / Line 49: @@
 /* New code */
 var $obj = jQuery('#some__id');
-// $obj is a jQuery object - if you really need the DOM object use [0] like this:
+// $obj is a jQuery object - if you really need the DOM object use [0] e.g.:
 var obj = $obj[0];
 </code>
@@ Line 61: / Line 61: @@
 var htmlelements = getElementsByClass( 'class', document, 'tag');
 // htmlelements now is an array of DOM elements
-for( var n in htmlelements ) {
+for(var n in htmlelements ) {
   dosomething( htmlelements[n] );
 }
 /* New code */
-jQuery('tag.class').each(function(){dosomething(this);});
+jQuery('tag.class').each(function(){
+    dosomething(this);
+});
 /* Or, this new code */
-var jqueryelements = jQuery('tag.class');
+let $jqueryelements = jQuery('tag.class');
-// jqueryelements is a jquery thing : an array plus some other stuff.
+// $jqueryelements is a jquery thing: an array plus some other stuff.
-jqueryelements.each(function(){dosomething(this);});
+$jqueryelements.each(function(){
+    dosomething(this);
+});
 /* or, if you prefer (I don't know wich one is better) */
-for ( var n = 0; n < jqueryelements.length; ++n ) {
+for (let n = 0; n < $jqueryelements.length; ++n ) {
-	dosomething(jqueryelements[n]);
+    dosomething($jqueryelements[n]);
 }
 </code>
+  * It common to start the variable which contain a jQuery object with a ''$''-character, but it is not required.
 ==== addInitEvent() ====
@@ Line 96: / Line 101: @@
 ==== addEvent() ====
-registering event handlers - use jQuery's [[http://api.jquery.com/category/events/|event methods]] instead.
+Registering event handlers - use jQuery's [[https://api.jquery.com/category/events/|event methods]] instead.
 <code javascript>
 /* Old code */
-addEvent(obj,EVENT,function(){ alert("EVENT happened!") });
+addEvent(obj, "click", function(){
+    alert("Click happened!")
+});
+/* Recenter old code */
+jQuery(obj).click(function(){
+    alert("Click happened!")
+});
 /* New code */
-jQuery(obj).EVENT(function(){ alert("EVENT happened!") });
+jQuery(obj).on("click", function(){
+    alert("Click happened!")
+});
 </code>
-  * => replace EVENT by "click", "change", "blur", "focus" and the like (s. jQuery link above!)
+  * replace "click" by the event you need e.g. "change", "blur", "focus" and the like (see jQuery link above)
 ==== tw_sack ====
@@ Line 149: / Line 163: @@
-For example, if you want to use the [[http://craigsworks.com/projects/qtip|qTip jQuery plugin]], chose "//Development - Uncompressed source code//" from the download page. The resulting filename (eg. ''jquery.qtip-1.0.0-rc3.js'')) then has to be renamed to ''jquery.qtip.js'' and placed in your plugin folder. Then load it from your plugin's main script like this:
+For example, if you want to use the [[http://craigsworks.com/projects/qtip|qTip jQuery plugin]], choose "//Development - Uncompressed source code//" from the download page. The resulting filename (eg. ''jquery.qtip-1.0.0-rc3.js'')) then has to be renamed to ''jquery.qtip.js'' and placed in your plugin folder. Then load it from your plugin's main script like this:
 <code javascript>
@@ Line 158: / Line 172: @@
 Yes, of course. Simply override our default jQuery UI CSS in your own template CSS files. The default theme used by DokuWiki can be found in ''lib/scripts/jquery/jquery-ui-theme/smoothness.css''. Do not edit this file! Override styles in your own template instead.
-    * override styles in CSS of your template
+    * override styles in CSS of your template. See also [[devel:css#dokuwiki stylesheets]] for details.