Home » Posts filed under jQuery Methods
Showing posts with label jQuery Methods. Show all posts
Showing posts with label jQuery Methods. Show all posts

List of jQuery methods

Posted by 20Fingers2Brains on Tags: ,


Following are the list of methods in jQuery :


  • add() - add() method add elements to a set of matched elements.
  • addClass() - addClass() method adds the specified class to elements matching the specified selector.
  • after() - after() method insert content after each element in the set of matched elements.
  • andSelf() - andSelf() method adds the previous set of elements on the stack to the current stack.
  • animate() - animate() method performs a custom animation of a set of CSS properties. 
  • append() - append() method insert content to the end of each element in the set of matched elements.
  • before() - before() method insert content before each element in the set of matched elements.
  • bind() - bind() method is used to attach an event handler to an element.
  • children() - children() method gets the children of each element in the set of matched elements.
  • clone() - clone() method creates copy of the set of matched elements.
  • contents() - contents() method gets the children of each element in the set of matched elements, including text and comment nodes.
  • css() - css() method gets the value of the style property for the first element from the set of matched elements.
  • delay() - delay() method set a timer to delay  execution of subsequent items in the queue.
  • detach() - detach() method removes the matched set of elements from DOM structure.
  • each() - each() method is used to iterate over both arrays and objects.
  • empty() - empty() method removes all the child nodes of matched elements from the DOM structure.
  • fade() - The fadeIn(), fadeOut() and fadeTo() methods are use to animate the opacity of elements.
  • find() - find() method gets the descendants of each element in the current set of mathed elements, filtered by a selector, jQuery object or an element.
  • hasClass() - hasClass() method determines whether matched elements in jQuery object are assigned the given class.
  • hide() - hide() method is used to hide the elements.
  • html() - html() method gets the html content of first element from the set of matched elements.
  • insertAfter() - insertAfter() method inserts every element in the set of matched elements after the target.
  • slide() - Sliding effect in jQuery can be achieved by slideUp(), slideDown(), and slideToggle() methods.
  • stop() - stop() method id used to stop the currently running animation on the matched elements.
  • text() - text() method gets the combined text contents of each element in the set of matched elements, including their descendants.
  • insertBefore() - insertBefore() method inserts every element in the set of matched elements before the target.
  • prev() - prev() gets the immediate preceeding sibling of each element in the set of matched elements.
  • prevAll() - prevAll() method gets the preceding siblings of each element in the set of matched elements.
  • remove() - remove() method removes the set of matched elements from the DOM structure.
  • removeClass() - removeClass() method removes the specified class from the elements matching the specified selector.
  • replaceAll() - replaceAll() method replaces each target element with the set of matched elements.
  • show() - show() method is used to show the elements.
  • siblings() - siblings() method gets the sibling of each element in the set matched elements.
  • next() - next() method gets the immediately following sibling of each element int the set of matched elements.
  • nextAll() - nextAll() method gets the following siblings of each element in the set of matched elements.
  • parent() - parent() method gets the parent of each element in the current set of matched elements.
  • prepend() - prepend() method insert content to the start of each element in the set of matched elements.

Simple Accordian List using jQuery, HTML and CSS

Posted by 20Fingers2Brains on Tags: ,

We can create a simple Accordian List using jQuery, HTML and CSS.
HTML :- HTML provides the structure.
CSS :- CSS gives the desired look and helps HTML to maintain structure.
jQuery :- jQuery adds the animation affect. jQuery makes the user experience amazing.

Code :


 
<html>
<head>
<title>Accordian List in Jquery
</title>
<style type="text/css">
#mainList li
{
float:left;
List-style:none;
margin-left:50px;
font-family:comic sans ms;
width:80px;
}
#innerList li
{
float:none;
List-style:none;
margin-left:-40px;
margin-top:20px;
display:none;
width:80px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#mainList > li").hover(function () {
            $(this).find("li").slideDown("fast");
        }, function () {
            $(this).find("li").slideUp("fast");
        });
    });
</script>
</head>
<body>
<ul id="mainList">
<li>Home</li>
<li>HTML
<ul class="innerList">
<li>Tags</li>
<li>Examples</li>
<li>Demos</li>
</ul>
</li>
<li>jQuery
<ul class="innerList">
<li>Methods</li>
<li>Selectors</li>
<li>Demos</li>
</ul>
</li>
<li>CSS</li>
<li>XML
<ul class="innerList">
<li>XSD</li>
<li>XSLT</li>
<li>DTD</li>
</ul>
</li>
</ul>
</body>
</html>

