Parent,Parents and ParentUntil Method of Jquery Traversing (Part 13)


In this post we wil see when to use the parent ,Parents and ParentUntil method of Jquery traversing . These all three methods look like similar but their functionality are completely different.

parent()
>> It is used for selecting the parent element of given selector element.

parent

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .ancestors * {
            display: block;
            border: 1px solid;
            color: green;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script>
        $(function () {
            $("span").parent().css({ "color": "red", "border": "2px solid red" });
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>This is the demo example of Parent method in Jquery</legend>
        <div class="ancestors">
     <div style="width:500px;">Grand Parent of span
       <div style="width:400px;"> Parent of span
        <span>span</span>
     </div>
  </div>
  </div>
    </fieldset>
</body>
</html>

In the above example we saw that parent div of span has been only highlighted by red color.

parents()

>> It is used for selecting the all parents element of given selector

parents


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .ancestors * {
            display: block;
            border: 2px solid;
            color: green;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script>
        $(function () {
            $("span").parents().css({ "color": "red", "border": "2px solid red" });
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>This is the demo example of Parents method in Jquery</legend>
        <div class="ancestors">
     <div style="width:500px;">Grand Parent of Span
       <div style="width:400px;"> Parent of span
        <span>span</span>
     </div>
  </div>
  </div>
    </fieldset>
</body>
</html>

In the above example we saw that Parents method is used for selecting the all parents elements of given selector in DOM element.

ParentsUntil(Selector)

>> It is used for selecting the parents element of given selector on given condition.

parentuntil




<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .ancestors * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script>
        $(function () {

            $("p").parentsUntil("div").css({ "color": "red", "border": "2px solid green" });
        });
    </script>
</head>

<fieldset>
    <legend>This is the demo example of Parent method in Jquery</legend>
    <body class="ancestors">
        body (great-great-grandparent)
         <div style="width: 500px;">
             div (great-grandparent)
        <ul>
            ul (grandparent)
         <li>li (direct parent)
        <p>This is the paragraph</p>
         </li>
            
        </ul>
         </div>
    </body>
</fieldset>
</html>

In the above example we saw that parentuntil is used for selecting the DOM element from given selector element to given parent element.

Posted in Jquery. 1 Comment »

each,eq and not method of Jquery Traversing (Part 12)


In this post i will include some of the important methods of Traversing Which are very useful in daily life of web developer.

each: It is used to do looping in the dom element.

Sample code for .each method in Jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        p {
            color: red;
            text-align: center;
            cursor: pointer;
            font-weight: bolder;
            width: 300px;
        }
    </style>
    
</head>
<body>
    <fieldset>
       <legend>This is the sample code for each method in Jquery.</legend>
    
<p>This is the paragraph1</p>
<p>This is the paragraph2</p>
<p>This is the paragraph3</p>
    
    </fieldset>
    <script>
        $(document.body).click(function () {
            $("p").each(function () {
                if (this.style.color !== "blue") {
                    this.style.color = "blue";
                } else {
                    this.style.color = "";
                }
            });
        });
    </script>
</body>
</html>

Before Click Event

after_click_each

After Click Event

before_click_each

In the above example we saw that each method is doing looing in each paragraph and changing the color from red to blue.

.eq:
>> It is used to filter the DOM elemnts on basis of index id of dom element.

Sample code for .eq in Jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("li").eq(2).css("background-color", "silver");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for filter in Jquery
        </legend>
    

 <ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>
        </fieldset>
</body>
</html>

eq

In the above example we saw that eq method is used for finding the index of list Item(li) then changing the background color to expected color.

Not(selector)

>> It is used to remove the elements from the set of matched elements.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("li").not(":even").css("background-color", "Silver");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for not in Jquery
        </legend>
 <ul>
  <li>list item 0</li>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
        </fieldset>
</body>
</html>

not

In the above example we saw that not(“:even”) selector is used for removing the even list item(li) from the DOM element.

Posted in Jquery. 1 Comment »

First and last Method of Jquery Traversing (Part 11)


Since Jquery traversing contains huge number of methods so i have decided to break the article in small small part , so it will easier to read it.

In this post we will see when to use First and Last method of Jquery traversing

First()
>> first method is used to loop in the given dom element and find out the first element.

first

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("li").first().css("background-color", "Silver");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for First method in Jquery
        </legend>
 <ul>
  <li>list item 0</li>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
        </fieldset>
</body>
</html>

In the above example we saw that we are using first method to find out the first element of List item(li) and changing the selected item color to silver.

Last()
>> Last method is used to select the last element of dom element.

last

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("li").last().css("background-color", "Silver");
        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            Sample code for last in Jquery
        </legend>
 <ul>
  <li>list item 0</li>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
        </fieldset>
</body>
</html>

In the above example we saw that last method is used to select the last element of dom element.

Summary:

In the both example we saw that first method is used select the first element and Last method is used select the last element of dom element.

Posted in Jquery. 1 Comment »

Jquery traversing (Part 10.0)


Traversing is one of the important concept in Jquery Library. Using traversing methods
We can move UP ,down and sideways in the family tree or DOM tree from the selected element.

Traversing methods are used to filter out element from a document based on given condition.

There are so many methods in Jquery library for traversing. For example

1.Add
2. Add(Selector)
3. addBack()
4. andSelf()
5. children()
6. closest()
7. contents()
8. each()
9. end()
10. eq()
11. filter()
12. find()
13. first()
14. has()
15. is()
16. last()
17. map()
18. next()
19. nextAll()
20. nextUntil()
21. not()
22. offsetParent()
23. parent()
24.parents()
25. parentsUntil()
26. prev()
27. prevAll()
28. prevUntil()
29. siblings()
30.slice()

I feel very boring to read and write the long article so to make short article i will include only few methods in this post.

1. Add()
>> This method is used to add the elements on whole document or inside the context element.

add

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("h5").add("p").css("background-color", "green");
        });
    </script>
</head>
<body>
    
    <fieldset>
        <legend>
            This is the sample code for add() Method in Jquery
        </legend>
    
    <h5>This is the Header</h5>
    <p>First</p>
    <p> Middle</p>
    <p><strong> last</strong></p>
   </fieldset>
</body>
</html>

Note: In the above code we are selecting all the header(h5) and paragraph(p) and adding the green background color.

2. Add(Selector)
>> This method is used to adds more element match by the given selector in the set of given element

add_selector


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .Text_Silver {
            background-color:silver;
        }
        .Text_Blue {
            background-color:blue;
        }
        .Text_Green {
            background-color:green;
        }

        .Text_black {
            background-color:black;
        }
    </style>
    <script>
        $(function () {
            $(".Text_Silver").add(".Text_black").add(".Text_Blue").css("background-color", "red");
        });
    </script>
</head>
<body>
    <fieldset>
       <legend>This is the sample code for add(selector) method in Jquery.</legend>
    
    <h5 class="Text_Silver">This is the Header</h5>
    <p class="Text_Blue ">First</p>
    <p class="Text_Green"> Middle</p>
    <p class="Text_black"><strong> last</strong></p>
    </fieldset>

</body>
</html>

Note: In the above code, we are selecting the css class with Text_Silver ,Text_black, Text_Blue in Dom element and filling the red color as background.

Summary:

Here we have learnt some of the basic methods of Jquery traversing. In next post i will be coming back with other methods of Jquery traversing.

Posted in Jquery. Tags: . 1 Comment »

! Important attribute in CSS


important_example

So many time in interview if we will ask this question with developers. They don’t know “What is Important attribute in CSS” . Here is the answer:

If we have to avoid the override functionality of parent css class, then we can declare as ! important in css. But it is not a good practice to use it in all the scenario . It will be very difficult in debugging process. If it is possible, we have to avoid this features while using in application.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        div {
            background-color: green !important ;
        }
    </style>
</head>
<body>

  <fieldset>
      <legend>
          <b>This is the sample code of Important in CSS</b>
      </legend>
 <div style="background-color:silver; height:100px; width:500px;">
<p>This is the text in Div</p>
</div>
</fieldset>
</body>
</html>


Note:

In the above code we have defined all div color should be green. But if we will not used important then developer can override that color with other color using inline css. So if we have to avoid the override the css class we can use important in global css class.

Add and remove element in Jquery (Part 9)


One of the cool features of Jquery library is write less and do more. Yes it is true,There are so many handy methods are available for doing much functionalities with few line of code. Now for adding new element in jquery is very simple, we can do using following methods

1. append() : used for inserting the element at end of the content.
2. prepend() : used for inserting the element at beging of the content.
3. after() : used for inserting the element after the selected elements.
4. before(): used to inserting the element before the selected element.

add-element


Sample code for all add Methods:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style type="text/css">
        body {
            padding: 50px;
        }

        .target {
            border: 2px solid #bbb;
            background-color: #eee;
            padding: 10px;
            margin: 10px auto;
        }

        .child {
            display: block;
            width: 65px;
            font: bold 12px Arial,Sans-Serif;
            color: white;
            padding: 5px 10px;
            background-color: green;
        }

        .sibling {
            display: block;
            width: 70px;
            font: bold 12px Arial,Sans-Serif;
            color: white;
            padding: 5px 10px;
            background-color: blue;
        }
    </style>
    <script>
        $(function () {
            $("#btnSum").click(function () {
                $('.target')
                     .append('<div class="child">1. Append</div>')
                     .prepend('<div class="child">2. Prepend</div>')
                     .before('<div class="sibling">3. Before</div>')
                     .after('<div class="sibling">4. After</div>');
            });

        });
    </script>
</head>
<body>
    <fieldset>
        <legend>
            <b>Sample code for all Add methods of Jquery </b>
        </legend>

        <div class="target">This is the target div to which new elements are associated using jQuery</div>
        <br />
        <button id="btnSum">Click Here</button>
    </fieldset>
</body>
</html>

For removing element from Jquery there are the following methods

1. remove(): Used to remove the selected element
2. empty() : used to remove the child elements from selected elements.

Sample code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btnRemove").click(function () {
                $("#div1").remove();
            });
            $("#btnEmpty").click(function () {
                $("#div2").empty();
            });

        });
    </script>
