Today I will be discussing how to generate a JQuery function with some easy examples. This post follows JQuery Lesson1 which introduces JQuery and how to add CSS style using this computer language.

1. How to Add a Class: the add() Method

$(“selector”).addClass()

Jquery Function to Change Color
JQuery Function: Change Color

In the above example the JQuery function aims to change the style of <p> elements into red and italic style. The function is called changeColor() and as explained in the previous lesson can be named anything we want. The $(“selector”) is a <p> element and therefore it becomes $(‘p’). The JQuery .addClass() becomes .addClass(“redClass”) as it calls a class called “redClass” which add style to a specified text (<p>). In the <body> we need to call the JQuery function just specified. We add a button (input type=”button”) that allows users to execute the function on the click of a button. The onclick=”changeColor()” executes the “changeColor()” function when clicking the button.

Here’s the code:

<!DOCTYPE html>
<html>
<head>
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

function changeColor(){
 $('p').addClass("redClass");
 }

<style>
.redClass{
color: red; font-style: italic;
}
</style>
</head>
<body>

<p>Learn JQuery today!</p>
<p>It is very easy!</p>
<p>Just follow this tutorial.</p>

<form>
<input type="button" value="Change Color" onclick="changeColor()"></input>
</form>

</body>
</html>

2. Add and Remove a Class: The toggle() Method

The ToggleClass() is a JQuery method used to add or remove classes. If the class is present, it will be removed, if it is absent, it will be added. If we consider the above example, we could obtain the same results by changing a simple line of code: from .addClass() to toggleClass.

Here’s the code:

<!DOCTYPE html>
<html>
<head>
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

function changeColor(){
 $('p').toggleClass("redClass");
 }

<style>
.redClass{
color: red; font-style: italic;
}
</style>
</head>
<body>

<p>Learn JQuery today!</p>
<p>It is very easy!</p>
<p>Just follow this tutorial.</p>

<form>
<input type="button" value="Change Color" onclick="changeColor()"></input>
</form>

</body>
</html>

3. The size of an Element: The size() Method

The size() method returns the number of elements that matched. The JQuery size() method:

$(“Tag”).size()

JQuery defines the size of an element
JQuery defines the size of an element

As in previous examples, we give the JQuery function a chosen name, such as getSize() followed by the method alert that we described in the previous post (Lesson1). The alert method contains the phrase “the size of li is”, the $(“li”)  as $(“selector”) and the size() method. In the <body> we have 3 <li> elements and a <form> that contains an <input type=”button> which, if clicked, generates a pop-up (alert) that states how many <li> element the <body> contains as the onclick=”getSize()” executes the “getSize()” JQuery function when clicking “Get li Size“.

Here’s the code:

<!DOCTYPE html>
<html>
<head>
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

function getSize(){
 alert("the size of li is:"+$("li").size());
 }

</head>
<body>

<ul>
<li>Homepage</li>
<li>Items</li>
<li>Blog</li>
</ul>

<form>
<input type="button" value="Get li Size" onclick="getSize()"></input>
</form>

</body>
</html>

4. How to show hidden elements: the show() method

The show() method is used to show hidden elements when selected, for instance when clicking to some text or a button.

$(“selector”).show()

JQuery hidden text method
JQuery how to show hidden text

In the above example we want to show some text when users click on some text. As before we define a JQuery function as showText() and we use the method $(“selector”).show() where the selector is a div tag named Test (“#divTest”). In the body we call the JQuery function (“showText”) when clicked over (onclick) the “click here” text. To display the hidden text we call a div whose id is “divTest“. To make things even more visible we give the hidden text some style, a green background and a white font style.

Here’s the code: JQuery Show Function

5. How to hide selected elements: the hide() method

The hide() method is used to hide content for the matching element from the <body>.

$(“selector”).hide()

By simply changing the previous code from .show() to hide(), the JQuery function will turn from showing to hiding content on the click of a button! To make things a little clearer, we can also rename the function hideText. Therefore, the onclick must now call a “hideText” function instead. The last bit of code that needs some modification is the div element style, which does not need  the “display: none;” option anymore.

Here’s the code: JQuery Hide Function

6. How to hide and show: the toggle() Method

The toggle() method allow users to switch between hide and show for the matching element.

$(“selector”).toggle()

By simply changing the previous code from .hide() to toggle(), the JQuery function will turn from hiding content to showing/hiding content on the click of a button! To make things a little clearer, we can also rename the function toggleText. Therefore, the onclick must now call a “toggleText” function instead. Now, the first click on “Click here” will hide (bottom-right) the text, while the second click will show the text again (top-right), and so on.

JQuery Toggle
JQuery Toggle, Show and Hide

 

Here’s the code: JQuery Toggle Function

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.