Demo :

text method in jQuery with example

Posted by 20Fingers2Brains on Tags: ,
1. text() method gets the combined text contents of each element in the set of matched elements, including their descendants.
2. text() method can be used in both xml and html documents.
3. text() method cannot be used for input elements. For input elements val() method can be used to access their text.
4. text() method returns text, CDATA nodes and as well as element nodes.



Example 1 :


 
        <html>
        <head>
        <title>text</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#textP").click(function () {
                    var textP = $("#targetP").text();
                    alert(textP);
                });
                $("#textUL").click(function () {
                    var textUL = $("#targetUL").text();
                    alert(textUL);
                });
            });
        </script>
        </head>
        <body>
        <p id="targetP">This is 99codingexamples. <span>This is span element.</span></p>
        <b>List of Players :</b>
        <ul id="targetUL">
        <li>Cesc Fabregas</li>
        <li>Thierry Henry</li>
        <li>Ronaldinho</li>
        <li>Tomas Rocisky</li>
        <li>Robin Van Persie</li>
        </ul>
        <input type="button" id="textP" value="text() for P" />
        <input type="button" id="textUL" value="text() for UL" />
        </body>
        </html>
Demo :


In above example, we have rendered a paragraph element and unordered list. We have two buttons for each element respectively. On click of button we are fetching text of respective element using text() method and displaying it using alert. The above example shows that text() method returns text of all descendants.



Example 2 :

 
        <html>
        <head>
        <title>text</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    $("#targetP").text("20 Fingers and 2 Brains. You clicked text() button.");
                });
            });
        </script>
        </head>
        <body>
        <p id="targetP">This is 20 Fingers and 2 Brains.</p>
        <input type="button" id="myButton" value="text()"/>
        <input type="button" id="reset" Value="Reset" onclick="location.reload()" />
        </body>
        </html>
Demo :


In the above example, we have a paragraph element. On click of text() button we are selecting this paragraph element, and using text() method we are updating its text.

stop method in jQuery with examples

Posted by 20Fingers2Brains on Tags: ,
1. stop() method id used to stop the currently running animation on the matched elements.
2. When the stop() method is called on an element, the currently running animation is stopped immediately. 



Example 1 :


 
        <html>
        <head>
        <title>stop</title>
        <style>
        #myDiv
        {
        height:100px;
        width:100px;
        background-color:orange;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#start").click(function () {
                    $("#myDiv").animate({ width: "500px" }, 5000);
                });
                $("#stop").click(function () {
                    $("#myDiv").stop();
                });
                $("#reset").click(function () {
                    $("#myDiv").animate({ width: "100px" }, 500);
                });
            });
        </script>
        </head>
        <body>
        <div id="myDiv"></div><br/>
        <input type="button" id="start" Value="Start"/>
        <input type="button" id="stop" Value="Stop"/>
        <input type="button" id="reset" Value="Reset"/>
        </body>
        </html>
Demo :


In the above example, we have used stop() method. We have created a div element and applied required CSS to it. We have also created buttons to demonstrate how stop() method works. On click of "Start" button we are calling animation() method on div element, which manipulates its CSS like an animation effect.
As soon as we click on "Stop" button the animation is stopped.

slide method in jQuery with examples

Posted by 20Fingers2Brains on Tags: ,


1. Sliding effect in jQuery can be achieved by slideUp(), slideDown(), and slideToggle() methods.
2. SlideDown() method animated the height of the matched element. This causes the lower elements to move down.
3. SlideUp() method also animates the height but causes the lower parts of page to move up.
4. When height becomes 0 the display property is set to none to ensure the animated element does not affect the page.
5. Duration of sliding is specified in milliseconds.
6. Fast and slow corressponds to 200 and 600 milliseconds respectively.
7. Default duration is 400 milliseconds, when duration is omitted.



Example 1 :

 
        <html>
        <head>
        <title>Slide Effect</title>
        <style>
        #main li
        {
        float: left;
        padding-left: 20px;
        list-style: none;
        }
        .innerList
        {
        display:none;
        }
        .innerList li
        {
        float:none!important;
        margin-left:-60px!important;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#main li").hover(function () {
                    $(this).find("ul").slideDown("slow");
                }, function () {
                    $(this).find("ul").slideUp("slow");
                });
            });
        </script>
        </head>
        <body>
        <ul id="main">
        <li>Football
        <ul class="innerList">
        <li>Fabregas</li>
        <li>Henry</li>
        <li>Messi</li>
        </ul>
        </li>
        <li>Cricket
        <ul class="innerList">
        <li>Sachin</li>
        <li>Ponting</li>
        <li>Sehwag</li>
        </ul>
        </li>
        <li>Tennis
        <ul class="innerList">
        <li>Federer</li>
        <li>Djokovic</li>
        <li>Nadal</li>
        </ul>
        </li>
        </ul>
        </body>
        </html>
