jQuery Selectors Part2

Hello guys, welcome to our series jQuery.

In the previous video we started the jQuery selectors and in today’s segment we’ll continue the same topic. We’ll see the remaining selectors that were left in the previous video.

Like currently, we’ll start with the reset selector. 

Basically, what is reset? So most of our selector works on form fills. And there is a button in the forms, input type equal to submit, input type equal to button and input type equal to reset. 

So if we have to apply any selector on the reset button, then we can use the reset selector.

Simply, there is an input type inside our form and if we take the input type as reset then it will create a reset button and complete its task. And to specifically Get the reset button we can use the reset selector.

So in the previous segment we made a program named enabled. Now I will copy paste the whole program here. Now here I will replace the word enable with reset. Currently, I ‘m going to comment on the reset portion.

So now I will remove the disable part from my form so that my complete form should be in an enable state…

Okay. So this is my form. Here my button is button ID equal to click. Now let’s say I don’t want anything on ID equal to click but rather I want a button which is input.. type equal to reset, nothing inside the name and the value will be reset. So if we save this form by naming it reset.

Now we will run this program. Now my program is running, so basically my button click is useless, as I removed button ID. We need document dot ready.

So I will keep it here. Nothing will happen if I reset it now. But what will happen here is, first name ABCD, last name ABCD, I’m writing anything here. Now, if I reset so as you can see here my complete form is reset here. Now I want this reset button to perform some style through jQuery.

So what I will do here is, type equal to reset. So in document dot ready, dollar, button in quotes, which button? The reset button dot.. CSS…. 

“Background color,… light coral”. So what I have done here is, I Get this button here. Means, the context I took is button, but which button, the reset button. Now if I save and reload the program, so as you can see nothing is happening here. Means, something wrong is here in document dot ready. So basically what can be wrong here is, here the input type is reset and here I have taken it as button. Okay, so actually the button will not come here instead …here we’ll write it as a button.

Okay….

Save. So as you can see as soon as I reloaded it my reset button became red. So I have not given this color through CSS or styling. So for this, I found a button in jQuery which is a reset button and then I gave that button this CSS. Now I'll make one more button here but I will just not give it any type. Now here I’ll write, click and reload it. So as you can see here, I’ve two buttons here but both buttons are not in color. Only the reset button is in color because I gave this button color, CSS, designing using jQuery. So you can also use the reset button in this way. And not just only for color changing, you use it for whatever changes you have to make. If you ever have to find out if the reset button exists or not in your document, then you can also check with the help of the reset button. 

So this is our reset selector. It is a simple selector. Let’s come to the slide. This is our syntax and this is what we used. And this is its example.

Then comes our language selector. You must have seen a lot of websites in which there is a translate button above. So this button basically translates the basic language of your website into another translated website. Means, if I have a basic website in English, and then if there’s a button named translated this page, then the complete website will be translated in some other language, for example let’s say, French or Spanish. Images or list item portion or table portion will not be changed. Only the language of my website will be changed. If we select French then it will come in French and if we select Spanish then it will come in Spanish.So how does this work?

So this happens with the help of our language selector. In HTML, there’s an attribute named lang. L A N G. This indicates that our so and so paragraph is in which language. So if I write lang equal to EN like English, if I write lang equal to FR French, if I write lang equal to EN US means US English or something else. Means, if I write anything then that particular language is assigned to it. So on this basis I can identify which statements are to be shown under a particular language. Correct?  

Let’s understand it. Let’s say we have an attribute named lang and this is used for our supplied language. Hyphen is allowed in it. Okay. Nothing else than hyphen is allowed. Because in EN US and EN British there’s a hyphen in between.

It has a simple syntax. After colon lang , which language has to be there. Now it has an example. Before starting the example let me tell you how to use lang. So let’s say I copy-paste this program. Now I will remove this button part. We can also remove this form as it is not needed. We’ll put a button…, ID button and here. ( 7 seconds pause, typing)

Okay... till now we have done nothing here. And here instead of reset we’ll write LANG. We’ll save this program with the name of LANG. Now here in this program, let’s say there’s an example in language H one.

