Scribd
Upload
50 views

Jquery

jQuery is a JavaScript library that simplifies HTML document traversal, manipulation, event handling, and AJAX interactions. It provides efficient ways to write JavaScript code that works across browsers. The document includes code for an index.html file and myjQuery.js file, which contains jQuery code examples like selecting elements, handling events, animating elements, and making AJAX requests.

Uploaded by

Haseeb Awan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
50 views

Jquery

jQuery is a JavaScript library that simplifies HTML document traversal, manipulation, event handling, and AJAX interactions. It provides efficient ways to write JavaScript code that works across browsers. The document includes code for an index.html file and myjQuery.js file, which contains jQuery code examples like selecting elements, handling events, animating elements, and making AJAX requests.

Uploaded by

Haseeb Awan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

=============

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:

===================

index.html

===================

<!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/jquery-3.3.1.min.js"></script>

<script src="js/myjQuery.js"></script>

<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->

</html>

=============

myjQuery.js

=============

$(document).ready(function () {

console.log('I am in a new file now');

//Your jquery code here

console.log("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 () {

// console.log('you clicked on p', this);

// // $('#id').hide();

// // $('.class').hide();

// }); //do this when we click on p

// $('p').dblclick(function () {

// console.log('you double clicked on p', this);

// // $('#id').hide();

// // $('.class').hide();

// });

// $('p').hover(function () {

// console.log('you hoverd on: ', this);

// // $('#id').hide();

// // $('.class').hide();

// },

// function (){

// console.log('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

// $('p.odd').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 () {

console.log('Thanks for clicking', this);

},

mouseleave: function () {

console.log("mouseleave");
}

})

// $('#wiki').hide(1000, function () {

// console.log("hidden");

// })

// $('#wiki').show(1000, function () {

// console.log("show");

// })

$('#but').click(function () {

$('#wiki').fadeOut(5000);

})

// fadeIn()

// fadeOut()

// fadeToggle()

// fadeTo()

// Slide methods - speed and callback parameters are optional

// $('#wiki').slideUp(1000, function(){

// console.log('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('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('https://code.jquery.com/jquery-3.3.1.js',

// { name: 'harry', channel: 'code with harry' },

// function (data, status) { alert(status) });

});

You might also like