It is almost 2019 and people have generally come to the agreement that jQuery is deprecated. I for one have a very different perspective on that bu...
For further actions, you may consider blocking this person and/or reporting abuse
Some notes:
$$('p', $('article'))
returns all<p>
elements in the first<article>
, not all<p>
s that are children of<article>
s. For that you'd still have to do$$("article > p")
HTMLElement.prototype.has = HTMLElement.prototype.hasAttribute
doesn't bind the function properly, sothis
will not work properly.text()
function should use.textContent
not.innerText
HTMLElement.append
should still check to see ifchild
is an instance ofNode
, even if it's not anHTMLElement
HTMLElement.prototype.prepend
HTMLElement.prototype.prepend
, already existsHTMLElement.prototype.remove
already exists tooHTMLElement.prototype.parent
should return.parentElement
HTMLElement.prototype.emit
should haveargs=null
as a parameter and usenew CustomEvent(event, { detail:args })
HTMLElement.prototype.append
andNodeList.prototype.forEach
already exist, too.Thanks I fixed the things you said in updated gist. Why does text need to return textContent and not innerText?
innerText
is a lot more performance heavy and triggers layout to be recalculated.stackoverflow.com/a/35213639/5203655
AFAIK,
innerText
is also non-standard (originally IE-only) whereastextContent
is part of the standard.Nice write-up of extending the base prototypes!
I do have a bit of a hang-up with modifying prototypes of builtins without using
Object.defineProperty
, though. If any application is inspecting the prototype, those properties are enumerated, so it might be better to define them as non-enumerable on the prototype object, just to be on the safe side. A factory function that would augment a built in by taking a property name and a function would make the examples just as readable. :)I love articles like this that make it clear just how thin an abstraction layer you can have on top of the standard web API.
It also gives you an idea on what Babel does under the hood.
A word of warning:
ParentNode.append()
andParentNode.prepend()
, which have bazonkers browser support (everything but IE), behave likeNode.appendChild()
(But can take strings, and multiple nodes) and not like$().append()
.The sibling addition behavior, like the
$().append()
is implemented asChildNode.after()
andChildNode.before()
. It has the same affordances as theParentNode.append()
but is less supported (No Safari, no mobile Edge)I think you should test if string is undefined in
html()
andtext()
, otherwise it wouldn't be possible to set it empty.PS: I am commenting from my phone, so forgive the lack of details :)
If HTML and/or TEXT is empty you want to return the innerHTML and innerText so no.
How would you simulate jQuery
$('#el').html('');
?You can literally use my example already provided in the post:
then
That wouldn't work because
''
would evalute tofalse
and in your code it would be the same as$('#el').html()
.Check it running: codepen.io/fernandosavio/pen/qLWeWV
Well whatta ya know. You are right.
Change the line
into this
so that you get
codepen.io/jochemstoel/pen/OrJLbR
You can also replace it with
or even
Not sure if you've ever used it, but this is basically the approach Prototype.js took (and MooTools copied). The issue back in the Prototype.js era was that extending the native prototypes didn't work in IE6, so it had to also support a different approach (a wrapper object) in IE.
Below is the suggestion from ChatGPT that I requested it.
I used jQuery exclusively for
$.ajax()
(yeah, i know. But i’m not a front-end dev) until i finally took some time and learn aboutXMLHttpRequest
. And now there’s this Fetch thing…elmenet.attr('min', 0)
will return the attribute value.better check
arguments.length
These are very nice! Have you also tried implementing Ajax calls and stuff without jQuery? For a long time those were a big reason for sticking with jQuery but then Fetch API came.
No I did not, for the reason you mentioned. We have fetch nowadays. Would you like me to, though?
Yes that would be a cool post
How can it be implemented in angular?