devel:jqueryfaq
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
devel:jqueryfaq [2014-01-13 13:48] – [What are the most commonly used JS features that are now deprecated?] better layout ... (and: it was stated "4" features while being 5 ...) hh lohmann | devel:jqueryfaq [2023-10-19 23:36] (current) – Klap-in | ||
---|---|---|---|
Line 7: | Line 7: | ||
===== Why did you switch to jQuery? ===== | ===== Why did you switch to jQuery? ===== | ||
- | jQuery is a well known, widely used and tested library. It is well [[http:// | + | jQuery is a well known, widely used and tested library. It is well [[http:// |
===== What jQuery version is supported? ===== | ===== What jQuery version is supported? ===== | ||
Line 31: | Line 31: | ||
// | // | ||
- | :!: It is always recommended to create a dedicated testing environment, | ||
===== What are the most commonly used JS features that are now deprecated? ===== | ===== What are the most commonly used JS features that are now deprecated? ===== | ||
Line 41: | Line 40: | ||
as a shortcut to '' | as a shortcut to '' | ||
- | * //Note that '' | + | * Note that '' |
<code javascript> | <code javascript> | ||
Line 50: | Line 49: | ||
/* New code */ | /* New code */ | ||
var $obj = jQuery('# | var $obj = jQuery('# | ||
- | // $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]; | var obj = $obj[0]; | ||
</ | </ | ||
Line 62: | Line 61: | ||
var htmlelements = getElementsByClass( ' | var htmlelements = getElementsByClass( ' | ||
// htmlelements now is an array of DOM elements | // htmlelements now is an array of DOM elements | ||
- | for( var n in htmlelements ) { | + | for(var n in htmlelements ) { |
dosomething( htmlelements[n] ); | dosomething( htmlelements[n] ); | ||
} | } | ||
/* New code */ | /* New code */ | ||
- | jQuery(' | + | jQuery(' |
+ | | ||
+ | }); | ||
/* Or, this new code */ | /* Or, this new code */ | ||
- | var jqueryelements = jQuery(' | + | let $jqueryelements = jQuery(' |
- | // 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(){ |
+ | | ||
+ | }); | ||
/* or, if you prefer (I don't know wich one is better) */ | /* or, if you prefer (I don't know wich one is better) */ | ||
- | for ( var n = 0; n < jqueryelements.length; | + | for (let n = 0; n < $jqueryelements.length; |
- | dosomething(jqueryelements[n]); | + | dosomething($jqueryelements[n]); |
} | } | ||
</ | </ | ||
+ | * It common to start the variable which contain a jQuery object with a '' | ||
==== addInitEvent() ==== | ==== addInitEvent() ==== | ||
Line 97: | Line 101: | ||
==== addEvent() ==== | ==== addEvent() ==== | ||
- | registering | + | Registering |
<code javascript> | <code javascript> | ||
/* Old code */ | /* Old code */ | ||
- | addEvent(obj, | + | addEvent(obj, |
+ | alert(" | ||
+ | }); | ||
+ | |||
+ | /* Recenter old code */ | ||
+ | jQuery(obj).click(function(){ | ||
+ | | ||
+ | }); | ||
/* New code */ | /* New code */ | ||
- | jQuery(obj).EVENT(function(){ alert(" | + | jQuery(obj).on(" |
+ | | ||
+ | }); | ||
</ | </ | ||
- | * => replace | + | * replace " |
==== tw_sack ==== | ==== tw_sack ==== | ||
Line 150: | Line 163: | ||
- | For example, if you want to use the [[http:// | + | For example, if you want to use the [[http:// |
<code javascript> | <code javascript> | ||
Line 159: | 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 '' | 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 '' | ||
- | * override styles in CSS of your template | + | * override styles in CSS of your template. See also [[devel: |
devel/jqueryfaq.txt · Last modified: 2023-10-19 23:36 by Klap-in