Use jQuery selectors and Manipulate DOM

-

Background:

As you have seen in my earliar post, We discussed about the basics of jQuery. Also we have seen different ways to select different DOM elements based on different attributes and attribute values. Now we are going to have a look at different ways to manipulate the DOM.

Reading & Writing:

One of the basic need we have is to read/write the content of a DOM element. Content of an element is what we see in the bare eye within that element. jQuery provides 3 simple methods to get the content of an element. These are:

  • val()// Reading value from the selected element 
  • val(param) //Writing value from the selected element 
  • text()//Reading text from the selected element 
  • text(param) //Writing text from the selected element 
  • html() //Reading html from the selected element 
  • html(param) //Writing html from the selected element

Apparently value, text and html seems like the same thing but there is differences.Text is a textual (without markup) representation of the inner content for all regular elements. Value is present only for the form elements (eg: input,select, button), while html is the textual representation including markup.

Refer the following example to have a clear understanding of these methods:
<html>
<head>
<scriptsrc="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
<divid="div1"><b>My Div Content</b></div>
<form>
<inputtype="text"id="txtName"/>
<inputtype="button"value="Click Me"id="btn1"/>
</form>
</body>
</html>

<scripttype="text/javascript">
functioninit(){
$("#btn1").click(function(){           
varmyVar = $("#div1").text();
$("#txtName").val(myVar);
alert($("#div1").html());
        });
    }
$(document).ready(init)
</script>


Let’s have a look at each lines of jQuery we have used,

  • var myVar = $("#div1").text(); //get the text from div1 which is “My Div Content” 
  • $("#txtName").val(myVar);// set the value of myVar variable in to the textbox 
  • alert($("#div1").html()); // create an alert with the html content of div1 which will show “<b>My Div Content</b>”
So, for writing to an element we have methods i.e. val(), text() and html(). These methods can accept function as parameter.

Get/Change attributes & CSS:

As we already got familiar with reading and writing value/text/html of an element, getting/setting of html attributes or css property of an element is equally straightforward. We got attr() method to get/set html attribute and css()method to get/set css property of an element.

Refer the following example for the use of attr() method
<html>
<head>
<scriptsrc="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
<ahref="http://mondalmrinmoy.blogspot.com"id="myLink1">Mrinmoy Mondal's Blog</a>
<br/>
<ahref="#"id="myLink2">Dead Link1</a>
<br/>
<ahref="#"id="myLink3">Dead Link2</a>
<br/>
<inputtype="button"id="myBtn"value="Click Me">
</body>
</html>
<scripttype="text/javascript">
functioninit(){

$("#myBtn").click(function(){
alert($("#myLink1").attr("href"));
$("#myLink2").attr("href", "http://mondalmrinmoy.blogspot.com");
$("#myLink3").attr(
                {
"href" :"http://mondalmrinmoy.blogspot.com",
"title" :"Mrinmoy's Blog"
                });
            });       
    }
$(document).ready(init)
</script>

Let’s have a look at each lines of jQuery we have used,

  • alert($("#myLink1").attr("href"));//get the value of the ‘href’ attribute of the element ‘myLink1’ 
  • $("#myLink2").attr("href", "http://mondalmrinmoy.blogspot.com");// set the ‘href’ attribute of the element ‘myLink2’ 
  • $("#myLink3").attr({ 

"href" : "http://mondalmrinmoy.blogspot.com",
"title" : "Mrinmoy's Blog"
});// set both the ‘href’ and ‘title’ attribute of the element ‘myLink3’

In the above example we can see 3 different use of the attr() method. Basically there are 3 different overloads of that method. Overload with single parameter is used for reading the value of that attribute, Overload with 2 parameters is used to set value of an attribute where 1st parameter is the attribute name and the 2nd one is the value. While the 3rd overload takes name/value pair of attribute and its value and change all those attributes that are passed as the name of the name/value pair.

