DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • jQuery vs. Angular: Common Differences You Must Know
  • CSS3 Transitions vs. jQuery Animate: Performance
  • Better Scaffolding with jQuery - Part I
  • How to Call Rest API by Using jQuery AJAX in Spring Boot? [Video]

Trending

  • 5 Web3 Trends to Follow in 2023
  • Four Ways for Developers To Limit Liability as Software Liability Laws Seem Poised for Change
  • AI for Web Devs: Project Introduction and Setup
  • How To Optimize Feature Sets With Genetic Algorithms
  1. DZone
  2. Coding
  3. Frameworks
  4. Stop Using jQuery All the Time!

Stop Using jQuery All the Time!

Raymond Camden user avatar by
Raymond Camden
·
Oct. 26, 12 · Interview
Like (0)
Save
Tweet
Share
11.69K Views

Join the DZone community and get the full member experience.

Join For Free

I apologize for the link bait. I feel bad doing it. But at least you know I'm not a slimy SEO person and there is something useful in this article. ;)

Yesterday I blogged a simple little POC (Proof of Concept) that demonstrated adding a class to a random list element. As I said in the post yesterday, this was rather trivial code, but I wanted to share it because of the use of LocalStorage.

About an hour or so after I posted it, something began to bug me. I opened up the template and looked at the Network requests in Chrome dev tools.

Just in case it isn't obvious, let me break it down for you. My HTML document was a bit over 1.5K. The jQuery library, compressed, was 33K. To be fair, my HTML was limited to what was required for the demo, but even if I increased the size of my document ten fold, it would still be less than the size of the jQuery library.

Don't get me wrong. I love jQuery. I love what it has done for my development, my career, and my skin care. (Um, ok.) That being said, you don't need jQuery as much as you think. Consider what my demo did:

  • Run a function when the DOM was loaded.
  • Find some DOM items via CSS selectors.
  • Remove a class from one thing, add it to another.

That's it. Surely I could do that without an entire library, right? First, I switched to listening for the DOMContentLoaded event.

document.addEventListener("DOMContentLoaded", init, false);
    
function init() {

For finding DOM items, I made use of querySelector and querySelectorAll.

//get all the LIs
var menuItems = document.querySelectorAll("ul#menu li");

For adding and removing classes, I made use of the classList property.

document.querySelector("ul#menu li:nth-child("+(selected+1)+")").classList.add("selected");

After these changes, the size of my application was pretty much next to nothing.

Here is the complete template. Any questions?

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>

<style>
li.selected { background-color: red; }
</style>
</head>

<body>

<ul id="menu">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li class="selected">Item four</li>
<li>Item five</li>
</ul>

<script>
document.addEventListener("DOMContentLoaded", init, false);
    
function init() {
    //remove the selected class from the li that has it
    document.querySelector("li.selected").classList.remove("selected");
    
    //get all the LIs
    var menuItems = document.querySelectorAll("ul#menu li");

    //How many do we have?
    var numItems = menuItems.length;

    //Did we have a previous one?
    if(window.sessionStorage && window.sessionStorage.getItem("selected")) {
        previous = Number(window.sessionStorage.getItem("selected"));
    } else {
        previous = -1;
    }
    
    //Pick one by random
    var selected = Math.floor(Math.random()*numItems);
    while(selected === previous && numItems > 1) {
        selected = Math.floor(Math.random()*numItems);
    }
    
    if(window.sessionStorage) window.sessionStorage.setItem("selected", selected);
    
    //And set it
    document.querySelector("ul#menu li:nth-child("+(selected+1)+")").classList.add("selected");
}
</script>

</body>
</html>

 
 
 
 
JQuery

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • jQuery vs. Angular: Common Differences You Must Know
  • CSS3 Transitions vs. jQuery Animate: Performance
  • Better Scaffolding with jQuery - Part I
  • How to Call Rest API by Using jQuery AJAX in Spring Boot? [Video]

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: