When it is the question about how fast you can make your page rendering and execution. Than question comes how to transfer content faster from server to client? How to reduce size of the content to be transferred? Part 1 is more towards JQuery and little bit about Mustache. in the Part 2 you will see more about Mustache.
We’ll look at how to add jQuery to your pages so you can use it. We will then look at how we select and interact with elements on the page and in the end , we’ll have an Introduction to Mustache, about what it is.
- With Jquery, you can “Write Less and Do more”.
- The only thing is that you need to select an element and do domething on it.
- The thing you can do with Jquery are: Animations Communicate with Server ** DOM Manipulation
- Under DOM manipulation, you can do things like: Read the contents of an element Modify the DOM appearance
- You can create Jquery Plugins, which are extensible i.e you can extend its functionality
Things you would need to get started with Jquery
- Jquery Library – Download a copy of the jquery JS file and store it on your hard drive and reference the JS file in your HTML using
attribute or you can use google or microsoft provided hosted libraries like
. Now as you have JQuery library in your HTML, you can play with Jquery features. But remember you can do things with Jquery till your whole HTML Document is loaded. . To make sure your Jquery code will run after HTML page ready, you need to wrap your Jquery code inside “ready” function of the document.
function inside ready function of Document is anonymous function, function with no name, is a callback function. That means after your Document is loaded completely, call back function will be executed, it will execute every thing you write inside thing callback function of ready function.
Lets modify the contents of DOM element using Jquery.
1 2 3 4 5 6 7
Inside function doit, $(‘#stuff’) will return html node with id “stuff”. text() is used here to change the text of some element returned on left side of ‘dot’. text() is getting the value of element with id “inpt”. i.e with $(‘#inpt’) and using val() will return the value of input box.
Lets do some animation using jquery
Jquery has some functions for hiding DOM elements or showing them.
- show() is used to show a hidden HTML element.
- hide() is used to show a hidden HTML element.
- toggle() is used to show a hidden HTML element.
You can also change the appearance of DOM elements using Jquery. You can do this in two ways. Either you can define your css classes and add or remove them dynamically using jquery functions ‘addClass’ or ‘removeClass’ functions or you can add styles to an element using ‘css’ function. Lets try both ways.
Using Css function
It will display Hello in red color. Now , lets change its color using css function.
Note: In the same way, you can define multiple css properties in key value pair. Using this approach can be benefited if you have to change a single attribute on a single element in a DOM
Adding or removing classes
It will display Hello in red color. Now lets change its color. First you need to get the element using id attribute $(‘#hello’) and then remove class style1 and add class style2
Note: You are not supposed to use ‘.’ while writting class name. As you can see , these functions have only class names as parameters without ‘.’ operatior.
Using this approach can be benefited if you have to change many attributes of an element to multiple elements in a DOM
Introduction to Mustache
Now that you have undertand the basics of Jquery and Mustache, In the second part of this blog, i will get you dive more deeper in Mustache and how to interact with jquery.