<!DOCTYPE html>
<html>
<head>
<script
src=
</script>
<script>
$(doc).prepared(operate(){
$("#btn1").click on(operate(){
var $x = $("i");
$x.prop("shade", "inexperienced");
$x.append("<br> Property is shade and its worth: "
+ $x.prop("shade"));
});
});
$(doc).prepared(operate() {
$("#btn2").click on(operate() {
$("p").removeAttr("model");
});
});
$(doc).prepared(operate() {
$("#btn3").click on(operate() {
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(operate() {
$("#btn4").click on(operate() {
$("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", "instances new roman");
});
});
$(doc).prepared(operate() {
$("#b1").click on(operate() {
$("#division5").information("greeting", "Hi there Everybody !");
alert("GeeksforGeeks says : " + $("#division5").
information("greeting"));
});
$("#b2").click on(operate() {
$("#division5").removeData("greeting");
alert("Greeting is: " + $("#division5").
information("greeting"));
});
});
$(doc).prepared(operate() {
$("#btn7").click on(operate() {
var msg = "";
msg += "jQuery peak() Methodology<br>peak of div: "
+ $("#demo").peak();
$("#demo").html(msg);
});
});
$(doc).prepared(operate() {
$("#btn8").click on(operate() {
var msg = "";
msg += "InnerHeight() Methodology<br>Inside Top of div: " + $("#demo").
innerHeight() + "</br>";
$("#demo2").html(msg);
});
});
$(doc).prepared(operate() {
$("#btn9").click on(operate() {
alert("Outer peak of div: "
+ $("div").outerHeight());
});
});
$(doc).prepared(operate() {
$("#btn10").click on(operate() {
var msg = "";
msg += "width() Methodology<br>Width of div: "
+ $("#demo3").width();
$("#demo3").html(msg);
});
});
$(doc).prepared(operate() {
$("b").click on(operate() {
doc.getElementById("attempt").innerHTML = "innerWidth = "
+ $("#division6").innerWidth();
});
});
$(doc).prepared(operate() {
$("#btn12").click on(operate(){
alert("Outer width of div: "
+ $("div").outerWidth(true));
});
});
$(doc).prepared(operate() {
$("p").click on(operate() {
$("p").removeClass();
});
});
$(doc).prepared(operate() {
$("#btn13").click on(operate() {
alert($("p").hasClass("discover"));
});
});
$(doc).prepared(operate() {
$("#geek_btn").click on(operate() {
$("part").toggleClass("style1");
});
});
$(doc).prepared(operate() {
$("#btnClick").click on(operate() {
alert($("essential").scrollTop() + " px");
});
});
$(doc).prepared(operate() {
$("#btnCheck").click on(operate() {
$("apart").scrollLeft(100);
});
});
</script>
<model>
#division1 {
width: 250px;
padding: 10px;
peak: 130px;
border: 2px strong inexperienced;
}
#division2 {
width: 300px;
min-height: 250px;
border: 2px strong inexperienced;
padding: 20px;
text-align:middle;
}
#division3 {
width: 400px;
min-height: 60px;
padding: 15px;
border: 2px strong inexperienced;
margin-bottom: 10px;
}
#division4 {
background-color: lightgreen;
padding: 20px;
width: 41%;
min-height: 150px;
border: 2px strong inexperienced;
}
enter {
border: 2px strong inexperienced;
padding-left: 15px;
width: 350px;
peak: 80px;
}
#b1,
#b2 {
padding: 10px;
margin: 20px;
background-color: inexperienced;
}
#demo, #demo2, #demo3{
peak: 150px;
width: 350px;
padding: 10px;
margin: 3px;
border: 1px strong blue;
background-color: lightgreen;
}
.geeks {
peak: 80px;
width: 200px;
padding: 5px;
margin: 5px;
border: 2px strong black;
background-color: inexperienced;
text-align: middle;
}
.comprise {
peak: 200px;
width: 350px;
padding: 20px;
margin: 3px;
border: 3px strong inexperienced;
background-color: lightgreen;
}
em {
margin: 8px;
font-size: 35px;
}
.chosen {
shade:auqa ;
show: block;
border: 2px strong inexperienced;
width: 160px;
peak: 60px;
background-color: lightgreen;
padding: 20px;
}
.GFG_Stuff {
font-size: 25px;
shade: inexperienced;
font-weight: daring;
}
#stuff {
width: 300px;
peak: 200px;
padding: 20px;
border: 2px strong inexperienced;
}
.discover {
font-size: 120%;
shade: inexperienced;
}
#division7 {
width: 50%;
peak: 200px;
border: 2px strong 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;
}
essential, apart {
border: 1px strong black;
width: 100px;
peak: 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 kind="textual content" title="consumer">
</p>
<button id="btn4">Click on Right here!</button>
</div>
<hr>
<h6>JQuery removeData() & information() Methodology</h6>
<button id="b1">Click on right here so as to add information to
div component</button>
<br>
<button id="b2">Click on right here to Take away information
from div component</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", operate() {} );
operate 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 test the
peak of the component(excluding padding).
</h6>
<hr>
<div id="demo2"></div>
<button id="btn8">Click on Me!!!</button>
<h6>
Click on on the button and test
the innerHeight of a component
(contains padding).
</h6>
<hr>
<div class="geeks">
GeeksforGeeks
</div>
<button id="btn9">
Click on Right here to show outer peak
</button>
<hr>
<div id="demo3"></div>
<button id="btn10">Click on Me!!!</button>
<p>
Click on on the button and test
the width of the component (excluding padding).
</p>
<hr>
<h3>innerWidth() Methodology</h3>
<div id="division6" model="peak: 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>
<essential>
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!.
</essential>
<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>
