We've all heard it, "If you add jQuery to your resume, don't expect an interview". I'm here to change that, adding jCurry, no matter the job application, guarantees you the CEO position.

Cooking up this project finally made me play less Rocket League and focus on some personal work. So I now proudly present to you, jCurry. Fast & small javascript library for quick web development because let's be real, most of us used the same 10 jQuery functions. Written from scratch and without any reference by yours truly.

Simply clone this repository, which also serves as a starting template. If you prefer things your way, simply copy the minified code in the source folder. Happy coding!

Notice: I love feedback. Please, report any issues or feature requests if you have any. I will literally make any of your wishes happen.

As stated, I will be absolutely delighted if someone has a feature requests and if it's in my powers to implement it. That being said, before you request a feature, check out the Projects tab if it isn't already being considered / in development.

You start a chain by using a selector and then chain functions as needed. For example:

$(".list") // Get all elements with the class .list
  .children() // Get its child elements
  .first() // Select the first one
  .text("First list item") // Set its text

Every callback exposes the $util object which contains numerous helper functions. You can find description of each function in this documentation here.

Every callback exposes the $state property which is a simple way of sharing data in any and inbetween chains. This could be easily solved with a variable outside of your chains but this solution doesn't pollute your code.

$("li").each(({ self, $state }) => {
  if (!$state.listItems) $state.listItems = []
  $state.listItems.push(self.textContent)
})

$("ul").on("click", ({ $state }) => console.log($state.listItems))

Selects an array of elements which match the selector. It offers extensive ways to query elements. For full documentation check it out on MDN.

$("button") // Selects every button
$(".my-button") // Selects every element with the 'my-button' class
$("#my-id") // Selects the element with id set to 'my-id'
$("[href]") // Selects every element with the 'href' attribute
$("[title=hello]") // Selects every element with the 'title' attribute with value 'hello'

// You can also retrieve the jCurry's $state and $utils

const state = $("$state")
const utilities = $("$util")

You can also attach the .get() function which returns the matched elements so you can manipulate them outside of the curry scope.

// Returns a HTMLCollection of all button elements
const buttons = $("button").get()

// Returns an array of every input's value
const values = $("input").get("value")

Parameters:

• condition
• applier default: every (if condition is an array, set if it should apply to 'some', 'every' or 'none' of the selected elements)

Used in conditions. Accepts the same selector syntax as $(). Returns true if condition satisfies at least one element in matched elements.

if ($("[type=checkbox]").is(":checked")) {
  // At least one checkbox is checked
}

if ($("ul").is(["ul", ".specific-list"], "some")) {
  // Checks if ANY <ul> is, well, <ul> and has '.specific-list' class
}

Parameters:

• callback (optional) exposes:
  • self selected element

Selects the first element in matched elements. Accepts a callback.

$("li").first().text("I am first")

Parameters:

• callback (optional) exposes:
  • self selected element

Selects the last element in matched elements. Accepts a callback.

$("li").last().text("I am last :(")

Parameters:

• index
• callback (optional) exposes:
  • self selected element
  • index of selected element

Selects the element at the provided index in matched elements. It is 1 indexed, meaning if no index or index 0 is provided, it returns the first element.

$("li").nth(2).text("I am second!")

Parameters:

• index (optional)
• callback (optional) exposes:
  • self selected element
  • index of selected element
  • prev previous selector

Selects the previous / next elements of the matched elements.

<button class="un-rev">Reverse</button>
<p>Hello World</p>
<button class="rev">Reverse</button>

$(".rev").on("click", ({ self }) => {
  $(self).prev().text("dlroW olleH")
})

$(".un-rev").on("click", ({ self }) => {
  $(self).next().text("Hello World")
})

Parameters:

• callback (optional) exposes:
  • self parent element
  • child previous selector

Selects parent nodes of each matched elements.

<div class="wrapper">
  <p>I am a special text</p>
</div>

$("p").each(({ self }) => {
  if ($(self).parent().is(".wrapper")) {
    $(self).parent().addClass("wrapper-has-p")
  }
})

Parameters:

• callback (optional) exposes:
  • self child elements
  • parent parent element

Selects each selected elements child nodes.

const listItems = $("ul").children().get()

Parameters:

• index
• callback (optional) exposes:
  • self selector element
  • children child elements

Selects the child nodes of the matched elements at provided index.

$("ul").nthChild(2).text("I am second!")

Parameters:

• event
• callback exposes:
  • e or event
  • self
• options (optional)
  • event listener options (MDN)

Binds an event listener to matched elements.

$(".wrapper").on("mouseenter", ({ self }) => {
  $(self).css("backgroundColor", "red")
})

Parameters:

• callback exposes
  • e or event
  • self
• options (optional)
  • event listener options (MDN)

