{"id":3384,"date":"2015-06-16T18:06:01","date_gmt":"2015-06-16T12:36:01","guid":{"rendered":"http:\/\/cmscomputer.in\/blog\/?p=3384"},"modified":"2015-07-03T20:21:39","modified_gmt":"2015-07-03T14:51:39","slug":"jquery-selectors","status":"publish","type":"post","link":"https:\/\/www.cmscomputer.in\/blog\/jquery-selectors\/","title":{"rendered":"JQuery Selectors"},"content":{"rendered":"

The jQuery function $() is used to find elements on the page to work with.<\/p>\n

Common Selectors<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Selector<\/th>\nUsage<\/th>\nDescription<\/th>\n<\/tr>\n
element<\/td>\n$(“p”).hide();<\/td>\nThe jQuery element selector selects elements based on the element name.<\/td>\n<\/tr>\n
#id<\/td>\n$(“#test”).hide();<\/td>\nThe #id selector – Jquery id selector uses the id attribute of an HTML tag to find the specific element.<\/td>\n<\/tr>\n
.class<\/td>\n$(“.test”).hide();<\/td>\nThe .class selector -JQuery class selector finds elements with a specific class.<\/td>\n<\/tr>\n
:first<\/td>\n$(“p:first”).hide();<\/td>\nThe first p element.<\/td>\n<\/tr>\n
:last<\/td>\n$(“p:last”).hide();<\/td>\nThe last p element.<\/td>\n<\/tr>\n
:even<\/td>\n$(“tr:even”)<\/td>\nAll even tr elements<\/td>\n<\/tr>\n
:odd<\/td>\n$(“tr:odd”)<\/td>\nAll odd tr elements.<\/td>\n<\/tr>\n
:first-child<\/td>\n$(“p:first-child”)<\/td>\nAll p elements that are the first child of their parents.<\/td>\n<\/tr>\n
:last-child<\/td>\n$(“p:last-child”)<\/td>\nAll p elements that are the last child of their parents.<\/td>\n<\/tr>\n
:nth-child(n)<\/td>\n$(“p:nth-child(2)”)<\/td>\nAll p elements that are the nth child of their parents.<\/td>\n<\/tr>\n
:input<\/td>\n$(“:input”)<\/td>\nAll input elements.<\/td>\n<\/tr>\n
:text<\/td>\n$(“:text”)<\/td>\nAll input elements with type=”text”.<\/td>\n<\/tr>\n
:radio<\/td>\n$(“:radio”)<\/td>\nAll input elements with type=”radio”.<\/td>\n<\/tr>\n
:checkbox<\/td>\n$(“:checkbox”)<\/td>\nAll input elements with type=”checkbox”.<\/td>\n<\/tr>\n
:submit<\/td>\n$(“:submit”)<\/td>\nAll input elements with type=”submit”.<\/td>\n<\/tr>\n
:button<\/td>\n$(“:button”)<\/td>\nAll input elements with type=”button”.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Events<\/h3>\n\n\n\n\n\n\n\n\n
Event<\/th>\nUsage<\/th>\nDescription<\/th>\n<\/tr>\n
$(document).ready()<\/td>\n$(document).ready(function(){
\n…
\n});<\/td>\n		Allows us to execute a function when the document is fully loaded. This is to prevent any jQuery code from running before the document is finished loading (is ready).<\/td>\n<\/tr>\n
click()<\/td>\n$(“p”).click(function(){
\n$(this).hide();
\n});<\/td>\n		The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element.<\/td>\n<\/tr>\n
dblclick()<\/td>\n$(“p”).dblclick(function(){
\n$(this).hide();
\n});<\/td>\n		The dblclick() method attaches an event handler function to an HTML element. The function is executed when the user double-clicks on the HTML element.<\/td>\n<\/tr>\n
mouseenter()<\/td>\n$(“#p1”).mouseenter(function(){
\nalert(“You entered p1!”);
\n});<\/td>\n		The mouseenter() method attaches an event handler function to an HTML element. The function is executed when the mouse pointer enters the HTML element.<\/td>\n<\/tr>\n
mouseleave()<\/td>\n$(“#p1”).mouseleave(function(){
\nalert(“Bye! You now leave p1!”);
\n});<\/td>\n		The mouseleave() method attaches an event handler function to an HTML element. The function is executed when the mouse pointer leaves the HTML element.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Effects<\/h3>\n\n\n\n\n\n\n\n
Method<\/th>\nUsage<\/th>\nDescription<\/th>\n<\/tr>\n
hide()
\nshow()<\/td>\n		$(“#id”).click(function(){
\n$(“p”).hide();
\n});
\n$(selector).hide(speed,callback);<\/td>\n		hide and show HTML elements
\nThe optional speed parameter specifies the speed of the hiding\/showing, and can take the following values: “slow”, “fast”, or milliseconds.
\nThe optional callback parameter is a function to be executed after the hide() or show() method completes.<\/td>\n<\/tr>\n
toggle()<\/td>\n$(“p”).toggle();<\/td>\ntoggle between hide and show, shown elements are hidden and hidden are shown.<\/td>\n<\/tr>\n
fadeIn(), fadeOut(), fadeToggle(), fadeTo()<\/td>\n$(selector).fadeIn(speed,callback);
\n$(“#div1”).fadeIn();
\n$(“#div2”).fadeIn(“slow”);<\/td>\n		methods to fade in a hidden element, fade out a visible element, toggle between fadein and fadeout, or fadeto a given opacitiy.<\/td>\n<\/tr>\n
callback<\/td>\n$(“button”).click(function(){
\n$(“p”).hide(“slow”,function(){
\nalert(“The paragraph is now hidden”);
\n});
\n});<\/td>\n		A callback function is executed after the current effect is 100% finished.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Manipulating Elements and Content<\/h3>\n\n\n\n\n\n
Method<\/th>\nUsage<\/th>\nDescription<\/th>\n<\/tr>\n
html()<\/td>\n$(“p”).html(“Hello <b>world<\/b>!”);<\/td>\nCan both read the current HTML inside an element and replace the current contents with some other HTML.<\/td>\n<\/tr>\n
text()<\/td>\n$(“p”).text(“Hello world!”);<\/td>\nlike .html but does not accept html tags. Useful for replacing text within a tag.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Modify HTML and CSS<\/h3>\n\n\n\n\n\n\n\n\n
Method<\/th>\nUsage<\/th>\nDescription<\/th>\n<\/tr>\n
addClass()<\/td>\n$(“p”).addClass(“intro”);<\/td>\nAdds classname to the selected elements<\/td>\n<\/tr>\n
removeClass()<\/td>\n$(“p”).removeClass(“intro”);<\/td>\nRemove the class name from selected elements.<\/td>\n<\/tr>\n
toggleClass()<\/td>\n$(“p”).toggleClass(“intro”);<\/td>\nAdd the class if it doesn’t exist, remove the class if it does.<\/td>\n<\/tr>\n
css()<\/td>\nvar bgcolor=$(“#main”).css(“background-color”)
\n$(“#body”).css(“font-size”, “200%”)<\/td>\n		Sets or returns one or more style properties for the selected elements..<\/td>\n<\/tr>\n
val()<\/td>\nVar amount=$(“#quantity”).val();<\/td>\nSet and get the value of INPUT field<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Modify HTML<\/h3>\n\n\n\n\n\n
Method<\/th>\nUsage<\/th>\nDescription<\/th>\n<\/tr>\n
attr()<\/td>\n$(“#banner” img).attr(“src”, “images\/newImage.png”);<\/td>\nAdds an attribute<\/td>\n<\/tr>\n
removeAttr()<\/td>\n$(“body”).removeAttr(“bgcolor”);<\/td>\nRemoves an attribute.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Traversing the DOM<\/h3>\n\n\n\n\n
Method<\/th>\nUsage<\/th>\nDescription<\/th>\n<\/tr>\n
next()<\/td>\n$(this).next(‘.someclass’).fadeIn();<\/td>\nFinds the next sibling of the current selection. Has an optional selector parameter to limit it to the next sibling of a particular type.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Miscellaneous<\/h3>\n\n\n\n\n
Method<\/th>\nUsage<\/th>\nDescription<\/th>\n<\/tr>\n
each()<\/td>\n$(“button”).click(function(){
\n$(“li”).each(function(){
\nalert($(this).text())
\n});
\n});<\/td>\n		The each() method specifies a function to run for each matched element.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

The jQuery function $() is used to find elements on the page to work with. Common Selectors Selector Usage Description element $(“p”).hide(); The jQuery element selector selects elements based on the element name. #id $(“#test”).hide(); The #id selector – Jquery id selector uses the id attribute of an HTML tag<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_joinchat":[],"footnotes":""},"categories":[1,7],"tags":[],"class_list":["post-3384","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-web-technologies"],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/posts\/3384"}],"collection":[{"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/comments?post=3384"}],"version-history":[{"count":19,"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/posts\/3384\/revisions"}],"predecessor-version":[{"id":3971,"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/posts\/3384\/revisions\/3971"}],"wp:attachment":[{"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/media?parent=3384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/categories?post=3384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmscomputer.in\/blog\/wp-json\/wp\/v2\/tags?post=3384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}