</head>
<body>
    <fieldset style="width:500px;">
    <legend><b>Sample code for removing Div element</b></legend>
     <div id="div1" style="background-color:green;border:solid 1px;">
         <p>This is the text in Div Element.</p>
     </div>
    <br />
    <button id="btnRemove">Click Here to remove element</button>
     </fieldset>
    <br />
    <fieldset style="width:500px;">
    <legend><b>Sample code for Empty Div elemnt </b></legend>
     <div id="div2"  style="background-color:green;border:solid 1px; height:100px;">
         <p>This is the text in Div Element.</p>
     </div>
    <br />
    <button id="btnEmpty">Click Here to empty element</button>
     </fieldset>
</body>
</html>

OP for before click

before_click

OP after click event

after_click

Summary

In the above example we showed that how to add and remove html element using Jquery Methods.

Posted in Jquery. 1 Comment »

CSS manipulation in Jquery (part 8)


addcssclass

In Jquery there are the several methods to manipulate the CSS . Some of the useful css methods are given below

1. addClass(): add one or more css class to selected element.
2. removeClass() : remove one or more css class to selected element.
3. toggleClass(): Toggles between adding/removing classes from the selected elements

Sample code for addClass()

This method is used to add css class for given element.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .bckColor {
            color:orange;
             font-size:20px;
            background-color:green;
        }
        .size {
            height:200px;
             width:400px;
             border:solid 1px;
        }
    </style>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btnSubmit").click(function () {
                $("div").addClass("bckColor");
            })
        });
    </script>
