jQuery Selectors Part1

10.1

jQuery selectors part 1

Hello guys, welcome to our series jQuery. In our previous segment we finished our Ajax module. And we covered the get and post method in Ajax in the previous segment.

Our today’s segment is about jQuery selectors. This is our new module too. Now selectors. Basically you studied about selectors when we learnt CSS, I hope you did CSS course from LearnVern before jumping to jQuery. In that CSS course too we learnt about selectors like ID selector class selector and many others are called selectors in terms of CSS. Like that only we had some selectors in JavaScript. Basically what are selectors? Selectors help us to identify that we can select elements from dom on the basis of current status.

Now basically what are selectors? So “jQuery selectors are used to select and manipulate HTML elements. They are a very important part of jQuery library.’ So basically the first line tells us how to select an HTML element and how we can select it. So to select, these selectors help us.

Secondly, with the help of jQuery selectors we can find out “HTML elements based on the ID, class, attribute, type and much more”. So as I said that in CSS too, with the help of ID, class, its attribute and many more, we can select. So we are going to do exactly the same task but in terms of jQuery. So in CSS the thing that we did with double colon like double colon enable, double colon disable and many more, that exact thing we are going to do with single colon but in jQuery.

So in jQuery the first selector that we will see is enable selector. What enable selector does? So on our complete form element, definitely enable will on form only because HTML do not have any elements that can be disabled. Only form elements can be disabled or enabled, like there is radio button, any form is input field, any button and many more. So enable work only on form elements.

This is also our pseudo class selector and it provides us with all those elements that are currently in enable state. So if you will use it in form then you will get complete elements of form or if you will use it on a particular element then you will get whether there is any enabled state for that element or not.

So currently, basically my control is enabled or not. To see that we will use this selector. Here, ‘if some of the form elements are disabled then using the enable selector, we can highlight the enabled elements.’ Means we are going to do a program like that in which we will take some controls. In those controls we will keep some of disabled and some of them enabled and through jQuery we’ll try to see that those which are enabled are highlighted in front of us.

Now the last point is that in HTML, the disable attribute, used to disable, is allowed on ‘input, text area, button, option’ option means the dropdown ‘fieldset, option group, select’ that means dropdown and ‘menu item’.

So wherever our disable parameter attribute will be allowed, exactly that controls only we can get through enable.

So let’s move on to our syntax. Syntax is very easy. Here after the dollar there is no element given. Here after the dollar directly colon is used and an enable is added. So what does it check?

I have written an example also, after the dollar if button is enabled then if we want to add CSS or have to update anything or have to execute any function or anything else. Whatever we have to do we will write after that. Usually we will highlight it with CSS that if the button is enabled then there should be so and so CSS. If the button is disabled then there should be so and so CSS.

So this is our “enable. So if you put colon enable like this then it will check enable on everything in our form. If you want to check specifically on some element so here you write its button or ID or something like that to check it.

Example is here. What does this example check? Let’s say if I create a form and I’ve kept more than one thing in that form then it will update every enabled thing and keep all the disable things as it is. What do I have to do for it?

So first of all after opening sublime text…, here in HTML. HTML ….“example colon enable” here it is D. it’s enabled…. Now I’ll add our library….. Add script( 6 seconds pause, typing) . Here will come our function…. Now here, “type”. ( 7 seconds pause, typing) Here will be.. “H one”…. “example enabled”.

You can see here it’s not a method that’s why I haven’t put parenthesis here. Now, where are we going to check enabled? We are going to check it in the form. So for that I need a form. I don’t want to give any name in this form. It’s fine. Function will execute without name too.

So let’s say, we will take a H three in form. “This is a form”…. We will make some input field like in each one of them we will keep the type as text. We don’t need names now. But we need disabled here. “Disabled …true”. Means in some of them I will keep disabled in disabled. Okay.

So let’s say this is my input field, I will give it a placeholder…. “First name”….. Okay?( 6 seconds pause, typing ) First I have, last name after first name. Let’s say I’m not keeping it disabled…. Then there is first name last name then I’ll take one more field under disabled text that is age. Then I’ll take one more which I’ll not keep disabled. Let’s say I’m naming it ( 7 seconds pause, typing) ‘telephone number’. I’ll keep one more at last which is disabled that is ‘address’…. Okay?

So currently I’ve created a form in which I took about five input fields and I’ve disabled three of them. So let’s say I save this program….. Here by the name of enabled. And I’ll run this program. So here we have our program.

So you can see here. ‘Enabled’ ‘this is a form’ and here we have our things. First name is disabled. I can edit my last name if it is enabled. Age is disabled. Telephone number is enabled and address is also disabled.

Now here I’ll add a button. You can keep it in form or outside the form there is no limitation where we have to keep it. Let’s say simply I take a button inside the form…. Click. And we will give ID and buttons. So above this click of this button I will get all those fields that are enabled. So here it’ll come, click….

Now what will I do here? In my form all the elements that are enabled, I have to highlight them. So let’s say here I’ll write, the most important thing over here is, “dollar colon” in inverted commas will be colon. …“Enabled dot CSS”. Those which are enabled, I’ve to give background color to them. So let’s say, “Background… color…. comma light green”. As of now we keep it this much only.

We’ll save this program. Reload. Here my button is visible. Let’s see if this will run or not. So I clicked here and nothing was performed and also my program was reloaded. That means as I clicked, the program was being reloaded. So what should I do here?

So here we will see what the problem is. So here you can see in my program I missed D in background color. Plus if you noticed when we looked onto the program it reloaded. I don’t want my program to reload. So to stop the reload I’ll pass the event here. And I’ll write inside it “E dot ….prevent default” so that my program does not reload. So I’ve highlighted the program a little bit.

Now as I click on this button then the controls that are enabled and the controls that are not disabled, all those are in background color light green. That means my control, last name, telephone number plus my button is also in green color because the button is also in the enable state. So what does it indicate?

Enable helps to get all those controls which are currently in enabled state. Or we can say that it’s not in disabled state. So in this form what is disabled? First name, last name and others are disabled. So other than disabled all the controls that are enabled all those will be visible here. Exactly opposite method of the enable method is our disabled method. So for that we will go on our slide. After the enabled method here comes the disabled method.

So here all the tasks that we did were enabled. What does enable do? We get all the controls that are enabled. So definitely what will disabled do? Disable will return all the controls that are currently in disabled state.

So let’s say currently if enabled, the program that we performed here was enabled, it checks enabled here, so if I have to convert it to disabled what will I do then. I will copy and paste this program. Wherever we have written enabled we will replace it from disabled…. Save…We will save this program by the name disabled. We’ll run it.

This is our program. So now if I click here. So what is returned? So first name, age and address that I already defined as disabled, that three are returned. So enabled and disabled are like brother and sister. So if enable returns the controls of enable then disable returns the controls that are currently in disabled state.

Enable and disable are very important because when we work with form through jQuery then in the form whichever are in enable state or disable state, based on previous data we have to enable or disable the next data. We can do that with the help of these selectors.

Moving onto the slide. Here we’ve disabled. And now comes the nth child. Very important thing. Basically what is the nth( an-th)  child? Nth child is a selector that matches the element. Means ‘match the elements based on their position regardless of their time’.

Means previously we looked onto find methods in which we found out the element though any parameter. Then we also saw the methods that find out at the basis of indexes like first; last and others. But here nth child is a kind of selector which avoids position and finds out the element. Means if in a table I want the first row then I can get that by passing count or index in “nth child. If P are my multiples and I want a selected P from them or I have to select a P then I can use nth child. We’ve already learned nth child in CSS but today we will apply it in jQuery.

``This selector is used to match the elements based on their position within a group of siblings.It matches each element, which is the nth child”. Means if I want the first and third element then I can write one three. But let’s say I want elements on the basis of some function like N plus one which will return every element including one. Or I want an element like N plus two means whatever the element is add two in that. Means zero then two. One then three. Like that. So after adding two in every element those which execute and the results we get then select those elements.

So “nth child gives output on the basis of function too. In syntax too this is written. In parenthesis after “nth child there is N that will tell us a specific number. If we simply write words like odd or even”. Then every alternate child will be selected either in an odd state or in an even state.

Then comes the formula like N plus one, two N plus one and many more, that too selects in odd and even. Or you can take a random formula and execute it through “nth child. All these things are optional but you have to refine N.

Example for nth child is given here. Like here a list item is generated and from that all odd list items are to be shown in orange color. Means let’s say I’ll make a list for example I take numbers from one to ten. And in that I want to highlight all odd numbers through a color.

Then what will I do? So let’s say I will copy my program and paste it here. I’ll remove the lines other than button click. I’ll remove this form completely….Where it’s written disabled there we will write nth child. Here we will keep the button…. Here “ID button…”. And we have already written on its click. So I’ll save it by the name “nth child. Here comes the name nth child dot HTML. And if I run this program.

Here my program is running. I haven’t kept anything right now that’s why there is nothing. Let’s say in this program I pass UL…. And in UL I’ll pass LI( 5 seconds pause, typing) . Here I took about ten LI. One two three four five six seven. Okay. Now I want that on clicking all odds on odd numbers should be highlighted. So for that I have to write its script. So the script for odd will be something like this.

Let’s say we already wrote a document dot ready and also we gave a click button. Here it will come “dollar…”. Now here I’ve to write “odd”. Button click we already wrote. So here we will write above this button click dollar and here all the LI’s will come. So that is LI dot. Here we only have to select the LIs that are coming on odd numbers. So after this LI I’ll add the colon nth child and here in brackets I’ll write an odd word... Here I missed H. Okay. Dot CSS…. Then after comma whatever our color is, let’s say, as of now I’ll take light coral.

For now let’s save this much of the program and run it. Like here we have numbers from one to ten. This is our UL so I’ll give it “list style type ..none”. So all the disks are gone. So now I’ll click here. So you can see here that all the LIs of odd numbers are in red color. So here nth child of odd number is run. Let’s say above this in nth child I pass even ….and then light green. Then what happens?

So on one button click I’ve kept two events. First one is to give light coral to odd and second is to give light green to even. So you can see here that all the odds are in red and all the events are in green color. So here we’ve run two things.

Now let’s say, here in place of nth child odd even I run a function that is two N plus one. Let’s see what happens. Save. Reload. So what happened? Every second element has come in red color because two N plus one means, if I keep zero in place of N then I’ll get one, if I replace it one then two into one is three. Two into one is two plus one is three. So I’m getting one three five seven. So here the function is also executing.

If I replace two with three then.. What am I getting? After every number adding three. That means one then leaving two numbers its four then leaving two numbers its seven. That means if you have to execute a formula in function then you can work it in that way too. Plus if you want to color in a specific way. Like I’ll take five then whatever is my fifth index it will be highlighted. Here my fifth LI is highlighted.

So this was our nth child which will highlight all controls of any odd even number or formula according to syntax.

In today’s segment I mean in this video of today’s segment we will study till here only. The selectors that are still left, we’ll cover them in the next video of the same segment. So guys we will meet in our next video.

Thank you so much