From 7960e06a98224d43a0382e9f9b7fad0f59c13679 Mon Sep 17 00:00:00 2001 From: Ed Link III Date: Mon, 11 May 2020 13:04:55 -0400 Subject: [PATCH 1/3] jQuery-esque hide & show functionality (prototype) --- collections/DOM/hide-show-an-element-prototype.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 collections/DOM/hide-show-an-element-prototype.md diff --git a/collections/DOM/hide-show-an-element-prototype.md b/collections/DOM/hide-show-an-element-prototype.md new file mode 100644 index 00000000..9a237358 --- /dev/null +++ b/collections/DOM/hide-show-an-element-prototype.md @@ -0,0 +1,10 @@ +~~~ javascript +// el.hide(); +Element.prototype.hide = function() { this.style.display = 'none'; return this; } + +// el.hide(); +Element.prototype.show = function() { this.style.display = ''; return this; } + +// el.toggle(); +Element.prototype.toggle = function() { this.style.display = (this.style.display !== 'none') ? 'none' : ''; return this; } +~~~ From 2e769559e5aaa5a1865a672a77181e1ec49eaf3c Mon Sep 17 00:00:00 2001 From: Ed Link III Date: Mon, 11 May 2020 13:11:07 -0400 Subject: [PATCH 2/3] jQuery-esque class manipulation (prototype) --- collections/DOM/class-manipulation-prototype.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 collections/DOM/class-manipulation-prototype.md diff --git a/collections/DOM/class-manipulation-prototype.md b/collections/DOM/class-manipulation-prototype.md new file mode 100644 index 00000000..8d71c6aa --- /dev/null +++ b/collections/DOM/class-manipulation-prototype.md @@ -0,0 +1,13 @@ +~~~ javascript +// el.addClass('the-class'); +Element.prototype.addClass = function(newClass) { this.classList.add(newClass); return this; } + +// el.removeClass('the-class'); +Element.prototype.removeClass = function(oldClass) { this.classList.remove(oldClass); return this; } + +// el.toggleClass('the-class'); +Element.prototype.toggleClass = function(thisClass) { this.classList.toggle(thisClass); return this; } + +// if(el.hasClass('the-class')) +Element.prototype.hasClass = function(thisClass) { return this.classList.contains(thisClass); } +~~~ From 783df041d9954a1ef286b1f3232911fd35b228a9 Mon Sep 17 00:00:00 2001 From: Ed Link III Date: Mon, 11 May 2020 13:16:40 -0400 Subject: [PATCH 3/3] jQuery-esque get & set value (prototype) --- collections/DOM/get-set-element-value-prototype.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 collections/DOM/get-set-element-value-prototype.md diff --git a/collections/DOM/get-set-element-value-prototype.md b/collections/DOM/get-set-element-value-prototype.md new file mode 100644 index 00000000..011d0078 --- /dev/null +++ b/collections/DOM/get-set-element-value-prototype.md @@ -0,0 +1,5 @@ +~~~ javascript +// set value --> el.val('Hello World'); +// get value --> el.val(); +Element.prototype.val = function(newValue) { if(newValue === undefined) return this.value; this.value = newValue; return this; } +~~~