Most Used JQuery Functions

Most Used JQuery Functions

There are many functions available in Jquery event functions, traversing functions, effect functions, get and set content functions. We will see some of the functions which are most used in the project, which is listed below category wise:

Most Used JQuery Events:

1. click(): click event is mostly used in projects. It is a mouse event. This function is executed when the user clicks a mouse.

Example :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this). css("background-color", "pink");
  });
});
</script>
</head>
<body>
 
<p>If you click on me, I will disappear.</p>
</body>
</html>
 

2.keyup(): A keyup event is a keyboard event. This event is executed when the user releases a key.

Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("input").keydown(function(){
    $("input").css("background-color", "yellow");
  });
  $("input").keyup(function(){
    $("input").css("background-color", "pink");
  });
});
</script>
</head>
<body>
 
Enter your name: <input type="text">
 
</body>
</html>
 

3.change(): It is an input event mostly used with a select form element. This event is executed when the user changes the select box's value.

Example:
 
<!DOCTYPE html>
<html>
<head>
<title>change event</title>
</head>
 
<body>
 
<select id="selectval">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
 
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#selectval").change(function(){
    alert($(this).val());
  });
});
</script>
</body>
</html>
 

4.mouseover: It is a mouse event. This event is executed when the user mouse over on an element.

Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("background-color", "yellow");
  });
});
</script>
</head>
<body>
 
<p>Move the mouse pointer over this paragraph.</p>
 
</body>
</html>
 

5.scroll(): This event is a mouse wheel event. This event is executed when the user scrolls down or scroll up the page.

Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
 
<style>
.main
{
width:100%;
height:1500px;
background:#ddd;
}
 
.topheader
{
width:100%;
height:50px;
background:#000;
}
 
.header
{
width:100%;
height:100px;
background:#f00;
}
 
 
 
.fixed-header
{
width:100%;
position:fixed;
top:0;
z-index:999;
}
 
 
</style>
 
</head>
<body>
 
<div class="main">
<div class="topheader"></div>
<div class="header"></div>
</div>
 
 <script>
 
            $(window).scroll(function(){
    if ($(window).scrollTop() >= 300) {
        $('.header').addClass('fixed-header');
     
      
    }
    else {
        $('.header').removeClass('fixed-header');
     
     
    }
});
</script>
</body>
</html>
 

Most Used JQuery Effects:

1. hide(): This hide() method is used to hide html element.

Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
 
<p>If you click on the "Hide" button, I will disappear.</p>
 
<button id="hide">Hide</button>
</body>
</html>



Example : hide() method with speed
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>
</head>
<body>
 
<button>Hide</button>
 
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
 
</body>
</html>

 


2.show(): This method is used to show HTML element.

Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
 
<p>If you click on the "Hide" button, I will disappear.</p>
 
<button id="show">Show</button>
</body>
</html>



Example : hide() method with speed
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").show(1000);
  });
});
</script>
</head>
<body>
 
<button>Show</button>
 
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
 
</body>
</html>

 


3.toggle():  toggle method is used to toggle element means hiding and showing element. it behaves likes switch button on and off.

Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>
 
<button>Toggle between hiding and showing the paragraphs</button>
 
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
 
</body>
</html>

 


4.slideUp(): This method is used to slide up HTML element.

Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>
<style>
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
 
#panel {
  padding: 50px;
}
</style>
</head>
<body>
 
<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>
 
</body>
</html>

 


5.slideDown(): This method is used to slide down HTML element.

Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
<style>
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
 
#panel {
  padding: 50px;
  display: none;
}
</style>
</head>
<body>
 
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
 
</body>
</html>

 


6. slideToggle(): This method is used to toggle slieup and slide down.

Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
<style>
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
 
#panel {
  padding: 50px;
  display: none;
}
</style>
</head>
<body>
 
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
 
</body>
</html>

 


Most Used JQuery GET/SET Content Functions:

1.text(): This method is used to get content from the HTML element. It only get text content.

Example:  Get Content using text() function
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
});
</script>
</head>
<body>
 
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
 
<button id="btn1">Show Text</button>
 
</body>
</html>
 


Example:  Set Content using text() function
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
  $("#test").text("Hello world!");
});
});
</script>
</head>
<body>
 
<p id="test">This is some text in a paragraph.</p>
 
<button id="btn1">set Text</button>
 
</body>
</html>

 


2.html(): This function is used to get html content form HTML element.

Example:  Get Content using html() function
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").html());
  });
});
</script>
</head>
<body>
 
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
 
<button id="btn1">Show Text</button>
 
</body>
</html>

 

Example:  Set Content using html() function
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
  $("#test").html("<b>Hello world!</b>");
});
});
</script>
</head>
<body>
 
<p id="test">This is some text in a paragraph.</p>
 
<button id="btn1">set Text</button>
 
</body>
</html>

 

3.val(): This method is used to get or set form input value.

Example: Get value
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>
</head>
<body>
 
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
 
<button>Show Value</button>
 
</body>
</html>

 

Example : Set Value
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val(“set content”));
  });
});
</script>
</head>
<body>
 
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
 
<button>Show Value</button>
 
</body>
</html>

 

Most Used JQuery Traversing Functions:

1.parent(): This method is used to get the parent element of the selected element.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("span").parent().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
 
<div class="ancestors">
 
  <div style="width:500px;">div (grandparent)  
    <p>p (direct parent)
      <span>span</span>
    </p>
  </div>
</div>
 
</body>
</html>

 

2.next(): This method is used to select the next element of the selected element.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
.siblings * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h2").next().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="siblings">
 
<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>
 
</body>
</html>

 

3.prev(): This method is used to select the previous element of the selected element.

Example:
<!DOCTYPE html>
<html> 
<head>
<style>
.siblings * {   display: block;   border: 2px solid lightgrey;  
color: lightgrey; 
  padding: 5px;   margin: 15px; 
}
</style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){ 
$("h2").prev().css({"color": "red", "border": "2px solid red"}); });
</script>
</head>
<body class="siblings">  
<div>div (parent)   
<p>p</p>   
<span>span</span>   
<h2>h2</h2>   
<h3>h3</h3>  
<p>p</p> </div>  
</body> </html>

 

Categories: web designing jquery

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 25 Days

Crash : 15 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 6 Months

Fastrack : 4 Months

Crash : 2 Months

Related Blogs

Request For Demo