Demo :


In the above examples, we have created a unordered list and using css, we gave it a look of accordion list. On hover of list elements we are showing another unordered list using slideDown method.
    On un hovering, the list slides up and and its display property is set to none using slideUp method.



Example 2 :

 
        <html>
        <head>
        <title>slideToggle</title>
        <style>
        fieldset
        {
        width:300px;
        margin-left:400px;
        display:none;
        }
        #buttonOpen
        {
        margin-left:490px;
        width:100px;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#buttonOpen").click(function () {
                    $("#form").slideToggle("slow", function () {
                        changeButtonValue();
                    })
                })
            });
            function changeButtonValue() {
                var name = $("#buttonOpen").val();
                if (name == 'Open') {
                    $("#buttonOpen").val('Close');
                }
                else {
                    $("#buttonOpen").val('Open');
                }
            }

        </script>
        </head>
        <body>
        <input type="button" id="buttonOpen" value="Open"/><br>
        <fieldset id="form">
        <legend>Form</legend>
        <table>
        <tr>
        <td><label>Name:</label></td>
        <td><input type="text" id="txtName"><td>
        </tr>
        <tr>
        <td><label>Age:</label></td>
        <td><input type="text" id="txtAge"><td>
        </tr>
        <tr>
        <td><label>Address:</label></td>
        <td><input type="text" id="txtAddress"><td>
        </tr>
        </table>
        </fieldset>
        </body>
        </html>
Demo :


In above example, we have a form and a button. On load form has display property set to none. On click of button, we make form to slide down. Similarly on clicking again it slides up and when its height becomes 0 form's display property is set to none. This is achieved by slideToggle() method. In order to show the transition between slideup and slide down, we are changing value property of button depending on current state of slideToggle().

siblings method in jQuery with examples

Posted by 20Fingers2Brains on Tags: ,
1. siblings() method gets the sibling of each element in the set matched elements.
2. The elements selected in jQuery object using siblings() method can be furthur filtered using selector.



Example 1 :


 
        <html>
        <head>
        <title>sibling</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var css = {
                    'color': 'Red',
                    'text-decoration': 'underline',
                    'font-size': '30px'
                }
                $("#myButton").click(function () {
                    $("#targetLi").siblings().css(css);
                });
            });
        </script>
        </head>
        <body>
        <ul type="circle">
        <li>Javascript</li>
        <li id="targetLi">Jquery</li>
        <li>MVC</li>
        <li>Linq</li>
        </ul>
        <input type="button" id="myButton" value="Click ME"/>
        </body>
        </html>
Demo :


In the above example, we have created an unordered list, with id attribute assigned to one of the li element. On button click using id selector li element is selected and using siblings() method all sibings are selected in jQuery object and CSS is applied to it.



Example 2 :

 
        <html>
        <head>
        <title>sibling</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var css = {
                    'color': 'Red',
                    'text-decoration': 'underline',
                    'font-size': '30px'
                }
                $("#sibling").click(function () {
                    $("#targetDiv").siblings().css(css);
                });
                $("#siblingSelector").click(function () {
                    $("#targetDiv").siblings("p").css(css);
                });
            });
        </script>
        </head>
        <body>
        <div id="mainDiv">
        <div id="targetDiv">This is div element inside another div.</div>
        <p>This is paragraph1 inside div element. It is sibling to div with id = "targetDiv" </p>
        <span>This is span element.</span><br>
        <em>This is emphasize element.<em>
        </div>
        <input type="button" id="sibling" value="Siblings" />
        <input type="button" id="siblingSelector" Value="Siblings with Selector" />
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>
Demo :


In the above example, we have created a main div and inside that div, we have created different elements. We have two buttons. On click of "siblings" button we are selecting div with id="targetDiv" and using siblings() method we are selecting all its sibing and applying CSS to it.
    On the other hand, on click of "Siblings with Selector" we are selecting all siblings of targetDiv and filtering it using selector and applying CSS to it.

show method in jQuery with examples

Posted by 20Fingers2Brains on Tags: ,
1. show() method is used to show the elements.
2. show() with no duration is equivalent to css property 'display : inline'.
3. show(200) with duration specified becomes animation method.
4. Duration is given in milliseconds, and slow and fast string indicates 600 and 200 milliseconds respectively.



Example 1 :


 
        <html>
        <head>
        <title>show in jQuery</title>
        <style>
        fieldset
        {
        width:300px;
        margin-left:400px;
        }
        #buttonDiv
        {
        margin-left:400px;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#buttonHide").click(function () {
                    $("#form").hide();
                });

                $("#buttonShowNormal").click(function () {
                    $("#form").show();
                });

                $("#buttonShowAnimation").click(function () {
                    $("#form").show("slow", function () {
                        alert("Show Animated !!");
                    });
                });
            });
        </script>
        </head>
        <body>
        <fieldset id="form">
        <legend>Form</legend>
        <table>
        <tr>
        <td><label>Name:</label></td>
        <td><input type="text" id="txtName"><td>
        </tr>
        <tr>
        <td><label>Age:</label></td>
        <td><input type="text" id="txtAge"><td>
        </tr>
        <tr>
        <td><label>Address:</label></td>
        <td><input type="text" id="txtAddress"><td>
        </tr>
        </table>
        </fieldset>
        <div id="buttonDiv">
        <input type="button" id="buttonHide" value="Hide"/>
        <input type="button" id="buttonShowNormal" value="Show Normal"/>
        <input type="button" id="buttonShowAnimation" value="Show Animation"/>
        </div>
        </body>
        </html>
Demo :



In the above example, we have used show() method. When we click the "ShowNormal" button, it will show the form quickly like changing the display property from none to inline without animation involved.
        There is no animation involved, as we have not specified duration. When we click on "ShowAnimation" button, It shows the form with animation effect as duration for show() method is specified.

replaceAll method in jQuery with examples

Posted by 20Fingers2Brains on Tags: ,
1. replaceAll() method replaces each target element with the set of matched elements.
2. replaceAll() method expects a target as parameter i.e the target element to be replaced.
3. replaceAll() method is corollary to replaceWith() element with source and target reversed. ReplaceWith() element expects element to be replaced as a paremeter.



Example 1 :



        <html>
        <head>
        <title>replaceAll</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    $("<b>replaceAll() replaces the existing content with new one</b><br/>").replaceAll("p");
                });
            });
        </script>
        </head>
        <body>
        <p>This is 20 Fingers and 2 Brains.</p>
        <p>This is demo for replaceAll method.</p>
        <p>Jquery is amazing.</p>
        <input type="button" id="myButton" value="Replace All"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>
Demo :

In the above example, we have rendered three paragraph elements. On click of "Replace All" button all paragraph elements are replaced by b element with some text.



Example 2 :

 
        <html>
        <head>
        <title>replaceAll</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    $("b").replaceAll("p");
                });
            });
        </script>
        </head>
        <body>
        <b>This content will replace all paragraph element's content on click of Replace All button.</b>
        <p>This is 99codingexamples.</p><br />
        <p>This is demo for replaceAll method.</p><br />
        <p>Jquery is amazing.</p><br />
        <input type="button" id="myButton" value="Replace All"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>
Demo :

In the above example, we have rendered three paragraph elements and one b element which will act as source for replacing text. On click of "Replace All" button all paragraph elements are replaced by b element.



Example 3 :

 
        <html>
        <head>
        <title>replaceAll</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#replaceAll").click(function () {
                    $("b").replaceAll("p");
                });
                $("#replaceWith").click(function () {
                    $("p").replaceWith($('b'));
                });
            });
        </script>
        </head>
        <body>
        <b>This content will replace all paragraph element's content on click of Replace All button.</b>
        <p>This is 99codingexamples.</p><br />
        <p>This is demo for replaceAll method.</p><br />
        <p>Jquery is amazing.</p><br />
        <input type="button" id="replaceAll" value="Replace All"/>
        <input type="button" id="replaceWith" value="Replace With"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>
Demo :


In the above example, we have rendered three paragraph elements and one b element which will act as source for replacing text.
    In this example, we have shown difference between replaceAll() and replaceWith() methods. The replaceWith() method replaces all the paragraph elements with b element.

removeClass method in jQuery with examples

Posted by 20Fingers2Brains on Tags: ,
1. removeClass() method removes the specified class from the elements matching the specified selector.
2. removeClass() can remove multiple or all classes from an element.
3. When a class parameter is specified, only that class is removed. When no parameter is specified all the classes are removed.
4. Two classes can be removed by specifying both the classes separated by comma.



