All most every UI or Web developer use jQuery for DOM manipulation tasks. With the help of jQuery it become easy to write our own custom codes. jQuery have lots of special feature which make it popular framework. Like selector, ajax,events. But the most impressive feature of using jQuery is chaining method, by using it you can execute multiple functions of jQuery on a particular DOM or Selector.
$(".div").addClass("color").text("Hi! Friends");
In above method jQuery will call addClass function after complition of addClass it will run text function on same DOM.
Many times I wonder what they are using in their code to target the HTML DOM and other functionality. After doing a good Research and development I came to know about a very impressive selector of browser. By using this selector we can create most of common feature of jQuery by own self using navtive JavaScript. Now question arise why should we create our own jQuery feature when we have jQuery library for it. Answer is we use jQuery most of time to manipulate HTML DOM like add class, remove class, add text and append text etc. To perform few small tasks we add resource of about 94kbs external file. Which make our html code a bit heavy.
But writing our own code will take only few bytes. We all know jQuery use nothing but native code of javascript like:
document.getElementById("id")document.getElementsByTagName(name);
and in jQuery you use
$(".test").addClass("red");
$("#div1").addClass("red");
To use above selector you have to include jQuery library file. But using document.querySelector() you can also achieve this functionality without using additional resource of jQuery file. I hope you guys will love this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>example</title>
<style>
.red{color: red;}
.bold{font-weight:bold;}
.underline{text-decoration:underline;}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
$(".test").addClass("red bold underline");
$("#div1").addClass("red");
});
var $ = function(query) {
var jq = function(query) {
var node = document.querySelector(query);
return {
addClass: function(className) {
node.className = className.split(",").join(" ");
return this;
},
css: function (prop,value) {
node.style = prop + ":" + value;
return this;
},
html: function(html) {
node.innerHTML = html;
return this;
}
}
}
return new jq(query);
}
</script>
</head>
<body style="border: solid green 3px">
<div id="div1">
<p>Some div1 text</p>
<div id="div2">
<p>Some div2 text</p>
<p>Some div2 text</p>
</div>
</div>
<p class="test">Some outer text</p>
<p>Some outer text</p>
</body>
</html>
If you have tried to run this code you will find nothing is happens. You can find error in the console with message.
Uncaught TypeError: Cannot set property 'className' of null
You can find that I have put all my script code at top. You can resolve this error by moving script code from top to bottom before the end of body tag.
Why this happen?
We all make this mistake at least once, that before running the script code tag must be there in DOM. In our code script runs before DOM is fully created and because DOM is not there JavaScript will not able to find it so give error. This is the additional feature jQuery provided us that we don’t need to worry about the DOM Loading while writing the jQuery code.
How we will from overcome this issue. Well, to overcome to this issue jQuery gives document.ready method to insure the DOM loading before running any script code. We can also create this method for our code. jQuery nothing do special in their code they use JavaScript DOMContentLoaded method to ensure DOM loading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>example</title>
<style>
.red{color: red;}
.bold{font-weight:bold;}
.underline{text-decoration:underline;}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
$(".test").addClass("red bold underline");
$("#div1").addClass("red");
});
var $ = function(query) {
var jq = function(query) {
var node = document.querySelector(query);
return {
addClass: function(className) {
node.className = className.split(",").join(" ");
return this;
},
css: function (prop,value) {
node.style = prop + ":" + value;
return this;
},
html: function(html) {
node.innerHTML = html;
return this;
}
}
}
return new jq(query);
}
</script>
</head>
<body style="border: solid green 3px">
<div id="div1">
<p>Some div1 text</p>
<div id="div2">
<p>Some div2 text</p>
<p>Some div2 text</p>
</div>
</div>
<p class="test">Some outer text</p>
</body>
</html>