Skip to content

Instantly share code, notes, and snippets.

@joyrexus

joyrexus/jq_vs_js.md

Last active April 12, 2025 09:10
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. joyrexus revised this gist Apr 5, 2013. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions jq_vs_js.md
    View file
    Original file line number Diff line number Diff line change
    @@ -85,20 +85,20 @@ newDiv.classList.toggle("foo");

    ```javascript
    $("a").click(function() {
    // code…
    // code
    })

    [].forEach.call(document.querySelectorAll("a"), function(el) {
    el.addEventListener("click", function() {
    // code…
    // code
    });
    });

    $(document).ready(function() {
    // code…
    // code
    });

    document.addEventListener("DOMContentLoaded", function() {
    // code…
    // code
    });
    ```
  2. joyrexus revised this gist Apr 5, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions jq_vs_js.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    JQ vs native JS
    ===============
    jQuery vs native JS
    ===================


    ## Selecting Elements
  3. joyrexus created this gist Apr 5, 2013.
    104 changes: 104 additions & 0 deletions jq_vs_js.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,104 @@
    JQ vs native JS
    ===============


    ## Selecting Elements

    ```javascript
    var divs = $("div");

    var divs = document.querySelectorAll("div");


    var parent = $("#about").parent();

    var parent = document.getElementById("about").parentNode;


    var nextElement = $("#wrap").next();

    var nextElement = document.getElementById("wrap").nextSibling;
    ```

    ## Setting Attributes

    ```javascript
    $("img").filter(":first").attr("alt", "My image");

    document.querySelector("img").setAttribute("alt", "My image");
    ```

    ## Creating Elements

    ```javascript
    var newDiv = $("<div/>");

    var newDiv = document.createElement("div");

    $("body").append($("<p/>"));

    document.body.appendChild(document.createElement("p"));
    ```

    ## Cloning Elements

    ```javascript
    var clonedElement = $("#about").clone();

    var clonedElement = document.getElementById("about").cloneNode(true);
    ```

    ## Removing Elements

    ```javascript
    $("#wrap").empty();

    var wrap = document.getElementById("wrap");
    while(wrap.firstChild) wrap.removeChild(wrap.firstChild);
    ```

    ## Testing for child nodes

    ```javascript
    if($("#wrap").is(":empty"))

    if(!document.getElementById("wrap").hasChildNodes())
    ```

    ## Adding Classes

    ```javascript
    newDiv.addClass("foo");

    newDiv.classList.add("foo");
    ```

    ## Toggling Classes

    ```javascript
    newDiv.toggleClass("foo");

    newDiv.classList.toggle("foo");
    ```

    ## Adding Events

    ```javascript
    $("a").click(function() {
    // code…
    })

    [].forEach.call(document.querySelectorAll("a"), function(el) {
    el.addEventListener("click", function() {
    // code…
    });
    });

    $(document).ready(function() {
    // code…
    });

    document.addEventListener("DOMContentLoaded", function() {
    // code…
    });
    ```