Skip to content

Instantly share code, notes, and snippets.

@brittanydionigi

brittanydionigi/little-jQuery.html

Last active February 11, 2020 17:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save brittanydionigi/a74c66b0cf1b20bf4102341a4f0fd212 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save brittanydionigi/a74c66b0cf1b20bf4102341a4f0fd212 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. brittanydionigi revised this gist Aug 27, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions little-jQuery.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    <html>
    <head>
    <style type="text/css">
    #main { padding: 100px; background-color: pink; }
    .blue { background-color: blue !important; }
    #main { padding: 100px; border: 2px solid pink; }
    .blue { background-color: blue; }
    </style>
    </head>
    <body>
  2. brittanydionigi revised this gist Aug 27, 2019. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions little-jQuery.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,9 +9,9 @@
    <div id="main">Lorem ipsum dolor!</div>
    <script type="text/javascript">
    function $(selector) {
    let selectorType = selector.split('').shift();
    let selectorName = selector.substr(1);
    let DOMElement = selectDOMElement();
    let selectorType = selector.split('').shift(); // grab the # or . from the selector
    let selectorName = selector.substr(1); // grab the ID or class name from the selector
    let DOMElement = selectDOMElement(); // select the DOM element

    function selectDOMElement() {
    if (selectorType === '#') {
  3. brittanydionigi revised this gist Jul 9, 2019. 1 changed file with 27 additions and 27 deletions.
    54 changes: 27 additions & 27 deletions little-jQuery.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,38 +8,38 @@
    <body>
    <div id="main">Lorem ipsum dolor!</div>
    <script type="text/javascript">
    function $(selector) {
    let selectorType = selector.split('').shift();
    let selectorName = selector.substr(1);
    let DOMElement = selectDOMElement();
    function $(selector) {
    let selectorType = selector.split('').shift();
    let selectorName = selector.substr(1);
    let DOMElement = selectDOMElement();

    function selectDOMElement() {
    if (selectorType === '#') {
    return document.getElementById(selectorName);
    } else {
    return document.querySelectorAll(selectorName);
    function selectDOMElement() {
    if (selectorType === '#') {
    return document.getElementById(selectorName);
    } else {
    return document.querySelectorAll(selectorName);
    }
    }
    }

    return {
    addClass(className) {
    DOMElement.classList.add(className);
    },
    removeClass(className) {
    DOMElement.classList.remove(className);
    },
    hasClass(className) {
    return DOMElement.classList.contains(className);
    },
    toggleClass(className) {
    if (this.hasClass(className)) {
    this.removeClass(className);
    } else {
    this.addClass(className);
    return {
    addClass(className) {
    DOMElement.classList.add(className);
    },
    removeClass(className) {
    DOMElement.classList.remove(className);
    },
    hasClass(className) {
    return DOMElement.classList.contains(className);
    },
    toggleClass(className) {
    if (this.hasClass(className)) {
    this.removeClass(className);
    } else {
    this.addClass(className);
    }
    }
    }
    }
    };
    };
    </script>
    </body>
    </html>
  4. brittanydionigi revised this gist Jul 9, 2019. 1 changed file with 34 additions and 1 deletion.
    35 changes: 34 additions & 1 deletion little-jQuery.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,6 +7,39 @@
    </head>
    <body>
    <div id="main">Lorem ipsum dolor!</div>
    <script src="https://gist.githubusercontent.com/brittanystoroz/c2bb16b0ceb16e5d397b099ab454daea/raw/c88e5178872620dd78398b138fa0c29e8dbc2088/myjQuery.js"></script>
    <script type="text/javascript">
    function $(selector) {
    let selectorType = selector.split('').shift();
    let selectorName = selector.substr(1);
    let DOMElement = selectDOMElement();

    function selectDOMElement() {
    if (selectorType === '#') {
    return document.getElementById(selectorName);
    } else {
    return document.querySelectorAll(selectorName);
    }
    }

    return {
    addClass(className) {
    DOMElement.classList.add(className);
    },
    removeClass(className) {
    DOMElement.classList.remove(className);
    },
    hasClass(className) {
    return DOMElement.classList.contains(className);
    },
    toggleClass(className) {
    if (this.hasClass(className)) {
    this.removeClass(className);
    } else {
    this.addClass(className);
    }
    }
    }
    };
    </script>
    </body>
    </html>
  5. brittanydionigi revised this gist Jul 9, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion little-jQuery.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,6 +7,6 @@
    </head>
    <body>
    <div id="main">Lorem ipsum dolor!</div>
    <script type="text/javascript" src="https://gist.githubusercontent.com/brittanystoroz/c2bb16b0ceb16e5d397b099ab454daea/raw/c88e5178872620dd78398b138fa0c29e8dbc2088/myjQuery.js"></script>
    <script src="https://gist.githubusercontent.com/brittanystoroz/c2bb16b0ceb16e5d397b099ab454daea/raw/c88e5178872620dd78398b138fa0c29e8dbc2088/myjQuery.js"></script>
    </body>
    </html>
  6. brittanydionigi revised this gist Jul 9, 2019. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion little-jQuery.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    <html>
    <head>

    <style type="text/css">
    #main { padding: 100px; background-color: pink; }
    .blue { background-color: blue !important; }
  7. brittanydionigi created this gist Jul 9, 2019.
    13 changes: 13 additions & 0 deletions little-jQuery.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    <html>
    <head>

    <style type="text/css">
    #main { padding: 100px; background-color: pink; }
    .blue { background-color: blue !important; }
    </style>
    </head>
    <body>
    <div id="main">Lorem ipsum dolor!</div>
    <script type="text/javascript" src="https://gist.githubusercontent.com/brittanystoroz/c2bb16b0ceb16e5d397b099ab454daea/raw/c88e5178872620dd78398b138fa0c29e8dbc2088/myjQuery.js"></script>
    </body>
    </html>