[.NET] Một số thủ thuật sử dụng Jquery

 Cú pháp Jquery

Ví dụ để chèn 1 text vào thẻ div  (có id là tagID)

Cú pháp Jquery:

<div id="tagID"></div>

<script type="text/javascript">

    $(document).ready(function(){

        $("#tagID").text("Xin chào!");

});

</script>

Cú pháp Javascript thông thường:

<div id="tagID"></div>

<script type="text/javascript">

    document.getElementById("tagID").innerText="Xin chào!";

</script>

Cách thức khai báo và xử lý sự kiện trong jquery

Cú pháp chung:

Xử lý sự kiện dựa vào tên class của đối tượng html:

$(".tên-class").sukien(function (){

//Khối lệnh xử lý

});

Xử lý sự kiện dựa vào tên id của đối tượng html:

$("#tên-id").sukien(function (){

//Khối lệnh xử lý

});

Cũng có thể xử lý sự kiện dựa vào thẻ html.

Một số sự kiện xử lý trong Jquery

- click() : Khi người click vào thẻ được chọn.

- hover(): Khi người dùng rê chuột thẻ được chọn.

- css() Thay đổi thuộc tính css của thẻ được chọn.

- hide() Ẩn thẻ được chọn.

- show() Hiển thị thẻ được chọn.

- animate() Thay đổi hiệu ứng css của thẻ được chọn, quá trình diễn ra chậm.

- text() Lấy (gán) nội dung văn bản bên trong thẻ được chọn.

- html() Lấy (gán) nội dung html trong thẻ được chọn.

- val() Lấy (gán) nội dung bên trong các thẻ input.

Bài tập thực hiện

Tạo một nút đăng nhập thì sẽ hiện ra form đăng nhập. Nhấn vào nút đóng thì sẽ mất đi.

Bước 1: Chuẩn bị sẵn giao diện của form đăng nhập (có thể tìm trên mạng hoặc tự thiết kế)

Bước 2: Tạo 1 dive bên ngoài (id là popup_login) chưa toàn bộ nội dung form đăng nhập

Bước 3: Tiến hành css với các thuộc tính position để cho div popup_login phủ toàn trang web.

Bước 4: Dùng cú pháp jquery theo hướng dẫn để thực hiện cú pháp Jquery.

Code tham khảo

@{

    ViewBag.Title = "Demo";

    Layout = "~/Views/Layout/HomeLayout.cshtml";

}

<div id="popup_login" >

    <form>

        <div class="form-group">

            <label for="exampleInputEmail1">Email address</label>

            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

            <small id="emailHelp" class="form-text text-danger" ></small>

        </div>

        <div class="form-group">

            <label for="exampleInputPassword1">Password</label>

            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

        </div>

        <div class="form-group form-check">

            <input type="checkbox" class="form-check-input" id="exampleCheck1">

            <label class="form-check-label" for="exampleCheck1">Check me out</label>

        </div>

        <button type="submit" class="btn btn-primary" id="btnDangNhap">Submit</button>

        <button type="submit" class="btn btn-info" id="close">Close</button>

    </form>

</div>

<div id="content" style="height:500px;">

    <div class="container">

        <div class="row">

            <div class="col-md-2">

                <div class="logo">

                    1

                </div>

            </div>

            <div class="col-md-2">

                <div class="logo">

                    1

                </div>

            </div>

            <div class="col-md-2">

                <div class="logo">

                    1

                </div>

            </div>

            <div class="col-md-2">

                <div class="logo">

                    1

                </div>

            </div>

            <div class="col-md-2">

                <div class="logo">

                    1

                </div>

            </div>

            <div class="col-md-2">

                <div class="logo">

                    1

                </div>

            </div>

        </div>

    </div>

</div>

<div id="tagID"></div>

<script type="text/javascript">

    $(document).ready(function () {

        $("#tagID").text("Xin chào!");

        $("#popup_login").hide();

    });

    $("#login").click(function () {

        $("#popup_login").show();

    });

    $("#close").click(function () {

        $("#popup_login").hide();

    });

    $("#btnDangNhap").click(function () {

        var TaiKhoan = $("#exampleInputEmail1").val();

        var MatKhau = $("#exampleInputPassword1").val();

        

        alert("Tài khoản:" + TaiKhoan + "Mật khẩu" + MatKhau);

    });

</script>

<style>

    .logo {

        background-color: green;

        height: 100px;

        width: 100%;

        background-image: url("../Content/images/close_1.png");

        background-repeat: no-repeat;

    }

    /*css cho phan div popup_login*/

    #popup_login {

        position: fixed; /*Để chiếm toàn bộ trang web*/

        left:40%;

        top:20%;

        height:30%;

        width:30%;

        margin:auto;

        background-color: rgba(0,0,0,.5);

        z-index: 99;

        

    }

    #popup_login form{

        padding-top:50px;

        padding-left:20px;

        padding-right:20px;

    }

    #popup_login label{

        color:white;

    }

</style>