11 Click Da Button - input selector syntax?


#1


After just blindly using the selector referencing the input form; $('input[name=checkListItem]'), without understanding the syntax, I found myself asking why it looks the way it does.

In the end, two main questions come to mind.

1. What does $('input[name=checkListItem]') mean? I get that it's referencing the input form, but why are the square brackets used?

2. After noodling around on the web, one finds other ways of referencing a similar input form. Other means apparently utilize an ID established in the input element for the selector; example $('#anID'), and yet another version found mentions some syntax that appeals to an input form expecting text; example $('input:text'), as the selector. Verses the one used in our course; $('input[name=checkListItem]') and ignoring that there are usually a few different ways to complete a task, why use one version of the selector verses another?

Thanks for sharing your knowledge in advance.


Replace this line with your code.


#2

Hello.

This selector will select all the input elements with attribute name equal to checkListItem. Attribute name in HTML has to be unique, but you can use this syntax to select multiple elements using different attribute.

Your selector will select, for example, this element:

<input type="text" name="checkListItem">

So square brackets are used to specify attribute and its value of elements that you want to select.


There are many ways to pick any element.

Why not use the id selector? name is a special attribute that is used only with the form and form elements. It is used to specify the name by which the server will be able to reference the value of given input.

So, when you create a form you quite often want to send it somewhere and you will have to specify name attribute for the inputs. So if the name is specified why would you like to specify also id?

This selector -> $('input:text') will select all the inputs with type="text". So if there are many text inputs it will select all of them. It's not as specific as the selector used in the exercise.


why use one version of the selector verses another?

Keep in mind few things:

  1. Redundancy is bad, if there is a name attribute you really don't have to specify id.
  2. When you want to select only one element use a specific selector (id, name or something more complex). If you use a general selector ($('input:text')), because there is only one text input you will have to refactor your code before adding next input in the future.
  3. Be rational, don't write longish selectors (select third sibling of second child of the child of the child of the body element), only to save yourself from adding an id to the element. Long selectors are usually pretty slow and they are very vulnerable to changes in the markup.

#3

I'm still struggling to understand the input selector: $('input[name=checkListItem]')

I understand that $() is converting the selector to an object so to speak.

I understand that $('input') is selector the input element in the markup.

What I don't understand is the use of the brackets [ ] . It looks like bracket notation with a property name/value pair inside of it. Is that correct? I don't recall seeing this before in our jQuery or JavaScript lessons before.

Could someone put this in clear laymen terms for me? Thanks.


#4

Yea this selector is weird to me as well. From what I can gather instead of giving the input area an id, we are selecting all inputs with a name of checkListItem. It might just be a preference thing that they chose. I like the ID method, because it seems exact, and honestly I just understand it more.

From the HTML:
	<input type="text" name="checkListItem"/>

so first you grab the input, then you further define the name of that input with [name=checkListItem].
I don't believe we have seen this syntax before, and yes its confusing just to pop it in there.


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.