Cập nhật thông tin chi tiết về Hướng Dẫn Sử Dụng Jquery mới nhất trên website Bothankankanhatban.com. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất.
1- Download jQuery
jQuery:
jQuery 1.x
jQuery 2.x
Cả hai phiên bản trên đều không có sự khác biệt về API, jQuery 1.x hỗ trợ tất cả các trình duyệt bao gồm cả IE 6,7,8 còn jQuery 2.x cũng hỗ trợ tất cả các trình duyệt trừ IE 6,7,8. Chính vì vậy bạn cần cân nhắc phiên bản để download về. Trong tài liệu hướng dẫn này tôi download phiên bản 1.x:
Bạn có 2 lựa chọn downloadCả hai phiên bản trên đều không có sự khác biệt về API, jQuery 1.x hỗ trợ tất cả các trình duyệt bao gồm cả IE 6,7,8 còn jQuery 2.x cũng hỗ trợ tất cả các trình duyệt trừ IE 6,7,8. Chính vì vậy bạn cần cân nhắc phiên bản để download về. Trong tài liệu hướng dẫn này tôi download phiên bản 1.x:
Kết quả download được:
2- Ví dụ Hello jQuery
Tạo thư mục examples, các ví dụ trong tài liệu này sẽ được đặt trong thư mục này.
Khai báo sử dụng thư viện jQuery:
Khi trang web trong tình trạng sẵn sàng, nghĩa là đối tượng document trong tình trạng sẵn sàng, jQuery sẽ bắt được sự kiện này thông qua phương thức ready.
jQuery(document).ready(function(){ alert('Hello jQuery'); }); $(document).ready(function(){ alert('Hello jQuery'); });Hãy xem ví dụ đơn giản:
helloJQuery.html
jQuery(document).ready(function(){ alert("Hello jQuery"); });Chạy ví dụ:
3- jQuery Selector
3.1- jQuery Selector là gì?
Khái niệm về Selector là một trong những khái niệm quan trọng nhất của jQuery.
3.2- Ví dụ với Selector
Ví dụ đầu tiên, lựa chọn tất cả các phần tử div trong tài liệu và sét đặt border cho nó thành “1px solid red”. Ở đây chúng ta sử dụng cú pháp:
jQuery('div') $('div')selector_tagname.html
div { padding: 5px; margin:5px; width: 100px; } function selectDiv() { $('div').css("border","1px solid red"); }Chạy thử ví dụ:
Lựa chọn các phần tử theo classname.
Cú pháp
jQuery('.abc') $('.abc')selector_classname.html
h2, div { padding: 5px; margin:5px; width: 250px; } function selectByClassName() { $('.abc').css("border","1px solid red"); }Chạy ví dụ:
3.3- Các cú pháp của Selector
Ở phần trên tôi đã giới thiệu một vài ví dụ về Selector, trong phần này tôi sẽ liệt kê ra các cú pháp khác của Selector.
Selector Ví dụ Lựa chọn
* $(“*”) Tất cả các phần tử
#id $(“#lastname”) Phần tử có id=”lastname”
.class $(“.intro”) Tất cả các phần tử có class=”intro”
.class,.class $(“.intro,.demo”) Tất cả các phần tử có class là “intro” hoặc “demo”
element $(“p”)
el1,el2,el3 $(“h1,div,p”)
:first $(“p:first”)
:last $(“p:last”)
:even $(“tr:even”)
:odd $(“tr:odd”)
:first-child $(“p:first-child”)
:first-of-type $(“p:first-of-type”)
:last-child $(“p:last-child”)
:last-of-type $(“p:last-of-type”)
:nth-child(n) $(“p:nth-child(2)”)
:nth-last-child(n) $(“p:nth-last-child(2)”)
:nth-of-type(n) $(“p:nth-of-type(2)”)
:nth-last-of-type(n) $(“p:nth-last-of-type(2)”)
:only-child $(“p:only-child”)
:only-of-type $(“p:only-of-type”)
parent descendant $(“div p”)
element + next $(“div + p”)
element ~ siblings $(“div ~ p”)
:eq(index) $(“ul li:eq(3)”) Phần tử thứ 4 trong danh sách (chỉ số bắt đầu từ số 0)
:gt(no) $(“ul li:gt(3)”) Danh sách các phần tử với chỉ số lớn hơn 3
:lt(no) $(“ul li:lt(3)”) Danh sách các phần tử với chỉ số nhỏ hơn 3
:not(selector) $(“input:not(:empty)”)
:header $(“:header”)
:animated $(“:animated”) Tất cả các phần tử hoạt hình (animated elements)
:focus $(“:focus”) Tất cả các phần tử đang được chọn (has focus)
:contains(text) $(“:contains(‘Hello’)”) Tất cả các phần tử chứa đoạn text “Hello”
:has(selector) $(“div:has(p)”)
:empty $(“:empty”) Tất cả các phần tử rỗng (empty)
:parent $(“:parent”) Tất cả các phần tử là cha mẹ của phần tử khác.
:hidden $(“p:hidden”)
:visible $(“table:visible”) Tất cả các table có thể nhìn thấy.
:root $(“:root”) Phần tử gốc của tài liệu.
:lang(language) $(“p:lang(de)”)
[attribute] $(“[href]”) Tất cả các phần tử với thuộc tính href
[attribute=value] $(“[href=’default.htm’]”) Tất cả các phần tử với thuộc tính href là “default.htm”
[attribute!=value] $(“[href!=’default.htm’]”) Tất cả các phần tử với thuộc tính href khác “default.htm”
[attribute$=value] $(“[href$=’.jpg’]”) Tất cả các phần tử với thuộc tính href có đuôi là “.jpg”
Tất cả các phần tử với thuộc tính title là ‘Tomorrow’, hoặc bắt đầu với ‘Tomorrow’
[attribute^=value] $(“[title^=’Tom’]”) Tất cả các phần tử có thuộc tính title bắt đầu với “Tom”
[attribute~=value] $(“[title~=’hello’]”) Tất cả các phần tử với thuộc tính title chứa “hello”
[attribute*=value] $(“[title*=’hello’]”) Tất cả các phần tử với thuộc tính có chứa từ “hello”
:input $(“:input”) Tất cả các phần tử đầu vào (input elements)
:text $(“:text”)
:password $(“:password”)
:radio $(“:radio”)
:checkbox $(“:checkbox”)
:submit $(“:submit”)
:reset $(“:reset”)
:button $(“:button”)
:image $(“:image”)
:file $(“:file”)
:enabled $(“:enabled”)
:disabled $(“:disabled”)
:selected $(“:selected”)
:checked $(“:checked”)
Các quy tắc ở trên là các quy tắc cơ bản, bạn có thể kết hợp chúng lại với nhau.
Các Selector kết hợp:
$(‘.abc’) – Các phần tử có class=’abc’.
$(‘#slider’) – Phần tử có ID là slider
Kết hợp:
Quy tắc:Kết hợp:
Kết hợp:
Quy tắc:Kết hợp:
Xem ví dụ:
selector_firstchildofdiv.html
h2, div , p { padding: 5px; margin:5px; width: 350px; border: 1px solid blue; } function selectAdv() { $('div p:first-child').css("background","#ccc"); }Chạy ví dụ:
4- jQuery Attribute
Mỗi phần tử trong trang, với jQuery nó sẽ có các thuộc tính, và các phương thức có thể sử dụng.
Ví dụ một phần tử với các thuộc tính (attribute):
jQuery cung cấp cho bạn một số phương thức để lấy ra giá trị thuộc tính hoặc sét đặt giá trị cho thuộc tính.
4.1- Lấy ra giá trị của thuộc tính
Phương thức attr(name) của jQuery cho phép bạn lấy ra giá trị của thuộc tính của phần tử:
attribute_getatt.html
function getAttr() { var hrefValue = $('#atag').attr("href"); $('#atag').html(hrefValue); }Chạy ví dụ:
4.2- Sét giá trị thuộc tính
Phương thức attr(name, value) sử dụng để sét đặt giá trị cho thuộc tính của phần tử.
attribute_setatt.html
function setAttr() { $('img').attr("src","images/jquery-mobile.png"); }Chạy ví dụ:
4.3- Sét đặt Style
Phương thức addClass(classes) được sử dụng để áp dụng các style vào các phần tử. Bạn có thể sử dụng nhiều css-class phân cách nhau bởi khoảng trắng.
attribute_applystyle.html
.selected {color: red; } .highlight {background: yellow;} function applyStyle() { $('h1').addClass('selected highlight'); $('h2').addClass('selected'); }Chạy ví dụ:
4.4- Các phương thức thao tác với thuộc tính
T.T Phương thức & Mô tả Ví dụ
1 attr( properties )
Sét key/value như các thuộc tính cho các phần tử phù hợp.
$(‘#id’).attr(‘href’)
$(‘a’).attr({href:’a.html’, alt:’a’})
2 attr( key, fn )
Sét đặt một giá trị được tính toán vào 1 thuộc tính duy nhất, cho tất cả các phần tử (element) phù hợp.
$(“table”).attr(“border”, function(index) { return “1px”; })
3 removeAttr( name )
Hủy bỏ một thuộc tính từ các phần tử phù hợp.
$(“table”).removeAttr(“border”);
4 hasClass( class )
Trả về true nếu class chỉ định nằm trên ít nhất một phần tử thuộc tập hợp các phần tử phù hợp.
$(‘h1’).hasClass(‘highlight’)
5 removeClass( class )
Loại bỏ lớp (hoặc nhiều lớp) chỉ định ra khỏi tập hợp các phần tử phù hợp.
$(‘h1’).removeClass(‘highlight’)
6 toggleClass( class )
Thêm lớp (class) chỉ định vào phần tử nếu nó không có, hoặc loại bỏ lớp này nếu nó đã có trên phần tử.
$(‘h1’).toggleClass(‘highlight’)
7 html( )
Trả về nội dung html (innerHTML) của phần tử phù hợp đầu tiên.
$(‘a’).html()
8 html( val )
Sét nội dung html vào tất cả các phần tử phù hợp.
$(‘a’).html(‘Go to new page’)
9 text( )
Lấy nội dung văn bản kết hợp của tất cả các phần tử phù hợp.
$(‘div’).text()
10 text( val )
Sét các nội dung văn bản của tất cả các phần tử phù hợp.
$(‘div’).text(‘Text content’)
11 val( )
Lấy giá trị đầu vào của phần tử trùng khớp đầu tiên.
$(“input”).val();
12 val( val )
$(“input”).val(‘New value’);
5- DOM Traversing
5.1- Traversing là gì?
jQuery traversing, có nghĩa là “di chuyển qua”, nó được sử dụng để tìm kiếm (hoặc lựa chọn) các phần tử HTML dựa trên quan hệ của nó với các phần tử khác. Bắt đầu tại các vị trí (các phần tử) được chọn và di chuyển cho tới khi bắt gặp các phần tử mà bạn mong muốn.
Hãy xem một tài liệu HTML và nó được chuyển thành một cấu trúc DOM (dạng cây).
5.2- jQuery Traversing – Ancestors
Một phần tử tổ tiên (ancestor element) là phần tử cha, ông, v..v.. của một phần tử nào đó.
Với jQuery bạn có thể di chuyển lên (traverse up) các nút cao hơn của cây DOM để tìm kiếm các phần tử ancestors của một phần tử.
jQuery có một vài phương thức cho phép bạn di chuyển lên (traverse up) các nút DOM cao hơn (Ancetors).
parent()
parents()
parentsUntil()
Phương thức parent() trả về phần tử cha trực tiếp của phần tử đang chọn.
Ví dụ tìm tất cả các phần tử cha của phần tử có class=’abc’.
traversing_parent.html
div, ul, li { width: 200px;padding: 5px; margin: 5px; border: 1px solid blue;} .abc {border: 1px solid red;} function highlightParent() { $('.abc').parent().css("background","#ccc"); }Chạy ví dụ:
5.2.2- parents
traversing_parents.html
div, ul, li { width: 200px;padding: 5px; margin: 5px; border: 1px solid blue;} .abc {border: 1px solid red;} function highlightParents() { $('.abc').parents('div').css("background","#ccc"); }Chạy ví dụ:
Phương thức parentsUntil() trả về tất cả các phần tử tổ tiên nằm giữa 2 phần tử gồm phần tử đang chọn và phần tử xác định trong tham số.
traversing_parentsUntil.html
div, span, ul, li , h2 {padding: 5px; margin: 5px; border: 1px solid blue;} function highlightParentsUntil() { $('h2').parentsUntil('div').css("border","2px solid red"); } li elementChạy ví dụ:
5.3- jQuery Traversing – Descendants
Tìm kiếm các phần tử hậu duệ (descendants) của các phần tử đã chọn. Chính là các phần tử con, cháu,…
jQuery cung cấp cho bạn 2 phương thức:
children()
find()
Phương thức này trả về tất cả các phần tử con trực tiếp của phần tử đang chọn.
traversing_children.html
div, span, ul, li , h2 {padding: 5px; margin: 5px; border: 1px solid blue;} function highlightChildren() { $('div').children().css("border","2px solid red"); } ul elementChạy ví dụ:
Tìm kiếm các phần tử phù hợp trong tập hợp các phần tử hậu duệ của phần tử đang được chọn.
traversing_find.html
div, h2 , ul, li {padding: 5px; margin: 5px; border: 1px solid blue;} function highlightFind() { $('div').find('h2').css("border","2px solid red"); }Chạy ví dụ:
5.4- jQuery Traversing – Siblings
Tìm kiếm các phần tử anh em, cùng phần tử cha với phần tử hiện tại.
jQuery cung cấp cho bạn một số phương thức tìm kiếm các phần tử anh em (sibling elements).
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
nextUntil(..) & prevUntil(..):
5.4.1- siblings(), next(), prev(), nextAll(), prevAll(), nextUntil(), prevUntil example
Các phương thức:
Phương thức Mô tả Ví dụ
siblings([selector]) Phương thức siblings() trả về tất cả các phần tử anh em của phần tử được chọn. $(‘h2’).siblings()
next([selector]) Phương thức next() trả về phần tử anh em kế tiếp của phần tử được chọn. $(‘h2’).next()
prev([selector]) $(‘h2’).prev()
nextAll([selector]) Phương thức nextAll() trả về tất cả các phần tử anh em kế tiếp của phần tử được chọn. $(‘h2’).nextAll()
prevAll([selector]) Phương thức prevAll() trả về tất cả cac phần tử anh em đứng trước phần tử được chọn. $(‘h2’).prevAll()
nextUntil(selector) Phương thức nextUntil() trả về các phần tử kế tiếp phần tử được chọn, cho tới khi gặp một phần tử phù hợp điều kiện của tham số. $(‘h2’).nextUntil(‘h4.blue’)
prevUntil(selector) Phương thức prevUntil() trả về các phần tử phía trước của phần tử đang được chọn, cho tới khi gặp một phần tử phù hợp điều kiện của tham số. $(‘h2’).prevUntil(‘h1’)
siblings(), next(), prev(), nextAll(), prevAll(), nextUntil(), prevUntil().
traversing_siblings.html
h1, h2, h4, p, div {padding: 5px; margin: 5px; border: 1px solid black;} h2 {border: 2px solid red;} .blue {border: 2px solid blue;} function clearAll() { $('h1, h2, h4, p, div').css("background","white"); } function highlightSiblings() { clearAll(); $('h2').siblings().css("background","yellow"); } function highlightNext() { clearAll(); $('h2').next().css("background","yellow"); } function highlightNextAll() { clearAll(); $('h2').nextAll().css("background","yellow"); } function highlightNextUntil() { clearAll(); $('h2').nextUntil('h4.blue').css("background","yellow"); } function highlightPrev() { clearAll(); $('h2').prev().css("background","yellow"); } function highlightPrevAll() { clearAll(); $('h2').prevAll().css("background","yellow"); } function highlightPrevUntil() { clearAll(); $('h2').prevUntil('h1').css("background","yellow"); }Chạy ví dụ:
5.5- jQuery Traversing – Filtering
Các phương thức:
Phương thức Mô tả Ví dụ:
eq(index) Phương thức eq() trả về một phần tử ứng với chỉ số trong tham số trong tập các phần tử được chọn. $(‘p’).eq(1)
filter(selector) Phương thức filter() cần bạn chỉ rõ tiêu chí trong tham số. Các phần tử không khớp với tiêu chí sẽ bị loại bỏ khỏi tập hợp đang chọn, và trả về các phần tử phù hợp. $(‘p’).filter(‘.abc’)
filter(fn) Loại bỏ tất cả các phần tử trong tập hợp được chọn mà không phù hợp với hàm được chỉ định (Trong tham số), trả về các phần tử còn lại.
first() Phương thức first() trả về phần tử đầu tiên trong danh sách được lựa chọn. $(‘p’).first()
has()
is(selector) Kiểm tra các phần tử đang được lựa chọn có phù hợp với một biểu thức trong tham số không, nếu ít nhất một phần tử phù hợp phương thức trả về true.
last() Phương thức last() trả về phần tử cuối cùng trong danh sách được lựa chọn. $(‘p’).last()
map(callback) Chuyển tập hợp các phần tử trong một đối tượng jQuery thành một tập hợp mảng (có thể là không chứa phần tử nào).
not(selector) Phương thức not() trả về tất cả các phần tử không khớp với tiêu chí trong tham số.
slice(start,[end]) Trả về một tập con của tập hợp đang chọn. $(‘p’).slice(1, 4) $(‘p’).slice(2)
Phương thức eq(index) trả về phần tử có chỉ số xác định trong tham số trong danh sách các phần tử đang được chọn.
Chỉ số được bắt đầu từ 0, như vậy phần tử đầu tiên có chỉ số là 0, chứ không phải 1.
Chỉ số được bắt đầu từ 0, như vậy phần tử đầu tiên có chỉ số là 0, chứ không phải 1.
$("p").eq(1);
Phương thức filter(selector) cần bạn chỉ rõ tiêu chí trong tham số. Các phần tử không khớp với tiêu chí sẽ bị loại bỏ khỏi tập hợp đang chọn, và trả về các phần tử phù hợp.
$("h3").filter(".abc");
Loại bỏ tất cả các phần tử trong tập hợp được chọn mà không phù hợp với hàm được chỉ định (Trong tham số), trả về các phần tử còn lại.
Tham số của hàm:
Ví dụ:
$('h4').filter(function(index, element) { if(index == 1) { return true; } if( $(element).hasClass('highlight') ) { return true; } return false; }).css('color','red');Xem ví dụ đầy đủ:
traversing_filter_fn.html
div, h2 , ul, li {padding: 5px; margin: 5px; border: 1px solid blue;} function highlightFilter() { $('h4').filter(function(index, element) { if(index == 1) { return true; } if( $(element).hasClass('highlight') ) { return true; } return false; }).css('color','red'); }Chạy ví dụ:
Phương thức not(selector) trả về tất cả các phần tử đang lựa chọn, và không khớp với tiêu chí trong tham số.
$('p').not('.abc')
Phương thức not(fn) trả về tất cả các phần tử đang lựa chọn mà không khớp với hàm fn.
Tham số của hàm:
Ví dụ:
$('h4').not(function(index, element) { if(index == 1) { return true; } if( $(element).hasClass('highlight') ) { return true; } return false; }).css('color','red');Xem ví dụ đầy đủ:
traversing_not_fn.html
div, h2 , ul, li {padding: 5px; margin: 5px; border: 1px solid blue;} function highlightNot() { $('h4').not(function(index, element) { if(index == 1) { return true; } if( $(element).hasClass('highlight') ) { return true; } return false; }).css('color','red'); }Chạy ví dụ:
Ví dụ:
$("div").has("p")traversing_has.html
p, div {padding: 5px; margin: 5px; border: 1px solid blue; width: 300px;} function highlightHas() { $('div').has("p").css('border','2px solid red'); }Chạy ví dụ:
6- jQuery Event
Các sự kiện được hỗ trợ trong mô hình DOM:
Kiểu sự kiện Sự kiện Mô tả
MOUSE EVENT
Xẩy ra khi có nhấn kép chuột
mouseenter Xẩy ra khi chuột đi vào vùng hiển thị của phần tử.
mouseleave Xẩy ra khi chuột ra khỏi vùng hiển thị của phần tử.
KEYBOARD EVENT keypress Xảy ra khi phím được nhấn và nhả.
keydown Xảy ra khi phím được nhấn.
keyup Xảy ra khi phím được nhả ra.
FORM EVENT submit Xảy ra khi form được gửi (submit)
change Xảy ra khi các phần tử (element) thay đổi.
focus Xảy ra khi các yếu phần tử được chọn.
blur Xảy ra khi các yếu phần tử mất lựa chọn.
DOCUMENT/WINDOW EVENT load Xảy ra khi tài liệu (document) được tải.
resize Xẩy ra khi window thay đổi kích thước.
scroll Xẩy ra khi window cuộn
unload Xẩy ra khi tài liệu bị hủy bỏ (unloaded).
error Xẩy ra khi có lỗi tải hoặc hủy tải,..(loading or unloading).
6.1- Cách thông dụng để xử lý sự kiện
$(document).ready(function() { $(this).css("background:#ccc"); }); $(this).css("background:yellow"); }); });
event_helloworld.html
h3 {border: 1px solid blue; padding: 5px; width: 200px;} h4 {border: 1px solid red; padding: 5px; width: 200px;} $(document).ready(function() { $(this).css("background","#ccc"); }); $(this).css("background","yellow"); }); });Chạy ví dụ:
6.2- Sử dụng bind()/unbind()
Bạn có thể sử dụng bind() để gắn một hàm xử lý sự kiện cho các phần tử.
Cú pháp:
selector.bind( eventType[, eventData], handler)
eventData − Đây là tham số không bắt buộc là bản đồ (map) dữ liệu sẽ được chuyển vào cho hàm điều điều khiển sự kiện (event handler).
handler − Là một hàm để thực thi mỗi khi sự kiện xuất hiện.
Ví dụ:
$(document).ready(function() { alert('Hi there!'); }); });Bạn có thể sử dụng unbind() để loại bỏ bộ điều khiển sự kiện (event handler)
Cú pháp:
selector.unbind(eventType, handler) selector.unbind(eventType)
handler − Nếu được cung cấp, nó sẽ chỉ định cụ thể cái sẽ được loại bỏ.
event_bind_unbind.html
h3 {border: 1px solid blue; padding: 5px; width: 300px;} h4 {border: 1px solid red; padding: 5px; width: 300px;} p {border: 1px solid green; padding: 5px; width: 300px;} $(document).ready(function() { $(this).css("background","#ccc"); }); $(this).css("background","yellow"); }); $("h3").css("background", "white"); }); });Chạy ví dụ:
6.3- Các thuộc tính của Event (Event Attribute)
S.NO. Thuộc tính Mô tả
1 altKey Trả về true nếu phím Alt được nhấn khi sự kiện xẩy ra, ngược lại trả về false. Phím Alt thường được ghi nhãn là Option trên các bàn phím Mac.
2 ctrlKey Trả về true nếu phím Ctrl được nhấn khi sự kiện xẩy ra, ngược lại trả về false.
3 data Giá trị, nếu có, nó sẽ được chuyển vào tham số thứ hai của bind() khi thiết lập hàm xử lý.
4 keyCode Dùng cho sự kiện keyup hoặc keydown, nó trả về mã ký tự đã được nhấn.
5 metaKey Giá trị là true nếu phím Meta được nhấn khi sự kiện xẩy ra, ngược lại là false. Nút Meta chính là Ctrl trên các PC và là nút Command trên Mac.
6 pageX Sử dụng cho các sự kiện chuột, tọa độ vị trí theo chiều ngang mà sự kiện phát ra, tương đối so với trang hiện tại.
7 pageY Sử dụng cho các sự kiện chuột, tọa độ vị trí theo chiều thẳng đứng mà sự kiện phát ra, tính tương đối so với trang hiện tại.
8 relatedTarget Sử dụng cho các sự kiện chuột, xác định trạng thái con trỏ đi ra hay đi vào khi sự kiện phát ra.
9 screenX Sử dụng cho sự kiện chuột, xác định tạo độ theo chiều ngang mà sự kiện phát ra, so với màn hình hiện tại.
10 screenY Sử dụng cho sự kiện chuột, xác định tạo độ theo chiều thẳng đứng mà sự kiện phát ra, so với màn hình hiện tại.
11 shiftKey Giá trị true nếu nút Shift bị nhấn tại thời điểm sự kiện phát ra, ngược lại là false.
12 target Xác định phần tử phát ra sự kiện.
13 timeStamp Thời gian (tính bằng mili giây) khi sự kiện được tạo ra.
14 type
15 which Đối với sự kiện bàn phím, chỉ định mã có kiểu số (numeric code) cho phím gây ra sự kiện, nó là mã của ký tự đã nhấn, đối với sự kiện chuột nó xác định nút nào đã bị nhấn, trái, giữa hay phải (1 là nhấn trái, 2 nhấn nút giữa, 3 nhấn phải).
Xem ví dụ minh họa:
event_attribute.html
div {margin : 10px; width: 250px; height: 150px; float: left; } $(document).ready(function() { ; $('div#log').html(s); }); }); DIV 1 DIV 2Chạy ví dụ:
6.4- Các phương thức của Event (Event methods)
No. Phương thức Mô tả
1 preventDefault() Ngăn chặn trình duyệt thực hiện các hành động mặc định.
2 isDefaultPrevented() Trả về true nếu đã gọi event.preventDefault().
3 stopPropagation() Ngăn chặn sự lan truyền sự kiện này tới các phần tử cha, các phần tử cha sẽ không nhận biết được sự kiện này, hoặc kích hoạt các sự kiện của nó.
4 isPropagationStopped() Trả về true nếu event.stopPropagation() đã từng được gọi trong sự kiện này.
5 stopImmediatePropagation() Ngăn chặn các phần còn lại của các bộ xử lý đang được thực thi.
6 isImmediatePropagationStopped() Trả về true nếu event.stopImmediatePropagation() đã từng được gọi trong sự kiện này.
Ví dụ khi bạn nhấn chuột phải vào trang web, mặc định một cửa sổ popup hiển thị lên. Bạn có thể sử dụng preventDefault() để ngăn chặn hành động mặc định này của trình duyệt.
$("div").bind('contextmenu', function(event) { if( $(this).attr('id') == "div2") { event.preventDefault(); } }); event.preventDefault(); alert("a element not working!!"); });Xem ví dụ đầy đủ:
event_preventDefault.html
div {margin : 10px; padding:5px; width: 250px; height: 150px; float: left; } $(document).ready(function() { $("div").bind('contextmenu', function(event) { if( $(this).attr('id') == "div2") { event.preventDefault(); } }); event.preventDefault(); alert("a element not working!!"); }); }); Disable context menuChạy ví dụ:
event_stopPropagation.html
div {margin : 20px; padding:5px; float: left; } .outerDiv {background: red; width: 250px; height: 150px; } .innerDiv {background: yellow; width: 250px; height: 100px; } $(document).ready(function() { if( $(this).attr('id') == "stopDiv") { event.stopPropagation(); } }); }); Outer Div Inner Div Outer Div Inner Div (stopPropagation)Chạy ví dụ:
Jquery Là Gì? Tổng Quan Và Hướng Dẫn Sử Dụng Jquery
jQuery là gì?
jQuery là thư viện được viết từ JavaScript, jQuery giúp xây dựng các chức năng bằng Javascript dễ dàng, nhanh và giàu tính năng hơn.
jQuery được tích hợp nhiều module khác nhau. Từ module hiệu ứng cho đến module truy vấn selector. jQuery được sử dụng đến 99% trên tổng số website trên thế giới. Vậy các module chính của jQuery là gì?
Các module phổ biến của jQuery bao gồm:
Ajax – xử lý Ajax
Atributes – Xử lý các thuộc tính của đối tượng HTML
Effect – xử lý hiệu ứng
Event – xử lý sự kiện
DOM – xử lý Data Object Model
Selector – xử lý luồng lách giữa các đối tượng HTML
jQuery không phải là một ngôn ngữ lập trình riêng biệt mà hoạt động liên kết với JavaScript. Với jQuery, bạn có thể làm được nhiều việc hơn mà lại tốn ít công sức hơn. jQuery cung cấp các API giúp việc duyệt tài liệu HTML, hoạt ảnh, xử lý sự kiện và thao tác AJAX đơn giản hơn. jQuery hoạt động tốt trên nhiều loại trình duyệt khác nhau. Một trong những đối thủ nặng ký của jQuery đó là JS Framework.
Bạn có thể tìm hiểu thêm về AJAX trong bài viết: “”
Lịch sử của jQuery
jQuery được phát hành vào tháng 1 năm 2006 bởi John Resig tại BarCamp NYC. Nó được duy trì và phát triển bởi một nhóm các nhà phát triển của Google đứng đầu là Timmy Wilson.
Các tính năng quan trọng của jQuery
Các tính năng quan trọng của jQuery là gì? Vì sao jQuery trở nên phổ biến và hữu dụng đến như vậy?
: jQuery là một thư viện khá gọn nhẹ – có kích cỡ khoảng 19KB (gzipped).
Tương thích đa nền tảng: Nó tự động sửa lỗi và chạy được trên mọi trình duyệt phổ biến như Chrome, Firefox, Safari, MS Edge, IE, Android và iOS.
Dễ dàng tạo Ajax: Nhờ thư viện jQuery, code được viết bởi Ajax có thể dễ dàng tương tác với server và cập nhật nội dung tự động mà không cần phải tải lại trang.
Xử lý nhanh nhạy thao tác DOM: jQuery giúp lựa chọn các phần tử DOM để traverse (duyệt) một cách dễ dàng, và chỉnh sửa nội dung của chúng bằng cách sử dụng Selector mã nguồn mở, mà còn được gọi là Sizzle.
Đơn giản hóa việc tạo hiệu ứng: Giống với code snippet có hiệu ứng animation, nó phủ các dòng code và bạn chỉ việc thêm biến/nội dung vào thôi.
Hỗ trợ tốt phương thức sự kiện HTML: Xử lý sự kiện − jQuery xử lý các sự kiện đa dạng mà không làm cho HTML code trở nên lộn xộn với các Event Handler.
Ưu điểm của jQuery là gì?
Ưu điểm của jQuery thì vừa quan trọng vừa đáng giá:
jQuery xử lý code rất nhanh và có khả năng mở rộng.
jQuery tạo điều kiện cho người dùng viết các mã chức năng bằng các dòng tối thiểu.
jQuery cải thiện hiệu suất lập trình web.
jQuery phát triển các ứng dụng có tương thích với trình duyệt.
Hầu hết các tính năng mới của trình duyệt mới đều được jQuery sử dụng.
Cách cài đặt jQuery
Download jQuery
Cách thứ nhất là tải thư viện jQuery từ trang http://jQuery.com/download. Lựa chọn phiên bản nào tuỳ thuộc vào hai yếu tố: trình duyệt web mà bạn đang sử dụng và nơi bạn dùng jQuerySau đó, bạn có thể include thư viện jQuery vào trong HTML file của bạn như sau:
$(document).ready(function(){
document.write(“Hello, World!”);
});
Tại dòng:
Với src=”……” bạn điều hướng tới nơi lưu trữ file trên máy tính hoặc trên web hosting của bạn.
Sử dụng CDN
Cách thứ hai để liên kết thư viện jQuery đến trang web là dùng CDN ( Content Delivery Network). Với cách làm này thay vì tải thư viện jQuery về hay máy chủ, chúng ta sẽ liên kết đến thư viện jQuery của một số nhà cung cấp như cộng đồng jQuery, Google hay Microsoft. Các CDN phổ biến và tin cậy nhất hiện nay là:
Bạn có thể include thư viện jQuery vào trong HTML code một cách trực tiếp từ Content Delivery Network ( CDN). Bạn nên xem bài viết:”CDN là gì?” để hiểu rõ về CDN hơn.
Ví dụ:
Bây giờ chúng ta viết lại ví dụ trên bởi sử dụng thư viện jQuery từ Google CDN.
$(document).ready(function(){
document.write(“Hello, World!”);
});
Với:
Chứa đường dẫn file CDN jQuery mà bạn cần thêm vào src:”…….”
Các thuật ngữ cần biết của jQuery
jQuery chứa đựng khá nhiều những thuật ngữ khác nhau. Mắt Bão sẽ dẫn ra một số những thuật ngữ quan trọng nhất của jQuery mà các bạn cần biết:
jQuery Selectors
jQuery Tag Name
Tag ID
Tag Class
Function trong jQuery
Callback trong jQuery
Các Closure trong jQuery
Proxy Pattern trong jQuery
Phạm vi (Scope) trong jQuery
Các tham số trong jQuery
Context trong jQuery
jQuery Selectors là gì?
jQuery Selectors được sử dụng để chọn và thao tác các phần tử HTML. Đây là phần rất quan trọng trong thư viện jQuery. Với jQuery Selectors, bạn có thể tìm hoặc chọn các phần tử HTML dựa trên ID, classes, attributes, types và nhiều thứ khác từ DOM. Mỗi jQuery Selector bắt đầu bằng ký tự $ (). Kí tự này được gọi là factory function.
jQuery Tag Name là gì?
Nó đại diện cho một tên thẻ có sẵn trong DOM.
Ví dụ: $ (‘p’) chọn tất cả các đoạn văn ‘p’ trong tài liệu.
Tag ID
Tag ID đại diện cho một thẻ có sẵn với một ID cụ thể trong DOM.
Ví dụ: $ (‘# real-id’) chọn một phần tử cụ thể trong tài liệu có ID của real-id.
Tag Class
Tag Class đại diện cho một tag có sẵn với một class cụ thể trong DOM.
Ví dụ: $ (‘real-class’) chọn tất cả các phần tử trong tài liệu có class của real-class.
Function trong jQuery là gì?
Một hàm được đặt tên có thể được định nghĩa bởi sử dụng từ khóa function như sau:
function named(){ }Một hàm ẩn danh có thể được gán tới một biến hoặc được truyền tới một phương thức như sau:
var handler = function (){ }jQuery sử dụng rất nhiều hàm ẩn danh như sau:
$(document).ready(function(){ });Callback trong jQuery là gì?
Một callback là một hàm thuần JavaScript được truyền một số phương thức như là một tham số hoặc tùy chọn. Một số callback là các sự kiện, được gọi để cung cấp cho người sử dụng cơ hội để phản ứng lại khi một trạng thái nào đó được kích hoạt.
Hệ thống sự kiện trong jQuery sử dụng các callback này ở khắp mọi nơi, ví dụ:
});
Hầu hết callback cung cấp các tham số và một context. Trong ví dụ event-handler, callback được gọi với một tham số, một Event.
Một số callback được yêu cầu để trả về cái gì đó, cái khác trả về giá trị tùy ý. Để ngăn cản sự đệ trình form, một xử lý sự kiện Submit có thể trả về false như sau:
$("#myform").submit(function() { return false; });Các Closure trong jQuery
Các Closure được tạo bất cứ khi nào một biến được định nghĩa bên ngoài phạm vi hiện tại được truy cập từ bên trong phạm vi nội bộ.
Ví dụ sau chỉ cách biến counter là nhìn thấy trong các hàm create, increment, và print, nhưng không nhìn thấy bên ngoài chúng.
function create() { var counter = 0; return { increment: function() { counter++; }, print: function() { console.log(counter); } } } var c = create(); c.increment();Pattern này cho phép bạn tạo các đối tượng với các phương thức, mà hoạt động trên dữ liệu, mà không thấy được ở bên ngoài. Bạn ghi nhớ rằng, data hiding là khái niệm rất cơ bản của các chương trình hướng đối tượng.
Proxy Pattern trong jQuery là gì?
Một Proxy có thể được sử dụng để điều khiển sự truy cập tới phần tử khác. Proxy thi hành cùng giao diện cho đối tượng khác này và truyền trên bất kỳ phương thức nào tới nó. Đối tượng khác này thường được gọi là Real Subject.
Một Proxy có thể được khởi tạo tại vị trí của Real Subject này và cho phép nó để được truy cập ở chế độ từ xa. Chúng ta có thể lưu giữ phương thức setArray của jQuery trong một Closure và viết đè lên (overwrite) nó như sau:
(function() { var proxied = jQuery.fn.setArray; jQuery.fn.setArray = function() { console.log(this, arguments); return proxied.apply(this, arguments); }; })();Ví dụ trên bao code của nó trong một hàm để ẩn biến proxied. Sau đó, Proxy này log tất cả các lời gọi phương thức và ủy thác lời gọi đó cho phương thức ban đầu. Sử dụng apply(this, arguments) bảo đảm cho việc người gọi không thể chú ý về sự khác nhau giữa phương thức ban đầu và phương thức được ủy nhiệm.
Phạm vi (Scope) trong jQuery là gì?
Phạm vi của một biến là khu vực trong chương trình của bạn mà biến đó được định nghĩa. Biến trong JavaScript sẽ chỉ có hai phạm vi:
Các biến Global: Một biến Global có phạm vi chung, nghĩa là nó được định nghĩa ở mọi nơi trong JavaScript code của bạn.
Các biến Local: Một biến Local sẽ chỉ nhìn thấy bên trong một hàm nơi nó được định nghĩa. Các tham số hàm luôn luôn là Local cho hàm đó.
Local có quyền ưu tiên cao hơn biến Global mà có cùng tên.
function ( ) { }
Các tham số trong jQuery là gì?
Các tham số trong JavaScript là một loại của Array mà có thuộc tính length. Ví dụ sau giải thích về điều này:
function func(x){ console.log(typeof x, arguments.length); }Đối tượng Argument cũng có một thuộc tính callee, mà tham chiếu đến hàm bạn đang ở trong đó. Ví dụ:
function func() { return arguments.callee; }Từ khóa nổi tiếng trong JavaScript là this tham chiếu tới Context hiện tại. Trong một hàm, this có thể thay đổi, phụ thuộc cách hàm đó được gọi.
$(document).ready(function() { }); });Bạn có thể xác định Context cho một lần hàm bởi sử dụng các phương thức call() và apply().
Sự khác nhau giữa chúng là cách chúng truyền các tham số.
call() truyền tất cả các tham số thông qua các tham số tới hàm
Trong khi apply() chấp nhận một mảng như là các tham số.
function scope() { console.log(this, arguments.length); }scope()
Hướng dẫn sử dụng jQuery cơ bản
Gọi hàm thư viện jQuery
Custom Script trong jQuery
Sử dụng nhiều thư viện trong jQuery
Gọi một hàm thư viện jQuery
Nếu bạn muốn để một sự kiện làm việc trên trang của bạn, bạn nên gọi nó bên trong hàm $(document).ready(). Mọi thứ bên trong sẽ tải ngay sau khi DOM được tải và trước khi nội dung trang được tải.
Để làm điều này, chúng ta đăng ký một sự kiện đã sẵn sàng cho tài liệu như sau:
$(document).ready(function() {
});
$(document).ready(function() {
});
Các hàm có sẵn trong jQuery là gì?
JavaScript đi kèm một tập hợp các hàm hữu ích gắn liền với nó. Những phương thức này có thể được sử dụng để thao tác String, Number, và Date.
Bảng dưới liệt kê các hàm JavaScript quan trọng:
charAt() Trả về ký tự tại chỉ mục (index) đã cho.
concat() Kết nối hai chuỗi văn bản và trả về một chuỗi mới.
forEach() Gọi một hàm cho mỗi phần tử của một mảng.
indexOf() Trả về chỉ mục về sự xuất hiện đầu tiên bên trong việc gọi đối tượng String với giá trị đã cho, hoặc -1 nếu không tìm thấy.
length() Trả về độ dài của chuỗi.
pop() Gỡ bỏ phần tử cuối của một mảng và trả về phần tử đó.
push() Thêm một hoặc nhiều phần tử tới phần cuối của một mảng và trả về độ dài mới của mảng đó.
reverse() Đảo ngược thứ tự các phần tử trong một mảng. Phần tử đầu tiên thành cuối cùng và cuối cùng thành đầu tiên.
sort() Sắp xếp phân loại các phần tử của một mảng.
substr() Trả về các ký tự trong một mảng bắt đầu từ vị trí đã cho từ số các ký tự đã xác định.
toLowerCase() Trả về giá trị chuỗi đang gọi được biến đổi thành kiểu chữ thường.
toString() Trả về sự biểu diễn chuỗi của giá trị số.
toUpperCase() Trả về giá trị chuỗi đang gọi được biến đổi thành chữ hoa.
Custom Script trong jQuery là gì?
jQuery thực sự chạy tốt hơn khi bạn có riêng Custom Code trong một Custom JavaScript file: chúng tôi , như sau:
Bây giờ chúng ta bao chúng tôi này vào trong HTML file như sau:
Sử dụng nhiều thư viện trong jQuery
Trong jQuery, bạn có thể sử dụng nhiều thư viện khác nhau mà không gây sự xung đột giữa chúng. Ví dụ, bạn có thể dùng song hành thư viện jQuery và thư viện MooTool JavaScript cùng với nhau. Bạn có thể kiểm tra phương thức: jQuery - Phương thức noConflict để tìm hiểu thêm chi tiết.
Nhìn chung, jQuery đã đáp ứng nhu cầu của lập trình hiện đại đó là hạn chế việc lập trình nhiều, nhưng vẫn đảm bảo các yêu cầu, đúng như slogan của jQuery "write less, do more" (viết mã ít mà hiệu quả đạt được lại tối đa). Hy vọng qua bài viết từ Mắt Bão - nhà cung cấp tên miền website uy tín, bạn sử dụng jQuery để phát triển thiết kế web thành công.
Hướng Dẫn Sử Dụng Android Spinner
Khi người dùng nhấn vào Android Spinner, một danh sách sẽ được thả xuống chứa tất cả các giá trị, và người dùng có thể lựa chọn một giá trị.
Android Spinner có 2 chế độ (mode) với giao diện khác nhau hoàn toàn:
android:spinnerMode=”dropdown”
android:spinnerMode=”dialog”
android:spinnerMode=”dropdown”
android:spinnerMode=”dropdown”
android:spinnerMode=”dialog”
android:spinnerMode=”dialog”
2- Ví dụ: Spinner + ArrayAdapter
OK, Bây giờ chúng ta sẽ bắt đầu với một ví dụ đơn giản sử dụng Spinner và ArrayAdapter. Trong ví dụ này Spinner sẽ chứa một danh sách các đối tượng Employee:
Một Adapter giúp bạn kết hợp một Spinner-Item Layout Resource và dữ liệu để tạo ra một Spinner.
Trên Android Studio tạo mới một project:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:orientation="horizontal" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0" <Space android:layout_width="10dp" android:layout_height="wrap_content" <Spinner android:id="@+id/spinner_employee" android:layout_width="wrap_content" android:layout_height="wrap_content" package org.o7planning.spinnerexample; import android.os.Bundle; import android.view.View; import android.widget.Adapter; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.Spinner; import android.widget.Toast; import androidx.appcompat.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { private Spinner spinnerEmployee; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); this.spinnerEmployee = (Spinner) findViewById(R.id.spinner_employee); Employee[] employees = EmployeeDataUtils.getEmployees(); android.R.layout.simple_spinner_item, employees); adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); this.spinnerEmployee.setAdapter(adapter); this.spinnerEmployee.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override onItemSelectedHandler(parent, view, position, id); } @Override } }); } Adapter adapter = adapterView.getAdapter(); Employee employee = (Employee) adapter.getItem(position); Toast.makeText(getApplicationContext(), "Selected Employee: " + employee.getFullName() ,Toast.LENGTH_SHORT).show(); } } package org.o7planning.spinnerexample; public class Employee { private String firstName; private String lastName; private String position; private int salary; public Employee(String firstName, String lastName, String position, int salary) { this.firstName = firstName; this.lastName = lastName; this.position = position; this.salary = salary; } public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } public String getLastName() { return lastName; } public void setLastName(String lastName) { this.lastName = lastName; } public String getPosition() { return position; } public void setPosition(String position) { this.position = position; } public int getSalary() { return salary; } public void setSalary(int salary) { this.salary = salary; } public String getFullName() { return this.firstName + " " + this.lastName; } @Override public String toString() { return this.getFullName() + " - (" + this.position+")"; } } package org.o7planning.spinnerexample; public class EmployeeDataUtils { public static Employee[] getEmployees() { Employee emp1 = new Employee("James", "Smith", "Receptionist", 1000); Employee emp2 = new Employee("Michael", "Garcia", "CEO", 50000); Employee emp3 = new Employee("Robert", "Johnson", "Professional staff", 2000); return new Employee[] {emp1, emp2, emp3}; } }3- Ví dụ: Spinner + CustomAdapter
OK. Trên Android Studio tạo mới một project:
Name: CustomSpinnerAdapterExample
Package name: org.o7planning.customspinneradapterexample
Language: Java
Đầu tiên, chúng ta cần tạo một Layout Resource File để định nghĩa Layout cho Spinner Item:
Trên Android Studio, chọn thư mục “layout”, và chọn:
File Name: spinner_item_layout_resource.xml
Root element: LinearLayout
Thiết kế giao diện cho spinner_item_layout_resource:
spinner_item_layout_resource.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" <TextView android:id="@+id/textView_item_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" <TextView android:id="@+id/textView_item_percent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0"Giao diện chính của ứng dụng:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" <TextView android:id="@+id/textView" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="32dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:text="Select Language:" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="1.0" app:layout_constraintStart_toStartOf="parent" <Spinner android:id="@+id/spinner_language" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:spinnerMode="dialog" app:layout_constraintStart_toStartOf="parent" package org.o7planning.customspinneradapterexample; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.widget.Spinner; import java.util.List; public class MainActivity extends AppCompatActivity { private Spinner spinner; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); this.languages = LanguageDataUtils.getLanguages(); this.spinner = (Spinner) this.findViewById(R.id.spinner_language); CustomAdapter adapter = new CustomAdapter(MainActivity.this, R.layout.spinner_item_layout_resource, R.id.textView_item_name, R.id.textView_item_percent, this.languages); this.spinner.setAdapter(adapter); } } package org.o7planning.customspinneradapterexample; import android.app.Activity; import android.view.View; import android.view.ViewGroup; import android.view.LayoutInflater; import android.widget.BaseAdapter; import android.widget.TextView; import java.util.List; public class CustomAdapter extends BaseAdapter { private LayoutInflater flater; private int listItemLayoutResource; private int textViewItemNameId; private int textViewItemPercentId; public CustomAdapter(Activity context, int listItemLayoutResource, int textViewItemNameId, int textViewItemPercentId, this.listItemLayoutResource = listItemLayoutResource; this.textViewItemNameId = textViewItemNameId; this.textViewItemPercentId = textViewItemPercentId; chúng tôi = list; this.flater = context.getLayoutInflater(); } @Override public int getCount() { if(this.list == null) { return 0; } return this.list.size(); } @Override public Object getItem(int position) { return this.list.get(position); } @Override public long getItemId(int position) { Language language = (Language) this.getItem(position); return language.getId(); } @Override public View getView(int position, View convertView, ViewGroup parent) { Language language = (Language) getItem(position); View rowView = this.flater.inflate(this.listItemLayoutResource, null,true); TextView textViewItemName = (TextView) rowView.findViewById(this.textViewItemNameId); textViewItemName.setText(language.getName()); TextView textViewItemPercent = (TextView) rowView.findViewById(textViewItemPercentId); textViewItemPercent.setText(language.getPercent() + "%"); return rowView; } } package org.o7planning.customspinneradapterexample; public class Language { private long id; private String name; private float percent; public Language(long id, String name, float percent) { chúng tôi = id; chúng tôi = name; this.percent = percent; } public long getId() { return id; } public void setId(long id) { chúng tôi = id; } public String getName() { return name; } public void setName(String name) { chúng tôi = name; } public float getPercent() { return percent; } public void setPercent(float percent) { this.percent = percent; } } package org.o7planning.customspinneradapterexample; import java.util.ArrayList; import java.util.List; public class LanguageDataUtils { Language javascript = new Language(1,"Javascript", 67.7f); Language htmlCss = new Language(2,"HTML/CSS", 63.1f); Language sql = new Language(3,"SQL", 54.7f); Language python = new Language(4,"Python", 44.1f); Language java = new Language(5, "Java", 40.2f); list.add(javascript); list.add(htmlCss); list.add(sql); list.add(python); list.add(java); return list; } }Hướng Dẫn Sử Dụng Webmail Prmail
Đăng nhập:
Mở trình duyệt web gõ địa chỉ : https://mail.prmail.vn bạn sẽ được chuyển đến màn hình đăng nhập.
(1) Email address: Địa chỉ email (VD: test@prmail.vn)
(2) Password: Mật khẩu email
Đăng xuất:
Thanh công cụ chính:
Hình 1.1
Trên hình 1.1 có chức năng như sau:
(2) Cập nhật email mới.
1.Trả lời email
Bạn có thể trả lời hoặc chuyển tiếp email bằng một trong các chức năng trên thanh công cụ trong tab Email.
Hình 1.2
2. Tìm kiếm email
Trong này bạn có thể thực hiện tìm kiếm cơ bản hoặc nâng cao. Đơn giản bạn chỉ cần nhập vào ô tìm kiếm và nhấn enter cho tìm kiếm cơ bản. Với tìm kiếm nâng cao, bạn nhấn vào kính lúp để hiển thị danh sách các lựa chọn tìm kiếm.
Hình 1.3
3. Hộp Thư
Hình 1.4
(1) Thư đến: Chứa email được gửi đến địa chỉ email của bạn.
(2) Thư nháp: Chứa email mà bạn chưa sẵn sàng gửi đi.
(3) Thư đi: Chứa email gửi đi của bạn.
(5) Thùng rác: Chứa thư bạn đã xóa ở (1),(2),(3),(4) .
PRMail cung cấp khả năng Tạo thư mục, Xóa thư mục và Quản lý thư mục của hệ thống (hoặc thư mục của người dùng) giúp việc tùy chỉnh bộ lọc thư phân loại thư tốt hơn thuận tiện cho người sử dụng.
Hình 1.5
Trong (3) Quản lý thư mục ta có thể biết được số lượng thư chứa trong từng hòm thư cũng như dung lượng kb của từng hòm thư thông qua các thông số hiển thị trong Quản lý thư mục. Trong này bạn sẽ xem được thông tin “Thư mục của hệ thống” và “Thư mục của người dùng” (hình 1.6).
Hình 1.6
(2) Thêm thư mục con vào thư mục gốc.
5. Bộ Lọc
Hình 1.7
(1) Chưa đọc: Chứa những email chưa đọc trong thư mục hiện thời (Thư đến, Thư Spam…).
(3) Bạn bè: Lọc tất cả các email của các địa chỉ email có ở danh sách nhóm bạn bè trong thư mục hiện thời (Thư đến, Thư đi, Thư nháp…).
(4) Bản tin: Chứa email bản tin.
(5) Thông báo: Chứa email thông báo.
(6) Gắn cờ: Lọc các email quan trọng được gắp cờ trong thư mục hiện thời (Thư đến, Thư Spam…).
II. Danh bạ
Hình 2.1
(1) Cá nhân: Thông tin cá nhân của bạn (địa chỉ email, họ tên, số điện thoại…).
(2) Ghi nhớ: Lưu những địa chỉ email bạn đã liên hệ .
(3) Yêu thích: Lưu những địa chỉ email liên hệ thường xuyên của bạn.
(4) Chung: Lưu những địa chỉ email trong cùng một nhóm, cùng một cơ quan hay cùng một công ty.
(5) Chia sẻ: Chia sẻ địa chỉ email cho một hay nhiều địa chỉ email.
(6)Tìm kiếm liên hệ: Gõ tên địa chỉ email cần tìm kiếm rồi enter.
Chức năng thanh tác vụ :
Hình 2.2
Tạo mới địa chỉ email liên hệ :
Hình 2.3
(14) Điền họ tên địa chỉ email (ví dụ: Nguyen Van A).
(15) Điền địa chỉ email (ví dụ: test@domain.com).
(16) Chọn Lưu Liên hệ.
Ngoài ra bạn có thể điền Thêm thông tin tùy chọn nếu muốn.
III. Lịch
1. Ứng dụng Lịch
Hình 3.1
2. Xem theo Tháng và Tuần
Bạn cũng có thể nhấp vào nút “Tháng” hoặc “Tuần” để xem một tháng hoặc một tuần bên khung phải, cùng với hiển thị tổng quát sự kiện của mỗi ngày trong lịch hàng tháng hoặc hàng tuần.
Hình 3.2
3. Tạo một Lịch mới
Nhấn nút “+”(dấu cộng) trên đầu danh sách các lịch ở khung bên trái để thêm một lịch mới. Nhập tên lịch bạn muốn tạo và ấn Enter để tạo lịch mới. Bạn có thể xóa lịch bằng cách chọn chúng trong danh sách và nhấn nút “-” (dấu trừ).
Hình 3.3
4. Chia sẻ Lịch
Để cho phép người dùng email khác đọc, sửa lịch, đánh đấu lịch mà bạn muốn chia sẻ từ danh sách trong khung bên trái. Nhấn vào nút dấu bánh răng để thay đổi thiết lập của lịch.
Hình 3.4
Nhập tên địa chỉ email mà bạn muốn chia sẻ lịch của bạn. Sử dụng một trong hai cách như hình 3.5 ” Đọc/Viết Lịch truy cập ” hoặc ” Đọc Lịch truy cập “.
Hình 3.5
5. Thêm một sự kiện mới
6. Sửa đổi một sự kiện
Hình 3.6
7. Chia sẻ sự kiện
Khi tạo mới (hoặc chỉnh sửa) một sự kiện, bạn có thể mời người khác tham dự. Ở khung “Người tham dự”, gõ địa chỉ email người mà bạn muốn mời tham dự và nhấn “Lưu”. Hệ thống sẽ tự tạo một email mời tới dự sự kiện của bạn và gửi tới tất cả khách mời bạn đã chọn.
Hình 3.7
IV. Công Việc
1.Thêm mới Danh sách Công việc
Hình 4.1
2. Chia sẻ Công việc
Để chia sẻ một công việc với địa chỉ email người dùng khác bạn làm theo hướng dẫn Chia sẻ Lịch ở phần “III. Lịch”.
3. Tạo mới Công việc
(Trong hình 4.2 là ví dụ về thiết lập một Công việc mới)
Hình 4.2
V. Lưu Trữ
Đây là nơi bạn dùng để lưu trữ những file tài liệu, hình ảnh giúp bạn thuận lợi trong quá trình Đính kèm file khi soạn email mới.
Biểu tượng dùng để Upload File từ máy tính lên. Biểu tượng dùng để xóa File. Biểu tượng dùng để sửa tên File. Biểu tượng đánh dấu File.
1. Chức năng Thư mục
Hình 5.1
(1) Dùng để tạo thư mục người dùng mới.
(2) Dùng để xóa thư mục người dùng.
(3) Chứa file tải lên từ máy tính.
(4) Chứa file Tài liệu.
(5) Chứa file Âm nhạc.
(6) Chứa file Hình ảnh.
2. Tìm kiếm File
Để tìm kiếm File trong Lưu Trữ bạn gõ tên file cần tìm vào khung tìm kiếm và Enter.
Hình 5.2
VI. Thiết Lập
(1) Thiết lập Webmail
(2) Lọc thư Spam
(3) Bộ lọc thư
(4) Tùy chọn thư
(5) Thay đổi Mật khẩu
1. Thiết lập Webmail
Hình 6.1
(1) Tên tài khoản: Đây là tên tài khoản email của bạn (ví dụ: test@prmail.vn).
(2) Dung lượng: Thông báo dung lượng của bạn đã dùng (bao gồm Thư, file đính kèm, tài liệu, music…) trên tổng dung lượng sử dụng. Ví dụ: Ở mục (2) thông báo cho bạn biết đã dùng hết 81.9 MB trên tổng dung lượng 1024MB sử dụng (chiếm 8% dung lượng trên tổng 100%).
(3) Tên thật: Cho phép bạn dùng tên thật thay cho tên đăng nhập tài khoản email của bạn, tên của bạn sẽ xuất hiện trong các email gửi đi (ví dụ: Nguyen Van A).
(4) Reply To: Cho phép bạn chỉ định một tài khoản email khác ngoài tài khoản email bạn đang đăng nhập. Khi người nhận thư của bạn, thư phản hồi sẽ được tự động gửi về tài khoản email được chỉ định (ví dụ: nva295@gmail.com).
Hình 6.2
(7) Lưu các email đã gửi ở thư mục hiện tại: Lưu các email gửi đi ở thư mục hiện tại cho phép xây dựng và theo dõi chủ đề dễ dàng hơn.
Hình 6.3
(8) Hiển thị chữ trên thanh tab: Công tắc hiển thị text trên thanh tab (ON/OFF).
(9) Hiển thị hình email: Tự động hiển thị hình ảnh trong các tin nhắn email (ON/OFF).
(10) Chuyển links text thành đường dẫn Urls: Tự động chuyển đổi plain text links thành đường dẫn url trong nội dung email (ON/OFF).
(11) Kích hoạt thư nháp: Lưu thư nháp tự động khi viết email.
(12) Thông Báo: Kích hoạt tính năng tự động kiểm tra email được chọn. Tuỳ chỉnh thông báo “âm thanh” hoặc “biểu tượng” cho các tin nhắn mới trên các trình duyệt được hỗ trợ.
(13) Xóa rác khi thoát: Tự động xóa tất cả mail trong thư mục “Thùng rác” khi Thoát.
(14) Nút hoạt động trên thùng rác: Chọn xử lý của nút Xoá rác, chỉ áp dụng khi bấm vào nút Xoá rác. Khi kéo thả vào Thùng rác sẽ là di chuyển email vào Thùng rác (move selected mail to trash / permanently delete selected mail).
Hình 6.4
(15) Hiển thị mặc định: Chọn chế độ hiển thị giao diện Webmail .
2 pane: Hiển thị giao diện Webmail thành hai phần “Thư mục và phần Subject”. Khi xem email sẽ chuyển sang một tab mới.
3 pane: Hiển thị giao diện Webmail thành ba phần “Thư mục, Subject và nội dung mail”. Khi xem email nội dung sẽ hiển thị ở phía bên phải webmail.
(16) Kích hoạt giao diện đơn giản: Hỗ trợ giao diện rút gọn dành cho di động.
(17) Kích hoạt xem trước tin nhắn: Xem trước một vài dòng trên mỗi nội dung thư.
(18) Cho phép các ổ địa chỉ mở rộng: Luôn hiển thị ô “CC và BCC” (ON/OFF).
(19) Giao diện ngô ngữ: Chọn ngôn ngữ hiển thị giao diện Webmail (Tiếng Việt, English,…).
(20) Hiển thị ngày: Chọn định dạng thời gian cho ngày nhận e-mail (Thời gian từ lúc giao thư, DD/MM/YY, MM/DD/YY).
(21) Thư trên mỗi trang: Chọn số lượng email hiển thị trong mỗi trang (10, 25, 50,…).
(22) Múi giờ: Chỉ định múi giờ của bạn cho việc tính ngày trong giao diện Web.
(23) Thiết lập ngày đầu tiên của tuần: bạn có thể chọn ngày đầu tiên của tuần theo sở thích cá nhân của mình ( Thư hai, Thứ ba, Thứ tư,…).
(24) Chữ ký: Nhập một vài thông tin về bạn ( Họ tên, Số điện thoại, địa chỉ nhà riêng, địa chỉ nơi làm việc,…). Chữ ký của bạn sẽ được thêm vào mỗi email mới.
Hình 6.5
2. Lọc thư Spam
Hình 6.6
(1) Độ nhạy lọc thư Spam: Điều chỉnh độ nhạy bộ lọc Spam. Đặt mức càng thấp thì càng nhiều thư sẽ bị phân loại là Spam ( Có các mức độ từ 1 à 20).
(2) Xử lý thư Spam: Nếu một email được phân loại là Spam, lựa chọn hành động để xử lý nó (Chuyển vào thư mục Spam, Hủy thư, Đánh dấu SPAM mặc định).
(3) Thẻ Spam: Khi một email được đánh dấu là Spam, nó sẽ bị gắp giá trị của thẻ Spam vào phần mở đầu thư.
Hình 6.7
(4) Danh sách Whitelist: Chỉ định một danh sách các địa chỉ email và tên miền vào danh sách đáng tin. Mỗi mục phải trên một dòng riêng. Bất kể email hay tên miền nào phù hợp sẽ được tự động gắn cờ đáng tin cậy mà không bị phân loại là thư Spam (ví dụ: nguyuenvana@prmail.vn, nguyenvanb@prmail.vn). Như hình 6.7.
(5) Danh sách Blacklist: Chỉ định một danh sách địa chỉ email và tên miền không đáng tin. Mỗi mục phải nằm trên một dòng riêng. Bất cứ email hay tên miền nào phù hợp sẽ được tự động phân loại là thư Spam (ví dụ: banhangtructuyen@domain.vn, muabanonline@domain.vn). Như hình 6.7.
3. Bộ lọc thư
Hình 6.8
Hình 6.9
(2) Danh sách bộ lọc có thể tùy chỉnh (xóa / Chỉnh sửa).
(3) Tích chọn bộ lọc cần xóa hoặc tất cả rồi nhấp vào “Xóa lựa chọn”.
(4) Quy tắc: Chọn quy tắc (Đến từ, Gửi tới, Tiêu đề, Chứa, Không phải là,…) nhập vào tên địa chỉ email, cụm danh từ… (ví dụ: cthung@prmail.vn, mua bán,..).
(5) Thêm hay bớt một hay nhiều quy tắc cho bộ lọc bằng dấu “+ hoặc -” (dấu cộng hoặc dấu trừ).
(6) Chuyển tới: Chỉ định thư mục email sẽ đưa tới (inbox, spam, trash,…)
(7) Sau khi thiết lập quy tắc và chọn thư mục email sẽ đưa tới kích vào “Thêm bộ lọc” để thêm vào danh sách bộ lọc.
4. Tùy chọn thư
Hình 6.10
(1) Bật chuyển tiếp thư: (ON/OFF) Cho phép chuyển tiếp email gửi tới địa chỉ email của bạn tới địa chỉ email khác. (Lưu ý rằng khi kích hoạt tính năng này hệ thống sẽ chuyển tiếp thư mà không lưu trữ).
(2) Địa chỉ chuyển tiếp: Nhập email được chọn để chuyển tiếp vào danh sách chuyển tiếp email của bạn (ví dụ: support@prmail.vn). Như trong hình 6.10.
Hình 6.11
(3) Kích hoạt trả lợi tự động: (ON/OFF) Cho phép tự động trả lời tới địa chỉ email của những email chưa xem bằng nội dung bạn đã soạn trước.
(Trong hình 6.11 là ví dụ về Nội dung Trả lời tự động ).
5. Thay đổi mật khẩu
Hình 6.12
(1) Mật khẩu hiện thời: Nhập mật khẩu email hiện tại của bạn.
(2) Mật khẩu mới: Nhập mật khẩu mới bạn muốn đặt thay thế mật khẩu hiện thời.
(3) Xác nhận mật khẩu: Nhập lại mật khẩu mới của bạn.
Làm thế nào để vượt qua đối thủ cạnh tranh?
Bạn cần website để giới thiệu dịch vụ?
Cho đến lúc này, điều mà bạn đang quan tâm có lẽ là muốn tìm hiểu thêm về dịch vụ thiết kế website và Công ty chúng tôi?
SỞ HỮU NGAY WEB CHUYÊN NGHIỆP TẠI ADC VIỆT NAM ĐỂ VƯỢT QUA ĐỐI THỦ NGAY HÔM NAY!!!
Bạn đang xem bài viết Hướng Dẫn Sử Dụng Jquery trên website Bothankankanhatban.com. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!