Selecting elements with jquery

Working with Jquery is always interesting if you know that how to set and get element. Jquery is very powerful library of JavaScript. One of the most powerful aspects of Jquery is its ability to make selecting elements in the DOM easy. The Document Object Model serves as the interface between JavaScript and a web page.

Here I am going to discuss that how you can select element with Jquery. Following are the main selectors which will help you to select elements.

  • CSS selectors
  • Attribute selectors
  • Custom selectors
  • Form selectors

CSS Selector:

The Jquery library supports all of the selectors included in CSS. This support allows developers to enhance their website without worrying about which browsers might not understand advanced selectors, as long as the browser have enabled JavaScript. For better understanding I have created a following example,

 

Before doing anything to this code, this code will look like this in the browser.

without-styling

Now, I want to make this list horizontal without bullet icons. Add the following code in your Styleheet:

 

Now you don’t need to add “horizontal” class to list because you can do this with Jquery like following.

 

After adding the above code, your code will look like following in the browser.

with-jquery-code

 

You can also style element with “ID”, “Class” or “Tag” selector. I have added some more styling into this with the following code.

 

 

After adding the above code, this script will look like the following

advance-styling

In this tutorial you have seen that how to work with CSS selector with Jquery. In the next tutorial you will see that how to work with Attribute selector.