Scribd
Upload
122 views7 pages

Q#1. Jquery Load Content Inside An Element From A File

The document contains examples of using jQuery to: 1) Load external content into an HTML element using jQuery's load() method. 2) Make an HTTP GET AJAX request to retrieve data from a server file and display it using jQuery's get() method. 3) Remove CSS classes from HTML elements using removeClass().

Uploaded by

Saad Mehmood
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
122 views7 pages

Q#1. Jquery Load Content Inside An Element From A File

The document contains examples of using jQuery to: 1) Load external content into an HTML element using jQuery's load() method. 2) Make an HTTP GET AJAX request to retrieve data from a server file and display it using jQuery's get() method. 3) Remove CSS classes from HTML elements using removeClass().

Uploaded by

Saad Mehmood
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/ 7

Q#1.

jQuery load content inside an element from a file


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Loading Data from External File using Ajax in jQuery</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("#box").load("/examples/html/test-content.html");

});

});

</script>

</head>

<body>

<div id="box">

<h2>Click button to load new content inside DIV box</h2>

</div>

<button type="button">Load Content</button>

</body>

</html>

Q#2 . jQuery make ajax request using HTTP get method


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Example of Making GET Request using Ajax in jQuery</title>


<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$.get("/examples/php/date-time.php", function(data){

// Display the returned data in browser

$("#result").html(data);

});

});

});

</script>

</head>

<body>

<div id="result">

<h2>Content of the result DIV box will be replaced by the server date and time</h2>

</div>

<button type="button">Load Date and Time</button>

</body>

</html>

Q#3. jQuery remove CSS classes from the HTML elements


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Removing Classes from the Elements in jQuery</title>

<style type="text/css">

.page-header{

color: red;
text-transform: uppercase;

.highlight{

background: yellow;

</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("h1").removeClass("page-header");

$("p").removeClass("hint highlight");

});

});

</script>

</head>

<body>

<h1 class="page-header">Demo Text</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

<p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>

<button type="button">Remove Class</button>

</body>

</html>

Q#4. jQuery remove CSS classes from the HTML elements

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8">

<title>Removing All the Classes from the Elements in jQuery</title>

<style type="text/css">

.page-header{

color: red;

text-transform: uppercase;

.highlight{

background: yellow;

</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("h1").removeClass();

$("p").removeClass();

});

});

</script>

</head>

<body>

<h1 class="page-header">Demo Text</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

<p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>

<button type="button">Remove Class</button>

</body>

</html>
Q#5. Method chaining in jQuery
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Example of jQuery Method Chaining</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<style type="text/css">

/* Some custom styles to beautify this example */

p{

width: 200px;

padding: 40px 0;

font: bold 24px sans-serif;

text-align: center;

background: #aaccaa;

border: 1px solid #63a063;

box-sizing: border-box;

</style>

<script type="text/javascript">

$(document).ready(function(){

$(".start").click(function(){

$("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});

});

$(".reset").click(function(){

$("p").removeAttr("style");

});

});

</script>
</head>

<body>

<p>Hello World!</p>

<button type="button" class="start">Start Chaining</button>

<button type="button" class="reset">Reset</button>

</body>

</html>

Q#6. Run code on mouseenter event in jQuery


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Mouseenter Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
p{
padding: 20px;
font: 20px sans-serif;
background: #f2f2f2;
}
p.highlight{
background: yellow;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>
</head>
<body>
<p>Place mouse pointer on me.</p>
<p>Place mouse pointer on me.</p>
<p>Place mouse pointer on me.</p>
</body>
</html>

Q#7. Run code on focus event in jQuery


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Focus Event in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
label{
display: block;
margin: 5px 0;
}
label span{
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
</head>
<body>
<form>
<label>Email: <input type="text"> <span>focus fire</span></label>
<label>Password: <input type="password"> <span>focus fire</span></label>
<label><input type="submit" value="Sign In"> <span>focus fire</span></label>
</form>
<p><strong>Note:</strong> Click on the form control or press the "Tab" key to set focus.</p>
</body>
</html>

You might also like