Example 1 :


 
        <html>
        <head>
        <title>removeClass</title>
        <style>
        .class1
        {
        background-color:Red;
        margin-left:400px;
        width:200px;
        height:200px;
        display:block;
        }
        .class2
        {
        background-color:Green;
        margin-left:400px;
        width:200px;
        height:200px;
        display:block;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myDiv").hover(function () {
                    $(this).removeClass("class1").addClass("class2");
                });
            });
        </script>
        </head>
        <body>
        <span id="myDiv" class="class1">
        Hover Me
        </span>
        </body>
        </html>
Demo :


In the above examples, we have a div with class1. On hovering the div, we are removing the aready assigned class i.e class1 using removeClass()and assigning another class i.e class2 using addClass() method.



Example 2 :

 
        <html>
        <head>
        <title>removeClass</title>
        <style>
        .class1
        {
        margin-left:400px;
        width:200px;
        height:200px;
        display:block;
        }
        .class2
        {
        background-color:Aqua;

        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myDiv").hover(function () {
                    $(this).removeClass("class1 class2");
                });
            });
        </script>
        </head>
        <body>
        <span id="myDiv" class="class1 class2">
        Hover Me
        </span>
        <br />
        <input type="button" value="Reset" onclick="location.reload()" />
        </body>
        </html>
Demo :

In the above examples, we have a div with two classes assigned i.e class1 and class2. On hovering the div we are removing both the classes using removeClass() method.



Example 3 :

 
        <html>
        <head>
        <title>removeClass</title>
        <style>
        .thisDiv
        {
        background-color:Red;
        width:200px;
        height:200px;
        display:block;
        }
        .Green
        {
        background-color:Green!important;
        }
        .Yellow
        {
        background-color:Yellow!important;
        }
        .Aqua 
        {
        background-color:aqua!important;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".thisDiv").hover(function () {
                    var className = $(this)[0].className;
                    $(this).removeClass(function (index, className) {
                        return className;
                    }).addClass('thisDiv');
                });
            });
        </script>
        </head>
        <body>
        <table>
        <tr>
        <td>
        <span class="thisDiv Green">
        Hover Me 1
        </span></td>
        <td>
        <span class="thisDiv Yellow">
        Hover Me 2
        </span></td>
        <td>
        <span class="thisDiv Aqua">
        Hover Me 3
        </span>
        </td>
        </tr>
        </table>
        <br />
        <input type="button" value="Reset" onclick="location.reload() />
        </body>
        </html>
Demo :

In the above examples, we have 3 divs with two classes assigned for all. On hovering div we remove both classes for that particular div and reassign 'thisDiv' class.

remove method in jQuery with examples

Posted by 20Fingers2Brains on Tags: ,
1. remove() method removes the set of matched elements from the DOM structure.
2. remove() is similar to empty() method, which removes element and everything inside it from the DOM structure.
3. Unlike detach() method remove() does not keep information of elements being removed.



Example 1 :

 
        <html>
        <head>
        <title>remove</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#removeId").click(function () {
                    $("#targetP").remove();
                    $("#targetDiv").remove();
                });
                $("#removeClass").click(function () {
                    $(".default").remove();
                });
            });
        </script>
        </head>
        <body>
        <p id="targetP" class="default">This is p element.</p>
        <div id="targetDiv" class="default">This is div element.</div><br />
        <input type="button" id="removeId" value="Remove using Id selector"/>
        <input type="button" id="removeClass" value="Remove using Class selector"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>
Demo :


In above example, we have rendered a paragraph and an div element. We have created two buttons, on click of both we are removing the elements from the DOM structure using remove() method. For removing we are using id and class selecotor both.

prevAll method in jQuery with examples

Posted by 20Fingers2Brains on Tags: ,
1. prevAll() method gets the preceding siblings of each element in the set of matched elements.
2. prevAll() method allows us to search for all the predecessors of a particular element and cinstruct a new jQuery object.



Example 1 :


 
        <html>
        <head>
            <title>prevAll</title>
            <style type="text/css">
            .css
            {
                color:Aqua;
                font-size:30px;
            }
            </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#prevAll").click(function () {
                    $(".css").removeClass("css").prevAll().addClass("css");
                });
            });
        </script>
        </head>
        <body>
        <div>
        <p>This is paragraph element. This is colored.</p>
        <div>This is div element.</div><br>
        <span class="css">This is span elment.</span><br />
        </div>
        <input type="button" id="prevAll" value="prevAll" />
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>
Demo :


In the above example, we have created few div elements and span element. On "prevAll" button click we are selecting paragraph element using class selector and using prevAll() method, all preceding siblings are selected and CSS is applied to it.



