Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

[Tài liệu] Thuật ngữ - Phân loại - Ký hiệu trong jQuery

    avatar

    Bài viết Bài viết : 8

    Danh vọng Danh vọng : 7987

    Uy tín Uy tín : 5

    Huy hiệu : vip,like,top,admin,photo,music,support,event,design,iron,loki

    #1

     on Sun Mar 27, 2016 12:13 am 

    jQuery viết bằng tiếng Anh, một số thuật ngữ và ký hiệu họ dùng cũng là rút gọn hoặc viết tắt bằng tiếng Anh nên không có cách tối ưu nào để dịch nó sang Tiếng Việt cả, mình đã cố thử một số cụm từ hàm súc, thậm chí là từ Hán-Việt cũng không ổn, vậy nên mình sẽ giữ những thuật ngữ nguyên dạng tiếng Anh.

    Để xem bài viết gốc, bạn vào trang này: [You must be registered and logged in to see this link.]


    Bạn có thể kiểm tra các ví dụ trong bài này bằng chức năng Console trong công cụ phát triển web (F12 hoặc Ctrl+Shift+J). Ví dụ:
    Code:
    var x = [ 0, 3, 1, 2 ];
    console.log(x.splice(1, 2));
    console.log(x);


    Chrome


    Firefox


    Firefox dùng Firebug


    Thuật ngữ và phân loại:


    1. Element: Phần tử, là một yếu tố DOM (Document Object Model) bao gồm các thuộc tính của nó, text và children. Ví dụ:
      Code:
      <div stely="color:green">
       <p class="baivong">
             Con gà có 
             <strong>4<trong> 
             <i>chân</i>
         </p>
      <div>
      // Element p bao gồm tất cả những gì bạn thấy trong DOM của nó

    2. Children: Phần tử con, là những phần tử ở các phần nhánh DOM bắt đầu từ nó. Ví dụ:
      Code:
      // Phần tử strong và i đóng vai trò children của p

    3. Siblings: Phần tử anh chị em, là những phần tử chung gốc DOM(cha mẹ) với nó. Ví dụ:
      Code:
      // Phần tử p và i là siblings của nhau

    4. Parent: Phần tử cha mẹ, phần tử gốc DOM mà nó trực thuộc. Ví dụ:
      Code:
      // Phần tử p và i có parent là p

    5. Ancestors: Phần tử tổ tiên, tất cả các phần tử gốc DOM phân nhánh đến nó, parent, parent của parent, parent của ... parent. Ví dụ:
      Code:
      // Phần tử i có ancestors là p và div

    6. Selector: Trong jQuery, khi bạn muốn làm một điều gì, đầu tiên bạn phải xác định chính xác phần tử cần cho việc đó. Selector là cách thức, phương pháp để bạn chọn được phần tử đó. Về cơ bản thì nó giống với CSS. Ví dụ:
      Code:
      $("p") // Chọn phần tử theo element p
      $(".baivong") // Chọn phần tử theo class baivong

    7. Event: Sự kiện, đề cập đến các tác vụ của người dùng như nhấp chuột, rê chuột, gõ phím, tải trang... Ví dụ:
      Code:
      $("p").click(function(){}); // Nhấp chuột trái lên p
      $("input").focus(); // Kích hoạt event focus trên input

    8. Method: Phương thức, để thực thi một hành động nào đó. Ví dụ:
      Code:
      .click(function(){}) // Phương thức này thực hiện khi nhấp chuột trái

    9. Attribute: Thuộc tính. Thường viết tắt là attr. Dùng phương thức .attr() để lấy giá trị. Ví dụ:
      Code:
      class // Thuộc tính class
      $("p").attr("class") // Kết quả: "baivong"

    10. Property: Đặc tính. Ví dụ với thuộc tính Style của phần tử, có đặc tính Color, dùng phương thức .css() để lấy giá trị:
      Code:
      $("div").css("color") // Kết quả: "green"

    11. Tag: Loại phần tử. Dùng .tagName để lấy ra đặc tính tên của phần tử. Ví dụ:
      Code:
      $(".baivong")[0].tagName // Kết quả: "P"

    12. jQuery: Một đối tượng jQuery bao gồm DOM tạo ra từ chuỗi HTML hoặc chọn từ tài liệu. Ví dụ:
      Code:
      $("p"); // Đây là một đối tượng jQuery
      Khi một phương thức thay đổi cấu trúc DOM của nó, biến nó thành đối tượng jQuery khác thì toàn bộ quá trình đó cũng xem là jQuery như định nghĩa này. Ví dụ:
      Code:
      $("p").css("color", "red"); // Đây là một đối tượng jQuery
      $("p").css("color", "red").find("strong").hide(); // Đây là một đối tượng jQuery

    13. Text và String: Văn bản, chuỗi ký tự. Trong javascript chuỗi phải được đặt trong dấu nháy. Dùng phương thức .text() để lấy chuỗi ký tự. Ví dụ:
      Code:
      Con gà có 4 chân // Đây là chuỗi ký tự
      $("div").text() // Kết quả: Con gà có 4 chân
      "Đây là chuỗi" // Chuỗi ký tự
      "123" // Chuỗi số. Kết quả: "123"
      Không phải chuỗi // Kết quả: Lỗi cú pháp
      123 // Số. Kết quả: 123
      $("div") // Phần tử div, không phải chuỗi vì div đóng vai trò là selector.
      $("div").text("Đây là chuỗi") // Vì nó không đóng vai trò là selector

    14. Html và htmlString: Chuỗi có chứa tag HTML, đặt trong dấu nháy, có thể tạo thành phần tử HTML tùy phương thức. Dùng phương thức .html() để lấy chuỗi ký tự. Ví dụ:
      Code:
      "<strong>4<trong>" // Chuỗi html
      $("p").html() // Kết quả: "Con gà có <strong>4<trong> <i>chân</i>"
      $("<p>Ctrl©</p>").appendTo("body")
      $("body").html("<p>Ctrl© baivong</p>")

    15. Number: Số, có thể dùng trong các phép toán (+, -, *, /, %, =, +=, -=, *=, /=, ++, --). Cẩn thận nhầm với chuỗi số. Ví dụ:
      Code:
      123 // Số
      1.23 // Số
      "123" // Chuỗi số
      234 + "12" // Chuỗi số. Kết quả "23412"
      234 + eval("12") // Số, do hàm eval đã chuyển chuỗi số 12 thành số 12. Kết quả: 246

    16. Boolean: Luận lý, giá trị chỉ gồm true hoặc false.

    17. Object: Đối tượng javascript. Ví dụ:
      Code:
      var x = {}; // Ký hiệu ngoặc nhọn[i]({...})[/i], dù không có đặc tính nào x vẫn là đối tượng javascript
      document // Đối tượng
      var y = {
          name: "Pete",
          age: 15
      }; // Đối tượng y với 2 đặc tính name và age
      Dùng dấu chấm(.) để lấy hoặc gán giá trị cho đặc tính trong đối tượng. Ví dụ:
      Code:
      y.name // Lấy giá trị đặc tính name. Kết quả: "Pete"
      y.age // Lấy giá trị đặc tính age. Kết quả: 15
      y.age = 20 // Gán giá trị 20 cho đặc tính age

    18. PlainObject: Đối tượng thuần, chỉ các đối tượng viết với dấu ngoặc nhọn ({...}). Dùng phương thức $.isPlainObject để kiểm tra. Ví dụ:
      Code:
      $("div") // Không phải là PlainObject
      var x = {
          background: "red",
          display: "inline"
      }; // Đây là PlainObject
      $("div").css(x); // Gán các đặc tính của x vào div bằng phương thức css
      $.isPlainObject($("div")); // Kết quả: false
      $.isPlainObject(x); // Kết quả: true

    19. Array: Mảng javascript, lấy giá trị theo số thứ tự trong mảng. Ví dụ:
      Code:
      var x = []; // Ký hiệu ngoặc vuông [i]([...])[/i], dù không có đặc tính nào x vẫn là mảng javascript
      var y = ["name", "Pete"]; // Mảng đơn
      y[0] // Kết quả: "name"
      y[1] // Kết quả: "Pete"
      var y = [
          ["name", "Pete"],
          ["age", 15]
      ]; // Mảng kép
      y[0] // Kết quả là mảng javascript: ["name", "Pete"]
      y[0][0] // Kết quả: "name"
      y[1][0] // Kết quả: "age"
      y[1][1] // Kết quả: 15

    20. Function: Hàm, chức năng. Nó được sử dụng khi cần thực hiện một xử lý javascript. Có 2 cách dùng, đặt tên hoặc vô danh:
      Code:
      function baivong() {} // Tên hàm là baivong
      var ctrlc = function() {} // Hàm là vô danh, gán vào biến ctrlc
      (function() {})() // Hàm vô danh, tự chạy
      Trong jQuery, hàm được sử dụng khá thường xuyên trong các phương thức. Ví dụ:
      Code:
      $(document).ready(function () {}); // Phương thức ready gọi hàm vô danh
      $("a").click(function link() {}); // Phương thức click gọi hàm có tên là link

    21. Callback: Hàm hồi quy, gọi lại, trả về. Nó được sử dụng khá thường xuyên trong các phương thức, một vài hàm hồi quy chỉ là sự kiện, được gọi để cung cấp đối tượng cho phương thức xử lý. Ví dụ:
      Code:
      $("body").click(function( event ) {
          return "clicked: " + event.target;
      });
      Đôi khi hàm hồi quy được dùng với luận lý false để chặn một sự kiện được kích hoạt. Ví dụ:
      Code:
      $("body").click(function() {
          return false;
      });
      $("form").submit(function() {
          return false;
      });




    Ký hiệu:


    • * : Đại diện một hoặc nhiều ký tự.
    • + : Nối.

    • Toán tử số học:

      • + : Phép cộng.
      • - : Phép trừ.
      • * : Phép nhân.
      • / : Phép chia.
      • % : Phép chia lấy phần dư.
      • ++ : Phép tăng một đơn vị.
      • -- : Phép giảm một đơn vị.


    • Toán tử so sánh:

      • == : So sánh bằng.
      • > : So sánh lớn hơn.
      • < : Nhỏ hơn.
      • >= : So sánh lớn hơn hoặc bằng.
      • <= : Nhỏ hơn hoặc bằng.
      • != : So sánh khác.


    • Toán tử logic:

      • && (and): Giá trị true khi cả hai cùng là true.
      • || (or): Giá trị true nếu một trong 2 là true.




    Một vài thông số và phương thức thuần javascript cần biết:


    1. Quoting: Dấu nháy hay còn gọi là dấu trích dẫn. Có thể dùng dấu nháy đơn hoặc kép hoặc lồng nháy đơn và kép vào nhau. Nếu lồng cùng một loại dấu nháy vào nhau phải dùng dấu gạch chéo ngược đằng trước (dấu này có nghĩa là thoát ra). Ví dụ:
      Code:
      "Cái gì đấy"
      'Trời lại "mưa" nữa rồi'
      $('input[name="baivong"]')
      $('div').text("Ctrl©" + $("input[name="baivong"]"))

    2. Scope: Giới hạn, các tham số trong hàm chỉ có thể sử dụng ở hàm đó. Ví dụ:
      Code:
      var x = 0; // Thiết lập tham số x với giá trị 0
      (function () {
       var x = 1; // Thiết lập tham số x với giá trị 1 trong hàm
       console.log(x); // Kiểm tra giá trị x trong hàm. Kết quả: 1
      })();
      console.log(x); // Kiểm tra giá trị x ngoài hàm. Kết quả: 0

    3. Boolean Default: Các giá trị luận lý mặc định. Ví dụ:
      Code:
      !"" // Chuỗi rỗng, mặc định là false. Kết quả: true
      !!"" // Kết quả: false
      !"hello" // Kết quả: false
      !new Boolean( false ) // Kết quả: false

      !{} // Đối tượng javascript, mặc định là true. Kết quả: false
      !!{} // Kết quả: true

      ![] // Mảng javascript, mặc định là true. Kết quả: false
      !![] // Kết quả: true

      !0 // Kết quả: true
      !!0 // Kết quả: false
      !1 // Kết quả: false
      !-1 // Kết quả: false

    4. Numbers to Strings: Số chuyển thành chuỗi hay còn gọi là chuỗi số. Để chuyển số thành chuỗi, bạn có thể dùng phương thức String. Ví dụ:
      Code:
      String(1) + String(2); // Kết quả: "12"
      String(1 + 2); // Kết quả: "3"

    5. Built-in Methods: Một số phương thức javascript được xây dựng để xử lý với chuỗi. Ví dụ:
      Code:
      "hello".charAt(0) // Kết quả: "h"
      "hello".toUpperCase() // Kết quả: "HELLO"
      "Hello".toLowerCase() // Kết quả: "hello"
      "hello".replace(/e|o/g, "x") // Kết quả: "hxllx"
      "1,2,3".split(",") // Kết quả: [ "1", "2", "3" ]

    6. Length Property: Đặc tính độ dài chuỗi hoặc số lượng phần tử. Ví dụ:
      Code:
      "Hello".length // Kết quả: 5
      "".length // Kết quả: 0
      Code:
      <p>a</p><p>b</p><p>c</p> // HTML ví dụ
      $("p").length // Kết quả: 3

    7. Math: Được xây dựng để tính toán trong javascript.
      Dùng trong phương thức:
      Code:
      Math.round(2.5) // 3
      Math.random() // Số ngẫu nhiên từ 0 -> 1
      Math.max(5,10) // 10
      Math.min(5,10) // 5
      Dùng trong hằng số:
      Code:
      Math.E // Kết quả: 2.718281828459045
      Math.PI // Kết quả: 3.141592653589793
      Math.SQRT2 // Kết quả: 1.4142135623730951
      Math.SQRT1_2 // Kết quả: 0.7071067811865476
      Math.LN2 // Kết quả: 0.6931471805599453
      Math.LN10 // Kết quả: 2.302585092994046
      Math.LOG2E // Kết quả: 1.4426950408889634
      Math.LOG10E // Kết quả: 0.4342944819032518

    8. Parsing Numbers: Phương thức parseIntparseFloat sẽ phân tích số, chuỗi số và các ký hiệu số ngầm thành số. Ví dụ:
      Code:
      parseInt("123") // Kết quả: 123
      parseInt("0xCAFE") // Hệ thập lục phân. Kết quả: 51.966
      parseInt("010", 10) // Hệ thập phân. Kết quả: 10
      parseInt("11", 2) // Hệ nhị phân. Kết quả: 3
      parseFloat("10.10") // Kết quả: 10.1

    9. NaN và Infinity:
      NaN: Không phải giá trị số, dùng phương thức isNaN để kiểm tra, kết quả là true hoặc false. Ví dụ:
      Code:
      isNaN(123) // Kết quả: false
      isNaN("123") // Kết quả: true
      isNaN("'123'") // Kết quả: true
      isNaN(/123/) // Kết quả: true
      NaN == NaN // Kết quả: false
      Infinity: Vô tận, vô cùng.
      Code:
      (1/0) // Kết quả: Infinity
      Infinity == Infinity // Kết quả: true
      NaN và Infinity là giá trị số chứ không phải chuỗi, đừng nhầm lẫn.

    10. Array Object Methods: Một vài phương thức xử lý mảng thường dùng. Ví dụ:
      Code:
      var x = [ 0, 3, 1, 2 ]; // Mảng ví dụ
      x.reverse() // Đảo ngược mảng. Kết quả [ 2, 1, 3, 0 ], lúc này x là: [2, 1, 3, 0]
      x.join(" – ") // Nối mảng, dùng ký tự gạch ngang(-). Kết quả: "0 – 3 – 1 – 2", lúc này x là: [0, 3, 1, 2]
      x.shift() // Lấy giá trị đầu của mảng. Kết quả: 0, lúc này x là: [3, 1, 2]
      x.pop() // Lấy giá trị cuối của mảng. Kết quả: 2, lúc này x là: [0, 3, 1]
      x.unshift(-1) // Thêm giá trị -1 vào mảng. Kết quả: -1, lúc này x là: [-1, 0, 3, 1, 2]
      x.sort() // Sắp xếp mảng 0 -> 9, a -> z. Kết quả: [0, 1, 2, 3], lúc này x là: [0, 1, 2, 3]
      x.splice(1, 2) // Cắt mảng từ giá trị thứ 2, lấy 2 giá trị kế tiếp. Kết quả [3, 1], lúc này x là: [0, 2]
      Xem thêm tại: [You must be registered and logged in to see this link.]



    Viết bởi Zzbaivong


    Tags: [You must be registered and logged in to see this link.] [You must be registered and logged in to see this link.]
    Bạn không có quyền trả lời bài viết

    Similar topics