Now here I’ll write some P which says “this is in English”. So here I’ll write lang equal to EN. This indicates that our statement is in English…. Now here I don’t know French but I’ll write something here in French. “This is in …French”. …Now here I’ll write FR, which means French.

Now let’s say I write a statement here, “This is in UN English”. So here I’ll write EN colon US, “This is in Spanish”.

Okay. ES ES. So this is how we attribute our language in our HTML page. If it is English then we’ll attach the code with English, if it is French then we’ll attach the code with French, if it is US English then we’ll attach it with US English and so on.

So if we save and run our practicals.

Our “practical, is running here. Now here it is showing simple paragraphs because we wrote simple paragraphs in our program. The language attribute is for our browser. Now with the help of language attributes we can select the only sentence which is in French among all the others. 

So I can do this  with the help of FR language. So let’s say I have this button click and above that I want to highlight the sentence which is in French. So how will we do it? So above this button click, dollar, here P whose language is ..FR dot CSS.( 7 seconds pause, typing)

Yellow. So now if I reload and click this program then as you can see the statement which is in French is highlighted. Means, the sentence to which I have given FR that is highlighted here. So like this if I want to highlight the sentence which is in Spanish. So like ES ES, now here as you can see I intentionally took hyphen code. And now I’ll reload the hyphen code. Then as you can see my Spanish line is executed. Means, hyphen allows the language.

So this is our language attribute by which we can perform selection. So if you are making it in multiple languages then it is very useful to highlight or show up so and so portion using jQuery.

Let’s further continue with the slide. After language comes LT. LT stands for less than. What does less than selector do? “It selects those elements which have lesser index value than the value specified in the index parameter of the LT”. Means, it will return all the index values which are passed in the parenthesis after LT.

Index starts with zero. Okay. “We can use the GT selector to select the elements having the larger index value than the specified index”. Means, like LT, like GT. So if this is our LT then this is our GT too. So LT stands for less than and GT stands for greater than.

The syntax of LT is like this. We’ll give an index after LT. The syntax of GT is also the same. We’ll give an index after GT. So what is the difference between these two is, LT will give less than value and GT will give greater than value. So how will we do the programs of these two?

Let’s say we take a trial. And here we can take the Nth child. And in this program we’ll remove the Nth child and make it LT.

Okay. and for now I’ll LT as five. I will save the program with the name of LT. And now I will run the program…So now this is my program…

Now if I click it then as you can see that all the values less than five are highlighted. What does five index value mean? In my previous video I have told you that in our programming language the index value starts from zero. That means my first LI is in “zero’ th position, which means zero, one, two, three, four and then comes five. So all the values less than five, means all the LI that are less than five are highlighted here. 

It is a very simple thing. It gives all the LI an index. And with the help of that it highlights our specified values. So if this is our LT then the same will be our GT program. So let’s put GT here. GT stands for greater than. Now if we save it with the name of GT and then if I run it.

So now this is my program... So if I click here now then all the values that are greater than five will be highlighted. So as you can see five is my index so the number six, which means zero one two three four five six. So the index values greater than five are highlighted. So seven eight nine ten are highlighted. So this is our greater than.

So less than we will return all values which are less than the index value passed by you. And greater than will return all values which are greater than the index value passed by you. It is a simple thing to highlight or return the values of LT for less than and GT for greater than.

So this is our LT and GT. So guys, by this we completed our jQuery. We learned a lot with the jQuery series. And in today’s segment we learned about all our selectors. Including today’s segment and previous segment We learned a total of six selectors like enable, disable, Nth child and today LT, GT etc. So with the help of these selectors we learned how to form HTML content on a conditional basis and for this we have some facilities given in jQuery to click a submit button. So you have to write a colon submit button.

So all these facilities are given in jQuery. So guys, I request you all to practice the practicals we performed today. All these practicals including today’s segment and previous segment. So guys, if you have any question or query or doubt related to today’s segment then you can tell us at FORUMS dot LEARNVERN dot COM, we’ll give a solution to all your questions. Discussion to be added.

We’ll meet in the next segment. So till then bye-bye.