Example 2 :

 
        <html>
        <head>
        <title>prevAll</title>
        <style type="text/css">
          .css
          {
              color:Aqua;
              font-size:30px;
          }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    var liNum = $("#number").val();
                    if (liNum != "") {
                        if ($("li")[liNum] != undefined) {
                            $(".css").removeClass("css");
                            $("li:eq(" + liNum + ")").addClass("css");
                        }
                        else {
                            alert("Enter valid position !!");
                        }
                    }
                    else {
                        alert("Please enter Position.");
                    }
                });

                $("#prevAll").click(function () {
                    if ($(".css")[0] != undefined)
                        $(".css").removeClass("css").prevAll().addClass("css");
                    else
                        alert("Please enter position and click Click Me. Then try to click NextAll button.");
                });
            });
        </script>
        </head>
        <body>
        <b>List of Players :</b>
        <ul>
        <li>Ronaldinho</li>
        <li>Zinedine Zidane</li>
        <li>Maradona</li>
        <li>Pele</li>
        <li>Messi</li>
        <li>Ronaldo</li>
        </ul>
        <b>Enter li position to manipulate : </b><input type="text" id="number" /><br />
        <input type="button" id="myButton" value="Select" />
        <input type="button" id="prevAll" value="PrevAll" />
        <input type="button" id="reset" value="Reset" onclick="location.reload();" />
        </body>
        </html>
Demo :


In the above example, we have created an unordered list of players. We are asking user to specify the index of li element to select. On "PrevAll" button click all preceding sibling li elements are selected and CSS is applied to it. We have applied required validations as well.

prev method in jQuery with examples

Posted by 20Fingers2Brains on Tags: ,


1. prev() gets the immediate preceeding sibling of each element in the set of matched elements.
2. prev() method searched for the predecessor for each of the matched elements and creates a new jQuery object.


Example 1 :

 
        <html>
        <head>
        <title>prev</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var cssText = { 'font-size': '30px', 'color': 'aqua' };
                $("#henry").click(function () {
                    alert("This is the first element. There is nothing previous to this!!");
                });
                $("#fabregas").click(function () {
                    $("#fab").prev().css(cssText);
                });
                $("#rocisky").click(function () {
                    $("#mozart").prev().css(cssText);
                });
                $("#vermaelen").click(function () {
                    $("#verminator").prev().css(cssText);
                });
                $("#wolcott").click(function () {
                    $("#fastandfurious").prev().css(cssText);
                });
                $("#reset").click(function () {
                    location.reload();
                });
            });
        </script>
        </head>
        <body>
        <b>List of Players</b>
        <ul>
        <li id="tt">Thierry Henry</li>
        <li id="fab">Cesc Fabregas</li>
        <li id="mozart">Tomas Rocisky</li>
        <li id="verminator">Thomas Vermaelen</li>
        <li id="fastandfurious">Theo Wolcott</li>
        </ul>
        <input type="button" id="henry" value="Prev of Henry" />
        <input type="button" id="fabregas" value="Prev of Fabregas" />
        <input type="button" id="rocisky" value="Prev of Rocisky" />
        <input type="button" id="vermaelen" value="Prev of Vermaelen" />
        <input type="button" id="wolcott" value="Prev of Wolcott" />
        <input type="button" id="reset" value="Reset" />
        </body>
        </html>
Demo :


In the above example, we have created an unordered list of players. We have created buttons corresponding to player names in the list.
    On click of button, corresponding li element is selected and using prev() method, the previous li element is selected and CSS is applied to it.



