This is a presentation from 2019-01-21. Summary We want to move away from jQuery in future projects
Within an event handler, there are multiple methods to cancel event propagation, each with different semantics. event.preventDefault() Only prevents the...
...triggerNative() that you can use as a drop-in replacement for trigger() (requires Unpoly): jQuery.fn.triggerNative = function(...args) { this.each(function() { up.emit(this, ...args) }) return this } With this you can replace a...
...from propagation and bubbling. A native event is then emitted on the same element: jQuery.fn.enableNativeEvent = function(eventName, convertedPropNames = []) { this.on(eventName, function($event) { // Only convert when there is not already a...
Event delegation is a pattern where a container element has a single event listener that handles events for all descendants...
Select2 is a fantastic library for advanced dropdown boxes, but it depends on jQuery. Alternatives Tom Select
To avoid multiple versions of a package, you can manually maintain a resolutions section in your package.json. We recommend you...
...header. On your server, requests will not look like AJAX requests (request.xhr? will be false). jquery-ujs will not set CSRF headers. This is by design and improves security.
...those headers for specific hosts, add this piece of CoffeeScript directly after jQuery (but before jquery-ujs): whitelisted = (url) -> for domain in ["http://trusted.host/", "https://another.trusted.host/"] return true if url.indexOf...
Let's say you want to find the element with the text hello in the following DOM tree: hello
See the attached link for a useful overview of modern (and classic) DOM API methods, like matches, contains, append, cssText...
Nearly all jQuery traversal functions ignore elements that are not HTML tags. To work with other type of nodes (like...
jquery-timing is a very useful jquery plugin that helps to remove lots of nested anonymous functions. It's API provides you some methods that help you to write readable...
...otherStuffToDo(); }, 1000); }); }, 500); // after $('.some').show().children().doThat() .wait(500) .doSomething().hide() . wait(1000) . otherStuffToDo(); jquery-timing transformed the setTimeout callback into a chainable method. Now the code is easier...
General hints on the DOM the root of the DOM is document custom elements inherit from HTMLElement. They need a...
jQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it...
You can say: $(element).is(':visible') and $(element).is(':hidden') jQuery considers an element to be visible if it...
...do instead is to use Sizzle, the selector engine that is embedded into jQuery. jQuery.find (or $.find) is an alias for the Sizzle(...) function, which you can use to select...
Some older Node modules rely on window.jQuery to be present. One suggested solution is to use this config in the...
Every time you call $(...) jQuery will create a new object. Because of this, comparing two jQuery collections with == will never...
jQuery's deferred objects behave somewhat like standard promises, but not really. One of many subtle differences is that there...
jQuery offers many different methods to move a selection through the DOM tree. These are the most important: $element.find(selector...
When you want the table headers to always stay around (e.g. because that table is huuuge), use the code below...
Use this if you want to show or hide part of a form if certain options are selected or boxes...
You know that you can use jQuery's text() to get an element's contents without any tags.
With "attaching an event handler once" you possibly mean one of these two things: Register a function for an event...
jQuery comes with .animate() that lets you transition some CSS selectors: function floatIn($element) { $element.css({ 'opacity': 0, 'margin-top': 200px...