jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API. https://api.jquery.com/
1. you can download it and import that and use.
- Now in download also there are 2 types "Download the compressed" and "Download the uncompressed,"
-Compressed is used in production level. (prefer this)
-uncompressed you can see the whole code that how it has written.
2. import the version and start using it.
- this methid called "jquery CDN(Content delivery network). it will surve the jquery from cdn itself.
3. install it and use it.
- you can install it will "npm i" and use it.
- it start with $. (this "$" means "jquery". if you write "jquery" at "$" place then also it will work.)
- $('selector').action();
-$('selector').hide();
-$('button').click(function(){
log('you clicked btn.')
$(this).hide();//that particular thing only hide.
}); //do this when btn click.
- this keyword - Suppose you have multiple button you have targeted with tag only. So if you click then all button will hide. so to solve this issue we use this.hide.
- 'button' is just a selector. you can select this by .class and #ID as well.
1. $(document).ready(function () {
$("p").click(function () {
alert("Hey P");
});});
|| OR ||
2. $(function () {
$("p").click(function () {
alert("Hey P");
});});
(So you can direact write only $ and remove "(document).ready". but good practice is First method only.)
- Element/Tags
- ID
- Class
- * (Universal selectors)
- $(p.odd).click(); (p is element)- It will select odd.
- $(p:first).click(); - It will select first para will be clicked.
-
- Mouse Event: click, dblclick, mouseenter, mouseover, mousemove, mouseleave, mousedown, mouseup.
- click- on click, show&Hide,toggle button, fadeIn(), fadeOut(), fadeToggle(), fadeTo(), slideUp and slideDown with SlideToggle
- Keyboard Events: Keypress, keydown, Keyup.
- Form Events: Submit, Change, Fucus, Blur.
- document/window events- load, resize, scroll, unload.
- to get text/elemet value we use .text or .html. but
- to get form, input or textarea value we use .val (to teplace text also we use val only NOT "text or html- these are only of text and element.")
- $('#wiki').empty(); - this will empty the value of element.
- $('#wiki').remove(); - This will delete the Element from DOM.
- $('#wiki').addClass('myClass');
- $('#wiki').removeClass('myClass');
- $('#wiki').toggleClass('myClass');
-$("#rana").css('color', 'red'); //set css value
-$("#rana").css('color'); //findout the css value
- Ajex is an art of exchanging data without loading a page.
- Sometimes Google doesnot allow you to use data from other origin and that error is called CORS error.
- GET METHOD:-
- $.get('https://code.jquery.com/jquery-3.3.1.js', function (data, status) { alert(data); })
- $.get('https://code.jquery.com/jquery-3.3.1.js', function (data, status) { alert(status); })
- POST METHOD
$.post('https://code.jquery.com/jquery-3.3.1.js',
{ name: 'harry', channel: 'code with harry' },
function (data, status) { alert(status) });