Example 2 :

 
        <html>
        <head>
        <title>prev</title>
        <style type="text/css">
        .css
        {
        background-color:aqua;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var rowNum;
                var rowCount;
                $("#selectRow").click(function () {
                    rowNum = $("#rowNum").val();
                    rowCount = $("tr").length;
                    if (rowNum < rowCount) {
                        $("tr:eq(" + rowNum + ")").addClass("css");
                    }
                    else {
                        alert("Enter valid row. Index start from 0");
                    }
                });
                $("#prev").click(function () {
                    var currentIndex = $(".css").index();
                    if (currentIndex != 0)
                        $(".css").removeClass("css").prev().addClass("css");
                    else
                        alert("prev does not exist !!");
                });
            });
        </script>
        </head>
        <body>
        <table border="1">
        <caption>Players</caption>
        <tr>
        <th>Name</th>
        <th>Club</th>
        <th>Height</th>
        <th>Position</th>
        </tr>
        <tr>
        <td>Thierry Henry</td>
        <td>New York Red BUlls</td>
        <td>186 cm</td>
        <td>Forward</td>
        </tr>
        <tr>
        <td>Cesc Fabregas</td>
        <td>FC Barcelona</td>
        <td>176 cm</td>
        <td>Midfield</td>
        </tr>
        <tr>
        <td>Santiago Cazorla</td>
        <td>Arsenal FC</td>
        <td>168 cm</td>
        <td>Midfield</td>
        </tr>
        <tr>
        <td>Laurent Kocielny</td>
        <td>Arsenal FC</td>
        <td>186 cm</td>
        <td>Defecnce</td>
        </tr>
        <tr>
        <td>Tomas Rocisky</td>
        <td>Arsenal FC</td>
        <td>176 cm</td>
        <td>Midfield</td>
        </tr>
        </table>
        <br /><br />
        <input type="text" id="rowNum" />
        <input type="button" id="selectRow" value="Select Row" />
        <input type="button" id="prev" value="Prev" />
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>
Demo :


In the above example, we have created a table. In above example we ask user to enter the index to select the table row. Then on click of prev button, we are changing the CSS of previous row. We have applied required validations as well.

prepend method in jQuery with examples

Posted by 20Fingers2Brains on Tags: ,


1. prepend() method insert content to the start of each element in the set of matched elements.
2. prepend() method expects parameter to be appended.
3. prepend() method inserts the specified content as the first child of each element in the jQuery object.



Example 1 :

 
        <html>
        <head>
        <title>prepend</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    $("#targetP").prepend("This is This is 20 Fingers and 2 Brains.");
                });
            });
        </script>
        </head>
        <body>
        <p id="targetP">This is p element.</p>
        <input type="button" id="myButton" value="Prepend"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>
Demo :


In the above example, we have rendered a paragraph element. on click of "Prepend" button the paragraph element is selected and using prepend() method h3 element is prepended as a first child.


Example 2 :

 
        <html>
        <head>
        <title>prepend</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    $("#targetP").prepend($('span'));
                });
            });
        </script>
        </head>
        <body>
        <span>This is 99codingexamples.</span>
        <p id="targetP">This is p element.</p>
        <input type="button" id="myButton" value="Prepend"/>
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>
Demo :


In the above example, we are selecting span element using span selector as paramater to prepend() method.
    The prepend() method selects the span element and prepends it to the p element.

parent method in jQuery with examples

Posted by 20Fingers2Brains on Tags: ,



1. parent() method gets the parent of each element in the current set of matched elements.
2. Given the jquery object, parent() method allows us to search the parent of each element in the current jQuery object for matched elements, to construct new jQuery object.
3. parent() and parents() method are same, only difference is parent() method only searches to one level up the DOM tree.



Example 1 :

 
        <html>
        <head>
        <title>parent</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var css = {
                    'color': 'Aqua',
                    'background-color': 'Yellow'
                };
                $("#parent").click(function () {
                    $("#target").parent().css(css);
                });
                $("#parents").click(function () {
                    $("#target").parents().css(css);
                });
            });
        </script>
        </head>
        <body>
        <div>
        This is Div element.
        <p>This is paragraph element. It is inside Div element.<br>
        <span>This is span element. It is inside paragraph element.<br>
        <em id="target">This is emphasize element. It is inside span element.</em>
        </span>
        </p>
        </div>
        <input type="button" id="parent" value = "parent() of em" />
        <input type="button" id="parents" value = "parents() of em" />
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body> 
        </html>
Demo :


In the above example, we have demonstrated working of parent() and parents(). Our target element is em. On click of "parent() of em" button only immediate parent of em element is selected and CSS is applied to it. On click of "parents() of em", all the parents in the DOM tree for em element is selected and CSS is applied to it.
    This shows that parent() method travels only one level up the DOM tree and parents() searches parent at multiple hierarchy in the DOM tree.



Example 2 : parents() with Selector

 
        <html>
        <head>
        <title>parent</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var css = {
                    'color': 'Aqua',
                    'background-color': 'Yellow'
                };
                $("#parent").click(function () {
                    $("#target").parents().css(css);
                });
                $("#parents").click(function () {
                    $("#target").parents("div").css(css);
                });
            });
        </script>
        </head>
        <body>
        <div>
        This is Div element.
        <p>This is paragraph element. It is inside Div element.<br>
        <span>This is span element. It is inside paragraph element.<br>
        <em id="target">This is emphasize element. It is inside span element.</em>
        </span>
        </p>
        </div>
        <input type="button" id="parent" value = "parents() of em" />
        <input type="button" id="parents" value = "parents() of em filter by selector" />
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body> 
        </html>
