$(document).ready is for assurance full DOM is available at the time the function is called. Any functions and events not depending on the DOM don't need to be put into the ready event.
Well,
what if we load dom and css first and javascript at the end(just before /body element)
HUUUU..
$(document).ready(function(){}); NOT NEEDED
So Check first , In html where is the javascript reference if it's in <head> you must use ready()
but if just before</body> you can skip utilizing ready()
Check it out :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice HTML</title>
<link rel="stylesheet" href="/Miscellenious/practice.css">
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<button>Set the color property of all p elements</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/Miscellenious/practice.js"></script>
</body>
</html>
Jquery (Works)
$("button").click(function(){
$("p").css("color", "red");
});
$("li").css("color", "red");
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice HTML</title>
<link rel="stylesheet" href="/Miscellenious/practice.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/Miscellenious/practice.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<button>Set the color property of all p elements</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
JQuery with ready()
$(document).ready(function(){
$("button").click(function(){
$("p").css("color", "red");
});
$("li").css("color", "red");
});
No comments:
Post a Comment