Friday, 29 June 2012

What is JQUERY | JQuery Tutorial | JQuery syntaxes

                                    Hi Friends, in this I will explain about the JQuery.I search in so many sites for the JQuery syntax and write the all the syntax  in the one program for the testing. I think it may useful to you.
JQuery:
jQuery is a JavaScript Library.
It simplifies the JavaScript programming.
jQuery is a lightweight "write less, do more" JavaScript library.
It is a library of JavaScript functions.

Adding the JQuery Library to Your Pages:
The jQuery library is stored as a single JavaScript file, containing all the jQuery methods. It can be added to a web page with the following mark-up:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
Please paste the above <script> code in the head tag.

The following program shows the syntaxes of JQuery.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
  <script src="/JsFiles/jquery1.4.js" type="text/javascript"></script>
  <script type = "text/javascript" language ="javascript" >
          // pageload event
        $(document).ready(function() {
            //onblur event
            $('#TextBox1').blur(function() { alert("haiiiiiiiiii1"); })
            // onmouseover function
            $('#Label1').mouseover(function() {
            $('#divlabel').show();
            })
            // onmouseout function
            $('#Label1').mouseout(function() {
            $('#divlabel').hide();
            })
            //for tag name click
            $('button').click(function() { alert("hai iiii"); })
            // checkbox clicking
            $('#CheckBox1').click(function() {
            $('#display').toggle();
            })
            // button clicking with id
            $('#button1').click(function() {
             // retrieving textbox data
                $textbox_data = $('#TextBox1').val();
                //retrieveing lable data
                $lba_data = $('#Label1').html();
                //assign data to lable
                $('#Label1').text("hello");
                //retrieve div data
                $divdata = $('#display').html();
                //assign data to div
                $('#display').text("hai this is for testing purpose 123");
                //assign data to textbox
                $('#TextBox1').val("hellooooo");
                //retrieveing radiobutton value with groupname
                $rbtcheck = $("[name='radiobutton1']:checked").val();
                //div hiding
                $('#display').hide();
                //div showing
                $('#display').show();
                //retrieveing dropdownlist value
                $ddl1 = $('#dropdownlist1').val();
                //assign value to dropdownlist
                $('#dropdownlist1').val("8");
                //checking a checkbox with id
                $("#CheckBox2").attr('checked', 'checked');
                //checking wheather a checkbox is checked or not
                if ($("#CheckBox2").attr('checked') == "true") { };
                //checking a radiobutton with id.
                $('#RadioButton2').attr('checked', 'checked');
                $a = 5;
                $b = 10;
                //for printing data on the page
                if ($a > $b) { $("body").html("<b>hai </b>"); }
                //gridview row count
                $totalRows = $("#gvProducts tr").length;
                alert($totalRows);
                if ($totalRows > 0) {
                    //validating for checking atleast one checkbox in gridview
                   if (!$('#<%=gvProducts.ClientID%> input[type="checkbox"]').is(':checked')) {
                        alert("Please check at least one.");
                        return false;
                    }
                    //checking all the checkboxes in the gridview
                    $("#<%=gvProducts.ClientID%> input[id*='check1']:checkbox").attr('checked', true);
                    alert("hai iiiiiiiiii");
                    //unchecking all the checkboxes in the gridveiw
                    $("#<%=gvProducts.ClientID%> input[id*='check1']:checkbox").attr('checked', false);
               }
                //spliting the string into array
                $element = "hai this is for testing";
                $arr1 = $element.split(" ");
                alert($arr1[0]);
                //for radiobuttonlist checking.
                $('.rbl').each(function() {
                    var checked = $(this).find('input:radio:checked');
                    if (checked.length == 0) {
                        alert("pls select atleast one radio button");
                        return;
                    }
                    else {
                        if (checked.val() == 1) { alert("checked 1"); }
                        if (checked.val() == 2) { alert("checked 2"); }
                        if (checked.val() == 3) { alert("checked 3"); }

                    }
                });
                //calling ajax page
                $.ajax({
                    url: "send.aspx",
                    type: "POST",
                    data: l,
                    success: function(a) { if (a == "success") { } else { } },
                    error: function(a) { if (a == "error") { } else { } }
                })
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <div>
        <asp:Label ID="Label1" runat="server" Text="rojalabel-roja"></asp:Label>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <input type ="button" id='button1' runat = "server" value = "button" />
        <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
         <asp:RadioButton ID ="RadioButton1" runat = "server" Value = "4"  GroupName = "radiobutton1" />
        <asp:RadioButton ID ="RadioButton2" runat = "server" Value = "5" GroupName = "radiobutton1" />
        <asp:RadioButton ID ="RadioButton3" runat = "server" Value = "6" GroupName = "radiobutton1" />
        <asp:DropDownList ID = "dropdownlist1" runat = "server" >
        <asp:ListItem value= "7">ddl1</asp:ListItem>
        <asp:ListItem value= "8">ddl2</asp:ListItem>      
        </asp:DropDownList>      
        <asp:RadioButtonList ID="RadioButtonList1" class = "rbl" runat="server"                   RepeatDirection="Horizontal">
        <asp:ListItem Text = "sum1" Value = "1"></asp:ListItem>
        <asp:ListItem Text = "sum3" Value = "3"></asp:ListItem>
        <asp:ListItem Text = "sum2" Value = "2"></asp:ListItem>
        </asp:RadioButtonList>
        <asp:CheckBox ID="CheckBox1" runat="server" />
        <asp:CheckBox ID="CheckBox2" runat="server" />
        <div id ="display" >
        hai this is for testing purpose
        </div>
        <button>hai</button>
        <asp:GridView ID = "gvProducts" runat = "server" AutoGenerateColumns="False" >
        <Columns>
        <asp:TemplateField HeaderText = "check">
        <ItemTemplate>
        <asp:CheckBox ID = "check1" runat ="server" />
        </ItemTemplate>
        </asp:TemplateField>      
        <asp:TemplateField HeaderText = "userid">
        <ItemTemplate>
        <asp:Label ID = "label1" runat = "server" Text = '<%# Eval("user_id") %>' ></asp:Label>
        </ItemTemplate>
        </asp:TemplateField>
        </Columns>
        </asp:GridView>
        <div id = 'divlabel' style = "display:none ;"> mouse pointer on label</div>     
    </div>
    </form>
</body>
</html>


If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook page Aspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter  on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on  RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog  for more articles."

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.