Demo :


In the above example, we have demonstrated working of parents() and parents(selector) method. On click on "parents() of em" button, all the parents() in the DOM tree for em element is selected and CSS is applied to it. 
       But on click on "parents() of em filter bu selector" button we are selecting all the parents() in the DOM tree and then filtering it by selector i.e "div". So only parents which are div are selected in new jQuery object and CSS is applied to them.



Example 3 :

 
        <html>
        <head>
        <title>parent</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var css = {
                    'color': 'Aqua',
                    'background-color': 'Yellow'
                };
                $("#divParent").click(function () {
                    $("div").parent().css(css);
                });
                $("#divP").click(function () {
                    $("p").parent().css(css);
                });
                $("#divSpan").click(function () {
                    $("span").parent().css(css);
                });
                $("#divEm").click(function () {
                    $("em").parent().css(css);
                });
            });
        </script>
        </head>
        <body>
        <div>
        This is Div element.
        <p>This is paragraph element. It is inside Div element.<br>
        <span>This is span element. It is inside paragraph element.<br>
        <em>This is emphasize element. It is inside span element.</em>
        </span>
        </p>
        </div>
        <input type="button" id="divParent" value="Parent of Div" />
        <input type="button" id="divP" value="Parent of P" />
        <input type="button" id="divSpan" value="Parent of Span" />
        <input type="button" id="divEm" value="Parent of EM" />
        <input type="button" id="reset" value="Reset" onclick="location.reload();" />
        </body>
        </html>
Demo :


In the above example, we have nested elements inside a div element and created corressponding buttons for each element. On click of each button we are selecting the parent of that respective element and applying CSS to it.

nextAll method in jQuery with examples

Posted by 20Fingers2Brains on Tags: ,



1. nextAll() method gets the following siblings of each element in the set of matched elements.
2. nextAll() method allows us to search for all the successors of a particular element and construct a new jQuery object



Example 1 :

 
        <html>
        <head>
            <title>nextAll</title>
            <style type="text/css">
            .css
            {
                color:Aqua;
                font-size:30px;
            }
            </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#nextAll").click(function () {
                    $(".css").removeClass("css").nextAll().addClass("css");
                });
            });
        </script>
        </head>
        <body>
        <div>
        <p class="css">This is paragraph element. This is colored.</p>
        <div>This is div element.</div><br>
        <span>This is span elment.</span><br />
        </div>
        <input type="button" id="nextAll" value="nextAll" />
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>
Demo :


In the above example, we have created few div elements and span element. On "nextAll" button click we are selecting paragraph element using class selector and using nextAll() method, all following siblings are selected and CSS is applied to it.



Example 2 :

 
        <html>
        <head>
        <title>nextAll</title>
        <style type="text/css">
          .css
          {
              color:Aqua;
              font-size:30px;
          }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myButton").click(function () {
                    var liNum = $("#number").val();
                    if (liNum != "") {
                        if ($("li")[liNum] != undefined) {
                            $(".css").removeClass("css");
                            $("li:eq(" + liNum + ")").addClass("css");
                        }
                        else {
                            alert("Enter valid position !!");
                        }
                    }
                    else {
                        alert("Please enter Position.");
                    }
                });

                $("#nextAll").click(function () {
                    if ($(".css")[0] != undefined)
                        $(".css").removeClass("css").nextAll().addClass("css");
                    else
                        alert("Please enter position and click Click Me. Then try to click NextAll button.");
                });
            });
        </script>
        </head>
        <body>
        <b>List of Players :</b>
        <ul>
        <li>Ronaldinho</li>
        <li>Zinedine Zidane</li>
        <li>Maradona</li>
        <li>Pele</li>
        <li>Messi</li>
        <li>Ronaldo</li>
        </ul>
        <b>Enter li position to manipulate : </b><input type="text" id="number" /><br />
        <input type="button" id="myButton" value="Select" />
        <input type="button" id="nextAll" value="NextAll" />
        <input type="button" id="reset" value="Reset" onclick="location.reload();" />
        </body>
        </html>
Demo :


In the above example, we have created an unordered list of players. We are asking user to specify the index of li element to select. On "nextAll" button click all following sibling li elements are selected and CSS is applied to it. We have applied required validations as well.

Copyright © 2014 20Fingers2Brains. All rights reserved. New Super Seo modified by CB Blogger. Powered by Blogger