Wednesday, February 29, 2012

Article 1: Basic JQuery

6:53 PM    No comments


Event
Ready

<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("p").text("Hello Do Quoc Hung");
        });
     </script>
</head>
<body>
<p style="font-size:20px; color:Yellow"></p>
</body>
</html>

Change

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>   
</head>
<body>
    <form id="form1" runat="server">
    <div title="DivA">
    <div title="DivB">       
        <p>Welcome</p>
    </div>
    </div>   
    <select id="Select1" title="SelectNumer">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<script type="text/javascript">
    $("select[title=SelectNumer]").change(function() {
        alert('you choose: ' + $(this).attr("value"));
        $("div[title=DivB]").append("<p>Here</p>");
    });
    </script>
    </form>
</body>
</html>
Click

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>   
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" value="OK" id="btnOK" class="clsOK"/>
    <input type="button" value="Cancel" id="btnCancel" class="clsCancel"/>  
    <script type="text/javascript">
        $(":button#.clsOK").click(function() {
            alert('you choose: ' + $(this).attr("value"));
        });
    </script>
    </form>
</body>
</html>
Blur

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>   
</head>
<body>
    <form id="form1" runat="server">
    <input type="text" value="Quoc hung" id="txtUserName" />
    <input type="text" value="123456" id="txtPassword" />
    <script type="text/javascript">
        $("#txtUserName").blur(function() {
            alert('you move: '+$(this).attr("value"));
        });
    </script>
    </form>
</body>
</html>
Selector
Selector / #id

html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
   <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>

   <script type="text/javascript">
       $(document).ready(function () {
           alert($("#txtUserName").attr("value"));
       }
      );
   </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="txtUserName" value="Quoc Hung" type="text" />
    </div>
    </form>
</body>
</html>
Selector / Element


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
   <script type="text/javascript">
       $(document).ready(function () {
           $("div").css("border", "3px solid yellow").css("width", "200px") ;
       }                               
       );
   </script>
</head>
<body>
    <form id="form1" runat="server">
      <div>
        <input id="txtUserName" value="Quoc Hung" type="text" />
      </div>
    </form>
</body>
</html>
Selector / .Class

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
   <script type="text/javascript">
       $(document).ready(function () {
           $(".test").css("border", "4px solid violet").css("width", "200px");
       }
       );
   </script>
</head>
<body>
    <form id="form1" runat="server" class="test">
    <div>
        <input id="txtUserName" value="Quoc Hung" type="text" />
    </div>
    </form>
</body>
</html>
Selector *

<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("*").css("border", "1px solid blue");
        });
     </script>
    <style>
        div, span, p
        {
            width: 100px;
            height: 60px;
            float: left;
            padding: 10px;
            margin: 10px;
            background-color: #EEEEEE;
        }
    </style>
</head>
<body>
    <div>
        DIV</div>
    <span>SPAN</span>
    <p>
        P
        <button>
            Button</button></p>
</body>
</html>
Selector / multi


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("div,span").css("border", "1px solid blue");
        });
     </script>
    <style>
        div, span, p
        {
            width: 100px;
            height: 60px;
            float: left;
            padding: 10px;
            margin: 10px;
            background-color: #EEEEEE;
        }
    </style>
</head>
<body>
    <div>
        DIV</div>
    <span>SPAN</span>
    <p>
        P
        <button>
            Button</button></p>
</body>
</html>
Selector / type


<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var inputButton = $(":button").css({ background: "yellow", border: "3px red solid" });
            alert(inputButton.attr("value"));
        });
     </script>
</head>
<body>
<input type="button" id="btnOK" value="OK" />
</body>
</html>
Selector / [attribute=value]


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var inputButton = $("input[value=Cancel]").css({ background: "yellow", border: "3px red solid" });
            alert(inputButton.attr("value"));
        });
     </script>
</head>
<body>
<input type="button" id="btnOK" value="OK" />
<input type="button" id="btnCancel" value="Cancel" />
</body>
</html>
Traversing

Parent()


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {           
            $($($("p").parent()).parent()).append("<div>OK</div>");
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div title="DivA">       
        <p>Welcome</p>
    </div>
    <input id="chkGender" type="checkbox" value="Male" checked="checked"/>
    </form>
</body>
</html>

Children()


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {           
            $($($("p").parent()).parent()).append("<div>OK</div>");
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div title="DivA">       
        <p>Welcome</p>
    </div>
    <input id="chkGender" type="checkbox" value="Male" checked="checked"/>
    </form>
</body>
</html>

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)