Shorthand for binding $.on('click', callback) to to matched elements..

$("button").click(({ self }) => console.log(`Clicked ${self.textContent}`))

Usage #1 Parameters:

• functions
  • enter callback, executes on mouseenter
  • leave callback, executes on mouseleave
• options (optional)
  • event listener options (MDN)

Shorthand for binding $.on('mouseenter', callback) and $.on('mouseleave', callback) to matched elements.

$("p").hover({
  enter: ({ self }) => $(self).css("background", "red"),
  leave: ({ self }) => $(self).css("background", "transparent"),
})

Usage #2 parameters:

• callback

In cases where we only want to bind styles / classes and so on when user enters and reset once user leaves. We can use the function parameter which is the equivalent of only using the enter function.

// This example deems the same result as the previous one
$("p").hover(({ self }) => {
  $(self).css("background", "red")
})

NOTE: This is an experimental technology and the reset to previous state might not fully work. Feedback is appreciated.

Parameters:

• classList

Appends class or a class list to the matched elements.

$("span").addClass("color-red")
$("span").addClass("color-red background-blue")
$("span").addClass(["color-red", "font-size-14"])

Parameters:

• classList

Removes class or a class list from the matched elements.

$("span").delClass("color-red")
$("span").delClass("color-red background-blue")
$("span").delClass(["color-red", "font-size-14"])

Parameters:

• classList

Toggles between the provided class or a class list on the matched elements.

$("button").click(({ self }) => $(self).next().toggleClass("active"))

Parameters:

• displayValue (optional), default: block

Used for showing hidden elements. Applies the display=displayValue style to every matched element.

$("button").click(() => {
  $(".hidden-wrapper").show("inline-flex")
})

Used for hiding visible elements. Applies display=none style to every matched element.

$("button").click(() => {
  $(".hidden-wrapper").hide()
})

Parameters:

• displayValue (optional), default: block

Toggles between $.show(displayValue) and $.hide() on every matched element.

$("button").click(() => {
  $(".hidden-wrapper").toggle("inline-flex")
})

Usage #1 parameters:

• property CSS property name
• value CSS property value

Appends inline style to the matched elements.

$("ul").css("listStyle", "none")

Usage #2 parameters:

• style object of CSS property:value pairs

Appends a style object to the matched elements,

$("ul").css({
  listStyle: "none",
  background: "blue",
})

Parameters:

• duration (optional) default: 500 ms
• easing (optional) default: ease-in-out

Applies revealing sliding down animation to matched elements.

$("button").click(() => {
  $(".hidden-wrapper").slideDown(250, "linear")
})

Parameters:

• duration (optional) default: 500 ms
• easing (optional) default: ease-in-out

Applies hiding sliding up animation to matched elements.

$("button").click(() => {
  $(".hidden-wrapper").slideUp(1000)
})

Parameters:

• duration (optional) default: 500 ms
• easing (optional) default: ease-in-out

Toggles between $.slideDown() and $.slideUp() on matched elements.

$("button").click(() => {
  $(".hidden-wrapper").slideToggle(1000)
})

Usage #1 parameters:

• properties object of properties to animate (like CSS object)
• options (optional)
  • length (optional) default: 500 ms
  • easing (optional) default: ease-in-out
  • callback (optional) executes once animation completes, exposes:
    • self animated element

Applies selected CSS object styles in animation. Unlike jQuery it only applies temporary transition property to the animated elements.

$("button").click(({ $util }) => {
  $("h1").animate(
    {
      marginLeft: 200,
      backgroundColor: "red",
    },
    {
      length: "1s", // or 'length: 1000'
      easing: $util.bez("easeInOutCubic"), // cubic-bezoar(0.65, 0, 0.35, 1)
      callback: ({ self }) => {
        // In callback we can infinitely execute more animations if needed
        $(self).animate({
          marginLeft: "0px",
          backgroundColor: "transparent",
        })
      },
    }
  )
})

Usage #2 parameters:

• callback which exposes:
  • start starts the animation, can be called multiple times. Takes in the same parameters as usage #1
    • properties
    • options
  • self animated element

A different and more flexible approach to animation. Allows you to essentially execute keyframed animation in any length you need. You can decide when to trigger each keyframe and so on. You also gain space to execute any kind of code you want before you start the animation.

$("button").click(({ $util }) => {
  $("h1").animate(async ({ self, $util, start }) => {
    // Execute code before animation begins

    // For example, I can get the element's width and use that
    // const marginLeft = $util.getStyleProperty(self, "width")

    // Or make an API call and then execute animation when it resolves
    await start(
      {
        marginLeft: "200px",
        backgroundColor: "red",
      },
      {
        length: 1000,
        easing: $util.bez("easeInOutCubic"),
      }
    )

    await start({
      marginLeft: 0,
      backgroundColor: "transparent",
    }).then(() => {
      // You can attach .then() to the last keyframe to detect when animation completes
    })
  })
})

