jQuery Global Selector

Hello guys,

You all are welcome to this jQuery series.

We have understood jquery through examples in the last segment.

If you have any query or question or any point you have not understood in our last segment, you can inform us on forum.learnvern.com.

We will revert all your questions with solutions there.

Let's start with our today's segment which is jQuery Global Selector.

We are going to cover all the selectors of jQuery in today's segment.

We have used the <p> tag in the example we have gone through in the last segment.

<p> is one of our HTML elements.

So, you have learned element selectors in the last segment.

Today we will learn one more time but we have covered this thing through elements in the last segment.

Today we will look upon another selector.

If you have gone through CSS then you must know that there are different selectors in CSS like “class selectors”, “ID selectors”, “Element selectors”, “Wild card selectors”,” Global selectors”, etc.

The same selectors are available in jQuery.

There is no difference but how we can use these in jQuery which is a minor syntax difference we are going to cover in today's segment.

So, here are some basics which are written like “ jQuery selectors are used to select and manipulate HTML elements “

This means that jQuery selectors are used for selecting all the things we have added in HTML or the elements we have added in HTML.

“With jQuery selectors, you can find or select HTML elements based on their id, classes, attributes, types, and much more from a DOM”.

Means We have already learned DOM in Javascript and the word DOM will come in every segment of jQuery.

So, if you have not completed the learnvern's JavaScript course yet, I request you all guys to complete the javascript course so that you can learn what DOM is and also can clear the objects and concepts of DOM.

It will be difficult for you to complete the course of jQuery on javascript if that is not cleared.

So, I request if you have started jQuery then you must finish javascript and then can continue with jQuery.

We will look at how we can take the reference or how we can get each individual element by ID Class Attribute for all the elements we place under DOM.

Same thing we will look in jQuery, how it can be done.

Next is “all the jQuery selectors start with a dollar sign” means dollar $ and () (parentheses).

So dollar signs and parentheses are a must if you are working with jQuery.

Everything will come under this and the selection will be done on the basis of dollar and parentheses.

This dollar and parentheses are called a factory function.

(03/45)

So, we can move ahead with our selectors with a factory function.

Next, is What is the dollar and parentheses factory function?

So, “Every jQuery selector starts with this sign $(). This sign is known as the factory function.”

Now, what do we add under it?

So, either we add a name,

this means as we have taken <p> in our last example in element then <p> will come, if we are taking <h1> then h1 will come.

For example, if we take any other element the name of every tag comes here like Header, Footer, Image, Figure. Any tag’s name will come here.

Or the second option is you can use ID with hashtag then it will move further as ID selector, can take the class name with a dot (.),

 If you want to take universal then use it with a star (*) and if you want to use more than one selectors means multiple then separate the commas in that.

So, here we are taking an example.

As you can see here "p" is taken, "abcd" is given which is ID and "xyz" is given.

So, let's do this example under our sublime text in which we will use more than one selector.

So, very first we will take HTML…., and here JQuery…. Selectors

As we all know that we have to add the URL of the script.

So, here is the URL. Clear

We have to do this as default whatever the program we do in jQuery until and unless jQuery is not installed.

Now, here we will write our script under which we will use our jQuery's things.

Let's save the program… first by the name jQuery_selectors…

Now what I am doing is adding some <p> tags into it.

Same we have done in our last program like <p> ….this is the first line….., this is the second line…., this is the third line and this is the fourth line.

Then save and when I am running this program then it will look like this; first line, second line, third line, and fourth line.

Now here is what we have done for jQuery, is dollar.. (document)… dot ready..(function) …..after writing this if we only want to color "p" as we have done in the last segment so we will change the background color, so let's say "dollar" make sure you must write under quotes.

After p …dot CSS, Here dot CSS indicates that we are adding CSS.

During the course, we will go through different properties like HTML, text, etc.

We will manipulate on which basis we have to.

This means what comes after the dot is what we want to do.

So, the after dot's portion is based on what we want to do.

Currently, we are changing the CSS so I will take the CSS.. and now under parentheses…. background color,.. and after that what we have to write.

Make sure you won't use semicolons in place or comma because if you are used to CSS then you will make this mistake.

You will write semicolon in place of comma in jQuery, there is, no

So, the first part indicates the property and the second part indicates the value.

