jQuery Code Snippets That Make Learning Easy

You are currently viewing jQuery Code Snippets That Make Learning Easy
  • Post category:jQuery
  • Post last modified:June 4, 2026

In one of our projects, we implemented custom event tracking in Google Analytics 4 (GA4) using the Data Layer. While GA4 automatically tracks standard events like page_view, session_start, and first_visit, these built‑in events are often not enough to capture business‑critical user interactions. That’s when custom events become essential.

Custom events allow you to track specific user actions such as button clicks, form submissions, link interactions, and other engagement metrics that are not covered by GA4’s default tracking. To address this, we used jQuery with the Data Layer to capture user interactions and push structured event data into the Data Layer object. This data was then consumed by Google Tag Manager (GTM) and sent to GA4 for reporting and analysis.

In this blog post, I’ll walk you through the key jQuery Code Snippets we used during the implementation. Since every project has a different HTML structure, I have included interactive CodePen demos to help you easily adapt these approaches to your own setup.

Handle click events on email link element

$('a[href^="mailto:"]').on("click", function () {
	//Custom code...
});

Example https://codepen.io/techiesukh/pen/GgNENgL

Handle click events on phone link element

$('a[href^="tel:"]').on("click", function () {
	//Custom code...
});

Example https://codepen.io/techiesukh/pen/raWwWmY

Handle button click event by attribute value

$("button[data-toggle='collapse']").on("click", function () {
	//Custom code...
});

Example https://codepen.io/techiesukh/pen/zxozozW

Handle Form submission event

$(document).on("click", "form input[type=submit]", function () {
	var btnObj = $(this);
	var formObj = $(btnObj).closest("form");
	//Custom code...
});

Example https://codepen.io/techiesukh/pen/ogYoBMO

Handle anchor or button click event by attribute value

$(document).on("click", 'a[data-toggle="modal"], button[data-toggle="modal"]', function (e) {
	//Custom code...
});

Example https://codepen.io/techiesukh/pen/pvNdeax

Get multiple input elements having specific attribute in a form

$("myForm").find("input[type=text],input[type=email]").filter("input[attributename]");

Example https://codepen.io/techiesukh/pen/xbRPqJb

Handle event by multiple selectors as class name

$("#container").on("click", ".btn, .link", function () {
  alert($(this).text());
});

Element https://codepen.io/techiesukh/pen/JobOgdz

Handling multiple events

$("#field").on({
  focus: () => console.log("focus"),
  mouseout: () => console.log("mouseout")
});

$("#box").on({
  mouseenter() { $(this).css("background", "#cce5ff"); },
  mouseleave() { $(this).css("background", "#f2f2f2"); }
});

Example https://codepen.io/techiesukh/pen/MYbONjX

Find ancestors of an element 

$("#btnParent").on("click", function () {
  //parent() → immediate parent
  $(this).parent().addClass("highlight");
});

$("#btnParents").on("click", function () {
  //parents() → all ancestors
  $(this).parents().addClass("highlight");
});

$("#btnParentsUntil").on("click", function () {
  //parentsUntil() → ancestors up to specified element
  $(this).parentsUntil("#grandparent").addClass("highlight");
});

Example https://codepen.io/techiesukh/pen/KwNQGyr

Find descendants of an element

$("#btn").on("click", function () {
  $(".box").removeClass("highlight");
  $("#parent").children().addClass("highlight");
  $("#parent").find(".grandchild").addClass("highlight");
});

Example https://codepen.io/techiesukh/pen/WboMYPv

Find siblings of an element

function reset() {
  $(".item").removeClass("highlight");
}
$("#siblings").click(() => {
  reset();
  $(".active").siblings().addClass("highlight");
});
$("#next").click(() => {
  reset();
  $(".active").next().addClass("highlight");
});
$("#nextAll").click(() => {
  reset();
  $(".active").nextAll().addClass("highlight");
});
$("#nextUntil").click(() => {
  reset();
  $(".active").nextUntil(".item:last").addClass("highlight");
});
$("#prev").click(() => {
  reset();
  $(".active").prev().addClass("highlight");
});
$("#prevAll").click(() => {
  reset();
  $(".active").prevAll().addClass("highlight");
});
$("#prevUntil").click(() => {
  reset();
  $(".active").prevUntil(".item:first").addClass("highlight");
});

Example https://codepen.io/techiesukh/pen/YPpedXB

Find specific element(s) by filtering methods

$("#list li").first().addClass("highlight");
$("#list li").last().css("background", "yellow");
$("#list li").eq(2).css("font-style", "italic");
$("#list li").filter(".active").css("color", "blue");
$("#list li").not(".active").css("border", "2px solid #0291D0");

Example https://codepen.io/techiesukh/pen/ogYEJwV

These are a few jQuery Code Snippets we encountered during implementation. If you’re new to jQuery, I recommend starting with a basic tutorial on W3Schools:

https://www.w3schools.com/jquery/default.asp

Once you’re comfortable with the basics, you can explore more advanced jQuery concepts on the official jQuery website:

https://jquery.com/

Happy Learning!!!

Tags: ,