Parameters:

• to default: 1, specify opacity to which the element fades in
• options - $.animate() options object
  • length (optional) default: 500 ms
  • easing (optional) default: ease-in-out
  • callback (optional) executes once animation completes, exposes:
    • self animated element

Applies opacity fade in effect to an element. You can specify at what value it stops.

$("button").click(() => {
  // Content class elements will show up with opacity 0.95
  $(".content").fadeIn(0.95)
})

Parameters:

• to default: 0, specify opacity to which the element fades out
• options - $.animate() options object
  • length (optional) default: 500 ms
  • easing (optional) default: ease-in-out
  • callback (optional) executes once animation completes, exposes:
    • self animated element

Applies opacity fade out effect to an element. You can specify at what value it stops.

$("button").click(() => {
  // Content class elements will fade-out to opacity 0
  $(".content").fadeOut()
})

Parameters:

• from default: 0
• to default: 1
• options - $.animate() options object
  • length (optional) default: 500 ms
  • easing (optional) default: ease-in-out
  • callback (optional) executes once animation completes, exposes:
    • self animated element

Toggles between $.fadeIn and $.fadeOut().

$("button").click(() => {
  $(".content").fadeToggle(0, 0.5, { length: 500, easing: "linear" })
})

Parameters:

• callback, exposes:
  • self current iterated element
  • prev previous element in iteration
  • index index of iteration

Iterates over selected elements and calls callback function on each iteration

$("ul")
  .children()
  .each(({ self, index }) => {
    $(self).text(`I am ${index + 1}}.`)
  })

Parameters:

• callback, exposes:
  • self current iterated element
  • prev previous element in iteration
  • index index of iteration
  • next function that must be called to execute next iteration

Works exactly like $.each() but to execute next iteration, you must call the next() function. This iterator is good for chaining data fetching and other async actions which could cause issues when all called instantly.

$(".users").asyncEach(({ next, self }) => {
  const users = $(self).attr("data-users-endpoint")

  new Promise((resolve) => fetch(users))
    .then((response) => response.json())
    .then((response) => {
      $(self).addChild(response.template)
      next()
    })
})

Parameters:

• callback exposes:
  • self iterated element
  • index

Iterates over matched elements and removes those which do not match the provided contition.

const everyEvenChild = $("ul")
  .children()
  .filter(({ index }) => index % 2 === 0)
  .get()

Inserts new element(s) either in front or after matched elements

Usage #1 parameters:

• template template string

$("blockquote").prepend("<label>And so they said:</label>")

Usage #2 parameters:

• callback exposes:
  • self element which we will add the new element to
  • render render function

$("input").prepend(({ self }) => {
  const labelText = $(self).attr("data-label")

  return `<label>${labelText}</label>`
})

If you are familiar with modern frameworks, you must have heard the term render function. Well jCurry's render functions have exactly the same syntax. For reference Vue documentation

$("input").prepend(({ self }) => {
  const labelText = $(self).attr("data-label")

  return render("label", { title: labelText }, labelText)
})

Parameters:

• callback exposes:
  • self element which we will add the new element to
  • render render function
• append default: true - wether to insert new elements before or after existing children

Works exactly the same way as $.append and $.prepen except it creates the new element as a child node of the matched elements.

$(".list-wrap").addChild(({ $util, render }) => {
  // Generate an array of 5 items starting at index 1
  const items = $util.from(5, 1).map((item) => {
    return render("li", `#${item} List item`)
  })

  // Create an unordered list and append the items as its children
  return render("ul", { class: ".list" }, items)
})

Parameters:

• text
• location default: replace - replaces elements text
  • allowed values: replace, before OR prepend, after OR append

Replaces or appends text to the matched elements.

$("p").text("I am the paragraph now")
$("p").text("The text is as follows:", "before")
$("p").text(".", "after")

Parameters:

• property
• value

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

// Returns value of a single attribute
const path = $("a").attr("href")
// Returns array of values from selected attributes
const [path, title] = $("a").attr(["href", "title"])

// Assigns value to key
$("a").attr("href", "path/to/page")

// Will throw a warning and skip this chain node
$("a").attr("href", ["path/to/page", "other/to/pat"])

// Assigns key:value pair based on index
$("a").attr(["href", "title", "data-iterations"], ["/hello", "Hello World", 10])

// Sets the same value for every key
$("a").attr(["title", "data-description"], "I am the same text!!!")

Removes matched elements from the DOM.

$("ul")
  .children()
  .filter(({ self, index }) => index % 2 === 0)
  .del()