</head>
<body>
    <div class="size">
        <p>This is the sample text</p>
    </div>
    <button id="btnSubmit">Click here to change color</button>
</body>
</html>

In the above code we have used addClass() method to change the color of Div element.

Sample code for removeClass()

This method is used to remove css class name from given element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .bckColor {
            color:orange;
             font-size:20px;
            background-color:green;
        }
        .size {
            height:200px;
             width:400px;
             border:solid 1px;
        }
        .clear {

        }
    </style>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btnSubmit").click(function () {
                $("div").removeClass("bckColor size");
            })
        });
    </script>
</head>
<body>
    <div class="bckColor size">
        <p>This is the sample text</p>
    </div>
    <button id="btnSubmit">Click here to remove css class</button>
</body>
</html>

In the above example we have noticed that we are removing class name i.e bckColor and size from given div

toggleClass Method:

This method is used add and remove i.e toggle the css class from given element.

Sample code for toggleClass as given below

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .bckColor {
            color:orange;
             font-size:20px;
            background-color:green;
        }
        .size {
            height:200px;
             width:400px;
             border:solid 1px;
        }
    </style>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btnSubmit").click(function () {
                $("div").toggleClass("bckColor");
            })
        });
    </script>
</head>
<body>
    <div class="size">
        <p>This is the sample text</p>
    </div>
    <button id="btnSubmit">Click here to change color</button>
</body>
</html>

Note: In the above code “bckColor” css class name will be add and remove on basis of button btnSumit click event.

Posted in Jquery. 1 Comment »