Tuesday, February 24, 2015

JQUERY TIPS (jQuery selectors)

ID Selector

$(document).ready(function () {
  $('#divClassusingID').css('background', '#000567');
});


Code:

 <script src="jquery-1.7.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#divClassusingID').css('background', '#000567');
        });
    </script>

  <div>
    <div id="divClassusingID" style="width:400px"> 
        adf
    </div>
    </div>




Class Selector

$(document).ready(function () {
  $('.divClassusingID').css('background', '#000567');
});


Code:

<script src="jquery-1.7.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
           $('.divClassusingID').css('background', '#000567');
        });
    </script>


 <div>
       <div class="divClassusingID" style="width:400px"> 
        hi uday
    </div>
    </div>


Element Selector

 $(document).ready(function () {
  $('.divClassusingID').css('background', '#000567');
});
Code:

  <script src="jquery-1.7.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('p').css('font-size', '40px');
        });
    </script>
   <div>
    <div class="divClassusingID" style="width:400px"> 
       <p> hi uday</p> 
    </div>
    </div>
output:



Apply css to Form Selector 
<head runat="server">
    <title></title>
    <script src="jquery-1.7.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('form *').css('color', '#FF99CC');
        });
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
    <div class="divClassusingID" style="width:400px"> 
       <p> hi uday</p> 
        adsfasf
    </div>
    </div>
    </form>
</body>



Select Multiple Elements
$('p, div').css('color', '#FF99CC');

 It applys css color to paragraph and div

 <head runat="server">
    <title></title>
    <script src="jquery-1.7.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('p, div').css('color', '#FF99CC');
        });

     </script>
</head>

 <body>
    <form id="form1" runat="server">
    <div>
    <div class="divClassusingID" style="width:400px"> 
       <p> hi uday</p> 
        <div> hi uday</div>
    </div>
    </div>
    </form>
</body>

</html>

 Output:




The parent > child (immediate child element)

 $(document).ready(function () {
     $('div > p').css('color', '#FF99CC');

})

 It is going to  apply styles to paragraph in div.

<head runat="server">
    <title></title>
    <script src="jquery-1.7.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('div > p').css('color', '#FF99CC');
        });

     </script>
</head>

 <body>
    <form id="form1" runat="server">
    <div class="divClassusingID" style="width:400px"> 
        <p> hi uday </p> 
        <p>hi uday </p>
        <p>hi uday </p>
        <p>hi uday </p>
    </div>
        <p>hi uday </p>
    </form>
</body>

</html>

 Output:

:first and :last 

 :first : It will find the first element.
:last : It will find the last element
<head runat="server">
    <title></title>
    <script src="jquery-1.7.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('p:first').css('color', '#FF99CC');
            $('p:last').css('color', '#FF99CC');
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="divClassusingID" style="width:400px"> 
        <p> hi uday </p> 
        <p>hi uday </p>
        <p>hi uday </p>
        <p>hi uday </p>
    </div>
        <p>hi uday </p>
    </form>
</body>



 output:




:even and :odd 
Now, i want to find out the even and odd elements.
Here , the index starts with 0.
<head runat="server">
    <title></title>
    <script src="jquery-1.7.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function () {
                $('tr:even').css('color', '#FF99CC');
                $('tr:odd').css('color', '#0000FF');
            });
    </script>
</head>

 <body>
    <form id="form1" runat="server">
    <div class="divClassusingID" style="width:400px"> 
        <table>
            <tr><td>hi uday</td></tr>
            <tr> <td>hi uday</td> </tr>
            <tr> <td>hi uday</td> </tr>
            <tr><td>hi uday</td> </tr>
            <tr><td>hi uday</td></tr>
            <tr><td>hi uday</td></tr>
            <tr> <td>hi uday</td></tr>
            <tr><td>hi uday</td> </tr>
        </table>
    </div>
    </form>

Output:

show and hide methods()

 javascript code:

     <script type="text/javascript">
        $(document).ready(function () {
            $('#visibleoncheck').hide();
            $('#CheckBox1').live('click', function () {
                if ($(this).is(':checked')) {
                    $('#visibleoncheck').show();
                   
                } else {
                    $('#visibleoncheck').hide();
                }
            });
        });

    </script>
 <div>
            <table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
                <tr>
                    <td>Hi Uday </td>
                    <td>HI</td>
                </tr>
                <tr>
                    <td>Check Required</td>
                    <td> <asp:CheckBox ID="CheckBox1" runat="server" /></td>
                </tr>
                <tr id="visibleoncheck">
                    <td>Visible</td>
                    <td><asp:Label ID="Label2" runat="server" Text="Visible "></asp:Label></td>
                </tr>
            </table>

        </div>




output:

at

No comments:

Post a Comment

Thank you for visiting my blog

Subscribe to: Post Comments (Atom)

Kubernetes

Prerequisites We assume anyone who wants to understand Kubernetes should have an understating of how the Docker works, how the Docker images...

  • SUPER AGGREGATES IN SQL SERVER
    Super aggregates: Are used to calculate aggregates of aggregates There are two super aggregates functions Roll Up Cube When there is a singl...
  • Solid Priciples
    SOLID principles allows object oriented programming implementation in an  efficient better way into project development      S-->Single R...
  • Working with PDF IN ASP.NET MVC with Entity FrameWork.
    With this example you can create pdf and print pdf. If You are using ASP.NET MVC , PDF can be created by using Rotativa  Rotativa is a ...