Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
  • jQuery - Get Started
  • What is jQuery
  • jQuery - Environment Setup
  • Start using jQuery
  • jQuery - Selectors
  • jQuery - Methods
  • DOM Manipulation
  • Attributes Manipulation
  • Dimensions Manipulation
  • Traversing Elements
  • CSS Manipulation
  • Animation
  • Events
  • AJAX Introduction
  • AJAX Methods
  • Get Method
  • Post Method
  • Load Method
  • Selector Reference
  • DOM Manipulation Methods
  • Traversing Methods
  • Effects Methods
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge

jQuery Methods

You learned about jQuery selectors in the previous section. The jQuery selector finds particular DOM element(s) and wraps them with jQuery object. For example, document.getElementById() in the JavaScript will return DOM object whereas $('#id') will return jQuery object. The following figure illustrates the difference.

jQuery Methods

As you can see in the above figure, document.getElementById function returns div element whereas jQuery selector returns jQuery object which is a wrapper around div element. So now, you can call jQuery methods of jQuery object which is returned by jQuery selector.

jQuery provides various methods for different tasks e.g. manipulate DOM, events, ajax etc. The following table lists different categories of methods.

CategoryDescriptionImp Methods
DOM ManipulationThese methods manipulate DOM elements in some manner e.g. changing attribute, style attribute, adding and removing elements etc.after(),
append(),
attr(),
before(),
more..
TraversingThese methods help in navigating from DOM element to another element in a parent child hierarchy e.g. finding ancestors, descendants or sibling element of a specified element.children(),
closest(),
each(),
first(),
next(),
filter(),
parent(),
siblings(),
more..
CSSThese methods get and set css related properties of elements.addClass(),
css(),
hasClass(),
removeClass(),
toggleClass()
more..
AttributesThese methods get and set DOM attributes of elements.attr(),
html(),
removeAttr(),
prop(),
val(),
more..
EventsThese methods are used to handle DOM or JavaScript events.bind(),
blur(),
change(),
click(),
dblclick(),
focus(),
keyup(),
keydown(),
more..
EffectsThese methods are used to add animation to elements.animate(),
fadeIn(),
fadeOut(),
hide(),
show(),
stop(),
more..
DimensionsThese methods are used to get and set the CSS dimensions for the various properties.height(),
width(),
innerHeight(),
innerWidth(),
more..
FormsThese methods and event handlers handle forms and their various elements.blur(),
change(),
val(),
submit(),
more..
AjaxThese methods allow Ajax functionalities with jQuery e.g.get(),
getJson(),
post(),
load(),
more..
CoreThese methods are core methods in jQuery API.jQuery(),
holdReady(),
when(),
more..
DataThese methods allow us to associate arbitrary data with specific DOM elements.data(),
removeData(),
queue(),
dequeue(),
clearQueue(),
more..
MiscellaneousThese methods are useful in various tasks e.g. traversing elements, converting to array etc.each(),
index(),
get(),
toArray(),
more..
UtilitiesUtility methods are helpful in getting information on various things e.g. browser, function, array, window etc.inArray(),
isArray(),
isFunction(),
isNumeric(),
isWindow(),
isXmlDoc(),
more..

The following example shows how to use some of the jQuery methods to manipulate DOM elements.

Example: jQuery Methods
<!DOCTYPE html>
            
<html>
<head>
    <meta name="viewport" content="width=device-width" />
<title>Index</title>
<meta property="og:title" content="Index" />
<script type="text/javascript" src="~/Scripts/jquery-3.3.1.js"></script>
    <script type="">
        $(document).ready(function () {

            $('p').wrap('<div className="myCls">'); 
            $('#myDiv').hide(); 
            $('span').attr( 
                {
                    'style': 'border:solid',
                    'width': '100%'
                });
            $('p').append('This is p.'); 

            $('span').before('<p>This is another p</p>'); 

        });
    </script>
</head>

<body>
    <div id="myDiv"></div>
    <p></p>
    <span></span>
</body>
</html>

Learn about DOM and CSS related methods in the next sections.

TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.