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.

Advertisements
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 »

How to add the two input number using Jquery ?


Hi

So many time while working with Jquery, you will think, how can i do the summation of two number using Jquery. Here is the simple syntax for doing this task.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btnSum").click(function () {
                 var res = (parseInt($("#Num1").val()) + parseInt($("#Num2").val()));
                alert(res);
            });
            
        });
    </script>
</head>
<body>
   Num1: <input type="text" name="Num1" id="Num1" value="" />
    <br />
    Num2 :<input type="text" name="Num2" id="Num2" value="" />
    <br />
    <button id="btnSum">Click Here</button>
</body>
</html>

How to read and write Value in Jquery (Part 7)


While learning any library or framework we have to know how to read and write the input value. For read and write the values in Jquery, there are 3 methods. i.e.

1. text() : used to read and write the text content of selected elements.
2. html(): used to read and write the html content of selected elements.
3. val(): Used to read and write the value of form fields.

Sample example for read the values

readvalue


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
               alert($("#test1").text());
            });
            $("#btn2").click(function () {
               alert($("#test2").html());
            });
            $("#btn3").click(function () {
                alert($("#test3").val());
            });
        });
    </script>
</head>
<body>
  
<p id="test1">This is the simple text.</p>
<p id="test2">This is other <b>simple</b> text.</p>

<p>Input field: <input type="text" id="test3" value="Chandradev"></p>

<button id="btn1">Read Text</button>
<button id="btn2"> Read HTML</button>
<button id="btn3">Read Value</button>
</body>
</html>

Sample Example for write values

writevalue


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
               $("#test1").text("This is overrided text");
            });
            $("#btn2").click(function () {
                $("#test2").html("<b>This is overrided html text</b>");
            });
            $("#btn3").click(function () {
               $("#test3").val("This is overrided Name");
            });
        });
    </script>
</head>
<body>
  
<p id="test1">This is the simple text.</p>
<p id="test2">This is other <b>simple</b> text.</p>

<p>Input field: <input type="text" id="test3" value="Chandradev"></p>

<button id="btn1">Write Text</button>
<button id="btn2"> Write HTML</button>
<button id="btn3">Write Value</button>
</body>
</html>

Summary:

In the both example we showed that for read text,html and form field value we have used text(),html() and val() method.
But while writing the values for text,html and form field value we passed the input parameter in text(),html() and val() method.

Posted in Jquery. 1 Comment »