Tiếp theo loạt bài về Jquery Ajax nào ^_^ ! Hôm qua mình có giới thiệu sơ qua một chút về phương thức post trong jquery ajax. Hôm nay mình xin tiếp tục với một vài các phương thức trạng thái ajax. Các phương thức này bao gồm có: ajaxComplete(), ajaxError(), ajaxSend(), ajaxStart(), ajaxStop(), ajaxSuccess().
Chúng ta sẽ cùng tìm hiểu một chút về chức năng của các phương thức này.
ajaxStart(): chỉ ra hàm được thực thi khi ajax request được bắt đầu.
ajaxStop(): chỉ ra hàm được thực thi khi tất cả các ajax request đã hoàn thành.
ajaxComplete(): chỉ ra hàm được thực thi khi ajax request hoàn thành.
ajaxError(): chỉ ra hàm được thực thi khi ajax request có lỗi.
ajaxSend(): chỉ ra hàm được thực thi trước khi ajax request được gửi đi.
ajaxSuccess(): chỉ ra hàm được thực thi khi ajax request hoàn thành thành công.
Bây giờ mình sẽ làm một ví dụ để tổng hợp tất cả những phương thức trên.
<div id="send" style="display:none"><strong style="color:#A86400">Prepare to send!!!</strong></div>
Một div main để chứa thông tin load được. Một button để kích hoạt event. Và các div để hiện thị trạng thái, mình đã đặt tên theo nội dung trạng thái mà chúng sẽ trải qua.
Đây là đoạn script để chúng ta hiển thị các div trên. Khi chúng ta bắt đầu chạy thì các trạng thái của ajax sẽ lần lượt được hiện ra, để thấy rõ quá trình này thì bạn nên để file content.txt có kích thước lớn một chút để làm chậm lại quá trình đó để chúng ta có thể nhìn thấy rõ hơn. Đây chỉ là một ví dụ mang tính chất demo cho các bạn hiểu. Hi vọng là các bạn có thể hiểu thêm một chút về các phương thức này trong ajax. Chúc các bạn thành công!
Mình xin tiếp tục với series bài về jquery đơn giản đang còn dang dở. Những bài viết trước mình đã nói qua một chút về một vài phương thức ajax trong jquery ajax và phương thức get trong jquery ajax. Bài viết này mình sẽ nói thêm về một phương thức khác cũng có các chức năng gần giống với 2 phương thức trên đó là phương thức post trong jquery ajax
Phương thức post() là phương thức dùng để load dữ liệu từ server thông qua Http Post request.
data: dữ liệu được gửi kèm với request được gửi đến server.(cái này là tùy chọn)
success: hàm được thực thi khi mà request được gửi đi thành công( tùy chọn)
response: chứa kết quả trả về từ request được gửi đi.
status: chỉ ra trạng thái của request: success, error, notmodified, timeout...
xhr: chứa đối tượng XmlHttpRequest.
dataType: Tùy chọn. Nó chỉ ra loại dữ liệu được trả về từ server. Mặc định thì jquery sẽ tự xác định. Các loại dữ liệu có thể là: xml, html, text, script, json, jsonp.
Tiếp theo là một ví dụ đơn giản về cách thức hoạt động của phương thức post().
Đoạn code trên là để tìm hiểu quy trình và vòng đời của phương thức post. Bạn request đến 1 file content thì sẽ được thông báo về việc gửi request thành công, sau đó là các phương thức tương ứng với từng giai đoạn và bạn sẽ được thông báo kết quả là nó có xảy ra điều đó hay không.
Phương thức post thường được sử dụng trong các form thu thập dữ liệu. Nó cũng có chức năng như load data từ server về như get và ajax. Nhưng thường thì get() và post() sẽ ít được dùng hơn là ajax() vì phương thức ajax() có thể dùng để thay thế 2 phương thức trên mà ajax() lại có tính linh hoạt và mềm dẻo hơn.
ps/: không có nhiều time nên mình chỉ làm 1 ví dụ đơn giản, mong các bạn thông cảm >.<
Bài trước mình đã giới thiệu với các bạn về jquery ajax phương thức post(). Bài viết này mình xin giới thiệu một phương thức khác cũng dùng để load dữ liệu đó là get(). Các bạn chú ý là chúng ta có thể dùng phương thức ajax() để thay thế được cho phương thức get().
$.get(): Get là phương thức trong jquery ajax giúp bạn lấy về dữ liệu từ server thông qua Http Get.
url: đây là tham số bắt buộc. Nó chỉ ra địa chỉ url mà request sẽ được gửi đến.
data: Tùy chọn. Nó chỉ ra dữ liệu được gửi kèm với request tới server.
success: Tùy chọn. Nó chỉ ra hàm được thực thi nếu request được gửi đi thành công. Các tham số:
data: chứa dữ liệu được trả về từ request sau khi gửi thành công.
textStatus: chỉ ra tình trạng của request: success, notmodified, error, timeout, parseerror.
jqXHR: chứa đối tượng XmlHttpRequest.
dataType: Tùy chọn. Nó chỉ ra loại dữ liệu được trả về từ server. Mặc định thì jquery sẽ tự xác định. Các loại dữ liệu có thể là: xml, html, text, script, json, jsonp.
Bây giờ là một ví dụ đơn giản cho phương thức get() trong jquery ajax. Giả sử mình có 1 file sitemap như thế này:
trong body sẽ có 2 phần: 1 button để get thông tin từ file xml, còn 1 div để hiển thị thông tin từ file xml dưới dạng các link. Để get thông và hiển thị nó thì chúng ta cần đoạn code jquery ajax sau:
Mình giải thích qua 1 chút về đoạn code trên. Đầu tiên nếu người dùng kích và button để get sitemap thì chúng ta sẽ xóa hết các phần tử con trong div pagewrap đi để tránh bị hiện thì lặp thành nhiều lần. Sau đó ta dùng phương thức get() để lấy dữ liệu từ file xml. Tiếp theo chúng ta sẽ có hàm phân tách lấy dữ liệu sau khi đã get file thành công(trạng thái success). Bước cuối mình lặp qua chuỗi kết quả rồi đưa nó vào div. Đây là style cho div:
Đã lâu lắm rồi mới có thời gian viết bài cho blog@@. Mình xin tiếp tục với series bài về jquery đang dang dở. Bài viết trước mình có giới thiệu cho các bạn về Jquery Ajax là gì. Để hiểu được hết Jquery Ajax thì cần phải có thời gian và sự thực hành chăm chỉ, nên mình quyết định sẽ tách các phương thức trong Jquery Ajax thành một bài nhỏ cho các bạn dễ nhớ và tập thực hành dễ hơn. Bài hôm nay mình sẽ giới thiệu phương thức Ajax().
Phương thức Ajax() dùng để thực thi một Ajax request. Đây là phương thức được sử dụng khá nhiều trong Jquery Ajax và nó có thể được dùng để thay thế một số phương thức khác trong Jquery Ajax như get(),post()...
Cú pháp: $.ajax({name:value, name:value, ... })
Phương thức này nhận vào các cặp giá trị tham số gồm tên và giá trị. Dưới đây là bảng các tham số:
async: Xác định việc request có nên được thao tác bất đồng bộ hay không. Giá trị nhận vào và true hoặc false. Mặc định là true.
beforeSend(xhr): Hàm được thực thi trước khi request được gửi đi.
cache: Xác định việc trình duyệt có nên cache trang được request hay không. Nhận vào giá trị true hoặc false. Mặc định là true.
complete(xhr,status): Hàm được thực thi khi request đã hoàn thành. Thường lại chạy sau status là success hoặc error.
contentType: Chỉ ra loại nội dùng mà được dùng để gửi tới server. Mặc định là application/x-www-form-urlencoded, ngoài ra bạn có thể xác định 1 số loại khác như application/xml, application/js, application/json,text/xml...
context: Chỉ ra giá trị cho các hàm gọi lại liên quan của Ajax.
data: dữ liệu được gửi đến server.
dataFilter(data,type): thao tác và lọc dữ liệu thô được trả về của XmlHttpRequest.
dataType: chỉ ra loại dữ liệu mong muốn được trả về từ server. Các loại dữ liệu đó có thể là text, html, xml, js...
error(xhr,status,error): Hàm được thực thi nếu request bị thất bại.
global: Xác định việc có bẫy các sự kiện toàn cục trong Ajax hay không. Nhận vào giá trị true hoặc false. Mặc định là true.
ifModified: Chỉ ra rằng request chỉ thành công nếu response trả về đã thay đổi so với request cuối cùng được gửi. Mặc định là false.
jsonp: là chuỗi viết lại hàm callback trong request jsonp.
jsonpCallback: hàm được gọi lại trong request jsonp.
mime: chỉ ra loại mime được sử dụng để thay cho XHR mime.
password: chỉ ra password để xác minh người dùng trong HTTP access authentication request.
processData: chỉ ra việc có chuyển đổi dữ liệu được gửi kèm với request thành chuỗi query string hay không. Mặc định true.
scriptCharset: chỉ ra charset cho request.
success(result,status,xhr): Hàm được thực thi nếu request thành công.
timeout: chỉ ra thời gian timeout cho request tính bằng milli giây.
traditional: chỉ ra việc có sử dụng kiểu traditional của tuần tự hóa tham số.
type: chỉ ra loại request "GET" hoặc "POST".
url: chỉ ra địa chỉ url request được gửi tới. Mặc định là trang hiện tại.
username: chỉ ra tên của người dùng trong HTTP access authentication request.
xhr: Hàm sử dụng để tạo đối tượng XmlHttpRequest.
Bên trên chỉ là một số tham số hay thấy. Trong mỗi phiên bản jquery thì đều nâng cấp thêm 1 số tham số khác nữa. Bạn có thể xem thêm tại đây: http://api.jquery.com/jQuery.ajax/.
Bây giờ chúng ta sẽ làm 1 ví dụ đơn giản để xem cách hoạt động của phương thức Ajax().
Giả sử chúng ta có 1 file content.txt như sau:
<h1>Webzoomz-tự học thiết kế web</h1>
Và một body html gồm :
<button id="btnDisplay">Display</button>
<div id="status"></div>
<div id="content"></div>
div status: sẽ in ra trạng thái của ajax.
div content: sẽ in ra nội dung lúc success hoặc lúc error:
Ajax là viết tắt của Asynchronous JavaScript and XML. Ajax không còn là một ngôn ngữ mới nữa và nó đã được ứng dụng rất nhiều trên web. Tại sao nó lại được ứng dụng nhiều như vậy? Đơn giản vì nó có rất nhiều điểm mạnh. Ajax được tạo ra để tăng cường tính tương tác với người dùng và linh hoạt trong xử lí request tới server. Với ajax khi bạn request mới dữ liệu thì bạn sẽ không cần phải reload lại trang mà chỉ có module dữ liệu cần request mới reload. Như vậy bạn sẽ giảm tải được rất nhiều cho server. Nhưng bên cạnh những điểm mạnh như thế vẫn còn những điểm yếu của Ajax mà chúng ta cần lưu ý qua. Bạn không thể bookmark, chia sẻ link trên các mạng xã hội vì nó vẫn chỉ là link trên trên address bar và nó sẽ thay đổi khi reload dữ liệu mới. Bạn cũng không thể dùng nút back cho nó được và nếu bạn không bật enable javascript thì nó sẽ không thể hoạt động. Ngoài ra còn một điểm yếu lớn nhất của Ajax đó là google khó hoặc không thể index, hiển thị được được nội dung trong ajax module đó.
Jquery Ajax là gì?
Jquery Ajax là một phần quan trọng khác của thư viện Jquery bên cạnh các phần khác như HTML, CSS, ... Để tìm hiểu những lợi điểm của Jquery Ajax chúng ta hãy xem Jquery Ajax khác Javascript Ajax thuần ở điểm nào. Để sử dụng Ajax thuần Javascript các bạn thường phải khai báo đối tượng XmlHttpRequest mà đối tượng này ở các trình duyệt và các phiên bản khác nhau thì lại phải khai báo khác nhau. Điều này rất phiền phức và tốn thời gian. Và để xử lí một event hay viết một function để làm việc gì bạn thường phải code khá nhiều, mà code nhiều điều hiển nhiên dễ xảy ra là lỗi ở đâu đó. Nhưng với Jquery Ajax thì khác, Jquery hỗ trợ một loạt các phương thức viết sẵn để hỗ trợ cho việc xử lí request và dữ liệu và đương nhiên là bạn sẽ code ít hơn và gặp ít lỗi hơn. Ngoài ra với Jquery Ajax thì bạn không còn phải lo về vấn đề tương thích trình duyệt nữa. Với các tính năng xử lý dữ liệu và request cực kì linh hoạt và mạnh mẽ việc thiết kế và lập trình web sẽ trở nên đơn giản hơn rất nhiều.
Đó là một chút giới thiệu về Jquery Ajax. Hi vọng mọi người sẽ hiểu thêm một chút về nó.
p/s: Tuần này hơi bận rộn và có chút lười biếng nên chẳng viết được gì hết
Tiếp tục loạt bài về Jquery cơ bản, hôm nay mình sẽ cùng các bạn tìm hiểu qua một chút về các phương thức để thao tác với HTML và CSS trong Jquery. Những phương thức giúp bạn thao tác với các phần tử HTML và CSS chính là điểm mạnh của Jquery. 1. HTML trong Jquery. Jquery cung cấp một loạt các phương thức giúp bạn dễ dàng thao tác với các phần tử HTML thậm chí bạn còn có thể thay đổi giá trị các thuộc tính của phần tử. Chính điều này tạo nên sự linh hoạt trong Jquery. Chúng ta sẽ cùng tìm hiểu một số phương thức cơ bản: addClass(): thêm một hoặc nhiều class vào phần tử HTML được chọn. after(): chèn thêm nội dung vào đằng sau phần tử được chọn. Nó có thể là text hoặc code html thuần. append(): thêm nội dung vào phần tử được chọn nhưng vẫn nằm trong phần tử đó. appendTo(): phương thức này giống với append() nhưng vị trị phần tử được chọn và nội dung được đổi chỗ cho nhau. attr(): thiết lập hoặc trả về thuộc tính của phần tử được chọn. before(): chèn thêm nội dung vào đằng trước phần tử được chọn. html(): trả về nội dung của phần tử được chọn. remove(): xóa phần tử được chọn. removeAttr(): xóa thuộc tính của phần tử được chọn. removeClass(): xóa 1 hoặc nhiều class của phần tử được chọn. Còn rất nhiều các phương thức khác bạn có thể xem thêm ở đây:Phương thức cho HTML trong Jquery. 2. CSS trong Jquery. Cũng giống như các phương thức cho HTML trong Jquery, các phương thức cho CSS cũng làm cho việc xử lí style cho các phần tử HTML trở nên linh hoạt và mạnh mẽ hơn. Chúng ta sẽ cùng lướt qua một số phương thức cơ bản. addClass(): phương thức này vừa là phương thức cho HTML cũng vừa là cho CSS. css(): thiết lập hoặc trả về các thuộc tính trong style hoặc class của phần tử được chọn. Đây là phương thức quan trọng nhất trong các phương thức cho CSS của Jquery. hasClass(): kiểm tra xem phần tử được chọn có class được chỉ định hay không. height(): trả về chiều cao của phần tử được chọn. width(): trả về chiều rộng của phần tử được chọn. removeClass(): xóa 1 hoặc nhiều class của phần tử được chọn. Bạn có thể xem thêm và thực hành các phương thức đó ở đây: Phương thức cho CSS trong Jquery. Tiếp theo là một ví dụ cho bài ngày hôm nay. Ví dụ này mục đích chính là thiết lập hoặc lấy về các thông tin về css và các thuộc tính của phần tử HTML. Giả sử mình có một body html chứa các phần tử sau
<button id="btnPurple">Purple</button> <button id="btnBlue">Blue</button> <button id="btnGreen">Green</button> <button id="btnHTML">Set HTML</button> <button id="btnCurrentColor">Current Color</button> <p id="webzoomz" class="webzoomzClass">Webzoomz.info-Tự học thiết kế web</p> <hr /> <button id="btnGetSize">Get Size</button> <button id="btnGetAttr">Get Attribute</button> <img id="imgNatsu" alt="jquery co ban-html and css" src="http://goo.gl/rAvWk" />
Tiếp theo là phần quan trọng nhất Jquery cho các phần tử trên:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#btnPurple").click(function () { $("#webzoomz").addClass("purple").removeClass("blue").css("color", "#8000A8"); }); $("#btnBlue").click(function () { $("#webzoomz").addClass("blue").removeClass("purple").css("color", "#0082FF"); }); $("#btnGreen").click(function () { $("#webzoomz").css("color", "#1FFF00").removeClass("blue").removeClass("purple"); }); $("#btnCurrentColor").click(function () { alert("Mã màu của đoạn text hiện tại là :" + $("#webzoomz").css("color")); }); $("#btnHTML").click(function () { $("#webzoomz").html("<p> Welcome to webzoomz!</p>") }); $("#btnGetSize").click(function () { alert("Kích thước của ảnh là width= "+$("#imgNatsu").width()+" height= "+$("#imgNatsu").height()); }); $("#btnGetAttr").click(function () { alert("Alt="+$("#imgNatsu").attr("alt")+"\nSrc="+$("#imgNatsu").attr("src")); }); }); </script>
Đoạn script này khá đơn giản nên mình sẽ không giải thích thêm trừ đoạn code đổi màu cho text. Vì sau khi gán color cho text mà không thông qua class nên mỗi lần đổi class hoặc màu thì mình lại phải remove class đó đi và thiết lập lại màu trong class. Đoạn code đó thực ra là không tối ưu nhưng mình chỉ làm để ví dụ demo thôi ^_^. Các bạn save và run thì kết quả như sau:
Qua vài bài về Jquery cơ bản vừa rồi chắc các bạn đã hiểu được phần nào về Jquery. Hôm nay mình xin tiếp tục với một số hiệu ứng cơ bản trong Jquery. Bài viết hôm nay sẽ hơi dài một chút mong các bạn thông cảm. Trước tiên chúng ta hãy xem hiệu ứng trong Jquery là gì? Hiệu ứng được hiểu một cách đơn giản là việc tạo ra các chuyển động cho phần tử HTML với những trạng thái và cách thức khác nhau( hơi khó hiểu chút@@). Những hiệu ứng này sẽ giúp web của bạn trở nên sinh động hơn. Trong Jquery có những hiệu ứng cơ bản sau: Show, Hide, Slide, Toogle, Fade, Animate. Chắc các bạn vẫn còn nhớ ở bài giới thiêu về cú pháp trong Jquery mình cũng có 1 ví dụ về Show và Hide. Hôm nay chúng ta sẽ tìm hiểu kĩ hơn 1 chút về 2 phương thức này và những phương thức khác.
1. Phương thức Show() trong Jquery.
Show() là phương thức giúp bạn hiện ra một phần tử HTML nào đó đã bị ẩn đi.
Cú pháp: $(selector).show(speed, callback);
Selector ở đây là phần tử bạn muốn hiển thị.
Speed: ở đây là tốc độ hiển thị phần tử. Bạn có thể dùng slow, normal, fast hoặc thời gian tính bằng mili giây.
Callback: đây là hàm mà chúng ta sẽ thực thi khi show được thực hiện.
2. Phương thức Hide() trong Jquery.
Phương thức Hide giống với Show nhưng mà là làm ngược lại. Show là hiển thị ra còn Hide là làm ẩn đi.
Cú pháp: $(selector).hide(speed,callback);
Selector: phần tử bạn muốn ẩn đi.
Speed: tốc độ ẩn có thể là slow,normal,fast hoặc thời gian tính bằng mili giây.
Callback: hàm được thực thi khi hide được gọi .
3. Phương thức Toogle
Phương thức này là sự kết hợp của Show và Hide. Nếu phần tử đang ẩn thì nó sẽ làm phần tử hiện và phần tử đang hiện sẽ bị ẩn đi nếu dùng nó.
Cú pháp: $(selector).toogle(speed,callback);
Selector: phần tử sử dụng toogle.
Speed: tốc độ sử dụng toogle có thể dùng slow, normal, fast, hoặc thời gian tính bằng giây.
4. Các phương thức Slide.
a. SlideUp: thu phần tử nhỏ lại cho đến khi không nhìn thấy.
Cú pháp: $(selector).slideUp(speed,callback);
b. SlideDown: đưa phần tử trở lại kích thước ban đầu.
Cú pháp: $(selector).slideDown(speed,callback);
c.SlideToogle: đưa phần tử về kích thước ngược lại với kích thước hiện tại. Đây là hàm kết hợp giữa SlideUp và SlideDown. Ví dụ nếu bạn đưa phần tử về kích thước về 0:0 bằng SlideUp thì dùng SlideToogle thì phần tử sẽ trở lại với kích thước ban đầu giống với khi dùng SlideDown.
Cú pháp: $(selector).slideToogle(speed,callback);
Các tham số giống như các phương thức mình không giải thích thêm.
5. Các phương thức Fade
Các phương thức fade là các phương thức ảnh hưởng đến độ sáng,đậm của phần tử.
a.FadeOut(): làm mờ phần tử được chọn cho đến khi opacity=0.
Cú pháp: $(selector).fadeOut(speed,callback);
b.FadeIn(): làm đậm phần tử sau khi nó được làm mờ và đưa opacity=1.
FadeTo cho phép bạn làm mờ hoặc làm đậm phần tử với opacity được chỉ định. Các bạn lưu ý opacity nằm trong khoảng từ 0-1.
6.Phương thức Animate
Đây là phương thức phức tạp nhất trong các phương thức về hiệu ứng trong Jquery. Có lẽ mình sẽ có một bài chi tiết về phương thức này. Bài này mình chỉ giới thiệu sơ qua thôi. Animate là phương thức tạo ra các chuyển động về hình dạng, kích thước, vị trí, ... cho phần tử.
Param: là các tham số chứa thuộc tính và giá trị css cho phần tử.
Duration: thời gian xảy ra animate tính bằng mili giây.
Easing: định nghĩa cách dịch chuyển của phần tử như swing,linear,...
Callback: hàm được thực thi khi animate được gọi.
Bây giờ để hiểu rõ hơn về những gì ở trên chúng ta sẽ làm 1 ví dụ. Giả sử chúng ta có một body gồm 6 button và 1 bức ảnh. Mỗi button tương ứng với 1 phương thức effect:
<button id="btnHide">Hide</button>
<button id="btnShow">Show</button>
<button id="btnFade">Fade</button>
<button id="btnToogle">Toogle</button>
<button id="btnSlide">Slide</button>
<button id="btnAnimate">Animate</button><br />
<img id="imgFairyTail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqlJ4Q_SRjM7OwEMLjDK3pqN9d1cmwPBFvauZtkXqJqBXqYwXrMdNG3fStqs9KrflL_jyWbfXYrcQqcAOUCbf3ZDkeeAFO1Es1QztFz6d3w9KWIO4H8epgjXCiKKMsF_Lj5r9KMVEvRH0/ s512/hieu%2520ung%2520trong%2520jquery.jpg" alt="hieu ung trong jquery" />
Tiếp theo chúng ta sẽ code cho phần jQuery như sau:
Animate: Mình sẽ thu ảnh nhỏ lại chỉ bằng 1/3 ảnh bình thường sau đó mình lại phóng to nó về kích thước ban đầu. Có 2 cách để truyền tham số thuộc tính css bạn có thể thấy trong phương thức mình đã viết.
Fade: Mình sẽ làm mờ ảnh đi bằng fadeOut sau đó làm nó hiện trở lại với fadeIn. Tiếp theo mình dùng fadeToogle để làm mở ảnh đi khi tới opacity=0.2(do ảnh đang ở trạng thái ban đầu opacity=1). Sau đó mình lại dùng fadeToogle để làm hiện nó trở lại với opacity=1.
Slide: Đầu tiên mình dùng slideUp để thu ảnh nhỏ lại sau đó dùng slideDown để đưa ảnh về kích thước bạn đầu. Tiếp tục mình dung slideToogle để thu ảnh lại(do ảnh đang ở trạng thái full kích thước ban đầu) rồi sau đó lại dùng slideToogle để đưa nó về trạng thái full kích thước.
Show,Hide,Toogle thì đơn giản rùi chỉ là ẩn, hiện, hoặc đang hiện thì ẩn còn đang ẩn thì hiện thôi.
Và đây là kết quả :
Thực ra trong jquery có rất nhiều hiệu ứng đẹp nhưng để làm được chúng thì phải mất chút ít thời gian và cần có kiến thức tốt về jquery. Tới đây mình cũng xin dừng lại! Mệt quá @@
2 bài viết trước mình đã giới thiệu về cú pháp trong jquery và các selectors trong jquery. Bài viết này sẽ là phần tiếp theo trong series bài về Jquery cơ bản. Hôm nay chúng ta sẽ cùng tìm hiểu một chút về các sự kiện trong Jquery. Jquery được hỗ trợ sẵn rất nhiều các sự kiện để tương tác với người dùng. Các sự kiện trong jquery thao tác đơn giản hơn khi ta sử dụng cùng loại sự kiện đó với Javascript. Sự kiện được hiểu một cách đơn giản là một phương thức được gọi ra để tương tác khi có một điều gì đó xảy ra với các thành phần HTML. Ví dụ những event đơn giản mà ta hay gặp nhất như onclick() xảy ra khi người dùng click và 1 phần tử trên HTML, hay onblur() khi phần tử HTML mất đi focus... Cấu trúc của các sự kiện:
$(selector).event(function)
Selector: chính là phần tử HTML đã bị tác động gì đó của người dùng. Event: tên sự kiện mà bạn muốn bắt. Function: là đoạn code thực thi mà bạn muốn làm khi event được bắt. Các bạn lưu ý như bài trước mình đã nói là code jquery luôn phải nằm trong khối $(document).ready(). Ngoài ra chúng ta cũng có 1 lưu ý nhỏ ở đây là bạn có thể thay dấu $ bằng một tên gọi khác nếu bạn muốn. Vì một số thư viện Javascript cũng dùng dấu $. Vì thế cũng rất dễ gây ra xung đột. Nếu trên tài liệu HTML của bạn có sử dụng nhiều thư viện javascript thì bạn nên lưu ý điều này. Để dùng một tên gọi khác bạn phải dùng đến phương thức jQuery.noConflict().
<script type="text/javascript"> var j=jQuery.noConflict(); j(document).ready(function(){ j("button").click(function(){ j("img").hide(); }); }); </script>
j: ở đây là một tên gọi tùy ý mà bạn muốn sử dụng, tốt nhất là nên là chữ gì đó gồm 1 hoặc 2 chữ cái cho dễ nhớ và dễ sử dụng hơn. Còn bây giờ là một ví dụ nhỏ cho bài ngày hôm nay. Giả sử chúng ta có 1 đoạn HTML như sau:
Chúng ta sẽ cùng phân tích 1 số sự kiện sẽ diễn ra khi đoạn code này chạy. Đầu tiên khi toàn bộ trang được load lên thì sẽ có sự kiện load nằm trong phương thức read và lúc đó div sẽ có background là Naruto. Nếu click vào button btnSasuke thì sự kiện click trong jquery được gọi và lúc đó div sẽ có ảnh Sasuke. Và nếu bạn hover qua div thì sự kiện hover được gọi và div sẽ có ảnh Sakura. Và cuối cùng nếu bạn kích đúp và div thì div sẽ trở về ảnh ban đầu là Naruto. Đây là kết quả cho đoạn code trên:
Nếu các bạn muốn tìm hiểu đầy đủ về các sự kiện trong Jquery thì các bạn có thể vào đây. Chúc các bạn thành công!
Bài viết trước mình đã giới thiệu sơ qua một chút về cú pháp trong Jquery. Hôm nay mình xin tiếp tục với phần cơ bản về Selectors trong Jquery. Jquery selector cho phép bạn truy cập và thao tác với một hoặc một nhóm các thành phần HTML. Mỗi khi sử dụng Jquery thì việc dùng selectors để truy cập thành phần HTML là bắt buộc và bạn có thể truy cập vào những thành phần này bằng tên thẻ hoặc tên các thuộc tính. Các selectors trong Jquery đều bắt đầu bằng dấu dollar và cặp ngoặc tròn: $(). Đây là bảng các selector hay dùng trong jquery:
Selector
Example
Phần tử được select
Selector cho các phần tử trang
*
$("*")
Lấy tất cả các thành phần
#id
$("#intro")
Lấy tất cả các phần tử có id là intro
.class
$(".about")
Lấy tất cả các phần tử có class là about
element
$("p")
Lấy tất cả các thẻ p
.class.class
$(".intro.about")
Lấy tất cả các thành phần có 2 class là intro và about
Selector theo vị trí đặc biệt
:first
$("p:first")
Lấy thẻ p đầu tiên
:last
$(p:last)
Lấy thẻ p cuối cùng
:even
$("ul li:even")
Lấy tất cả các phần tử li chẵn
:odd
$("ul li:odd")
Lấy tất cả phần tử li lẻ
Selector cho các phần tử tại vị trí xác định
:eq(index)
$("ul li:eq(4)")
Lấy phần tử li ở vị trí thứ 5(index được đánh từ 0)
:gt(no)
$("ul li:gt(4)")
Lấy tất cả phần tử li có index lớn hơn 4
:lt(no)
$("ul li:lt(4)")
Lấy tất cả các phần tử li có index nhỏ hơn 4
:not(selector)
$("input:not(:empty)")
Lấy tất cả các phần tử input mà không rỗng
Selector cho phần tử theo nội dung và đặc điểm hiển thị
:contains(text)
$("p:contains("webzoomz")")
Lấy tất cả các thẻ p có chứa chữ webzoomz
:empty
$("p:empty")
Lấy tất cả các thẻ p rỗng không có nội dung
:hidden
$("p:hidden")
Lấy tất cả các thẻ p bị hidden
:visible
$("p:visible")
Lấy tất cả các thẻ p đang được visible
Selector theo thuộc tính
[attribute]
$("[href]")
Lấy tất cả các phần tử có thuộc tính href
[attribute=value]
$("[src='index.html']")
Lấy tất cả các phần tử có thuộc tính src='index.html'
[attribute!=value]
$("[src!='index.html']")
Lấy tất cả các phần tử không có thuộc tính src='index.html'
[attribute$=value]
$("[src$='.png']")
Lấy tất cả các phần tử có thuộc tính src có giá trị kết thúc là .png
[attribute^=value]
$("[src^='http://']")
Lấy tất cả các phần tử có thuộc tính src bắt đầu với http://
Selector cho các phần tử form
:input
$(":input")
Lấy tất cả các thẻ input
:text
$(":text")
Lấy tất cả các phần tử input có type=text
:password
$(":password")
Lấy tất cả các phần tử input có type=password
:radio
$(":radio")
Lấy tất cả các phần tử input có type=radio
:checkbox
$(":checkbox")
Lấy tất cả các phần tử input có type=checkbox
:submit
$(":submit")
Lấy tất cả các phần tử input có type=submit
:reset
$(":reset")
Lấy tất cả các phần tử input có type=reset
:button
$(":button")
Lấy tất cả các phần tử input có type=button
:image
$(":image")
Lấy tất cả các phần tử input có type=image
:file
$(":file")
Lấy tất cả các phần tử input có type=file
Selector cho trạng thái
:enable
$(":enable")
Lấy tất cả các phần tử input có trạng thái enable
:disable
$(":disable")
Lấy tất cả các phần tử input có trạng thái disable
:selected
$(":selected")
Lấy tất cả các phần tử input được select
:checked
$(":checked")
Lấy tất cả các phần tử input được checked
Các selectors khác
:header
$(":header")
Lấy tất cả các thẻ header: h1,h2,h3...
Đây là một ví dụ đơn giản mà mình đã làm để demo cho bài này: Đầu tiên chúng ta có 1 bảng gồm nhiều dòng:
<table> <tr> <td>Selector</td> <td>Example</td> <td>Phần tử được select</td> </tr> <tr> <td colspan="3">Selector cho các phần tử trang</td> </tr> <tr> <td>*</td> <td>$("*")</td> <td>Lấy tất cả các thành phần</td> </tr> <tr> <td>#id</td> <td>$("#intro")</td> <td>Lấy tất cả các phần tử có id là intro</td> </tr> ... </table>
Sau đó chúng ta sẽ dùng 1 số selector đơn giản để tạo style cho bảng này. Đầu tiên chúng ta sẽ có các style:
Chúng ta hãy cùng phân tích 1 chút. Mình sẽ gán class title cho dòng tr đầu tiên, các tr chẵn thì mình gán class even còn các tr lẻ thì mình gán class odd. Và phần tử tr nào có colspan=3 thì mình gán class caption. Và kết quả chính là bảng các selector bên trên(màu mè không được đẹp do mình hơi thiểu thẩm mỹ các bạn thông cảm ^_^). Hy vọng bài viết sẽ giúp các bạn hiểu hơn về các selectors trong jquery
Trong bài viết trước mình đã giới thiệu một chút cơ bản về Jquery là gì , nó được sử như thế nào và để làm những gì. Hôm nay mình xin đi chi tiết vào cách chúng ta sử dụng chúng. Để sử dụng được Jquery điều đầu tiên chúng ta cần biết là cú pháp trong Jquery. Cú pháp trong Jquery được dùng để lựa chọn và thao tác trên các thành phần HTML
Cú pháp: $(selector).action()
Chúng ta hãy cùng phân tích cú pháp này một chút: $: dấu dollar này được dùng để định nghĩa rằng chúng ta sẽ sử dụng jquery cho đoạn script này. selector: là thành phần mà chúng ta sẽ truy cập đến như document, p, h1,a.. action: là phương thức mà chúng ta sẽ dùng cho selector bên trên ví dụ như read(),click(),hide()... Ví dụ:
$(document).ready(function(){ // thực hiện câu lệnh hoặc gọi hàm thao tác với các thành phần HTML ở đây. });
Đây là câu lệnh mà chúng ta sử dụng nhiều nhất trong jquery. Ý nghĩa của câu lệnh này là khi toàn bộ tài liệu đã load xong thì chúng ta mới tiến hành thao tác cho các thành phần HTML. Điều này sẽ giúp bạn tránh được việc thực thi các câu lệnh jquery trước khi tài liệu được load toàn bộ. Đây là một ví dụ đơn giản mà mình làm để demo cách sử dụng cú pháp trong jquery:
Ví dụ này chỉ mang tính chất demo cho việc sử dụng cú pháp nên mình sẽ không giải thích thêm nhiều vì nó liên quan đến các bài viết sau này nên sau này mình sẽ giải thích rõ hơn.
Jquery là gì? Đó là một câu hỏi lớn đối với những bạn mới bước chân vào học thiết kế web. Bài viết này mình xin giới thiệu một chút về jquery để những bạn chưa biết có thể hiểu thêm một chút về nó.
Jquery là viết tắt của Javascript Framework. Nó là một bộ thư viện được tạo ra để hỗ trợ cho việc thiết kế,lập trình và phát triển web một cách nhanh chóng và dễ dàng. Jquery được phát triển bởi John Resig vào năm 2006. Và sau 6 năm giờ nó đã trở thành một bộ thư viện nổi tiếng với hàng chục nghìn plugin hay, hàng triệu người thiết kế web học và sử dụng nó, và hầu hết các website hiện nay đều ứng dụng nó. Jquery là bộ thư viện mã nguồn mở và hoàn toàn miễn phí. Bạn có thể download nó ở jquery.com. Vậy chính xác Jquery là gì và những ưu điểm của nó là gì?
- Jquery là bộ thư viện chứa các javascript function. - Nó là một lightweight tool. - "Write less, do more". - Viết plugin 1 lần và có thể sử dụng mọi lúc mọi nơi. - Đơn giản hóa cách viết script. - Giúp xử lý và load các event nhanh hơn. - Có rất nhiều những phương thức hỗ trợ cho việc tương tác và phát triển Ajax. - Xử lý được nhiều vấn đề với mô hình DOM. - Tương thích với hầu hết các trình duyệt ngày nay và không ảnh hưởng hoặc xung đột với các thư viện javascript khác. - Với sự phát triển mạnh mẽ nó trở nên phổ biến và việc tìm tài liệu học nó khá đơn giản. - Các plugin được viết bởi jquery rất phong phú với rất nhiều những tính năng hay. - Với jquery bạn có thể truy cập tới các thành phần trong HTML ,thay đổi giao diện và nội dung trang, tương tác với người dùng, tạo hiệu ứng động nhanh hơn và đơn giản hơn.
Để sử dụng được Jquery thành thạo bạn phải có các kiến thức cơ bản về HTML, CSS, Javascript và mỗi khi sử dụng bạn cần import thư viện Jquery vào.
Tối nay lang thang trên mạng mình thấy có một bộ source game rất hay. Bộ source này là game câu cá được code bằng HTML5 và Javascript. Nên mình share cho mọi người cùng xem. Game demo ở đây: http://html5.tnd.vn/fish/ Source: http://www.mediafire.com/?aj3t8fvaf76mu8y Bộ source này bạn chỉ cần upload lên host là có thể chạy được hoặc bạn có thể chạy trực tiếp trên máy bạn.
Những bài viết trước mình đã giới thiệu với mọi người cách tạo một module lấy thông tin thời tiết. Hôm nay mình sẽ giới thiệu cho các bạn cách tạo một module đơn giản lấy về thông tin giá vàng và một module khác để lấy thông tin tỷ giá. Đầu tiên là module giá vàng: Chèn đoạn code này vào thẻ head
Với 2 module trên bạn có thể style theo ý mình sao cho đẹp là được. Ngoài cách lấy thông tin từ 2 file js của vnexpress.net bạn có thể có nhiều cách để lấy các thông tin giá vàng và tỷ giá. Như bạn có thể lấy thông tin từ những iframe của các ngân hàng. Mình ví dụ ngân hàng eximbank:
