logo
  • Home
  • About
  • Services
  • Portfolio
  • Contact Us
  • Submit Guest post
73 Different Examples of JQuery Selectors for Web Developers and Designers

73 Different Examples of JQuery Selectors for Web Developers and Designers

February 2, 2017 No comments Article SEO Website Designing

73 Different examples of JQuery Selectors for Web Developers and Designers: Hi Friends, Today I will tell you about different selectors of jquery. Generally we are confused sometime how to select the document elements using jquery, so here is the list with brief explanation.

If you are new in jquery, all the selectors are useful for you. For experienced person most of them are new.

Anyone can use it according to your requirement.

73 Different Examples of JQuery Selectors for Web Developers and Designers are:

  1. $(“*”)

    All document elements.

  2. $(“#hello”)

    The document element with id=”hello”

  3. $(“.info”)

    All document elements with class=”info”

  4. $(“.info, #hello”)

    All document elements with class=” info”, and the document element with id=” hello”

  5. $(“h1”)

    All <h1> document elements.

  6. $(“h1, p”)

    All <h1> document elements and all <p> document elements.

  7. $(“button”)

    All <button> elements and all <p> document elements.

  8. $(“.info #hello”)

    All id=”hello” elements inside class=”info” elements.

  9. $(“#hello .info”)

    All class=”info” elements inside id=”hello” elements.

  10. $(“:hover”)

    All hovered elements.

  11. $(“:active”)

    All active link elements.

  12. $(“:visited”)

    All visited Links.

  13. $(“span”)

    All span elements.

  14. $(“div span”)

    All span element inside div elements.

  15. $(“:even”)

    All even elements.

  16. $(“:odd”)

    All odd elements.

  17. $(“:lang”)

    All lang attributes.

  18. $(“div button:only-child”)

    All elements that are the only child of their parent.

  19. $(“p:first”)

    The first <p> document element.

  20. $(“p:last”)

    The last <p> document element.

  21. $(“tr:even”)

    All even <tr> document elements.

  22. $(“tr:odd”)

    All odd <tr> document elements.

  23. $(“p:first-child”)

    All <p> document elements that are the first child of their parent.

  24. $(“p:first-of-type”)

    All <p> document elements that are the first <p> element of their parent.

  25. $(“p:last-child”)

    All <p> document elements that are the last child of their parent.

  26. $(“p:last-of-type”)

    All <p> document elements that are the last <p> element of their parent.

  27. $(“li:nth-child(1)”)

    All <li> document elements that are the first child of their parent.

  28. $(“li:nth-last-child(1)”)

    All <li> document elements that are the last first child of their parent.

  29. $(“li:nth-of-type(2)”)

    All <li> document elements that are the second <li> element of their parent.

  30. $(“li:nth-last-of-type(2)”)

    All <li> document elements that are the second last <li> element of their parent.

  31. $(“b:only-child”)

    All <b> document elements that are the only child of their parent.

  32. $(“h3:only-of-type”)

    All <h3> elements that are the only child of its type, of their parent.

  33. $(“div > p”)

    All <p> document elements that are a direct child of a <div> element.




  34. $(“div p”)

    All <p> document elements that are descendants of a <div> element.

  35. $(“ul + h3”)

    The <h3> document element that are next to each <ul> elements.

  36. $(“ul ~ table”)

    All <table> document elements that are siblings of a <ul> element.

  37. $(“ul li:eq(0)”)

    The first <li> element of <ul> elements (index starts at 0).

  38. $(“ul li:gt(0)”)

    All <li> elements of <ul> elements with an index greater than 0.

  39. $(“ul li:lt(3)”)

    All <li> elements of <ul> elements with an index less than 3.

  40. $(“:header”)

    All header elements <h1>, <h2>

  41. $(“:header:not(h1)”)

    All header elements that are not <h1> elements.

  42. $(“:animated”)

    All animated elements

  43. $(“:focus”)

    The element that currently has focus.

  44. $(“:contains(Hello World)”)

    All document elements which contains the text ” Hello World “

  45. $(“div:has(p)”)

    All <div> elements that have a <p> element.

  46. $(“:empty”)

    All empty elements (like <input />)

  47. $(“:parent”)

    All elements that are a parent of another element.

  48. $(“p:hidden”)

    All hidden <p> elements

  49. $(“table:visible”)

    All visible tables.

  50. $(“:root”)

    The document’s root element.

  51. $(“p:data(he)”)

    All <p> document elements with a data attribute value starting with “he”

  52. $(“[id]”)

    All document elements with an id attribute.

  53. $(“[id=email-me]”)

    All document elements with an id attribute value equal to “email-me”.




  54. $(“p[id!= email-me]”)

    All <p> elements without an id attribute value equal to “email-me”.
    Note: Also <p> document elements with no id attribute at all.

  55. $(“[id$=etu]”)

    All document elements with an id attribute value ending with “etu”

  56. $(“[id|=ema]”)

    All document elements with an id attribute value equal to “ema” or starting with “ema” followed by a hyphen (-)

  57. $(“[id^=A]”)

    All document elements with an id attribute value starting with the letter “A”

  58. $(“[title~=task]”)

    All document elements with a title attribute value containing the word “task”

  59. $(“[id*=r]”)

    All document elements with an id attribute value containing the string “r”

  60. $(“:input”)

    All form elements.

  61. $(“:text”)

    All form elements with type=”text”

  62. $(“:password”)

    All form elements with type=”password”

  63. $(“:radio”)

    All form elements with type=”radio”

  64. $(“:checkbox”)

    All form elements with type=”checkbox”

  65. $(“:submit”)

    All form elements with type=”submit”

  66. $(“:reset”)

    All form elements with type=”reset”

  67. $(“:button”)

    All form elements with type=”button”, and all <button> document elements.

  68. $(“:image”)

    All form elements with type=”image”

  69. $(“:file”)

    All form elements with type=”file”




  70. $(“:enabled”)

    All enabled form elements.

  71. $(“:disabled”)

    All disabled form elements.

  72. $(“:selected”)

    All selected options in a drop-down list or a form.

  73. $(“:checked”)

    All checked form elements.

Note: Don’t Forget to add jquery file or cdn in your website or its page.

Now you know about 73 Different Examples of JQuery Selectors for Web Developers and Designers

Read About Other Interesting Things about jquery below.

  • Sliding Div When Scroll Down Page Using Jquery
  • Disable Mouse Right Click Using Jquery
  • Responsive Jquery Read More Feature Without Plugin
  • Marquee Animation Without Marquee tag
  • Add 3D Menu Effects To Your Website Using Jquery
  • Rumbles, Vibrates, Shakes, And Rotates Any Element Using Jquery Plugin
  • Fancy Effects To Input Fields Using Jquery Plugin
  • Add Diwali Fireworks Using Jquery In Your Website
  • Zoom Image On Hover Using CSS Without Jquery
  • Pure HTML CSS Slider Without JavaScript or Jquery
  • Create Country State And City Dropdown Using Jquery
  • Learn JQUERY Code Step By Step For Beginners
  • Create Expand Collapse Sliding Menu Using jQuery
  • Jquery Me Simple Slider Kaise Bnate Hai
  • Add CKEditor in Html Form using Jquery
  • Avoid Spammers With Motion CAPTCHA Using JQuery
  • Stop Double Form Submission Using Jquery and Ajax
  • Simple Text Slider Using Jquery Slide Function

I hope you will like 73 Different Examples of JQuery Selectors for Web Developers and Designers. If You found it useful please subscribe my blog.

Share this:

  • Tweet
  • Telegram
  • WhatsApp
  • Share on Tumblr
  • Pocket
  • Email

Related

Categories: Website Design

Tags: 73 Different Examples of JQuery Selectors for Web Developers and Designers, All Jquery Selectors, Getting the most out of jQuery selectors, jquery, jquery advanced selectors, jquery selector attribute, jquery selector child, jquery selectors for beginners

Leave a Reply Cancel reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1,504 other subscribers

Categories

  • Angular (1)
  • Content Marketing (2)
  • Email Marketing (3)
  • Graphics Design (3)
  • Keyword Strategy (1)
  • Other (3)
  • Search Engine Optimization (10)
  • Social Media Optimization (4)
  • Website Design (67)
  • WordPress (18)
  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,504 other subscribers

  • Tag Cloud

    Add Social Share button in WordPress without Plugins Bootstrap center div on screen with flexbox center div vertically and horizontally in body center div vertically and horizontally responsive Center Elements Vertically And Horizontally Using Flex Centering in CSS Create Your Own Fast Social Sharing Buttons For WordPress Creating Scroll-based Animations using jQuery and CSS3 CSS CSS3 CSS3 Variables CSS custom properties CSS Variables custom share buttons wordpress Disable Mouse Right Click Using Jquery disable right click with jquery Disabling right mouse click menu facebook Get to Know the CSS Object Fit and Position Properties How Can You Use CSS Variables HOW TO CODE A RESPONSIVE EMAILER OR NEWSLETTER How to Create Social Sharing Button without any Plugin HOW TO DESIGN A RESPONSIVE EMAILER OR NEWSLETTER how to disable right click menu in html page How to prevent Right Click option using jquery How to Restore WordPress Website from Backup Manually How to use CSS Variables HTML HTML5 javascript jquery jQuery make div slide in when scrolling down page Know About CSS Object Fit and Position Properties Meta Tags Mysql object-fit object-fit/object-position object-position Responsive Website Sliding Div When Scroll Down Page Using Jquery Vertical Centering - Solved by Flexbox Webpage Scrolling Animation Effects with CSS3 & jQuery What You Need To Know About CSS Variables wordpress
  • Copyright SEO Website Designing 2015

    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.