Understanding element types
Let's say I have several buttons that use a class named submit. I am adding this link to jQuery. When the button is pressed; it must be disabled.
The scripts I could use:
AND. $('.submit').click(function () { this.disabled = true; });
B. $('#submit').click(function () { this.prop('disabled'), true); });
FROM $('#submit').click(function () { $(this).disabled = true; });
D. $('.submit').click(function () { $(this).prop("disabled", true); });
Correct answer: D.
So, personally, I was pretty sure it was C. (which is not the case) because I saw it #
before serving. I do this a lot with questions like this, where I try to assume I know what the correct selector is. I always assume which #
is correct.
In retrospect, the question says it's a class, so I believe that's where it .
fits. However, without saying this class, I would only guess.
Sometimes I see a link id
listed like this #imnotaclass
, or whatever you have, which confuses me.
Can someone better explain jquery selectors when to use #
, .
or
jQuery has some documentation on selectors. Is there continuity between other languages, i.e. css, html. I noticed that with these 2 I can convey something and use it #
on all fronts. However, it will be an identifier, and yet it still works.
The reason I am doing this is to better understand; on the exam, what is the correct answer.
source to share
If "submit"
is a class name, then the correct answer is A:
$('.submit').click(function () { this.disabled = true; });
because this is the only answer that selects an element with that class name and correctly sets the disabled property inside the event handler.
The code inside the event handler is incorrect for options B, C, and D, so there is no way to consider them correct.
It seems like the question is to test your knowledge of three things: 1) CSS selector syntax, 2) how to set properties on a DOM element, and 3) what is the value this
in a jQuery event handler and how do you use it.
Two correct ways to set a disabled property inside an event handler:
// use direct DOM property access
this.disabled = true;
// use jQuery .prop()
$(this).prop("disabled", true);
As for the basics of CSS selector syntax:
A selector that begins with #
targets an identity value identified by using id="xxx"
in HTML, or is set as a property on a DOM element.
So, it "#submit"
refers to one element with id, as in
<button id="submit">Press Here</button>
A selector that begins with .
specifies a class name, identified with class="xxx"
, in HTML, or is specified as a property on a DOM element.
So, it ".submit"
refers to one or more objects with a given class name, as in
<button class="submit">Press Here</button>
ID values must be unique in the document (for one element only). Class names can be used for as many elements as possible.
If you want to learn more about the selectors that jQuery uses, you can read this tutorial .
If you are going to use jQuery inside an event handler it would be like this:
$('.submit').click(function () {
$(this).prop('disabled', true);
});
As shown in the jQuery documentation for .prop()
.
If "submit"
was the id value, then the correct answer is:
$('#submit').click(function () {
$(this).prop('disabled', true);
});
Inside the jQuery event handler, the value this
will be the DOM element that you registered for the event. This means that if you use something like this.id
you have to refer to DOM properties or call DOM methods.
If you want to call jQuery methods, you must use $(this)
to turn it into a jQuery object, then use jQuery methods or properties.
Keep in mind that every jQuery object contains an array of zero or more DOM elements. You can access individual DOM elements in a jQuery object through array syntax, like in, $(this)[0]
or using a method .eq()
, like in $(this).eq(0)
, and the jQuery object has a property .length
that tells you how many DOM elements are in the array, like in $(this).length === 1
.
source to share
An excerpt from the documentation . I am posting this here as background information for @ jfriend00's answer
Sizzle is a selection engine that jQuery uses.
Note. In supported browsers, jQuery will attempt to use document.querySelectorAll()
a CSS selector to resolve queries rather than an internal selection mechanism, unless the requested Selector uses jQuery extensions that are not supported document.querySelectorAll()
. This is done for performance reasons.
Selectors
CSS3
Sizzle supports almost all CSS 3 Selectors , including escaped selectors (
.foo\+bar
), Unicode selectors, and results returned in document order. The only exceptions are those that will require additional DOM event listeners to track the state of the elements.Thus, the following pseudo selectors are not supported:
:hover
:active
:visited
,:link
Note . These CSS3 pseudo-selectors were not supported until version 1.9:
:target
:root
:nth-last-child
:nth-of-type
,:nth-last-of-type
,:first-of-type
,:last-of-type
,:only-of-type
:lang()
Other selectors and conventions
Complete selection lists changes:not()
; e.g.:not(a.b)
,:not(div > p)
,:not(div, p)
Nested pseudo; eg:not(:has(div:first-child))
padding[NAME!=VALUE]
: Elements whose NAME attribute does not match the specified value. Equivalent:not([NAME=VALUE])
.:contains(TEXT)
: Elements with textContent containing the word TEXT. Case sensitive.:header
: Header elements (h1, h2, h3, h4, h5, h6).:parent
: Elements with at least one child node (either text or element).:selected
: (option) which are currently selected Form selection addNote . In this context
input
,button
,select
andtextarea
considered input elements.:input
: Input devices:button
: Input devicesbutton
, or have type "button":checkbox
,:file
,:image
,:password
,:radio
,:reset
,:submit
,:text
: Input devices with this type of provisions of the position of the selectorIn this context, "positional" refers to the placement of items in the collection after selection, according to document order. For example, it
div:first
will return an array containing the first onediv
on the page, butdiv:first em
will target the first onediv
on the page and select all theem
elements inside.Note . Positional indexes start at zero.
:first
/:last
: First / last match item:even
/:odd
: Even / odd numbered items:eq
/:nth
: nth item; for example:eq(5)
finds the 6th element:lt
/:gt
: Elements at positions above / below the specified position
source to share