Here we will write the value.

So, let's say if I want to give the green color then.. light green… then save and run the program.

After reloading the program you can see that we have done the very first call in our previous program and it was completed fastly.

Currently, this is also completed very fast because we have done one call of the previous browser from this browser.

So, the library got included in the browser that's why the calls are completing fast.

Here you have seen that we have added this under a P and the background color is added under all Ps.

But let's say I am adding an ID under the second p..

My ID is …something like the name of change color.

(08/43)

Now what I will do is the line I have written here and in place of p, the ID which I have taken was added here by copying the hashtag and the name of the ID.

So, as we used to do in CSS, using a hashtag in place of an ID, exactly the same as we do in the case of jQuery.

Not only in jQuery if you are working in any web development language like angular then their ID is also identified by hashtag and class dot.

Here I am changing the background color from light green to cyan.

Save and reload…

So, here you can see all the rest of the 3 lines are in green color and one of the lines becomes blue more specifically in cyan.

This means that more specificity is given to ID rather than an element.

Now here I am taking a class… and under the class, I am generating a change color… name like class.

Here period will come in the place of a hashtag that indicates the class.

Now here I am changing the color to orange then save and reload.

Here my line is appearing in orange color.

So, we have covered three things here.

 “Element selector”, “ID selector”, and “class selector”

Till now three selectors are completed.

Now we will go back to the slide and look at the other selectors.

So, One of them was a universal selector.

The universal selector means all colors or elements should be selected in that.

So, what we have to do in this program as all our selectors got selected in universal.

So, here I am adding some h tags….

Let's say the h1 tag I am adding above…. so that it looks proper.

<h1>…. This is a heading.

Here our h1 comes.

So, I have to give background color or color to h1 so what I will do is, I will keep this h1 as it is and will select a universal under this jquery… and here we will give the background… yellow.

Now let's look at what difference appears.

As you can see, our background got changed which means the universal selector has been applied.

Now all you might be thinking is that here we have applied only elements so how did the background color get changed.

So, there is a body tag in the universal selector that's why the background color got changed.

Here the background color got changed because the body is also a tag.

Body tag applies in our universal application ( universal background color) that's why all tags including body got changed.

So, my complete background has changed.

 So, this is my universal selector.

Now the last is,” Multiple element selector”.

So, what will you do if you want to select more than one element?

Here heading or H1 tag color got changed and why all rest not changed because the ID and class are given here and the element is given to the p tag.

So, let's say I am adding one more here in which I have to take the background color… which is white. That I will add one above h1 and after comma (,) is there any other p tag?

So, under p the last p tag is remaining.

One h1 is here and let's say I am adding one more h2….. here,

This is heading 2 and here I am taking h3 so,

This is heading 3.

So, if I take three things and run this program after commenting, three things appear here: Heading 1, Heading 2, and Heading 3.

So, now I will add h1,h2, and h3 by uncommenting this line and reloading it by saving then you can see that three headings are shown with a white color background.

(13/32)

So, what do we have to understand here?

So we have understood that If we have selected individual elements then the first and fourth p tags will cover but actually, all four p tags are covering but we have given ID and class explicitly in the middle p tags.

So, We have overwritten this ID with this ID selector.

We have overwritten the class with this class selector.

So, ID and class are getting changed with this.

And these two p are changing because of these p selectors.

All our heading tags are getting selected with this heading line but here we have given a separated comma.

So, If you want to give the same CSS to multiple elements then as we used to do in CSS, we write the style and give the commas separately then all elements get the same CSS.

The same applies in jQuery if you add the comma separately then the same CSS will add.

Now the remaining is the “Global selector”.

So, for that, we can use this wild card's star so that all selectors should be given the same property.

We have added CSS for now as we go deep in javascript then you get to know that different properties can be added after the dot that we can add here.

So, we learned how these multiple selectors elements,” Id”, “Class”, “Global”, and “comma-separated”  multiple elements or multiple classes are added.

So, this is our program of how we can use factory functions or add different selectors.

So this is today's segment in which we have learned how we can add multiple selectors in jQuery like ID, Class, Elements, and multiple selectors.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

This means we will cover different jQuery effects in our next module in which various effects are there and the first display we will cover in the next segment.

So, we will meet in the next segment.

Thank you!