jQuery for Basic and Tips for It

jQuery for Basic and Tips for It

jQuery is a javascript library, jQuery has the slogan “write less, do more”. Lot of people use JQuery for project because it fast and light to handle HTML documents, handle events, make animations and the interaction ajax.

JQuery was designed to change the way you write javascript. Before you start studying jQuery, you should have a basic knowledge about the HTML, CSS and Javascript.

Then to start studying jQuery, you need to download jquery.js from site www.jquery.com. Each time you write code using jquery javascript, don’t forget to include jquery.js file into your javascript code.

Jquery syntax is usually made ​​to select HTML elements and take action against selected element.

Syntax: $(selector). action()

Signs of dollars, to define jQuery (selector), to show the selected element or destination action (), is a jQuery action to be performed on the selected element.

Example :

[code language="ruby"]
 $ (this). hide()  //hides the current element
 $ ("p"). hide()  //hides all paragraphs or content of tag
 $ (". test"). hide()  //hides elements that have the class = "test"
 $ ("# test"). show()  //display the elements that have id = "test"
[/code]

 

jQuery Selectors Element jQuery similar to CSS in HTML select elements.

[code language="ruby"]
 $ ("p") <i>selects all elements
 $ ("p.intro") <i>select all elements that have <p> class = "intro".
 $ ("p # demo") <i><p> select elements that have id = "demo".
[/code]

 

jQuery Attribute Selectors

 

Similar in terms of XPath jQuery select elements based on existing attributes.

[code language="ruby"]
 $ ("[href]") select all elements with href attribute.
  <span style="font-family: Lato, 'Segoe UI', Frutiger, Tahoma, Helvetica, 'Helvetica Neue', Arial, sans-serif;">
   $ ("[href = '#']") select all elements with href attribute value = "#".
  </span>
[/code]

 

Some Tips : Keep Your Selector Simple.

Up until recently, retrieving DOM elements with jQuery was a finely choreographed combination of parsing selector strings, JavaScript loops and inbuilt APIs like getElementById(), getElementsByTagName() and getElementsByClassName(). But now, all major browsers support querySelectorAll(), which understands CSS query selectors and brings a significant performance gain.

 

However, you should still try to optimize the way you retrieve elements. Not to mention that a lot of users still use older browsers that force jQuery into traversing the DOM tree, which is slow.

[code language="ruby"]
 $('li[data-selected="true"] a' ) // Fancy, but slow
 $('li.selected a' ) // Better $('#elem' ) // Best
[/code]

 

Selecting by id is the fastest. If you need to select by class name, prefix it with a tag – $(‘li.selected’). These optimizations mainly affect older browsers and mobile devices.

Accessing the DOM will always be the slowest part of every JavaScript application, so minimizing it is beneficial. One of the ways to do this, is to cache the results that jQuery gives you. The variable you choose will hold a jQuery object, which you can access later in your script.

 

How to handle multiple jQuery Objects Even worse is the process of repeatedly querying the DOM and creating multiple jQuery objects.

[code language="ruby"]
 $('#elem').hide();
 $('#elem').html('bla');
 $('#elem').otherStuff();
[/code]

 

Hopefully, you’re already aware of how inefficient this code is. If not, that’s okay; we’re all learning. The answer is to either implement chaining, or to “cache” the location of #elem.

[code language="ruby"]
 // This works better $('#elem') .hide() .html('bla') .otherStuff();
 // Or this, if you prefer for some reason. var elem = $(' #elem'); elem.hide(); elem.html('bla'); elem.otherStuff();
[/code]

 

 

%d bloggers like this: