JavaScript Tutorial
indexjavascript history javascript versions environment setup variables and data typesOperatorsstrings and numbers programming constructs arrays built in objects functions objects call apply bind closures error handling debugging CallbacksJS in Browser
BOM and DOMBrowser EventsWeb APIAjaxJQueryMost popular librariesAdvanced
prototypes Object Oriented ProgrammingModulesAsynchronous programmingBinary DataInternationalizationreactangularjsProjectsMiscellaneous
typescriptJS ecosystemChrome dev toolstesting frameworksInterview questions and AnswersJQuery
JQuery is a JS library which simplifies client side scripting. We can easily access html elements and manipulate them using JQuery. JQuery was first released in 2006. You will need to add JQuery in your project in 2 ways.- using cdn
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
- using npm - npm install jquery and then import $ from "jquery";
Examples
Below examples demonstrate how we can use JQuery.
//mouse events - click, mouseenter
$("#cartbtn").click(function(){
$(".cart").show();
$("#p").hide();
// other methods - fadeIn(2000), fadeOut(2000),
// slideDown(), slideUp(), slideToggle()
// text() - Sets or returns the text
// html() - Sets or returns the html
// val() - Sets or returns the value
// attr("title", "xgz");
// append() - append text
// prepend() - prepend text
// after() - add content after element
// before() - add content before element
// remove() - remove the element and children
// empty() - remove the children
// css manipulation
// addClass() - add class to element
// removeClass() - remove class from element
// toggleClass() - toggle adding/removing class to element
// css() - apply css
//traversing is also possible
});
//keyboard events - keypress
//form events - submit, change, focus, blur
//document events - load, resize, scroll, unload
Web development and Automation testing
solutions delivered!!