Month: October 2016

First and last Method of Jquery Traversing (Part 11)

Chandradev1 Comment

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.

Jquery traversing (Part 10.0)

Chandradev1 Comment

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.

! Important attribute in CSS

ChandradevLeave a comment

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)

Chandradev1 Comment

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.

CSS manipulation in Jquery (part 8)

Chandradev1 Comment

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.