-
Here is the HTML Document
-
- this is how you inject inside a div or any tag wih the id column
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div id="start">
</div>
<div id="second">
</div>
</body>
<script>
$("#start").html("GO");
</script>
<script>
var el = document.getElementById("second");
el.innerHTML = "This is With the Javascript"
</script>
</html>
-
Writing JavaScript in a separated File all the code have to be written in side this jQuery function
-
it is a good practice to load the entire HTML document to be fully loaded and then start the jQuery
-
The $ is used to access jQuery
-
$(document).ready(function(){ //jQuery code goes here })
-
But there is a shortcut to do that (this will do the exact same thing as before
$(function(){ //jQiery code goes here });
-
this code wil change the HTML and override with the jquery
<!-- this is the HTMl code --> <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <div id="start">Start</div> </body> </html>
-
and there goes the jQuery code
$(function() { $("#start").html("Go!"); });
-
-
jQuery is used to select the HTMl element and perform "actions" on Them
-
Basic Syntax is ** $("#selector").action() **
$("p").hide();
$(".demo").hide()
$("#demo").hide()
-
this will hide all the p element
-
this will hide the class named "demo"
-
this will hide the element with id name "demo"
-
To select All the Element like dic we dont use any # or . we directly call them
-
$("div") // selects all the dic class in the document
-
select the id this code will be use to select
-
$("#test") // select the element with the id="test"
-
to select any element based on the class
-
$(".menu") //selects all elements with class="menu"
-
example
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <div id="withid"> </div> <div class="withclass"> </div> </body> </html> <script> $("#withid").html("This is the id based extractor"); $(".withclass").html("this will be extracted with the class"); </script>
-
you can select with multiple class and id at the sometime
$("div.menu"); // all <div> elements with class menu
$("p:first") // it wills elect the first p element
$("h1,p") // select all the h1 and the p element
$("div p") // all <p> elements that are descendants of a <div> element
$("*") // all elements of the DOM
so suppose you want to select all the links(a element ) inside the paragraph then this code will be used
$(" ")
$("p a ");
suppose you are tried to select element that are inside the div element
$("div > *")
Select the p element and add the data
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<p id="test">
<!-- inject data inside the element -->
</p>
<script>
$(function() {
$('#test').html("this is selecting the p element");
});
</script>
</body>
</html>
-
Select all the p element that inside the div "demo"
-
this code will hide all the element inside the div emement
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <div class="demo"> <p> this is inside the demo </p> <p> this is another demo </p> </div> <script> $(function() { $("#demo p").hide(); }); </script> </body> </html>
you can choose the attribute and change it or show it
-
here is the HTML
-
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <a href="https://www/facebook.com">Click here</a> </body> </html>
-
here is the jQuery
-
$(function(){ // take the value of the attribute var = $("a").attr("href") // now it have the href attivute value alert(val); })
lets change the value so when user clicks the link another link will go we will change the value of the href using the jQuery
this is the html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<a href="https://www.sololearn.com/">Click here</a>
</body>
</html>
this is jQuery to set the different value
// the rule is
$(function(){
$("<select_tag>").attr("<attr>","set the value");
})
$(function(){
$("a") .attr("href","www.facebook.com")
})
this html document as two tags we remove with the jQuery
so after that this will now show op
this is the HTML we remove the boarder and the class
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<table border="5" class="tbl" >
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
</table>
</body>
</html>
remove the tags this will remove the boarder of the table and the class
$("table").removeAttr("border");
$("table").removeAttr("class");
this is the HTML
<p>
JQuery is <b>fun</b>
</p>
this is the jQuery data inside the tag
$(function(){
var val = $("p").html()
alert(val);
})
if you only need the content not the tag then text will be used instead of he html
$(function(){
var val = $("p").text()
alert(val);
})
Setting the content
This is the HTML
<div id="test">
<p>some text</p>
</div>
$(function(){
var val = $("#text").text("this is the set tetx")
alert(val);
})
#3 getting the value of any HTML tag
The HTML
<input type="text" id="name" value="Your Name">
$(function(){
alert($("#name").val());
})
append() //inserts content at the end of the selected elements.
prepend() //inserts content at the beginning of the selected elements.
after() //inserts content after the selected elements.
before() //inserts content before the selected elements
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div class="append">
<!-- code will be append in here-->
</div>
</body>
</html>
$(function() {
$(".append").append("appedded text")
});
<p id="demo">Hello</p>
$(function() {
var txt = $("<p></p>").text("Hi");
$("#demo").after(txt);
});
create a new div element with the text "Hi" and insert it before the element with id="demo".
<scrpt>
// we create a div and inject the hi
var a = $("<div></div>").text("hi");
// now inject the new element after the after the ement class "demo"
$("#demo").after(a);
</script>
- you can make a css class and add it to a element using the jQuery
- here we make a css class and add it with the jquery .not directly
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<style>
.header {
color: blue;
font-size:x-large;
}
</style>
<div>Some text</div>
<script>
$("div").addClass("header");
</script>
</body>
</html>
You can add multiple class with it and then add it with just space
$("div").addClass("header second third");
This is how you remove the CSS class from the div element
$("div").removeClass("red");
you can toggle the class . and and change the CSS and from one class to another class
this is the HTML document and we toggle the css of the p class and change its css class
this will also show you how to handle button click event
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<style>
.header {
color: blue;
font-size:x-large;
}
</style>
<div>Some text css will be change and toggled with the button press</div>
<button>
This is the button
</button>
<script>
$(function(){
$("button").click(function(){
$("div").toggleClass("header");
})
})
</script>
</body>
</html>
this code will pop up the current background color and then change the background color into blue
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<style>
.header {
background-color:red;
color: blue;
font-size:x-large;
}
</style>
<div>Some text css will be change and toggled with the button press</div>
<button>
This is the button
</button>
<script>
$(function(){
alert($("div").css("background-color"));
$("div").css("background-color",'blue');
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<style>
.header {
background-color:red;
color: blue;
font-size:x-large;
}
</style>
<div>Some text css will be change and toggled with the button press</div>
<button>
This is the button
</button>
<script>
$(function(){
$("div").css({"color": "red", "font-size": "200%"});
});
</script>
</body>
</html>
You can add the width and height of a width
<script>
$(function(){
$("div").css("background-color", "red");
$("div").width(100);
$("div").height(100);
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div> div element
<p>paragraph</p>
</div>
</body>
</html>
You can select the parent element and change its attribute and also can change its attribute
$(function() {
// changin the element css
var b = $("p");
b.css("background-color", "blue");
// changing the parent element
var e = $("p").parent();
e.css("background-color", "red");
});
var items = $("div").siblings();
items.hide();
// it will hide all the element inside the all the divs
you can remove all the siblings inside a div tag using this code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<style>
div {
background-color: aqua;
width: 300px;
height: 200px;
}
</style>
<div>
<p style="color:red">Red</p>
<p style="color:green">Green</p>
<p style="color:blue">Blue</p>
</div>
<script>
$("div").empty();
</script>
</body>
</html>
This remove all the value inside the div
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<button id="demo">Click Me</button>
<script>
$(function(){
$("#demo").click(function(){
$("body").html(Date());
})
})
</script>
</body>
</html>
This will show the date when the button is clicked
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<button>Click Me</button>
<script>
$(function(){
$("button").on("click",function(){
alert("Cliecked");
})
})
</script>
</body>
</html>
This will use event to submit the form
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<script>
$(function(){
$("form").on("submit",function(){
alert("hello");
})
})
</script>
</body>
</html>
Adding the To do list
This is the HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<h1>My To-Do List</h1>
<input type="text" placeholder="New item" />
<button id="add">Add</button>
<ol id="mylist"></ol>
</body>
</html>
$(function(){
// make a click event handler
$("#add").on("click",function(){
// take the input
var val = $("input").val();
if(val !== ""){
// make a element with the text
var element = $("<li></li>").text(val);
// add a button with the element
$(element).append("<button> Details </button>");
// now add to the div element
$("#mylist").append(element);
// now reset the the input value
$("input").val("");
}
})
})
we can animate the button to Increase the button size
this is the html code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div>Click me</div>
</body>
</html>
$(function() {
$("div").click(function() {
$("div").animate({
width: '+=250px',
height: '+=250px'
}, 1000);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div class="menu">
<div id="item">Dropdown</div>
<div id="submenu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>
When the Dropdown menu is clicked this submenu will be shown
$(function(){
$("#item").click(function(){
$("#submenu").slide(Toggle(500));
});
});