JQuery vs. Native JS Selectors

Developer
Kyle Foster
Size
2,261 Kb
Views
26,312
  1. JQuery vs. Native JS Selectors Previews
  2. JQuery vs. Native JS Selectors HTML Codes
  3. JQuery vs. Native JS Selectors CSS Codes
  4. JQuery vs. Native JS Selectors JS Codes

How do I make an jquery vs. native js selectors?

A playground for testing jQuery Selectors versus their native counterparts. Note that this Pen accompanies my screencast found at http://youtu.be/rbZCR0kCkWk. Feel free to watch and play along.. What is a jquery vs. native js selectors? How do you make a jquery vs. native js selectors? This script and codes were developed by Kyle Foster on 04 September 2022, Sunday.

JQuery vs. Native JS Selectors Previews
IQ Test

JQuery vs. Native JS Selectors - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery vs. Native JS Selectors</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Tag -->
<div> <code>div</code>
</div>
<!-- ID -->
<div id="div"> <code>div#div</code>
</div>
<!-- Class -->
<div class="div"> <code>div.div</code>
</div>
<!-- Attribute -->
<div data-tag="div"> <code>div[data-tag="div"]</code>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery vs. Native JS Selectors - Script Codes CSS Codes

body { background: #DDD; }
div { text-align: center; background: #CCC; width: 400px; padding: 1em; margin: 1em auto 0 auto;
}

JQuery vs. Native JS Selectors - Script Codes JS Codes

// Demo functions
function jqShowMe( elems ) { elems.css( 'background', 'dodgerblue' ); console.log( elems );
}
function jsShowMe( elem ) { elem.style.background = 'dodgerblue'; console.log( elem );
}
function jssShowMe( elems ) { for ( var i = 0; i < elems.length; i++ ) { var elem = elems[ i ]; elem.style.background = 'dodgerblue'; console.log( elem ); }
}
// jQuery Selection
var jqTag = $( 'div' ), jqId = $( 'div#div' ), jqClass = $( 'div.div' ), jqAttr = $( 'div[data-tag="div"]' );
/*jqShowMe( jqTag );*/
/*jqShowMe( jqId );*/
/*jqShowMe( jqClass );*/
/*jqShowMe( jqAttr );*/
// Older Native Selection
var jsTag = document.getElementsByTagName( 'div' ), jsId = document.getElementById( 'div' ), jsClass = document.getElementsByClassName( 'div' );
/*jssShowMe( jsTag );*/
/*jsShowMe( jsId );*/
/*jssShowMe( jsClass );*/
// Newer Native Selection
var qsTag = document.querySelector( 'div' ), qsId = document.querySelector( 'div#div' ), qsClass = document.querySelector( 'div.div' ), qsAttr = document.querySelector( 'div[data-tag="div"]' );
/*jsShowMe( qsTag );*/
/*jsShowMe( qsId );*/
/*jsShowMe( qsClass );*/
/*jsShowMe( qsAttr );*/
var qsaTag = document.querySelectorAll( 'div' ), qsaId = document.querySelectorAll( 'div#div' ), qsaClass = document.querySelectorAll( 'div.div' ), qsaAttr = document.querySelectorAll( 'div[data-tag="div"]' );
/*jssShowMe( qsaTag );*/
/*jssShowMe( qsaId );*/
/*jssShowMe( qsaClass );*/
/*jssShowMe( qsaAttr );*/
JQuery vs. Native JS Selectors - Script Codes
JQuery vs. Native JS Selectors - Script Codes
Home Page Home
Developer Kyle Foster
Username hkfoster
Uploaded September 04, 2022
Rating 3
Size 2,261 Kb
Views 26,312
Do you need developer help for JQuery vs. Native JS Selectors?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Foster (hkfoster) Script Codes
Name
Smart Fixed Header
SVG Optimization Breakdown
Askew - A Subtle Parallax Banner Plugin
Vanilla Flavored Hypher
Ken Burns Banner
Manipulating SVG With CSS
Gradual.js
Cattywompus - A Subtle Parallax Banner Plugin
Freemason.js
A Pen by Kyle Foster
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!