What are Handy jQuery selectors
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=dkp9qUXZ
BY arjun.s
6 years ago
Application-Development

jQuery is a famous javascript library used widely. It allows the developer to create very complex client side operational web tools easily. The jQuery is actually allows us to work on the DOM tree which has various html elements used in the webpages.

jQuery provides a various selectors which could be used to manipulate DOM elements in different ways. Usually we use the selectors to select DOM elements based on class name or id of the elements. But there are more powerful selectors available with jQuery which could be used to select elements with more ease.

The main advantage of using these selectors are that these will help us to handle the DOM elements more precisely and help us to cut the lines of code we need to write. Since the jQuery execute, within the client RAM reducing the lines of code will increase the code execution efficiency.

Selectors list

  1. Attribute contains prefix or suffix values.

    These selectors are more precise in selecting the elements for which a particular prefix or suffix values are preset for a particular attribute. For example: if we have class names like abc-def, abc-ghj etc you can select based on the prefix "abc".

           Format:[attribute|='value']

    Example:

              $('[class|='abc']').click(function(){
                alert('Hello');
              });

    This will select all the classes that start with the string 'abc'.

    To select elements with a text at the end of the value for an attribute,

          Format:[attribute$='value']

    Example:

              $('[class$='abc']').click(function(){
                alert('Hello');
              });

    This will select all the classes that end with the string 'abc'.

  2. Multiple attribute selector

    This could be used to select elements that have matches for multiple attributes, example, select an element with an id "abc" and having the class of "def" and of type "input file" etc. So we can used this as an "AND"ing of the attribute selection.

           Format: jQuery("[attributeFilter1][sttributeFilter2][attributeFilterN]")

    The following example will find all elements which has an id of "abc" and a class ends with "def".

          $("[id='abc'][class$=def]").click(function() {
            alert("click");
          });
  3. Multiple selector

    The above selector will select an element which met with all the conditions given, but there will be other conditions where you need to select the elements that have any of the specified conditions(a kind of ORing). This could be achieved easily by this way of choice.

           Format: jQuery("selector1,selector2,selectorN")

    The following example will select the selects the elements that are either having any of the conditions met.

          $("p.abc, div.def").click(function() {
            alert("click");
          });

    This will work with both the p tags having a class abc and div elements having class def.

  4. Header selector

    This could be used to select all the elements that are of type h1, h2 etc. So it will be easy to set an action for all the header elements.

           Format: jQuery(":header")

    The following example will bind an action to all the header elements in the page.

          $(":header").click(function() {
            alert("click");
          });
  5. Has attribute selector

    This selector could be used to select elements that have particular attribute. For example: it could be used to select elements that have id or class attribute.

           Format: jQuery("[attribute]")

    The following example will select the div elements that have a class attribute.

          $("div[class]").click(function() {
            alert("click");
          });

These are some selectors that will make our work easier with jQuery. There are many other selectors out there which will help you to manipulate DOM elements more easily, try to use them. Happy coding.


RELATED ARTICLE

/themes/custom/zyxpro_light/images/placeholder.png
close

on 19th February 2010 / by webmaster
While designing fixed width layouts it is advantageous to use percentage based width for inner co Application Development HTML CSS canl? tv izle (not verified) access_time 22 Sep 2021 - 06:49 Good work! Your post/article is an excellent example of why I keep comming back to read your excellent quality content that is forever updated. Thank you! This beautiful and informative article, thank you very much. Use this page to your friend told you. I am constantly followed. Pete (not verified) access_time 22 Sep 2021 - 06:49 Thanks for the tip! it was really helpful to my term paper, since I also encountered the same issue, thanks again and kudos! Larah (not verified) access_time 22 Sep 2021 - 06:49 We needed a modern day PT boat but got instead gold plated flaming datums. Buy some Visby Corvettes, and then fire or retire everyone involved with this waste of time and treasure. Mikkie (not verified) access_time 22 Sep 2021 - 06:49 Excellent post.The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept, and Mikkie (not verified) access_time 22 Sep 2021 - 06:49 Excellent post.The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept and PeterSmith (not verified) access_time 22 Sep 2021 - 06:49 This is so nice. I like it a lot. Very interesting topic will be useful for Matt Brady (not verified) access_time 22 Sep 2021 - 06:49 It will be interesting to see how web standards make their way into the browser competitions. While some ip lawyers are debated how this will work out, I think it will be good for consumers in the end. I will be eager to what develops next. Thanks for sharing this. Matt Brady (not verified) access_time 22 Sep 2021 - 06:49 It will be interesting to see how web standards make their way into the browser competitions. While some ip lawyers are debated how this will work out, I think it will be good for consumers in the end. I will be eager to what develops next. Thanks for sharing this. acekard 2i (not verified) access_time 22 Sep 2021 - 06:49 The R4 card works like a flash drive which helps you to store data and transfer it to the necessary location. To give an overview, Nintendo’s data storage devices are available in multitude of sizes and data storage capacities when considered from the first generation modules. juliusrlevron (not verified) access_time 22 Sep 2021 - 06:49 These are the genuine problems faced by any of the design. I guess all this will be replaced with some new kind of coding or programming sooner or later. VoIP providers (not verified) access_time 22 Sep 2021 - 06:49 yes, i also face this type of problem that different browsers have different layout or percentage...Thanks for sharing this kind of problem with us.. ali (not verified) access_time 22 Sep 2021 - 06:49 very good blog
/themes/custom/zyxpro_light/images/placeholder.png
close

on 26th September 2012 / by webmaster
Although the Drupal core provides all the basic functionality to run a website you need to have additional contrib modules installed to extract the full capabilities of Drupal. Here are 18 essential modules we have come up with for building a simple Drupal site. You might also find our list of the Top Drupal SEO modules and Top Drupal 6 modules to be of help. Contact us to get professional help to build your Drupal website. Drupal Theming and Drupal Migration are just two of the legion of Drupal services we have on offer. Application Development Drupal Technical Drupal Modules