=============
Jquery::
=============
jQuery is a fast, lightweight JavaScript library designed to simplify HTML document traversal,
manipulation, event handling, and AJAX interactions. It provides a simplified and efficient way to write
JavaScript code that works seamlessly across different web browsers.
Code:
===================
[Link]
===================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p class='odd'>this is my body1</p>
<p id='second'>this is my body2</p>
<p class='odd'>this is my body3</p>
<p>this is my body4</p>
<button id='but'>Toggle now</button>
<div id='wiki'>
Code With Harry(1770–3854)
</div>
<form>
<input id='inp' type="text">
<textarea id='ta'> this is your value my text area</textarea>
</form>
</body>
<script src="js/[Link]"></script>
<script src="js/[Link]"></script>
<!-- <script src="[Link] -->
</html>
=============
[Link]
=============
$(document).ready(function () {
[Link]('I am in a new file now');
//Your jquery code here
[Link]("We are using jQuery");
// jQuery Syntax looks like this
// $('selector').action()
//clicks on all the p elements.
// $('p').click(); //click on p
// $('p').click(function () {
// [Link]('you clicked on p', this);
// // $('#id').hide();
// // $('.class').hide();
// }); //do this when we click on p
// $('p').dblclick(function () {
// [Link]('you double clicked on p', this);
// // $('#id').hide();
// // $('.class').hide();
// });
// $('p').hover(function () {
// [Link]('you hoverd on: ', this);
// // $('#id').hide();
// // $('.class').hide();
// },
// function (){
// [Link]('Thanks for coming')
// });
// there are three main types of selectors in jQuery
// 1. element selector
// 2. id selector
// 3. class selector
// 1. Element selector - This is an example of element selector which clicks on all p
// $('p').click();
// 2. Id selector - this is an example of id selector
// $('#second').click();
// 3. Class selector - this is an example of id selector
// $('.odd').click();
// other selectors
// $('*').click() // clicks on all the elements
// $('[Link]').click() // clicks on all the elements
// $('p:first').click() // clicks on all the elements
// Events in jQuery
// Mouse events = click, dblclick, mouseenter, mouseleave
// KeyboardEvent = keypress, keydown, MediaKeyStatusMap
// form events = submit, change, focus, blur
// document/window events = load, resize, scroll, unload
// demoing the on method
$('p').on(
click: function () {
[Link]('Thanks for clicking', this);
},
mouseleave: function () {
[Link]("mouseleave");
}
})
// $('#wiki').hide(1000, function () {
// [Link]("hidden");
// })
// $('#wiki').show(1000, function () {
// [Link]("show");
// })
$('#but').click(function () {
$('#wiki').fadeOut(5000);
})
// fadeIn()
// fadeOut()
// fadeToggle()
// fadeTo()
// Slide methods - speed and callback parameters are optional
// $('#wiki').slideUp(1000, function(){
// [Link]('done');
// })
// $('#wiki').slideDown(1000)
// $('#wiki').slideToggle(1000)
// Animate function in jQuery
// $('#wiki').animate({
// opacity:0.3,
// height: '150px',
// width:'350px'
// }, "fast")
// $('#wiki').animate({ opacity: 0.3 }, 4000);
// $('#wiki').animate({ opacity: 0.9 }, 1000);
// $('#wiki').animate({ width: '350px' }, 12000);
// $('#ta').val('setting it to harry');
// $('#ta').html('setting it to harry');
// $('#ta').html('setting it to harry3');
// $('#inp').html('setting it to harry3');
// $('#inp').val('setting it to harry3');
// $('#inp').empty()
// $('#wiki').empty()
// $('#wiki').text('you are good')
// $('#wiki').remove()
// $('#wiki').addClass('myclass')
// $('#wiki').addClass('myclass2')
// $('#wiki').removeClass('myclass2')
// $('#wiki').css('background-color', 'red')
// $('#wiki').css('background-color')
// AJAX Using jQuery
// $.get('[Link] function (data, status) { alert(data); })
// $.get('[Link] function (data, status) { alert(status); })
// $.post('[Link]
// { name: 'harry', channel: 'code with harry' },
// function (data, status) { alert(status) });
});
