Scribd
Upload
111 views8 pages

Jquery and Ajax Documentation: Script Link

This document provides an overview of jQuery and AJAX. It discusses how to import jQuery, some basic jQuery syntax and selectors for manipulating HTML elements. It also covers common jQuery methods like hide(), show(), val() and more. Finally, it gives examples of how to make GET and POST requests in jQuery using AJAX and handle the responses.

Uploaded by

Ajhar Shaikh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
111 views8 pages

Jquery and Ajax Documentation: Script Link

This document provides an overview of jQuery and AJAX. It discusses how to import jQuery, some basic jQuery syntax and selectors for manipulating HTML elements. It also covers common jQuery methods like hide(), show(), val() and more. Finally, it gives examples of how to make GET and POST requests in jQuery using AJAX and handle the responses.

Uploaded by

Ajhar Shaikh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

JQUERY AND AJAX DOCUMENTATION

JQuery And Ajax Documentation:


jQuery is nothing but JavaScript, but JavaScript has simplified in jQuery using
expression.
If u want use jQuery u need to import one script file
Script link:::
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></scrip
t>
The above script is for jQuery uses ‘$’ symbol so for that symbol we need to
add that script file
Example
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The below is sample example for jquery:


<html><head>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>

pg. 1 Saikumar
JQUERY AND AJAX DOCUMENTATION

<p>If you click on me, I will disappear.</p>


<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>

Some Predefined functions:

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test".

Syntax for script execution:


$(document).ready(function(){

// jQuery methods go here...

});

jQuery Selector:
jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their
name, id, classes, types, attributes, values of attributes and much more. It's
based on the existing css selectors, and in addition, it has some own custom
selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

pg. 2 Saikumar
JQUERY AND AJAX DOCUMENTATION

The #id Selector:


The jQuery #id selector uses the id attribute of an HTML tag to find the specific
element.

An id should be unique within a page, so you should use the #id selector when
you want to find a single, unique element.

To find an element with a specific id, write a hash character, followed by the id
of the HTML element:

Ex:
$(‘#Id’)—here id may be input filed id ,paragraph id, div id

<p id=”test”>hi welcome</p>

<input type=”text” id=”test1”/>

$(‘#id’).val();----id means input field or div or p id’s

$(‘.Id’)—here id means css classes

Some of examples use # in jquery:


Enter fname:<input type=”text” id=”fn” value=”saikumar”/>

If you want get that value in JavaScript u need to use below syntax.

Var fname=document.getElementById(“fn”).value;

But in jquery jquery:


Var fname=$(‘#fn’).val();

Oncous to specific input filed or (Div):


Suppose if I have three input field like username,password,email.

When ever my page loads I need to make cursor on email first.so if you use
onfocus directly it will go to specific input field.

pg. 3 Saikumar
JQUERY AND AJAX DOCUMENTATION

Example for ONFOCUS:


<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#email").focus();
$("p").html("focus event triggered");
});
$("#btn2").click(function(){
$("input").blur();
$("p").html("blur event triggered");
});
});
</script>
</head>
<body>

Enter your name: <input type="text" id="fn"><br>


Enter your pwd: <input type="password" id="pwd"><br>
Enter your email: <input type="email" id="email">
<br><br>

<button id="btn1">Trigger focus event</button>

pg. 4 Saikumar
JQUERY AND AJAX DOCUMENTATION

<button id="btn2">Trigger blur event</button>

<p style="color:red"></p>

</body>
</html>
Hide the div or paragraph or input filed then use hide():
$("#id").hide();
$("#id").hide(2000);-we can pass time also in milli seconds
$("#id").hide(“show”,function()
{
Alert(“inside hide”);
}
);-----we can have another function also

show the div or paragraph or input filed then use show():


$("#id").show();

Method Chaining:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
});
});
</script>

pg. 5 Saikumar
JQUERY AND AJAX DOCUMENTATION

JQuery Get:
Example for get a text from paragraph
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
Example for get a value from input fields:
<script>
$(document).ready(function(){
$("button").click(function(){
//use
Var data=$(“#test”).val();
(Or)
alert("Value: " + $("#test").val());
});
});
</script>
Similarly u can set value also like:
$(“#test”).val(“new test value”);

Example for append:


$("p").append(" <b>Appended text</b>.");

pg. 6 Saikumar
JQUERY AND AJAX DOCUMENTATION

Example for remove div:


$("#div1").remove();
For CSS classes we can use following methods:
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
$("div").addClass("show");--show div
$("div").addClass("hide");---hide div
$("div").removeClass("hide");---show div
$("div").removeClass("show");---hide div
You can use CSS also:
$("p").css("background-color", "yellow");

jQuery with AJAX:


jquery with ajax we have only two methods get and post
we can call the controller url using jquery ajax.
Example for get method in controller:
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/get", function(data, status){
///here data is the response from controller as String or object or list
alert("Data: " + data + "\nStatus: " + status);
//we can assign values to html input fields,divs paragraphs
$(‘#firstname’).val()=data.firstName;
});
});
});

pg. 7 Saikumar
JQUERY AND AJAX DOCUMENTATION

Example for post method:


</script>
$(document).ready(function(){
$("button").click(function(){
$.post("/addUser", //addUser is controller url mapping
{
name: "Donald Duck", ------name is controller model attribute form attribute
city: "Duckburg" -----city is controller model attribute form attribute
},
function(data, status){
alert("Data: " + data + "\nStatus: " + status);
///we can redirect to controller also after response
Location.href=”/showUsers”;---if u need to show list once user added
});
});
});

pg. 8 Saikumar

You might also like