Bạn đang xem bài viết Hướng Dẫn Cách Làm, Sử Dụng References Chuẩn được cập nhật mới nhất trên website Rafs.edu.vn. 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 năng References cũng được Word hỗ trợ bằng 1 tab riêng biệt với với các chức năng tương tự như kể ở trên chứng tỏ rằng nó quan trọng cơ nào trong soạn thảo văn bản. Khi trích dẫn tài liệu cũng có nhiều bạn làm theo kiểu thủ công là cứ đánh dấu rồi ghi danh sách bình thường ra. Làm vậy cũng không sai, nhưng sẽ khó chỉnh sửa và update thông tin
Trước tiên với các phiên bản word 2007 2010 2013 2016 trở lên thì các bạn có thể dễ dàng thao tác References bằng tab nay. Sau khi chọn các bạn chọn Manage Sources để tạo và quản lý sách các bạn cần cho vào tài liệu
1 cửa sổ tạo nguồn tài liệu tham khảo sẽ hiển thị lên
Type of Source: Loại sách tham khảo là gì có rất nhiều thể loại khác nhau bạn có thể chọn cho hợp lý hoặc chọn mặc định là Book
Languague: Ngôn ngữ chọn mặc định hoặc ngôn ngữ của cuốn sách đó
Author: Tác giả cuốn sách
Corporate Autor: Đồng tác giả
Titile: Tự đề của sách
Year: Năm xuất bản
City: Thành phố
Publisher: Nhà xuất bản
Các bạn sẽ thêm thông tin sách của mình vào
Ví dụ mình tạo 1 cuốn sách đầu tư thông minh của Graham, cuốn này sẽ thêm vào Source Manager – Quản lý nguồn tham khảo, tiếp tục các bạn chọn New để thêm những cuốn sách tham khảo khác
Ví dụ ở đây mình thêm khoảng 7 cuốn sách khác nhau, tuy nhiên mình chỉ tham khảo trong văn bản 3 cuốn sách như hình phía dưới mình sẽ chọn 3 cuốn sách này và chọn Copy sang phần Current list
Sau khi copy chúng ta sẽ có danh sách tham khảo sử dụng là 3 cuốn, các bạn cũng lưu ý là dấu check đằng trước nếu là check thì là đã sử dụng ? là chưa sử dụng, nếu bạn copy nhiều tài liệu sang nhưng chưa insert vào văn bản thì sẽ hiển thị dấu hỏi chấm. Xóa nếu không cần thiết vì cuốn sách không được sử dụng.
Chọn sách mà bạn đã tạo, ví dụ nãy mình tạo 3 cuốn sách và mình chọn cái đầu tiên
Kết quả sẽ hiển thị mặc định là tên tác giả và năm xuất bản, nếu bạn muốn hiển thị khác thì tiếp tục làm, mình chèn ví dụ mẫu 3 đoạn được trích dẫn từ 3 cuốn sách khác nhau
Nếu trong quá trình soạn thảo bạn có sửa thông tin sách, thêm sách mới, xóa sách cũ thì chỉ cần chỉnh sửa sau đó lựa chọn Update
Hướng Dẫn Sử Dụng Jquery
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ụ:
Hướng Dẫn Sử Dụng Xịt Khoáng Đúng Cách Dưỡng Ẩm Cho Da Mặt Chuẩn
Xịt khoáng là gì?
Mặc dù đã ‘thâm nhập’ vào thị trường dưỡng da ở Việt Nam khá lâu, nhưng cũng còn không ít người còn bỡ ngỡ vì chưa biết khái niệm xịt khoáng là gì. Các sản phẩm xịt khoáng đơn giản chỉ là 1 loại mỹ phẩm chăm sóc da dạng lỏng, mang trong mình rất nhiều dưỡng chất với tác dụng chủ yếu là dưỡng ẩm tốt nhất cho da mặt và được sử dụng ở dạng phun sương. Chúng ta có thể xếp nước xịt khoáng vào nhóm các sản phẩm dưỡng da và hỗ trợ giúp lớp trang điểm đẹp hơn.
Nếu xét về công dụng của xịt khoáng đối với làn da, thì
Đối với những chị em có làn da nhiều dầu: Thay vì phải thường xuyên sử dụng nhiều giấy thấm dầu dễ gây ảnh hưởng tới các lớp phấn trang điểm, chúng ta có thể dùng nước xịt khoáng để nhanh chóng điều tiết dầu, giảm lượng dầu tiết ra. Thêm vào đó, sau khi sử dụng xịt khoáng đúng cách thì bạn sẽ thấy làn da mịn màng, thoải mái vô cùng. Mát rượi chính là cảm giác đầu tiên khi mới dùng lần đầu.
Trong việc trang điểm, chúng ta có thể sử dụng xịt khoáng cả trước và sau khi trang điểm đều được. Nếu dùng trước, thì nước xịt khoáng sẽ giúp làm sạch da, giúp các lớp trang điểm dễ dàng bám chặt hơn cũng như hạn chế các tác hại của hóa chất mỹ phẩm. Nếu dùng sau, nước xịt khoáng sẽ làm cho lớp trang điểm mịn màng hơn, đều màu hơn. Nhờ đó, làn da sẽ trông giống da thật hơn cũng như không bị sần sùi dù là nhìn gần.
Hướng dẫn sử dụng xịt khoáng đúng cách để giúp làn da dưỡng ẩm hiệu quả
1. Khi nào nên dùng xịt khoáng?
Trước/sau khi trang điểm: Như đã nói rõ ở trên, không giống như những gì mọi người thường nghĩ, nước xịt khoáng không làm nhòe lớp trang điểm vì đơn giản các tinh chất nano siêu nhỏ thẩm thấu cực nhanh vào da mặt. Thay vào đó, nó giúp các lớp trang điểm được bảo vệ lâu hơn. Chưa kể nó còn giúp làn da bạn ăn kem nền hay phấn nền tốt hơn.
Khi cảm thấy làn da bị khô do ngồi văn phòng có máy điều hòa và nhiều máy tính: Một làn da đẹp cần phải có độ ẩm thích hợp; do đó, các chuyên gia luôn khuyên chúng ta mỗi ngày ít nhất cũng phải uống 2lit nước. Ngoài ra, để đảm bảo bạn luôn dưỡng ẩm cho da mặt tốt nhất thì xịt khoáng nhiều lần trong ngày cũng giúp làn da được cung cấp nước trực tiếp, thậm chí còn bổ sung thêm nhiều khoáng chất để nuôi dưỡng làn da.
Sau khi tẩy trang: Xịt 1 ít nước khoáng lên da sẽ làm cho da mặt sạch sẽ hơn sau khi lựa chọn loại tẩy trang phù hợp với làn da của bạn.
Sau khi waxing hay đi ngoài nắng về: Làn da của bạn lúc này sẽ bị bỏng rát, hãy dùng nước xịt khoáng để làm dịu đi các vùng da này và bạn sẽ thấy tinh thần thoải mái tức thì đó.
2. Bí quyết dùng nước xịt khoáng đúng chuẩn nhất
Đối với các sản phẩm dạng phun sương, bạn có thể sử dụng đều đặn mỗi ngày 4-5 lần hoặc hơn tùy vào từng mùa, thời tiết, môi trường… Các bước sử dụng xịt khoáng đúng cách khá đơn giản, chỉ cần xịt dung dịch lên mặt, để cho các tinh chất thẩm thấu tự nhiên, và có thể lau khô sau 1 phút. Lưu ý, khi xịt bạn nên đặt chai nước khoáng song song với mặt, cách mặt khoảng 10-20cm. Xịt đều 1 vòng khắp mặt, vỗ nhẹ trong 30 giây.
Sau khi trang điểm xong thì có thể xịt 1 lớp nữa để giúp phấn lâu trôi hơn, bền màu hơn.
Hướng Dẫn Sử Dụng Bảng Excel
Trong bài viết hôm nay, chúng tôi sẽ hướng dẫn sử dụng bảng excel. Để giúp bạn giải quyết hai vấn đề trên.
1/ Hướng dẫn sử dụng bảng excel: cách tạo bảng.
Để tạo bảng từ những tin đã nhập sẵn trong excel. Bạn làm theo các bước sau:
Bước 2: Xuất hiện hộp thoại , xác nhận lại vùng dữ liệu cần tạo bảng. Bạn xem lại cho chuẩn rồi nhấn OK.
Và đây là giao diện của vùng dữ liệu đã được tạo bảng. Mỗi cột sẽ tự động xuất hiện những nút ô vuông có tam giác để hỗ trợ cho việc lọc dữ liệu.
Cách tạo bảng mới khi chưa có thông tin:
Cách để tạo bảng hoàn toàn mới khi chưa có nhập dữ liệu vào bảng tính excel. Bạn cũng làm gần giống như cách ở trên. Nhưng bạn cần xác định trước số ô, số cột trước. Chọn 1 ô bắt đầu, nhấn Table và kéo chọn vùng cần tạo bảng mà bạn sẽ nhập dữ liệu vào và nhấn OK.
Sau các bước hướng dẫn sử dụng bảng excel một cách cơ bản nhất là tạo bảng. Thì tiếp theo ở mục số 2 này, chúng tôi sẽ hướng dẫn bạn một số thao tác với bảng. Cụ thể như sau:
Để chèn cột vào bảng đã tạo (theo như hướng dẫn sử dụng bảng excel mục 1), bạn chọn 1 cột. Nhấn Insert ở Home, chọn Insert Cells. Lúc này excel sẽ chèn cho bạn 1 cột ở bên trái cột bạn đã bôi đen.
Để chèn hàng vào bảng đã tạo (theo như hướng dẫn sử dụng bảng excel mục 1), bạn chọn 1 hàng. Nhấn Insert ở Home, chọn Insert Cells. Lúc này excel sẽ chèn cho bạn 1 hàng ở trên hàng bạn đã bôi đen.
Hướng dẫn sử dụng bảng excel: thiết kế bảng theo style mình thích
Đã quá nhàm chán với màu trắng, khung kẻ đen của excel bình thường? Excel cũng hỗ trợ bạn luôn tính năng tự thiết kế bảng theo style mà mình thích đó.
Tuy nhiên cách này chỉ áp dụng với bảng tính chưa nhập dữ liệu. Và các bước như sau:
Bước 1: bạn chọn vùng dữ liệu cần tạo bảng, nhấn Format as Table. Lúc này nó sẽ hiện ra 1 bảng style để các bạn tự chọn lựa.
Bước 2: bạn nhấn chọn 1 style bạn thích. Kết quả sẽ trả về đúng màu và định dạng đó.
Ngoài ra bạn hoàn toàn có thể tự tạo bảng theo style của riêng mình. Bằng cách nhấn vào 1 trong 2 nút: New Table Style hoặc New Pivot Table Style.
Cập nhật thông tin chi tiết về Hướng Dẫn Cách Làm, Sử Dụng References Chuẩn trên website Rafs.edu.vn. 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. Chúc bạn một ngày tốt lành!