Updated April 10, 2023
Introduction to jQuery not class
The jQuery not() class is defined as the selector which selects all the html elements that will be accepts and except the some of the elements. It is mostly used for to combine and together with the another selector elements that will select all the thing like elements except some of the elements that is to be specified with the groups. The “selector” is the main and required parameter for to specifies the html elements is not to select and this parameter is accepted with any kind of selectors includes the other html elements which is utilised on the script.
Syntax:
In jQuery library not() is the selector which selects all the elements that accepts only some elements other than the specified element. The not() is also one of the method it can have the “selector and function” parameters for passing the elements in the script. It also used with the other elements for to select the jQuery library class on the application.
<html>
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js>
</script>
<script>
$(document).ready(function(){
$("htmlelement:not(selector or function)").css("","");
----some jQuery script logic codes-----------
});
</script>
</head>
<body>
----some logics depends on the user requirement---
</body>
</html>The above codes are the basic syntax for to utilising the not() method in the jQuery script on the application.
How not class Works in jQuery?
- The jQuery library has default classes and methods for implementing the UI in the web application.
- More ever it is mainly in the front end layer, like that not() method is used to select or defined the classes, functions which is related to the html elements.
- Also the mostly used in the another elements which is already selected on the html elements except some specified elements.
- Mostly it will used together with the another selectors to select and use the properties in the other elements except for the specified elements on the method group.
- We used all the selectors like css selector we can pass the value as string in the not() method it includes text and other comment nodes for to remove the unwanted nodes in the application.
- By using the jQuery object we can create the filtering process we also specified the nodes which has mentioned on the specific selectors is already applied on the script.
- With the help of filtering features it may be the array or string values depends on the requirement, returning value will be of boolean type the filtered set values which are excluded it returns true while all other elements are included and returning on the table.
Examples of jQuery not class
Given below are the examples of jQuery not class:
Example #1
Code:
<html>
<head>
<title>Welcome to My Domain it’s the First Example</title>
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li:not(.first)").css("background-color", "blue");
$("li:not(.second)").css("background-color", "solid-blue");
$("li:not(.third)").css("background-color", "green");
$("li:not(.four)").css("background-color", "red");
$("li:not(.five)").css("background-color", "violet");
$("li:not(.six)").css("background-color", "yellow");
$("li:not(.seven)").css("background-color", "pink");
});
</script>
</head>
<body>
<ul>
<li class="first">Have a Nice day user it’s a first color</li>
<li class="second">Have a Nice day user it’s a second color.</li>
<li class="third">Have a Nice day user it’s a third color</li>
<li class="four">Have a Nice day user it’s a fourth color</li>
<li class="five">Have a Nice day user it’s a fifth color</li>
<li class="six">Have a Nice day user it’s a sixth color</li>
<li class="seven">Have a Nice day user it’s a seventh color</li>
</ul>
</body>
</html>Output:
In above example we used .not() method with parameter has .li selector for to perform the operation on the specific html elements. By using css style the id is passing to the parameter element for to highlight the application page.
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#first").click(function () {
$( "div" ).not( ".first").fadeTo('slow', 1.3).fadeTo('slow', 1.2)
});
$("#second").click(function () {
$( "div" ).not( ".second").fadeTo('slow', 0.75).fadeTo('slow', 1.3)
});
$("#third").click(function () {
$( "div" ).not( ".third").fadeTo('slow', 0.25).fadeTo('slow', 2.0)
});
$("#four").click(function () {
$( "div" ).not( ".four").fadeTo('slow', 1.2).fadeTo('slow', 1.6)
});
$("#five").click(function () {
$( "div" ).not( ".five").fadeTo('slow', 0.75).fadeTo('slow', 1.8)
});
});
</script>
</head>
<style>
.eg{
height:63px;
width:67px;
padding:17px;
margin:13px;
display:inline-block;
}
.third{
background-color:green;
}
.second{
background-color:red;
}
.first{
background-color:blue;
}
.four{
background-color:pink;
}
.five{
background-color:violet;
}
</style>
<body>
<h1> Welcome To My Domain its a second example</h1>
<marquee> <img src="E:\\website
.jpg" alt="website.jpg" width="52" height="73"></marquee>
<p> Kindly click the button for blinking your colors</p>
<div class="eg first"></div>
<div class="eg second"></div>
<div class="eg third"></div>
<div class="eg four"></div>
<div class="eg five"></div>
<p><button id="second">Have a Nice day users once click this button the "blue,green and violet" box is blinked</button> <button id="third"> The third id for CSS Style colors are blinked</button> <button id="first">The first id for CSS Style colors are blinked</button></p>
</body>
</html>Output:
In second example we used .not() method with different set of color boxes. It will be blinking after we select the button which we configured to the specific color boxes. Additionally, we have used the images for user-perspectives in attraction.
Example #3
Code:
<!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(){
$("div").animate({left: '125px'});
});
});
$(document).ready(function(){
$("#eg").click(function () {
$( "div" ).not( ".eg").fadeTo('slow', 2.5).fadeTo('slow', 1.9);
});
});
</script>
<style>
eg{
height:63px;
width:67px;
padding:17px;
margin:13px;
display:inline-block;
background-color:violet;
}
</style>
</head>
<body>
<button onclick="demo()">Welcome To My Domain its a Third Example</button>
<p>Have a Nice Day users it’s an animation effect you seen on this page please continue to work with our application we will give additional features for to utilising this application</p>
<div style="background:pink;height:134px;width:145px;position:absolute;">
<img src="E:\\website.jpg" alt="website.jpg" width="145" height="134">
</div>
<script>
function demo()
{
alert("Thank you users you have done the animation effect successfully thank you so much for spending the time on our application please stay back we will offer more features");
}
</script>
</body>
</html>Output:
After clicking on the button the output is:
After clicking on the Ok button the output is:
In the final example we used some animation effect on the jQuery library also we used javascript function for to display the alert message after we done the animation effect for the specific image. Here we used .not() method for using the css style selector on the script. After clicking the alert message box the image moves to the centre position which we have configured on the script.
Conclusion
Generally, the jQuery libraries are used for creating the UI widgets and attractive the front-end layer of the application. Like that not() method is one of the built-in method for to select and utilise the html elements in the script. It supports all type of browsers and environment for to run the application.
Recommended Articles
This is a guide to jQuery not class. Here we discuss the introduction, how not class works in jQuery? and examples respectively. You may also have a look at the following articles to learn more –