Getting or changing different css attributes of an element is very much similar to changing the html attributes. Refer the below example.

<html>
<head>
<scriptsrc="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
<divid="div1"style="width:200px;color:red;">First DIV</div>
<br/>
<divid="div2">2nd DIV</div>
<br/>
<divid="div3">3rd DIV</div>
<br/>
<inputtype="button"id="myBtn"value="Click Me">
</body>
</html>
<scripttype="text/javascript">
functioninit(){

$("#myBtn").click(function(){
alert($("#div1").css("width"));
$("#div2").css("color", "green");
$("#div3").css(
                {
"width" :"200px",
"color" :"blue"
                });
            });       
    }
$(document).ready(init)
</script>

More jQuery Methods:

So far we have seen methods to read/write content of the element, and method to get/set html and css attributes of different elements. Here are few more methods by which we can manipulate DOM elements:

  • addclass //add a specific css class to selected element(s) 
  • removeClass() //removes the provided css class from the selected element(s) 
  • append()//takes html element and append that after the selected element 
  • prepend()//takes html element and preppend that after the selected element 
  • empty()//removes all the child elements of the selected element 
  • remove()//removes the selected element 

Apart from these methods there are a whole lot of methods. All the methods documentation can be found here : css and attribute

Next:

So far we have go the basics of jQuery, different selector and ways to manipulate DOM. There are much more to jQuery rather than only manipulating the DOM, next we will see about different events and there usage in jQuery.

Comments

Post a Comment

Popular posts from this blog

Handling Events in jQuery – Few Advanced Notes and Faqs

-
Background: We have already discussed about handling client events in jQuery (see earlier post ). Obviously there are more things about jQuery events like binding client events to DOM element which are created dynamically, Cancelling the action of an event conditionally etc. Let’s have a look at few advanced topics on jQuery events. Adding event handler to future elements: In my earlier post we already know about the bind() and unbind() methods provided by jQuery which is used to attach and detach event handlers to various elements on the page. Instead of bind() we can also use the click()/dblclick() methods to add different event handlers. We declare these things in the ready() event because we need that element to be loaded before we attach any event handler to that element. Since we can create DOM element dynamically, can we use this technique to attach event to the element. The answer is no, because when the dynamically created element is not yet present in the DOM when th
Read more

Ways to select DOM element(s) - a guide to jQuery Selectors

-
Introduction: I hope you are now familiar with the basics of jQuery. You can go through my earlier post in case you are new to jQuery, so that you are familiar with the basics and know about how it can be used and the different things we can achieve using jQuery. A very common task using jQuery is selecting DOM element to get/set value, change the element’s appearance, get/set different HTML attributes or may be associate an event with that element. Let’s look a closure look at different ways to select DOM elements. jQuery Selector: There are different ways to select DOM element(s) using jQuery. We can select element(s) using the Id, class, HTML attributes, attribute value and much more. Basically jQuery selector is based on the CSS Selectors (the way CSS selects DOM element) but it has some own custom selectors. Let’s look at some selectors along with examples. The ID selector: It uses the Id attribute of the element. As we know that id of an element is unique within the
Read more

Let's traverse through DOM Tree - Few advanced notes on jQuery Selectors

-
Background: We have already seen different jQuery selectors (see earlier post ) and used a few examples to select one/multiple Dom element(s). But what about travarsing the whole DOM tree. can we select inversely?  can we select a dropdown without knowing its value? Lets look at some of the advanced jQuery selectors and a few in-built jQuery methods that can in this regard. Vertically traversing through DOM: Think about nested DOM elements, can we get the child elements of an element after selecting an element using any of the jQuery selectors? the answer is yes. jQuery have in built methods that allows us to traverse through DOM and get child elements. To get all child elements of an element we can use .children() method, which return an array of elements that are 1st level child of that element.So .children() method does not gives those elements which are child of these 1st level elements. The .children() method allows us to pass a selector in order to get specific chil
Read more