<!DOCTYPE html>
<html>
<head>
<script
src=
</script>
<script>
$(doc).prepared(perform(){
$("#btn1").click on(perform(){
var $x = $("i");
$x.prop("shade", "inexperienced");
$x.append("<br> Property is shade and its worth: "
+ $x.prop("shade"));
});
});
$(doc).prepared(perform() {
$("#btn2").click on(perform() {
$("p").removeAttr("model");
});
});
$(doc).prepared(perform() {
$("#btn3").click on(perform() {
var $GFG = $("#division3");
$GFG.prop("shade", "inexperienced");
$GFG.append("<br>The worth of shade: "
+ $GFG.prop("shade"));
$GFG.removeProp("shade");
$GFG.append("<br>The worth of shade after removeProp: "
+ $GFG.prop("shade") + "<br>");
});
});
$(doc).prepared(perform() {
$("#btn4").click on(perform() {
$("enter:textual content").val("GeeksforGeeks!");
$("enter:textual content").css("shade", "inexperienced");
$("enter:textual content").css("font-size", "40px");
$("enter:textual content").css("font-weight", "daring");
$("enter:textual content").css("font-family", "occasions new roman");
});
});
$(doc).prepared(perform() {
$("#b1").click on(perform() {
$("#division5").knowledge("greeting", "Good day Everybody !");
alert("GeeksforGeeks says : " + $("#division5").
knowledge("greeting"));
});
$("#b2").click on(perform() {
$("#division5").removeData("greeting");
alert("Greeting is: " + $("#division5").
knowledge("greeting"));
});
});
$(doc).prepared(perform() {
$("#btn7").click on(perform() {
var msg = "";
msg += "jQuery top() Methodology<br>top of div: "
+ $("#demo").top();
$("#demo").html(msg);
});
});
$(doc).prepared(perform() {
$("#btn8").click on(perform() {
var msg = "";
msg += "InnerHeight() Methodology<br>Inside Peak of div: " + $("#demo").
innerHeight() + "</br>";
$("#demo2").html(msg);
});
});
$(doc).prepared(perform() {
$("#btn9").click on(perform() {
alert("Outer top of div: "
+ $("div").outerHeight());
});
});
$(doc).prepared(perform() {
$("#btn10").click on(perform() {
var msg = "";
msg += "width() Methodology<br>Width of div: "
+ $("#demo3").width();
$("#demo3").html(msg);
});
});
$(doc).prepared(perform() {
$("b").click on(perform() {
doc.getElementById("attempt").innerHTML = "innerWidth = "
+ $("#division6").innerWidth();
});
});
$(doc).prepared(perform() {
$("#btn12").click on(perform(){
alert("Outer width of div: "
+ $("div").outerWidth(true));
});
});
$(doc).prepared(perform() {
$("p").click on(perform() {
$("p").removeClass();
});
});
$(doc).prepared(perform() {
$("#btn13").click on(perform() {
alert($("p").hasClass("discover"));
});
});
$(doc).prepared(perform() {
$("#geek_btn").click on(perform() {
$("part").toggleClass("style1");
});
});
$(doc).prepared(perform() {
$("#btnClick").click on(perform() {
alert($("primary").scrollTop() + " px");
});
});
$(doc).prepared(perform() {
$("#btnCheck").click on(perform() {
$("apart").scrollLeft(100);
});
});
</script>
<model>
#division1 {
width: 250px;
padding: 10px;
top: 130px;
border: 2px stable inexperienced;
}
#division2 {
width: 300px;
min-height: 250px;
border: 2px stable inexperienced;
padding: 20px;
text-align:middle;
}
#division3 {
width: 400px;
min-height: 60px;
padding: 15px;
border: 2px stable inexperienced;
margin-bottom: 10px;
}
#division4 {
background-color: lightgreen;
padding: 20px;
width: 41%;
min-height: 150px;
border: 2px stable inexperienced;
}
enter {
border: 2px stable inexperienced;
padding-left: 15px;
width: 350px;
top: 80px;
}
#b1,
#b2 {
padding: 10px;
margin: 20px;
background-color: inexperienced;
}
#demo, #demo2, #demo3{
top: 150px;
width: 350px;
padding: 10px;
margin: 3px;
border: 1px stable blue;
background-color: lightgreen;
}
.geeks {
top: 80px;
width: 200px;
padding: 5px;
margin: 5px;
border: 2px stable black;
background-color: inexperienced;
text-align: middle;
}
.comprise {
top: 200px;
width: 350px;
padding: 20px;
margin: 3px;
border: 3px stable inexperienced;
background-color: lightgreen;
}
em {
margin: 8px;
font-size: 35px;
}
.chosen {
shade:auqa ;
show: block;
border: 2px stable inexperienced;
width: 160px;
top: 60px;
background-color: lightgreen;
padding: 20px;
}
.GFG_Stuff {
font-size: 25px;
shade: inexperienced;
font-weight: daring;
}
#stuff {
width: 300px;
top: 200px;
padding: 20px;
border: 2px stable inexperienced;
}
.discover {
font-size: 120%;
shade: inexperienced;
}
#division7 {
width: 50%;
top: 200px;
border: 2px stable inexperienced;
padding: 20px;
}
.style1{
font-size: 25px;
background-color: yellow;
min-height:120px;
}
part {
width: 200px;
min-height: 120px;
background-color: lightgreen;
padding: 20px;
font-weight: daring;
font-size: 20px;
}
primary, apart {
border: 1px stable black;
width: 100px;
top: 150px;
overflow: auto;
}
</model>
</head>
<physique>
<div id="division1">
<i>Jquery Prop()</i>
<br><br>
<button id="btn1">Click on Right here!</button>
</div>
<hr>
<div id="division2">
<h6>JQuery removeAttr() Methodology</h6>
<p model="font-size:35px;
font-weight:daring;
shade:inexperienced;">
Welcome to
</p>
<p model="font-size:35px;
font-weight:daring;
shade:inexperienced;">
GeeksforGeeks!.
</p>
<button id="btn2">Click on Right here!</button>
</div>
<hr>
<div id="division3">
jQuery removeProp() Methodology
</div>
<button id="btn3">Click on Right here!</button>
<hr>
<div id="division4">
jQuery val() & css() Strategies
<p>
<enter sort="textual content" title="person">
</p>
<button id="btn4">Click on Right here!</button>
</div>
<hr>
<h6>JQuery removeData() & knowledge() Methodology</h6>
<button id="b1">Click on right here so as to add knowledge to
div factor</button>
<br>
<button id="b2">Click on right here to Take away knowledge
from div factor</button>
<div id="division5"></div>
<hr>
<p id="GFG_UP"></p>
<h3>That is Heading 3</h3>
<br>
<button onclick="Geeks()">
Click on right here
</button>
<p id="GFG_DOWN"></p>
<script>
var el_up = doc.getElementById("GFG_UP");
var el_down = doc.getElementById("GFG_DOWN");
var $h3 = jQuery( "h3" ), h3 = $h3[ 0 ];
el_up.innerHTML = "JQuery | hasData() technique";
$h3.on( "click on", perform() {} );
perform Geeks() {
el_down.innerHTML = jQuery.hasData(h3);
}
</script>
<hr>
<div id="demo"></div>
<button id="btn7">Click on Me!!!</button>
<h6>
Click on on the button and verify the
top of the factor(excluding padding).
</h6>
<hr>
<div id="demo2"></div>
<button id="btn8">Click on Me!!!</button>
<h6>
Click on on the button and verify
the innerHeight of a component
(consists of padding).
</h6>
<hr>
<div class="geeks">
GeeksforGeeks
</div>
<button id="btn9">
Click on Right here to show outer top
</button>
<hr>
<div id="demo3"></div>
<button id="btn10">Click on Me!!!</button>
<p>
Click on on the button and verify
the width of the factor (excluding padding).
</p>
<hr>
<h3>innerWidth() Methodology</h3>
<div id="division6" model="top: 100px;
width: 200px;
background-color: blue">
</div>
<b>Click on right here to know innerWidth</b><br>
<b id="attempt"></b>
<hr>
<h5>
Outerwidth() Methodology
</h5>
<button id="btn12">outerwidth</button>
<div class="comprise"></div>
<hr>
<em>GeeksforGeeks</em>
<em>jQuery</em>
<em>addClass() Methodology</em>
<script>
$("em").final().addClass("chosen");
</script>
<hr>
<div id="stuff">
<p class="GFG_Stuff">Welcome to GeeksforGeeks!</p>
<p class="GFG_Stuff">jQuery removeClass() Methodology</p>
</div>
<hr>
<div id="division7">
<h1>Heading 1</h1>
<p class="discover">GeeksforGeeks !.</p>
<p>That is hasClass() Methodology</p>
<button id="btn13">Click on me!</button>
</div>
<hr>
<part>
<p>JQuery toggle() Methodology</p>
<p>Welcome to GeeksforGeeks.!</p>
<button id="geek_btn">Click on Right here!</button>
</part>
<hr>
<h6>jQuery scrollTop() technique</h6>
<primary>
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
</primary>
<br>
<button id="btnClick">Click on Right here !</button>
<hr>
<h6>jQuery scrollLeft() Methodology</h6>
<apart>
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
</apart>
<br>
<button id="btnCheck">Click on Right here !</button>
</physique>
</html>
