jQuery Selectors
JQuery CSS Element Selector
Description The element selector selects all the elements that have a tag name of T. Syntax: Here is the simple syntax to use this selector : $(‘tagname’) Parameters Here is the description of all parameters used by this selector: tagname : Any standard HTML tag name like div,p,em,img,lietc Returns Like any other JQuery selector, this selector also returns an array filled with the found elements. Example $(‘p’) selects all elements with a tag name of p in the document $(‘div’) selects all elements with a tag name of div in the document. Following example would select all the divisions and display them one : <html> <head> <title>The Selector Example</title> <script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”> </script> <script type=”text/javascript” language=”javascript”> $(document).ready(function()) { /* This would select all the divisions */ vardivs = $(“div”); for(i=0;i<divs.length;i++) { alert(“Found Division:” + divs[i].innerHTML); } }}; </script> </head> <body> <div class=”div1” id=”divid1”> <p class = “para1” id=”pid1”>This is first paragraph. </p> <p class=”para2” id=”pid2”> This is second paragraph.</p> <p class=”para3” id=”pid3”>This is third paragraph. </p> </div> <br/> <div class=”div2” id = “divid2”> <p>This is second division of the DOM. </p> </div> <br/> <div class=”div3” id=”divid3”> <p>This is a para inside third division</p> </div> </body> </html>
JQuery CSS Element ID Selector
Description The element ID selector selects a single element with the given id attribute. Syntax Here is the simple syntax to use this selector $(‘#elementid’) Parameters Here is the description of all the parameters used by this selector : elementid This would be an element ID. If the id contains any special characters like periods or colons you have to escape those characters with backslashes Returns Like any other JQuery selector, this selector also returns an array field with the found element. Example $(#myid) selects element with the given id myid. $(‘div#yourid’) selects a single division with the given id yourid. Following example would select second division and display its cotent: <html> <head> <title> The selecter Example</title> <scrit type=”text/javascriptsrc=”/jquery/jquery-1.3.2.min.js”> </script> <script type=”text/javascript” language=”javascript”> $(document).ready(function()) { vardivs=$(“#divid2”); alert(“Found Division:.” + divs[0].innerHTML) }}; </script> </head> <body> <div class= “div1” id=”divid1”> <p class=”para1” id=”pid1”>This is first paragraph </p> <p class=”para2” id =”pid2”>This is second paragraph</p> <p class=”para3” id=”pid3”>This is third paragraph</p> </div> <br/> <div class=”div2” id=”divid2”> <p>This is second division of the DOM.</p> </div> <br/> <div class =”div3” id =”divid3”> <p>This is a para inside third division</p> </div> </body> </html>
jQuery CSS Element Class Selector
Description The element class selector all the elements which match with the given class of the elements. Syntax Here is the simple syntax use this selector: $(‘.classid’) Parameters Here is the description of all parameters used by this selector. classid: This is class ID available in the document. Returns Like any other jQuery selector, this selector also returns an array filled with the found elements. Example $(‘.big’) selects all the elements with the given class ID big. $(‘p.small’) selects all the paragraphs with the given class ID small. $(‘big.small’) selects all the elements with a class of big and small. Following example would select all divisions with class.big and display its content: <html> <head> <title> the selector Example</title> <script type=”text/javascrpit” language =”javascrpit”> $(document ).ready (function(){ vardivs=$(“div”); for(i=0;i<divs.length;i++){ alert(“Found Division :”+divs[i].innerHTML); } }); </script> </head> <body> <div class=”big” id=”divid1”> <p class=”para1” id=”pid1”>This is first paragraph. </p> <p class=”para2” id=”pid2”>This is second paragraph. </p> <p class=”para3” id=”pid3”>This is third paragraph. </p> </div> <br/> <div class =”big” id =”divid2”> <p> This is second division of the DOQ.</p> <p> This is Second para inside second division.</p> </div> <br/> <div class=”medium” id =”divid3”> <p> This is a para inside third division.</p> </div> </body> </html>
jQuery CSS Universal Selector
Description The universal selector selects all the elements available in the document. Syntax Here is the simple syntax to use this selector: $(‘*’) Parameters Here ia the description of all the parameters used by this selector. *:A symbolic star. Returns Like any other jQuery selector, this selector also returns an array filled with the found elements. Example $(‘*’) selects all the elements available in the document Following example would select all the elements available and would display them one by one: <html> <head> <title> The selector Example</tittle> <script type=”text/JavaScript” language=”javascript”> $(document).ready(function(){ var elements=$(“*”); for(i=0; i<elements.length; i++){ alert(“Found element:”+elements[i].innerHTML); } }); </script> </head> <body> <div class=”big” id =”divid2”> <p>This is second division of the DOM</p> <p>This is second para inside second division </p> </div> <br/> <div class=”medium” id =”divid3”> <p>This is a para inside third division</p> </div> </body> </html>
jQuery-CSS Multiple Elements E,F,G Selector
Description This Multiple Elements selects the combined results of all the specified selectors E,F or G. You can specify any number of selectors to combine into a single result. Here order of the DOM elements in the jQuery object aren’t necessarily identical. Syntax Here is the simple syntax to use this selector: $(‘E, F, G,…..’) Parameters Here in the description of all parameters used by this selector: E:Any valid selector F:Any valid selector G: Any valid selector Returns Like any other JQuery selector, this selector also returns an array filled with the found elements. Example $(‘div,p’) : selects all the elements matched by div or p. $(‘p strong ,.myclass’) : selects all the elements matched by strong that are descendants of an element matched by p as well as all elements that have a class of myclass. $(‘p strong ,#myid’) :selects asingle elements matched by strong that is descendant of an element matched by p as well as elemera whose id is myid. Following example would select elements with class ID big and element with ID divid3: <html> <head> <title> The selector Example </title> <script type=”text/javascrpit” src=”/jquery/jquery-1.3.2.min.js> </script> <script type=”text/javascrpit” language=”javascript”> $(document).ready (function() { var elements =$(“.big, #divid3”); for(i=0;i<elements.length; i++){ alert(“Found element:”+elements[i].innerHTML); } }); </script> </head> <body> <div class =”big” id=”divid1”> <p class=”para1” id =”pid1”>This is first paragraph</p> <p class=”para2” id =”pid2”>This is second paragraph</p> <p class=”para3” id =”pid3”>This is third paragraph</p> </div> <br/> <div class =”big” id =”divid2”> <p>This is second division of the DOM</p> <p>This is second para inside second division </p> </div> <br/> <div class =”medium” id =”divid3”> <p>This is a para inside third division </p> </div> </body> </html>
| Selector | Example | Selects |
| * | $(“*”) | All elements |
| #id | $(“#lastname”) | The elements with id=lastname |
| .class | $(“.intro”) | All the elements with id=lastname |
| element | $(“p”) | All p elements |
| .class.class | $(.intro.demo) | All elements with the classes “intro” and “demo” |
| :first | $(“p:first”) | The first p element |
| :last | $(“p:last”) | The last p element |
| :even | $(“tr.even”) | All even tr elements |
| :odd | $(“tr.odd”) | Alll odd tr elements |
| :eq(index) | $(“ulli:eq(3)”) | The fourth element in list (index starts at 0) |
| :gt(no) | $(“ulli:gt(3)”) | list elements with an index greater than 3 |
| :lt(no) | $(“ulli:lt(3)”) | list elements with an index less than 3 |
| :not(selector) | $(“input:not(:empty)”) | All the inputs elements that are not empty. |
| :header | $(“:header”) | All header elements h1, h2…. |
| :animated | $(“:animated”) | All animated elements |
| :contains(text) | $(“:contains(‘W3Schools’)”) | All elements which contains the text. |
| :empty | $(“:empty”) | All elements with no child (elements) nodes |
| :hidden | $(“p:hidden”) | All hidden p elements |
| :visible | $(“table:visible”) | All visible tables |
| s1,s2,s3 | $(“th,td,.intro”) | All elements with matching selectors |
| [attribute] | $(“[href]”) | All element with a href attribute. |
| [attribute=valve] | $(“[href=’default.htm’]”) | All elements with a href attribute value equal to “default.htm” |
| [attribute!=value] | $(“[href1=’default.htm’]”) | All elements with a href attribute value not equal to “default.htm” |
| [attribute$=valve] | $(“[href$=’.jpg’]”) | All elements with a href attribute value ending with “.jpg” |
| :input | $(“.input”) | All input elements |
| :text | $(“.text”) | All input elements with type=”text” |
| :password | $(“:password”) | All input elements with type=”password” |
| :radio | $(“:radio”) | All input elements with type =”radio” |
| :checkbox | $(“:checkbox”) | All input elements with type =”checkbox” |
| :submit | $(“:submit”) | All input elements with type=”submit” |
| :reset | $(“:reset”) | All input elements with type=”reset” |
| :button | $(“:button”) | All input elements with type=”button” |
| :image | $(“:image”) | All input elements with type=”image” |
| :file | $(“:file”) | All input elements with type=”file” |
| :enabled | $(“:enabled”) | All enabled input elements |
| :disabled | $(“:disabled”) | All disabled input elements |
| :selected | $(“:selected”) | All selected input elements |
| :checked | $(“:checked”) | All selected input elements |
Similar to above syntax and examples, following example would give you understanding on using different type of other useful selectors $(‘*’) 
This selector selects all elements in the document. $(“p>*”) This selector selects all elements that are children of a paragraph element. $(“#specialID”):This selector function gets the element with id=”specialID”. $(“.specialClass”) This selector gets all the elements that have the class of specialClass. $(“li:not(.myclass)”)Selects all elements matchbody <li> that do not have class=”my class”. $(“a#specialID.specialClass”)This selector matches links with an id of specialID and a class of specialClass. $(“p a.specialClass”) This selector matches links with a class of specialclass declared with in <p> elements. $(“ulli:first”) This selector gets only the first <li> elementof the <ul>. $(“container p”) Selects all elements matched by <p> that are descendants of an element that has an id of container. $(“li>ul”)Select all elements matched by <ul> that are children of an element matched by <li> $(“strong+em”)Selects all elements matched by <em> that immediately follow a sibling element matched by <strong> $(“p~ul”) Selects all elements matched by <ul> that follow a sibling element matched by <p>. $(“code, em, strong)Selects all elements matched by <code> or <em>or <strong>. $(“p strong ,.myclass”) Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class of myclass. $(“.empty”) Selects all elements that have no children. $(“p:empty”)Selects all elements matched by <p> that have no children. $(“div[p]”)Selects all elements matched by <div> that contain an element matched by <p> $(“p[.my class]”)Selects all elements matched by <p> that contain an element with aclass of myclass. $(“a[@rell]”)Selects all elements matched by<a> that have a rel attribute. $(“input[@name=myname]”)Selects all elements matched by <input> that have a name value exactly equal to myname. $(“input[@name^=myname]”)Selects all elements matched by <input> that have a name value beginning with myname. $(“a[@rel$=self]”)Selects all elements matched by <p> that have a class value ending with bar. $(“a[@href*=domain.com]”) Selects all elements matched by <a> that have an href value containing domain.com. $(“li:even”)Selects all elements matched by <li>that have an even index value. $(“tr:odd”)Selects all elements matched by <tr> that have an odd index value. $(“li:first”)Selects all the first<li> element. $(“li:last”)Selects all the last <li> element. $(“li:visible”)Selects all the element matched by<li> that are visible. $(“li:hidden”)Selects all elements matched by <li> that re hidden. $(“:radio”)Selects all radio buttons in the form. $(“:checked”)Selects all checked boxex in the form. $(“:input”)Selects only form elements (input, select, textarea, button). $(“:text”) Selects only text elements(input[type=text]). $(“li:eq(2)”) Selects the third <li> element. $(“li:eq(4)”) Selects the fifth <li> element $(“li:lt(2)”)Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements. $(“p:lt(3)”)Selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements. $(“li:gt(1)”) Selects all elements matched by <li>after the second one. $(“p:gt(2)”)Selects all element matchen by <p> after the third one. $(“div/p”) Selects all elements matched by <p> that are children of an element matched by<div> $(“div//code”) Selects all elements matched by <code> that are descendants of an element matched by <div>. $(“//p//a”)Selects all elements matched by<a> that are descendants of an element matched by <p> $(“li:first-child)”) Selects all elements matched by <li> that are the first child of their parent. $(“li:last-child)”) Selects all elements matched by <li> that are the last child of their parent. $(“:parent”)Selects all elements that are the parent of another element ,including text. $(“li:contains (second)”) Selects all elements matched by <li> that contain the text second. You can use all the above selectors with any HTML/XML element in generic way .For example if selector $(“li:first”) works for <li> element then $ (“p:first”) would also work for <p> element.
You liked the article?
Like : 0
Vote for difficulty
Current difficulty (Avg): Medium
About Author
Name
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
Stay Updated
Get stories of change makers and innovators from the startup ecosystem in your inbox