[JQuery]-Methods

-
1. Selector 
- Là khái niệm quan trọng cho phép bạn lấy và thao tác với các Element HTML.

- Syntax : $(Element).

- Các kiểu để lấy ra Element:
+ Class = 'btn' : $('.Element').
+ ID = 'btn' : $('#Element').
+ <Tag> : $('Tag').
+ <Tag attribute> : $('[attribute]').

==>
+ Lấy thẻ lòng nhau : $('ParentTag ChildrenTag').
+ Lấy nhiều thả : $('Tag1, Tag2').

2. Toán tử
- Toán tử so sánh bằng : name='value'
- Toán tử so không bằng : name!='value'
- Toán tử so sánh chứa : name*='value'
- Toán tử so tiền tố bắt đầu bởi : name^='value'
- Toán tử so hậu tố kết thúc bởi: name$='value'

3.Set - get thuộc tính
- các phương thức:
+ text() : gán hoặc lấy nội dung thuần văn bản từ phần tử
+ html() : gán hoặc lấy về nội dụng HTML từ phần tử.
+ val() : gán hoặc lấy giá trị của trường.
+ css() : gán css.

4.Radio button vs GroupBox

 - RadioButton

Example :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<form>
  <div>
    <input type="radio" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div id="log"></div>
</form>

<script>
        $(document).ready(function () {
            $("#orange").prop("checked", true);            $("input").on("click", function () {
                $("#log").html($("input:checked").val() + " is checked!");
            });
        });
 </script>

- GroupBox:

+ Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<input type="checkbox" id="checkbox1" /> <br />
<input type="text" id="textbox1" />

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));
    
    $('#checkbox1').change(function() {
        $('#textbox1').val($(this).is(':checked'));
    });

    $('#checkbox1').click(function() {
        if (!$(this).is(':checked')) {
            return confirm("Are you sure?");
        }
    });
});

 5. Option : MultiSelect và SingleSelect

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<body>
    <p></p>

    <select id="single">
        <option>Single</option>
        <option>Single2</option>
    </select>

    <select id="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select>

    <script>
        function displayVals() {
            var singleValues = $("#single").val();
            var multipleValues = $("#multiple").val() || [];
            $("p").html("<b>Single:</b> " + singleValues +
                " <b>Multiple:</b> " + multipleValues.join(", "));
        }
        $("select").change(displayVals);
        displayVals();
    </script>
</body>


6. Foreach 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<style>
        div {
            width: 40px;
            height: 40px;
            margin: 5px;
            float: left;
            border: 2px blue solid;
            text-align: center;
        }

        span {
            color: red;
        }
 </style>

<body>
    <button>Change colors</button>
    <span></span>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="stop">Stop here</div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        $("button").click(function () {
            $("div").each(function (index, element) {
                $(element).css("backgroundColor", "yellow");
                if ($(this).is("#stop")) {
                    $("span").text("Stopped at div index #" + index);
                    return false;
                }
            });
        });
    </script>
</body>


7. Json

*Jquery

+ Chuyển đổi từ 1 object sang Json :
           var json = JSON.stringify(object);

+ Chuyển đổi từ 1 Json sang object :
           var object  = JSON.parse(json);

* C#

+ Chuyển đổi từ Json sang object :
          var imployeeObject = javascriptSerializer.Deserializer<imployee>(json);

+ Chuyển đổi từ object sang JSon
         var json = javascriptSerializer.Serialize(Object);

8. Prepend và Append

- Prepend cập nhật nội dung cần thêm vào đầu đối tượng.
- Append cập nhật nội dung cần thêm vào cuối đối tượng.

Example :
1
2
3
4
5
6
7
8
9
10

<body>
 
        <p>there, friend!</p>
        <p>amigo!</p>
 
    <script>
        $( "p" ).prepend( "<b>Hello </b>" );
    </script>
 
</body>

9. Class css

- hasClass : trả về true or false
- addClass : thêm 1 class vào thẻ
- removeClass : xoá class
- toogleClass : add nếu k có và xoá nếu có.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>addClass demo</title>
    <style>
        p {
            margin: 8px;
            font-size: 16px;
        }

        .selected {
            color: red;
        }

        .highlight {
            background: yellow;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p>Hello</p>
    <p>and</p>
    <p>Goodbye</p>

    <script>
        $("p:last").addClass("selected highlight");
    </script>
</body>
</html>


10. Change Event

- xảy ra khi một element thay đổi giá trị
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>change demo</title>
    <style>
        div {
            color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <select name="sweets" multiple="multiple">
        <option>Chocolate</option>
        <option selected="selected">Candy</option>
        <option>Taffy</option>
        <option selected="selected">Caramel</option>
        <option>Fudge</option>
        <option>Cookie</option>
    </select>
    <div></div>

    <script>
        $("select")
            .change(function () {
                var str = "";
                $("select option:selected").each(function () {
                    str += $(this).text() + " ";
                });
                $("div").text(str);
            })
            .change();
    </script>
</body>
</html>

11. Mouse event












Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

[JQuery]-Plugin

-
1. Nhúng Jquery  - Link download: Tại đây - Nhúng bằng file:  + Load lại file.  + Khi máy chủ mất đi thì không ảnh hưởng. - Nhúng bằng CDN:  + Nếu trình duyệt đã cache CDN rồi thì lần sau không load lại nữa.  + Tự động cập nhật phiên bản.  + Nếu không có mạng thì không sử dụng được 2.
Đọc thêm

Đề cương

-
Buổi 1 * lý thuyết: 1. HTML: Những tác quan trọng. 2. CSS: Những thuộc tính quan trọng của CSS. 3. Boostrap : khái niệm boostrap, những class thường hay sử dụng. 4. Jquery: cú pháp, những event hay dùng. * thực hành: 1.Phân tích 1 layout. (mẹo check phần tử và lấy giao diện từ 1 trang web khác ). 2. một bài tập nhỏ về code html, css và js. Buổi 2: 1. Từ giao diện 1 trang web phân tích database 2. kết nối database bằng entity framework (code first)    - database generation code   - code generation database Buổi 3: 1. Xây dựng cấu trúc dự án 2. Giải thích cấu trúc và các file trong project web 3. linq : query syntax và menthod syntax Buổi 4: 1. Apply 1 template vào project . 2. giải thích 1 số khái niệm : renderbody, partial view , renderAction. 3. tác view tối ưu và ngắn gọn nhất có thể. 4. Tương tác dữ liệu giữa controller và view. --------------------------------------Thực hành làm sản phẩm (Forum)------------------...
Đọc thêm

Buổi 2

-
Chương 1 : từ giao diện phân tích database Chương 2: kết nối database                    1. Code first (database generation code)                    2. Code first (code generation database) Chương 3:  Truy vấn dữ liệu                     1.query                     2. procedure                     3. linq
Đọc thêm