[NHẠC].
Bây giờ chúng ta hãy dành thời gian để tìm hiểu cách Bootstrap và
jQuery làm việc cùng nhau để hỗ trợ các thành phần JavaScript của Bootstrap.
Như chúng ta đã hiểu từ các mô-đun trước đó, Bootstrap có
một số thành phần dựa trên JavaScript thú vị.
Và chúng tôi cũng học được rằng các thành phần dựa trên JavaScript của Bootstrap
đều được kích hoạt bằng cách sử dụng jQuery làm hỗ trợ.
Vì vậy, nhiều trong số các plugin này được viết bằng jQuery. Các
plugin của họ có thể được bao gồm riêng lẻ hoặc
bạn có thể bao gồm tất cả các plugin với nhau như một đơn vị duy nhất.
Trong các bài tập, chúng tôi đã bao gồm tất cả các
plugin JavaScript của Bootstrap vào trang web của chúng tôi.
Chúng tôi cũng thấy đồ họa này trong mô-đun trước
để giúp chúng tôi hiểu được mối quan hệ giữa JavaScript, jQuery, và
cách thực hiện các plugin dựa trên JS của Bootstrap.
Vì vậy, chúng tôi thấy rằng Bootstrap của JS thành phần bò trong các thành phần dựa trên jQuery và
làm cho nó dễ dàng cho chúng tôi để sử dụng chúng trong trang web của chúng tôi.
Chúng tôi cũng học được rằng các thành phần dựa trên JavaScript của Bootstrap có thể được sử dụng
trong trang web của bạn mà không cần viết một dòng mã JavaScript.
Vì vậy, đây là nơi các thuộc tính dữ liệu* đến để giải cứu chúng tôi.
Vì vậy, bạn có thể sử dụng các thuộc tính khác nhau mà chúng tôi đã thấy trong
mô-đun trước đó để kích hoạt nhiều thành phần dựa trên JavaScript Bootstrap của chúng tôi.
Trong trường hợp bạn muốn linh hoạt hơn với các thành phần JavaScript của mình,
thì sự linh hoạt đầy đủ của API dựa trên JavaScript đó
có sẵn cho tất cả các thành phần JavaScript Bootstrap.
Bạn có thể viết mã bằng cách sử dụng cú pháp jQuery và sau đó sử dụng nó
cùng nhau để kiểm soát các thành phần JS của Bootstrap của bạn.
Chúng ta sẽ khám phá điều đó một cách chi tiết hơn trong mô-đun này.
Trước khi chúng tôi tiến hành thêm, hãy để tôi cung cấp cho bạn một tour du lịch nhanh chóng của jQuery và cú pháp
của nó để chúng tôi hiểu một số mã mà chúng tôi sẽ viết trong mô-đun này.
jQuery là một
thư viện rất mạnh mẽ, nhẹ dựa trên JavaScript cung cấp một số thành phần khác nhau.
Nó là một tính năng phong phú thư viện cho phép viết mã để
thực hiện thao tác HTML hoặc DOM.
Nó cho phép bạn thực hiện thao tác CSS.
Vì vậy, ví dụ,
bạn có thể áp dụng các lớp CSS cho các phần tử HTML khác nhau thông qua mã jQuery.
Nó cho phép bạn xử lý các sự kiện HTML,
và khi những sự kiện xảy ra bạn có thể thực hiện các phương pháp đang được thực hiện
để đáp ứng với sự xuất hiện của các sự kiện này.
jQuery cũng hỗ trợ các hiệu ứng và
hình ảnh động khác nhau có thể được áp dụng cho các phần tử HTML của bạn.
Ngoài ra jQuery cho phép bạn tương tác với một máy chủ back end sử dụng AJAX.
Mặc dù chúng tôi sẽ không khám phá điều đó một cách chi tiết trong khóa học này.
Chúng tôi cũng học được rằng các thành phần JavaScript của Bootstrap
được xây dựng dựa trên jQuery. Các
thành phần này sử dụng nhiều phương pháp jQuery có sẵn để
thực hiện các tính năng khác nhau mà các thành phần JavaScript Bootstrap này hỗ trợ.
Hãy hiểu ngắn gọn jQuery cú pháp.
Bây giờ nếu bạn đã nhìn thấy một số mã mà chúng tôi bao gồm
trong mô-đun trước đó, đặc biệt cho
mẹo công cụ, bạn nhớ rằng có một cái gì đó bắt đầu với một ký hiệu đô la.
Vì vậy, cú pháp jQuery được thực hiện bằng cách sử dụng ký hiệu đô la.
Dấu đô la ở đầu câu ngụ ý rằng điều này định nghĩa và
truy cập các plugin thư viện của jQuery có sẵn.
Bây giờ bất cứ khi nào chúng tôi sử dụng ký hiệu đô la, bạn cũng cung cấp một bộ chọn.
Bộ chọn được sử dụng để truy vấn và tìm thấy những
phần tử HTML trong DOM của bạn mà bạn muốn áp dụng thao tác này.
Có nhiều cách khác nhau để thực hiện lựa chọn.
Chúng ta sẽ xem xét chúng trong slide tiếp theo.
Sau đó, khía cạnh thứ ba của một câu lệnh jQuery là hành động mà bạn chỉ định.
Bây giờ bạn chọn một phần tử HTML, loại hành động bạn muốn được thực hiện
trên phần tử đó, vì vậy đó là phần thứ ba mà bạn sẽ thấy.
Vì vậy, như một ví dụ bạn có thể chỉ định một câu lệnh jQuery
như $ (“p”) trong mã, và sau đó .hide.
Vì vậy, trong trường hợp này những gì nó ngụ ý là, chọn tất cả những phần tử HTML
đó là các phần tử đoạn văn,
bắt đầu với thẻ p, và sau đó những phần tử ẩn những phần tử đó.
Vì vậy, hành động được thực hiện là chiều cao,
vì vậy điều này sẽ dẫn đến tất cả các phần tử p bị ẩn khỏi
DOM của bạn, và do đó từ trang web được kết xuất.
Tương tự như vậy, bạn sẽ thấy sau này trên chúng tôi sử dụng
một tuyên bố như nói đồng đô la, và
sau đó trong dấu ngoặc kép, #mycarousel,
ngụ ý rằng bạn đang chỉ định ID của một phần tử HTML cụ thể,
và sau đó chỉ định băng chuyền và tạm dừng.
Chúng ta sẽ xem xét thêm chi tiết về những gì nó thực sự thực hiện
trong một trong các trang trình bày tiếp theo ở đó.
Nhưng lưu ý cấu trúc của cú pháp câu lệnh jQuery ở đó.
Bạn chỉ định bộ chọn, và sau đó bạn chỉ định hành động tương ứng được
thực hiện trên phần tử được chọn bởi các bộ chọn này.
Chúng ta hãy nhìn vào Bootstrap jQuery ví dụ.
Chúng tôi sẽ quay lại ví dụ trước đó mà chúng tôi đã thấy trước đó,
nơi chúng tôi giới thiệu chú giải công cụ.
Vì vậy, khi chúng tôi giới thiệu tooltip, chúng tôi đã chỉ định kịch bản và
sau đó bên trong kịch bản, chúng tôi đã nói $ (tài liệu).
Trong trường hợp này tài liệu có nghĩa là toàn bộ tài liệu.
Vì vậy, lựa chọn ở đây là cho toàn bộ tài liệu.
Vì vậy, cho toàn bộ tài liệu, và sau đó chúng tôi sẽ chỉ định sẵn sàng.
Sẵn sàng là hành động cần thực hiện.
Vì vậy, khi tài liệu đã sẵn sàng, sau đó thực hiện chức năng này được
chỉ định như một tham số cho hành động sẵn sàng này ở đó.
Vì vậy, các chức năng mà chúng tôi thấy được sử dụng cho các tooltip chỉ định nó như $, và
sau đó trong dấu ngoặc, nó nói, data-toggle =” tooltip”.
Bây giờ ở đây chúng tôi đang xác định rằng chọn những yếu tố
mà có một thuộc tính với data-toggle ="tooltip”.
Và sau đó đối với những yếu tố phù hợp với tiêu chí này, thực hiện hành động này
được gọi là bật chú giải công cụ cho những yếu tố đó.
Và chúng tôi đóng chức năng ở đó.
Vì vậy, điều này xác định rằng kịch bản cụ thể này
sẽ được kích hoạt cho những yếu tố mà bạn đã áp dụng chú giải công cụ chuyển đổi dữ liệu.
Vì vậy, về cơ bản đối với những yếu tố HTML mà trên đó bạn đã xác định tooltips,
bạn muốn tooltip được kích hoạt ở đó.
Vì vậy, đây là cách chúng tôi giải thích cú pháp này của ví dụ jQuery này ở đây.
Hãy nhìn vào các cách khác nhau để xác định bộ chọn.
Vì vậy, khi chúng ta nhận ra từ cú pháp câu lệnh jQuery,
chúng ta luôn theo đô la và sau đó, trong dấu ngoặc đơn, chúng ta chỉ định một bộ chọn.
Làm thế nào để chúng ta chỉ định bộ chọn, những cách khác nhau bạn có thể chỉ định bộ chọn là gì?
Dưới đây là một số khả năng.
Bạn có thể chỉ định một bộ chọn bằng cách chỉ định bất kỳ
phần tử HTML cụ thể nào bằng cách chỉ định thẻ.
Vì vậy, bạn có thể nói p, nút, h4,
h3, hoặc bất kỳ thẻ HTML trực tiếp.
Và như vậy trong trường hợp đó tên thẻ HTML được chỉ định trong dấu ngoặc kép và
đó sẽ tạo thành bộ chọn của bạn.
Khi bạn áp dụng một bộ chọn như thế này, bạn đang nói rằng tất cả các phần tử phù hợp với
tiêu chí này sẽ được chọn.
Sau đó, bạn cũng có thể chỉ định một
phần tử HTML DOM cụ thể bằng cách xác định ID của phần tử đó bằng cách sử dụng #id.
Vì vậy, ví dụ, chúng tôi sử dụng #myCarousel.
Vì vậy, trong trường hợp này bạn đang nói chọn rằng
phần tử HTML cụ thể mà ID là MyCarousel.
Vì vậy, đó là cách khác để lựa chọn, bằng cách xác định một ID cho một phần tử.
Khả năng thứ ba là chọn các
yếu tố của các lớp đã áp dụng cho điều đó.
Vì vậy, ví dụ, bạn có thể thấy trong dấu ngoặc đơn nếu bạn nói .btn, có
nghĩa là tất cả các phần tử HTML DOM
mà bạn đã áp dụng lớp nút sẽ được chọn.
Hoặc bạn thậm chí có thể hội đủ điều kiện hơn nữa bằng cách chỉ định một nhóm các lớp học bằng cách
nói .btn.btn-default, nghĩa là những yếu tố
mà lớp nút và lớp mặc định nút đã được áp dụng.
Vì vậy, đó là một cách khác,
bằng cách sử dụng các lớp được áp dụng cho các phần tử HTML.
Khả năng khác là xác định một thuộc tính đã được áp dụng
cho phần tử HTML.
Vì vậy, ví dụ, bạn có thể nói các thuộc tính được xác định trong dấu ngoặc vuông ở đây.
Vì vậy, bạn có thể nhìn thấy trong dấu ngoặc vuông href, và bao gồm nó trong dấu ngoặc kép để
có nghĩa là tất cả những yếu tố HTML mà thuộc tính href đã được áp dụng.
Tương tự, bạn có thể nói data-
toggle ="tooltip”, mà về cơ bản lưu tất cả những yếu tố mà thuộc tính tooltip chuyển đổi dữ liệu đã được áp dụng.
Ngoài ra, chọn phần tử hiện tại
mà bạn muốn làm điều gì đó bằng cách nói $ (this).
Vì vậy, có nghĩa là, đối với các yếu tố hiện tại đã được chọn, cho
điều này, làm điều gì đó.
Và rất nhiều khả năng khác.
Vì vậy, đây là một số ví dụ, bạn sẽ thấy tôi sử dụng một số trong số này
trong các ví dụ và bài tập sau đây.
Không chỉ vậy, bạn còn có thể chỉ định các sự kiện jQuery, các
sự kiện dựa trên đó bạn trả lời.
Vì vậy, ví dụ, người dùng tương tác
với các yếu tố khác nhau trên trang web của bạn sẽ gây ra các sự kiện DOM.
Vì vậy, ví dụ, với một con chuột, người dùng có thể nhấp vào một vị trí cụ thể.
Hoặc bấm đúp vào, hoặc khi chuột vào và rời khỏi một vị trí cụ thể.
Đối với bàn phím, bạn có thể trả lời các phím bấm, phím tắt và phím tắt.
Sự kiện cho biểu mẫu, khi biểu mẫu được gửi,
khi có sự thay đổi trong một
giá trị phần tử đầu vào cụ thể, và khi một phần tử cụ thể được tập trung vào, v.v.
Chúng ta thậm chí có thể nói về toàn bộ tài liệu.
Vì vậy, khi tải tài liệu, khi thay đổi kích thước tài liệu,
khi cuộn hoặc dỡ tài liệu, bạn có thể trả lời những sự kiện đó.
Vì vậy, trong trường hợp đó, các phương pháp sự kiện jQuery được hỗ trợ bao gồm sẵn sàng
, nhấp chuột, dblclick, mousedown, và vân vân.
Vì vậy, đây là tất cả các phương pháp sự kiện
sẽ được thực hiện khi xảy ra bất kỳ sự kiện nào ở đó.
Hãy lấy một ví dụ về Carousel của Bootstrap để xem cách
mã JavaScript có thể được viết để kiểm soát các hành động carousel.
Vì vậy, đối với một băng chuyền, bạn đã thấy từ mô-đun trước đó, kích thước chỉ mục.
Chúng tôi đã sử dụng tất cả các thuộc tính này.
Vì vậy, chúng tôi đã sử dụng thuộc tính data-slide="prev|next”, hoặc
chúng tôi đã nói data-slide-to và sau đó chỉ định số slide cụ thể,
nơi nó nói data-ride+"carousel”.
Và sau đó chúng tôi đã xác định khoảng thời gian dữ liệu, khoảng thời gian
cho hành động trượt diễn ra.
Vì vậy, đối với băng chuyền, bạn có thể làm những việc như,
ví dụ, bạn có thể chỉ định điều khiển dựa trên JavaScript.
Bạn có thể thấy $, và trong dấu ngoặc chỉ định để chọn những phần tử,
băng chuyền, được bao gồm trong trang của bạn bằng cách chỉ định .carousel. Có
nghĩa là tất cả những yếu tố mà lớp băng chuyền đã được áp dụng,
và sau đó sau đó bạn sử dụng .carousel để xác định một cái gì đó.
Vì vậy, như một ví dụ, bạn sẽ thấy tôi sử dụng một cái gì đó như thế này
trong bài tập sau.
Chúng ta sẽ nói .carousel và carousel, và
bên trong đó bạn sẽ chỉ định interval:2000, có
nghĩa là thiết lập khoảng thời gian cho trượt là 2000 mili giây.
Hoặc hai giây, trong trường hợp này.
Vì vậy, theo cách đó bạn kiểm soát hoặc sửa đổi một thuộc tính cụ thể
của các yếu tố JavaScript carousel đó.
Băng chuyền cũng hỗ trợ nhiều điều khiển khác.
Vì vậy, ví dụ, bạn có thể nói carousel ('cycle'),
nghĩa là bắt đầu đi xe đạp các mục từ trái sang phải.
Bạn có thể nói carousel ('tạm dừng '), để tạm dừng hành động trượt của carousel.
Sau đó, bạn có thể nói carousel (số), vì vậy
nó chu kỳ carousel đến mục carousel cụ thể đó.
Và sau đó bạn có thể nói carousel ('prev'),
carousel ('tiếp theo') để đi đến mục trước đó và mục tiếp theo trong carousel của tôi.
Vì vậy, chúng có thể được gọi trực tiếp từ mã JavaScript của chúng tôi.
Tương tự, khi
mục băng chuyền JavaScript nằm trong trang web của bạn, nó gây ra các sự kiện khác nhau.
Và dựa trên sự xuất hiện của những sự kiện này, bạn có thể trả lời.
Vì vậy, ví dụ, bạn có thể nói slide.bs.carousel.
Sự kiện cụ thể này sẽ được kích hoạt khi phương pháp thể hiện slide được gọi.
Tương tự như vậy, slid.bs.carousel có nghĩa
là sự kiện này bị bắn khi nó đã hoàn thành quá trình chuyển đổi slide sang mục tiếp theo.
Vì vậy, trong mã của bạn, bạn có thể chỉ định một cái gì đó
như $ (” #myCarousel “) .on ('slide.bs.carousel'.
Vì vậy, có nghĩa là khi hành động slide đó bắt đầu, sau đó gọi chức năng này,
và sau đó làm một cái gì đó bên trong chức năng đó ở đó.
Vì vậy, loại mã này có thể được trả lại cũng
để đáp ứng với các sự kiện được gây ra bởi hành vi băng chuyền của bạn.
Sau khi xem xét một số trong những ví dụ này, chúng tôi sẽ đi vào một bài tập mà chúng tôi
sẽ thực sự viết một số mã dựa trên JavaScript để kiểm soát băng chuyền của chúng tôi.
Chúng tôi sẽ viết mã để bao gồm một vài nút trong băng chuyền của chúng tôi,
sẽ được sử dụng để kiểm soát hành động trượt của băng chuyền.
Vì vậy, có nghĩa là chúng ta có thể tạm dừng và tiếp tục hành động trượt của băng chuyền của chúng tôi.
Và chúng tôi sẽ kích hoạt các nút này từ JavaScript.
[ NHẠC]