Jquery Methods Part1

Hello guys, welcome to our series jQuery.

In the last segment we learned the other effects of jQuery that is animation and delay were covered in the last segment.

Let us move ahead towards today’s segment, this new module will be based on HTML.

jQuery HTML is the name of our module, which  basically means that whenever we develop any web page then a Dom structure is followed.

If you want to know more about Dom structure then you can complete our JavaScript course which is available on our learnvern site. In that JavaScript course DOM, that is, document object model, what is that? with descriptions with proper steps are explained and all the objects related to DOM we have also learnt. If you do not have any idea about DOM then do one thing that is finish the course of JavaScript.

Dom is the elements present in HTML which are arranged in the web browser, which is a hierarchy structure, also known as tree structure.

So, whenever we have to do manipulations with our different elements then we use the jQuery HTML method.

And the name of this segment is ‘get and set content and attribute’ means in this all the elements which are already set such as ‘H ONE’ tag, ‘P’ tag, div tag, input field, form, button are all these are. All the elements that have been set properly in the web browser are going to be turned to get through and how to set them dynamically through jQuery. So, we will learn all these in today’s segment.

(02/30)

Basically, to get and set content and attributes there are three methods used: First is HTML, second one is Val and third one is Text. So, if we look at the hierarchy then HTML, text, and Val there three methods will be taught in today’s segment.

So let us start today’s segment.

Firstly, we have HTML, what basically HTML does, what can we do from the HTML method?

So “jQuery HTML method is used to change the entire content of the selected element. It replaces the selected element” means the amount of content of the element, all the contents can be updated or changed using HTML. For example, I have taken the P tag and I have written many things in that P tag, then I can change the complete content of that tag with the help of what? Then that is the HTML method.

Next, it’s written here that “it replaces the selected element content with new contents” means if I have taken any P tag then then complete content of the P tag can be changed with the HTML tag okay. Either we can ‘get’ or either we can ‘set.’

There are two ways written here inside the Syntax, “to get the HTML” then what is it? It is the factory function where our selector is here so I hope all the segments that we have covered this dollar and selector portion are clear to you that we take selector here. For example, ID, class or element selector, whatever is available. So this much portion is clear then we can complete the next with more concentration that is dot HTML.

So you can see that “to get the HTML” and “to set the HTML” means if you want get only any element of HTML portion then you won’t pass any parameter in the parentheses, again if you only want the get portion then we won’t pass the parameter but if you want to set also means if you want to set the HTML for example there is P tag and I have written three four lines there and you completely want to replace this three four lines in one or two lines or you want to clear it. So where will you keep that, that will be in this parenthesis. Means we have two variations from the HTML method one is get the HTML content and second is set the HTML content.

(05/20)

So, to get no data in parentheses, to set content data in the parentheses. So, all these things are what we are looking at.

So now if we look at it with an example then it will be better for our understanding. Here we can see that on this button the text is set on the P tag. So, our first example is to set the content. Between get and set first we will learn about set.

What do we have to do first we will open the sublime text….Here is our sublime text we will set HTML.. here “example HTML… to set content….” and here we will add the URL of the library.., here we see the URL….We will keep a script tag so that we can add our script.

So this is the set of HTML…. Now let us say that in H ONE I will write(4 seconds pause,typing) ‘to set content… using HTML’. We will save this program…. Let’s say we will save this program as an ‘HTML underscore set’ okay. Now here comes the program, what do we have to do? Right above the button click we have to update some text. So let’s say below the H one I will take a button… here and inside it I will pass an ID set…, okay. And name the button as click.

We will now make a P tag, currently I will not give any ID to P, in this simple HTML program I am using only one P. So I can keep a P tag without ID. Now let us come to the script and above that let us put a style tag inside its body….in this style..body… Text align center.

So now when we click this button then there must be some content set in the “P” tag.

So let us say firstly we insert ‘dollar…. document dot ready…. function’ and here we write dollar and the button which we will be clicking that is my set…this us ID so ‘hashtag set dot click… function’ and here the thing that I want to set, dollar, inside the parentheses P dot HTML. Here we will write our content, let’s say my content is like we have taken here Hello…, B that is bold,…

(09/00)

Learnvern dot com slash P, okay. For now, I am commenting on this portion. After saving it, if I open this program,…. this is the program. ‘To set content using HTML’ if I click then nothing will happen. Let’s say now the commented portion, I will uncomment it and reload this program.

When I click this program you can see that “Hello LearnVern dot com”. The moment that I clicked it this “Hello LearnVern dot com” is visible in the browser, but actually what is happening. If we are understanding the code then it is like this type that the moment I clicked this button, in my DOM the location of the P tag means the P element, that P tag’s HTML value means the place that is kept empty. Started with P and closed it, there is no HTML between them. So what HTML we have appended, what we have added? Then it is ‘Hello Learnvern dot com’.

Now if I write this ‘P’ multiple times means I am writing it three times, then let’s say what will happen and I have reloaded the program, so total in my DOM, means in my complete webpage, in my DOM there are three P tags available, since there is three P tags is written thrice ‘Hello, LearnVern dot com’ you can see on my output screen it is visible.

So basically when we want to set the content with the help of HTML method then what is happening like when I am clicking the button, in my web page the amount of P tags, all the value of the P tags will be updated from Hello LearnVern.

Now let’s say now I will keep a P tag here, (7 seconds pause,typing) okay. So let’s see what will come. Now it is coming ‘This is a P tag’ means I have taken three P tags but I have kept the value in one P tag and that is not empty. So whenever I click the button, all the three P tags are overwritten. The content that I need to write means ‘Hello, LearnVern dot com’.

So what did HTML tag do?, those P tags which were empty, content was added there. Where there was content that has been replaced with existing content means what will our HTML tag do?

Whenever you are setting content with the HTML then every time, if they exist then it will be replaced and if it is not there then it will be set.

So I hope with the help of HTML how to set content you have understood that and it is clear, that above the button click we have passed the reference of P, ‘dollar P dot HTML’ and whatever HTML we want to update that will be added inside the parentheses.

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.

So guys this much in today’s segment, let’s meet in our next segment in which we will continue this topic and the rest methods that are remaining in this topic we will look at it. So see you in the next video of the same segment, thank you!