Bạn đang xem bài viết Hướng Dẫn Sử Dụng Jquery đượ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.
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 Stream
Stream là một class nó mô phỏng một dòng các byte được sắp hàng một cách liên tiếp nhau. Chẳng hạn như việc truyền tải dữ liệu trên mạng các dữ liệu truyền đi là dòng các byte liên tiếp nhau từ byte đầu tiên cho tới các byte cuối cùng.
Stream là một class cơ sở, các luồng (stream) khác mở rộng từ class này. Có một vài class đã được xây dựng sẵn trong C#, chúng mở rộng từ lớp Stream cho các mục đích khác nhau, chẳng han:
ClassMô tảBufferedStream
Một luồng tiện ích, nó bao bọc (wrap) một luồng khác giúp nâng cao hiệu năng.
FileStream
Luồng sử dụng để đọc ghi dữ liệu vào file.
MemoryStream
Luồng làm việc với các dữ liệu trên bộ nhớ.
UnmanagedMemoryStream
IsolatedStorageFileStream
PipeStream
NetworkStream
CryptoStream
Luồng đọc ghi dữ liệu được mật mã hóa.
DeflateStream
GZipStream
Stream là một lớp trừu tượng, tự nó không thể khởi tạo một đối tượng, bạn có thể khởi tạo một đối tượng Stream từ các phương thức khởi tạo (Constructor) của class con. Lớp Stream cung cấp các phương thức cơ bản làm việc với luồng dữ liệu, cụ thể là các phương thức đọc ghi một byte hoặc một mảng các byte..
Tùy thuộc vào luồng, có những luồng hỗ trợ cả đọc và ghi, và cả tìm kiếm (seek) bằng cách di chuyển con trỏ trên luồng, và ghi đọc dữ liệu tại vị trí con trỏ.
Các thuộc tính (property) của Stream:
Thuộc tínhMô tảCanRead
Thuộc tính cho biết luồng này có hỗ trợ đọc không.
CanSeek
Thuộc tính cho biết luồng này có hỗ trợ tìm kiếm (seek) hay không
CanWrite
Thuộc tính cho biết luồng này có hỗ trợ ghi hay không
Length
Trả về độ dài của luồng (Số bytes)
Position
Vị trí hiện tại của con trỏ trên luồng.
Các phương thức của Stream:
Với Stream bạn có thể ghi từng byte hoặc ghi một mảng các byte vào luồng (stream). Và khi đọc bạn có thể đọc từng byte hoặc đọc nhiều byte và gán vào một mảng tạm.
Một byte là 8 bit, trong đó một bit là 0 hoặc 1. Như vậy 1 byte tương ứng với một số từ 0 tới 255 (2^8 – 1).
2.1- Ví dụ luồng ghi dữ liệuVà bây giờ hãy bắt đầu với một ví dụ đơn giản, tạo một Stream ghi dữ liệu vào File. Bạn có thể ghi từng byte vào stream hoặc ghi một mảng các byte vào Stream.
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; namespace CSharpStreamsTutorial { class StreamWriteDemo { public static void Main(string[] args) { string path = @"C:tempMyTest.txt"; Directory.CreateDirectory(@"C:temp"); Stream writingStream = new FileStream(path, FileMode.Create); try { byte[] bytes = new byte[] { 72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100 }; if (writingStream.CanWrite) { writingStream.Write(bytes, 0, bytes.Length); writingStream.WriteByte(33); } } catch (Exception e) { Console.WriteLine("Error:" + e); } finally { writingStream.Close(); } Console.ReadLine(); } } }Chú ý: Trong bảng mã ký tự CSII, mỗi ký tự CSII tương ứng với một con số < 256.
Ký tựGiá trịKý tựGiá trị 2.2- Ví dụ luồng đọc dữ liệuVí dụ ở trên bạn đã ghi dữ liệu vào file C:tempMyTest.txt, bây giờ bạn có thể viết một stream đọc dữ liệu từ file đó.
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; namespace CSharpStreamsTutorial { class StreamReadDemo { public static void Main(string[] args) { String path = @"C:tempMyTest.txt"; if (!File.Exists(path)) { Console.WriteLine("File " + path + " does not exists!"); return; } using (Stream readingStream = new FileStream(path, FileMode.Open)) { byte[] temp = new byte[10]; UTF8Encoding encoding = new UTF8Encoding(true); int len = 0; { String s = encoding.GetString(temp, 0, len); Console.WriteLine(s); } } Console.ReadLine(); } } }FileStream là một lớp mở rộng từ lớp Stream, FileStream được sử dụng để đọc và ghi dữ liệu vào file, nó được thừa kế các thuộc tính (property), phương thức từ Stream, đồng thời có thêm các chức năng dành riêng cho đọc ghi dữ liệu vào file.
Có một vài chế độ đọc ghi dữ liệu vào file:
FileModeMô tảAppend
Mở file nếu nó đã tồn tại, di chuyển con trỏ về cuối tập tin để nó thể ghi nối tiếp vào file, nếu file không tồn tại nó sẽ được tạo ra.
Create
Nói với hệ điều hành tạo một tập tin mới. Nếu tập tin đã tồn tại, nó sẽ được ghi đè.
CreateNew
Nói với hệ điều hành tạo ra một file mới. Nếu file đã tồn tại ngoại lệ IOException sẽ được ném ra. Chế độ này yêu cầu phải có quyền FileIOPermissionAccess.Write
OpenOrCreate
Nói với hệ điều hảnh nên mở một tập tin nếu nó tồn tại; nếu không, một tập tin mới sẽ được tạo ra.
FileStreamFileModeDemo.cs
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; namespace CSharpStreamsTutorial { class FileStreamFileModeDemo { public static void Main(string[] args) { String path = @"C:tempMyTest.txt"; if (!File.Exists(path)) { Console.WriteLine("File " + path + " does not exists!"); Directory.CreateDirectory(@"C:temp"); } using (FileStream writeFileStream = new FileStream(path, FileMode.Append) ) { string s = "nHello every body!"; byte[] bytes = Encoding.UTF8.GetBytes(s); writeFileStream.Write(bytes, 0, bytes.Length); } Console.WriteLine("Finish!"); Console.ReadLine(); } } }Với FileMode.Append dữ liệu sẽ được nối thêm vào file, nếu file đó đã tồn tại:
Phương thức khởi tạo (Constructor):
Class FileStream có 11 constructor (Không tính các constructor bị lỗi thời) dùng để khởi tạo một đối tượng FileStream:
FileStream(SafeFileHandle, FileAccess) FileStream(SafeFileHandle, FileAccess, Int32) FileStream(SafeFileHandle, FileAccess, Int32, Boolean) FileStream(String, FileMode) FileStream(String, FileMode, FileAccess) FileStream(String, FileMode, FileAccess, FileShare) FileStream(String, FileMode, FileAccess, FileShare, Int32) FileStream(String, FileMode, FileAccess, FileShare, Int32, Boolean) FileStream(String, FileMode, FileAccess, FileShare, Int32, FileOptions) FileStream(String, FileMode, FileSystemRights, FileShare, Int32, FileOptions) FileStream(String, FileMode, FileSystemRights, FileShare, Int32, FileOptions, FileSecurity)Tuy nhiên bạn cũng có các cách khác để tạo đối tượng FileStream, chẳng hạn thông qua FileInfo, đây là là class đại diện cho một file trong hệ thống.
Phương thức của FileInfo trả về FileStream.Mô tảCreate()
Bởi mặc định, tất cả các quyền đọc ghi file mới này sẽ gán cho tất cả các users.
Open(FileMode)
Mở file với chế độ được chỉ định.
Open(FileMode, FileAccess)
Mở file với chỉ định chế độ đọc, ghi, hoặc quyền đọc ghi.
Open(FileMode, FileAccess, FileShare)
Mở file với chỉ định chế độ đọc, ghi, hoặc quyền đọc ghi, và các lựa chọn chia sẻ.
Ví dụ tạo FileStream từ FileInfo:
FileStreamFileInfoDemo.cs
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; namespace CSharpStreamsTutorial { class FileStreamFileInfoDemo { public static void Main(string[] args) { FileInfo afile = new FileInfo(@"C:tempMyTest.txt"); if (afile.Exists) { Console.WriteLine("File does not exist!"); Console.Read(); return; } using (FileStream stream = afile.Open(FileMode.Truncate)) { String s = "New text"; byte[] bytes = Encoding.UTF8.GetBytes(s); stream.Write(bytes, 0, bytes.Length); } Console.WriteLine("Finished!"); Console.Read(); } } }BufferedStream là một lớp mở rộng từ lớp Stream, nó là một luồng (stream) bộ đệm bao lấy (wrap) một stream khác, giúp nâng cao hiệu quả đọc ghi dữ liệu.
BufferedStream chỉ có 2 phương thức khởi tạo (Constructor), nó bao lấy một stream khác.
Phương thức khởi tạo (Constructor)Mô tảTôi đưa ra một tình huống, bạn tạo ra một luồng bộ đệm ( BufferedStream) bao lấy FileStream, với mục đích ghi dữ liệu xuống file. Các dữ liệu ghi vào luồng bộ đệm tạm thời sẽ nằm trên bộ nhớ, và khi bộ đệm đầy, dữ liệu tự động được đẩy (Flush) xuống file, bạn có thể chủ động đẩy dữ liệu xuống file bằng cách sử dụng phương thức Flush(). Sử dụng BufferedStream trong trường hợp này giúp giảm số lần phải ghi xuống ổ đĩa, và vì vậy nó làm tăng hiệu suất của chương trình.
BufferedStreamWriteFileDemo.cs
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; namespace CSharpStreamsTutorial { class BufferedStreamWriteFileDemo { public static void Main(string[] args) { String fileName = @"C:tempMyFile.txt"; FileInfo file = new FileInfo(fileName); file.Directory.Create(); using (FileStream fileStream = file.Create()) { using (BufferedStream bs = new BufferedStream(fileStream, 10000)) { int index = 0; for (index = 1; index < 2000; index++) { String s = "This is line " + index + "n"; byte[] bytes = Encoding.UTF8.GetBytes(s); bs.Write(bytes, 0, bytes.Length); } bs.Flush(); } } Console.WriteLine("Finished!"); Console.Read(); } } }MemoryStream là một lớp mở rộng trực tiếp từ lớp Stream, nó là luồng (stream) mà dữ liệu được lưu trữ (store) trên bộ nhớ.
Về bản chất MemoryStream là một đối tượng nó quản lý một bộ đệm (buffer) là một mảng các byte, khi các byte được ghi vào luồng này nó sẽ tự động được gán vào các vị trí tiếp theo tính từ vị trí hiện tại của con trỏ trên mảng. Khi bộ đệm đầy một mảng mới có kích thước lớn hơn được tạo ra, và copy các dữ liệu từ mảng cũ sang.
Constructor:
MemoryStream()
MemoryStream(Byte[] buffer)
MemoryStream(Byte[] buffer, Boolean writable)
MemoryStream(Byte[] buffer, Int32 index, Int32 count, Boolean writable)
MemoryStream(Byte[] buffer, Int32 index, Int32 count, Boolean, Boolean publiclyVisible)
MemoryStream(Byte[], Int32, Int32, Boolean, Boolean)
MemoryStream(Int32 capacity)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; namespace CSharpStreamsTutorial { class MemoryStreamDemo { static void Main() { MemoryStream memoryStream = new MemoryStream(100); byte[] javaBytes = Encoding.UTF8.GetBytes("Java"); byte[] csharpBytes = Encoding.UTF8.GetBytes("CSharp"); memoryStream.Write(javaBytes, 0, javaBytes.Length); memoryStream.Write(csharpBytes, 0, csharpBytes.Length); Console.WriteLine("Capacity: {0} , Length: {1}", memoryStream.Capacity.ToString(), memoryStream.Length.ToString()); Console.WriteLine("Position: "+ memoryStream.Position); memoryStream.Seek(-6, SeekOrigin.Current); Console.WriteLine("Position: " + memoryStream.Position); byte[] vsBytes = Encoding.UTF8.GetBytes(" vs "); memoryStream.Write(vsBytes, 0, vsBytes.Length); byte[] allBytes = memoryStream.GetBuffer(); string data = Encoding.UTF8.GetString(allBytes); Console.WriteLine(data); Console.WriteLine("Finish!"); Console.Read(); } } }Sử dụng UnmanagedMemoryStream cho phép bạn đọc các luồng dữ liệu không được quản lý mà không cần sao chép tất cả chúng lên quản lý ở bộ nhớ Heap trước khi sử dụng. Nó giúp bạn tiết kiệm bộ nhớ nếu bạn đang phải đối phó với rất nhiều dữ liệu.
Lưu ý rằng có một giới hạn 2GB đối với MemoryStream vì vậy bạn phải sử dụng các UnmanagedMemoryStream nếu bạn vượt quá giới hạn này.
Tôi đưa ra một tình huống: Có các dữ liệu rời rạc nằm sẵn trên bộ nhớ. Và bạn có thể tập hợp chúng lại để quản lý bởi UnmanagedMemoryStream bằng cách quản lý các con trỏ (pointer) của các dữ liệu rời rạc nói trên, thay vì bạn copy chúng lên luồng (stream) để quản lý.
Constructor:
UnmanagedMemoryStream()
UnmanagedMemoryStream(Byte* pointer, Int64 length)
UnmanagedMemoryStream(Byte* pointer, Int64 length, Int64 capacity, FileAccess access)
UnmanagedMemoryStream(SafeBuffer buffer, Int64 offset, Int64 length)
UnmanagedMemoryStream(SafeBuffer buffer, Int64 offset, Int64 length, FileAccess access)
CryptoStream là một lớp, sử dụng cho việc mật mã hóa luồng dữ liệu.
Trong một tình huống ngược lại, một luồng CryptoStream bao lấy một luồng đọc file (File mà nội dung đã mã hóa ở trên), các byte trên luồng FileStream là các byte đã được mật mã hóa (encrypt), nó sẽ được giải mật (decrypt) bởi CryptoStream.
Một điều quan trọng bạn cần nhớ rằng, không phải thuật toán mật mã hóa nào cũng có 2 chiều mật mã hóa và giải mật mã hóa.
Hãy xem một ví dụ:
Ở đây tôi sử dụng thuật toán DES để mã hóa và giải mã, bạn cần cung cấp mảng 128 bit nó là chìa khóa bảo mật của bạn.
DESCryptoServiceProvider provider = new DESCryptoServiceProvider(); provider.Key = ASCIIEncoding.ASCII.GetBytes("1234abcd"); provider.IV = ASCIIEncoding.ASCII.GetBytes("12345678"); ICryptoTransform encryptor = provider.CreateEncryptor(); ICryptoTransform decryptor = provider.CreateDecryptor(); using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; using System.Security.Cryptography; namespace CSharpStreamsTutorial { class CryptoStreamExample { public static void Main(string[] args) { DESCryptoServiceProvider provider = new DESCryptoServiceProvider(); chúng tôi = ASCIIEncoding.ASCII.GetBytes("1234abcd"); chúng tôi = ASCIIEncoding.ASCII.GetBytes("12345678"); String encryedFile = @"C:tempEncryptedFile.txt"; using (FileStream stream = new FileStream(encryedFile, FileMode.OpenOrCreate, FileAccess.Write)) { ICryptoTransform encryptor = provider.CreateEncryptor(); using (CryptoStream cryptoStream = new CryptoStream(stream, encryptor, CryptoStreamMode.Write)) { byte[] data = ASCIIEncoding.ASCII.GetBytes("Bear, I love you. OK?"); cryptoStream.Write(data, 0, data.Length); } } Console.WriteLine("Write to file: " + encryedFile); using (FileStream stream = new FileStream(encryedFile, FileMode.Open, FileAccess.Read)) { ICryptoTransform decryptor = provider.CreateDecryptor(); using (CryptoStream cryptoStream = new CryptoStream(stream, decryptor, CryptoStreamMode.Read)) { byte[] temp = new byte[1024]; int read=0; { String s= Encoding.UTF8.GetString(temp,0,read); Console.Write(s); } } } Console.Read(); } } }Xem nội dung của file vừa được tạo ra.
Hướng Dẫn Sử Dụng Google Docs
Hướng dẫn sử dụng Google Docs – Trình xử lý văn bản – Họ không chỉ giúp các doanh nghiệp trực tuyến tạo ra hàng tỷ đô la thông qua công cụ tìm kiếm của họ, mà họ còn – và tiếp tục – phân nhánh và tạo ra các sản phẩm khác.
Một trong những sản phẩm này là Google Docs, một trình xử lý văn bản miễn phí và thay thế cho Microsoft Word cho phép mọi người dễ dàng tạo và chỉnh sửa tài liệu có thể chia sẻ của riêng họ.
Không tải phần mềm. Không thanh toán. Không có trình duyệt cụ thể hoặc máy tính cần thiết.
Google Docs là trình xử lý văn bản hoàn toàn miễn phí, đa nền tảng (đồng bộ hóa tài liệu trên điện thoại, máy tính bảng và máy tính để bàn) hoạt động cả trực tuyến và ngoại tuyến. Tất cả những gì bạn cần là một tài khoản Google, cùng một tài khoản miễn phí mà bạn sử dụng cho G Suite hoặc Gmail của mình.
Công cụ dựa trên đám mây bao gồm bố cục rõ ràng và các tính năng độc đáo cho người dùng, chẳng hạn như khả năng làm việc, chia sẻ và cộng tác từ mọi nơi. Nền tảng thậm chí tự động đồng bộ hóa và lưu tất cả các công việc của bạn, vì vậy bạn thậm chí không phải lo lắng về việc nhấn vào Save Save.
Với các tính năng này, rõ ràng lý do tại sao hàng triệu người dùng thích Google Docs hơn các trình xử lý văn bản khác.
Google Docs so với Microsoft Word
Nhưng còn Microsoft Word thì sao? Word đã tồn tại lâu hơn Google Docs và ngày nay vẫn đặc biệt phổ biến. Hàng triệu người dùng và công ty cá nhân vẫn trả số tiền lớn để sử dụng Word. Vậy tại sao bạn lại bỏ Word cho Google Docs?
Microsoft Word phải được mua như một phần của gói Microsoft Office bao gồm một số sản phẩm bạn thậm chí không thể sử dụng, chẳng hạn như PowerPoint, Excel và Outlook.
Ví dụ: các gói Home and Business chạy từ $ 69,99 (cho một người dùng cá nhân tại nhà) lên đến $ 150 (cho một người dùng cá nhân tại nơi làm việc) cho một thành viên hàng năm. Google Docs, mặt khác, cho phép bạn cộng tác với bất kỳ số người nào, bất cứ nơi nào trên thế giới, miễn phí.
Một lợi ích khác của Google Docs là tất cả công việc của bạn được lưu vào Đám mây, điều đó có nghĩa là bạn sẽ không bị mất báo cáo 20 trang của mình ngay cả khi máy tính xách tay của bạn bị vẹo. (Ôi!)
Đối với một blogger như tôi, tôi không thể tưởng tượng được việc sử dụng bất cứ thứ gì ngoài Google Docs mỗi ngày. Không giống như Word, các biên tập viên của tôi có thể nhảy vào tài liệu của tôi bất cứ khi nào thuận tiện nhất cho họ và để lại đề xuất hoặc nhận xét. Tôi cũng có thể trả lời những điều này bất cứ khi nào tôi muốn – ở nhà hoặc đang di chuyển bằng ứng dụng Google Docs .
Bây giờ chúng tôi đã đề cập đến một số lợi ích của việc sử dụng Google Docs, hãy đi sâu vào chi tiết hơn về cách sử dụng nó.
Chia sẻ và cộng tác với Google Docs
Có rất nhiều mẹo và thủ thuật mà người dùng có thể tận dụng khi sử dụng Google Docs – dù là làm việc với tư cách cá nhân hay theo nhóm.
Chia sẻ tài liệu Google của bạn
Các cá nhân có thể chia sẻ tài liệu của họ với nhiều người như họ muốn, cũng như chỉnh sửa các quyền của họ để giới hạn những gì họ có thể làm.
Để bắt đầu chia sẻ, nhấp vào ” File“, sau đó là ” Share “.
Có nhiều lựa chọn chia sẻ – lựa chọn bạn chọn hoàn toàn là lựa chọn của bạn.
1. Tạo một liên kết có thể chia sẻ
Cách đơn giản nhất để chia sẻ trang Google Docs là tạo liên kết có thể chia sẻ. Điều này cho phép bất cứ ai nhấp vào một URL duy nhất và xem tài liệu của bạn.
Sau khi mở hộp ” Share “, nhấn nút “Get shareable link” ở góc trên cùng.
Sau đó, chọn một quyền chia sẻ cho tài liệu của bạn.
Sau khi xác định quyền, bấm ” Copy link “.
URL sau đó sẽ được sao chép vào clipboard của bạn để gửi cho bất kỳ ai muốn xem tài liệu.
2. Chia sẻ qua địa chỉ email
Để làm điều này, quay trở lại hộp chia sẻ.
Nhập địa chỉ email của người bạn muốn chia sẻ tài liệu của bạn và chọn một tùy chọn từ trình đơn thả xuống để chỉnh sửa quyền của họ.
Nếu bạn thêm một ghi chú cho lời mời này, nó sẽ được hiển thị trong thư mời email.
3. Tùy chọn chia sẻ nâng cao
Quay trở lại hộp chia sẻ của bạn và nhấn “Advanced”.
Tại đây, bạn có thể xem tất cả các cài đặt chia sẻ – bao gồm cả những người có quyền truy cập vào tài liệu của bạn, cài đặt quyền của họ và tùy chọn mời thêm người hoặc xóa người khác.
4. Làm cho tài liệu của bạn có thể chỉnh sửa bởi bất cứ ai
Bạn muốn cấp cho bất kỳ ai quyền chỉnh sửa nội dung tài liệu của bạn? Nhấn “File” và “Share” để nhận liên kết có thể chia sẻ của bạn.
Trong menu thả xuống được hiển thị, hãy nhấn vào Bất cứ ai có liên kết đều có thể chỉnh sửa.
Vì tùy chọn này nêu rõ, có URL duy nhất của bạn sẽ có thể thực hiện thay đổi, chỉnh sửa và thậm chí xóa tài liệu của bạn … vì vậy hãy cẩn thận về việc bạn đang chia sẻ với ai.
Có một số phím tắt để giúp tăng năng suất của bạn khi làm việc trong Google Docs. Xem lại biểu đồ sau để tìm hiểu một số phím tắt phổ biến nhất.
Tạo và viết trong Google Docs
Để thực hiện việc này, hãy truy cập trang chủ Google Docs và tìm nút menu ở phía bên trái.
Sau đó nhấn “Settings”
Một hộp bật lên sau đó sẽ hiển thị trên màn hình của bạn. Để thiết lập chỉnh sửa ngoại tuyến, hãy chuyển nút “Offline” thành “On”. (Điều này sẽ chuyển nút màu xanh, thay vì màu xám.)
Trình duyệt của bạn sau đó sẽ điều chỉnh để chỉnh sửa ngoại tuyến và bạn sẽ thấy biểu tượng sau khi chỉnh sửa tài liệu của mình mà không cần Internet.
Sử dụng Nhập bằng giọng nói
Công nghệ giọng nói là một ngành công nghiệp đang phát triển và Google luôn đi đầu trong xu hướng này. Bạn có thể tăng tốc quá trình viết của mình bằng cách sử dụng tính năng nhập giọng nói trong Google Docs.
Để sử dụng tính năng này, hãy bắt đầu bằng cách kiểm tra cài đặt thiết bị của bạn để xác nhận rằng micrô của bạn hoạt động.
Sau đó đi đến “Tools” và “Voice Typing”. Bạn sẽ thấy một biểu tượng micro.
Nhấn vào đó và bắt đầu nói. Google sẽ chuyển đổi các từ đã nói của bạn thành văn bản mà bạn sẽ thấy xuất hiện trên trang.
Sử dụng Ứng dụng Google Docs
Ứng dụng miễn phí thậm chí hoạt động ngoại tuyến khi bạn bật cài đặt đó – giống như cách bạn đã làm trên máy tính xách tay hoặc máy tính để bàn của mình – và nó sẽ tự động lưu công việc của bạn vào Đám mây.
Google Docs đã bảo vệ bạn.
Định dạng tài liệu của bạn
Tạo trang Google Docs phù hợp với bạn và nội dung bạn đang tạo. Cho dù đó là hướng trang, hình ảnh hoặc số trang, những mẹo này sẽ giúp bạn định dạng tài liệu của mình theo bất kỳ cách nào bạn muốn.
Nếu bạn đang tìm cách tận dụng tối đa khoảng trống trong tài liệu của bạn hoặc định dạng tài liệu của bạn để in, bạn có thể cần phải thay đổi lề.
Trước khi làm điều này, bạn sẽ cần đảm bảo thước kẻ hiển thị phía trên tài liệu của bạn.
Chỉ cần đi tới “View” và nhấn “Show Ruler”.
Bạn sẽ thấy một thước kẻ bên dưới thanh định dạng trong tài liệu của bạn.
Sau đó, để thay đổi lề của trang của bạn, hãy xác định nút nhỏ màu xanh ở phía bên trái của thước và trượt nút để thay đổi lề trái của bạn.
Để thay đổi lề phải của bạn trong Google Docs, hãy lặp lại quy trình này bằng nút màu xanh ở bên phải thước kẻ của bạn.
Nếu bạn cần có lợi nhuận nghiêm ngặt trong tài liệu của mình, hãy thử sử dụng công cụ Cài đặt Trang của Trang.
Để thực hiện việc này, nhấn “File” rồi “Page Setup”.
Sau đó, bạn sẽ thấy hộp bật lên sau đây nơi bạn có thể thay đổi lề.
Nếu bạn cần cùng một lề trong mọi tài liệu bạn tạo, hãy tiết kiệm thời gian và nhấn nút “Đặt làm mặc định”. Điều này sẽ tự động sao chép thiết lập lề của bạn vào tất cả các tài liệu mới.
Cách thay đổi hướng trang thành cảnh
Tìm cách thay đổi định hướng của tài liệu của bạn? Đi đến “File” và chọn “Page Setup”.
Sau đó, chọn tùy chọn “Landscape” trong “Orientation” và nhấn “OK” để thực hiện các thay đổi của bạn.
Nếu bạn muốn tất cả các tài liệu của mình có cùng hướng, bấm “Đặt làm mặc định”.
Cách thêm một hộp văn bản
Hộp văn bản là một lựa chọn tuyệt vời nếu bạn đang muốn thêm một yếu tố trực quan bổ sung vào tài liệu của mình. Chúng cho phép bạn định vị văn bản bổ sung ở bất cứ đâu trên trang của bạn mà không thay đổi định dạng của tài liệu hiện tại của bạn.
Trong Google Docs, các hộp văn bản được phân loại là bản vẽ. Bạn có thể chèn một bằng cách nhấp vào “Insert” và “Drawing”.
Điều này sẽ mở tính năng “Drawing”. Sau đó nhấn “Text Box”.
Kéo con trỏ của bạn vào không gian vẽ để tạo một hộp lớn (hoặc nhỏ) đủ cho yêu cầu của bạn
Khi hộp của bạn đã được tạo, đã đến lúc nhập văn bản của bạn.
Bạn có thể thay đổi phông chữ, màu sắc và căn chỉnh văn bản trong hộp của mình bằng cách sử dụng thanh điều hướng trong cửa sổ bật lên.
Hạnh phúc với hộp văn bản của bạn? Nhấn “Save & Close” để chèn bản vẽ của người dùng vào trong tài liệu của bạn.
Từ đây, coi hộp văn bản của bạn như một hình ảnh. Chọn hình ảnh để thay đổi căn chỉnh hoặc di chuyển hộp xung quanh tài liệu của bạn để có vị trí lý tưởng.
Số trang giúp tài liệu của bạn dễ dàng điều hướng và cho phép tổ chức tốt hơn khi được in – bạn sẽ tránh tự hỏi mình, Trang này có ở đây hay không?
Thêm số trang vào tài liệu của bạn bằng cách nhấp vào “Chèn”, “Tiêu đề” và “Số trang”. Sau đó chọn tùy chọn của bạn.
Treo thụt lề là các thụt lề tự động thay đổi lề của đoạn mà không làm gián đoạn định dạng được sử dụng ở nơi khác trên trang của bạn. Đây là một ví dụ:
Để thêm thụt lề trong Google Docs, hãy đảm bảo rằng thước kẻ của bạn hiển thị bằng cách nhấn “View” và “Show Ruler”.
Sau đó, quay trở lại tài liệu chính của bạn và đánh dấu văn bản bạn muốn định dạng.
Thêm một thụt lề bằng cách định vị thước trên tài liệu của bạn và trượt các mũi tên màu xanh vào đặc điểm kỹ thuật của bạn.
Trượt mũi tên ở bên trái để thay đổi thụt lề trái và mũi tên ở bên phải để thay đổi thụt lề phải.
Để thêm một hình ảnh vào tài liệu của bạn, chỉ cần đặt con trỏ của bạn bất cứ nơi nào bạn muốn chèn hình ảnh.
Cuộn lên trên cùng của trang và nhấp vào “Insert” và “Image”.
Chọn vị trí hình ảnh – có nhiều tùy chọn bao gồm máy tính của bạn, web, Google Drive hoặc theo URL.
Chọn hình ảnh của bạn, nhấp vào “Open” và hình ảnh của bạn sẽ xuất hiện.
Theo nguyên tắc chung, thẻ “Heading 1” phải là tiêu đề chính của bạn. Thẻ “Heading 2” phải là tiêu đề phụ và thẻ “Heading 3” phải là các phần bên dưới tiêu đề phụ.
Chỉnh sửa tài liệu của bạn
Theo dõi các thay đổi, để lại các thành viên trong nhóm và nhận xét của đồng nghiệp, chạy kiểm tra chính tả và các tính năng chỉnh sửa quan trọng khác đều có sẵn trong Google Docs để đảm bảo công việc của bạn đạt được tiềm năng đầy đủ.
Bạn có thể theo dõi các thay đổi trong Google Docs bằng cách thay đổi “Editing” thành “Suggesting” ở góc trên cùng bên phải của trang.
Sau đó, khi ai đó chỉnh sửa tài liệu của bạn, mọi thay đổi sẽ hiển thị bằng một màu khác, với một hộp ở phía bên phải để hiển thị tên, ảnh và chi tiết chỉnh sửa của họ.
Sau đó, bạn có thể duyệt các thay đổi được theo dõi và chấp nhận hoặc từ chối chúng khi cần thiết.
Với Google Docs, bạn và nhóm của bạn có thể để lại nhận xét trong bất kỳ tài liệu nào cho nhau xem. Chúng thường được sử dụng như lời nhắc để quay lại một phần cụ thể, để lại ý tưởng sửa đổi chi tiết hơn hoặc thêm URL vào các trang web và hình ảnh khác để tham khảo.
Mặc dù việc đạt được số lượng từ cần thiết có thể không phải lúc nào cũng dễ dàng, Google Docs làm cho việc đếm trở nên đơn giản.
Khi bạn đang ở trong tài liệu của mình, hãy tìm “Tools” trong thanh điều hướng. Sau đó, chọn “Word Count”.
Google sau đó sẽ hiển thị tổng số từ (cùng với tổng số trang, ký tự và ký tự không bao gồm dấu cách).
Để đếm các từ trong một câu, đoạn hoặc trang cụ thể, hãy chọn văn bản bạn muốn đưa vào và làm theo các bước tương tự ở trên.
Cách chạy Kiểm tra chính tả
Chạy kiểm tra chính tả để xác định vị trí và sửa bất kỳ lỗi nào bạn có thể đã bỏ qua. Hãy nghĩ về nó như là người đọc thử hoặc biên tập viên cá nhân của bạn.
Để chạy kiểm tra chính tả trong Google Docs, hãy nhấn nút “Tools” trong thanh điều hướng của bạn và nhấn vào “Spelling”. Sau đó chọn tùy chọn “Spell check”.
Google Docs sau đó sẽ quét toàn bộ tài liệu của bạn để tìm các từ sai chính tả và lỗi ngữ pháp. Bạn sẽ được lựa chọn chấp nhận hoặc bỏ qua đề xuất của Google.
Nếu bạn thấy rằng bạn thường xuyên sử dụng một từ mà Google không nhận ra, bạn có thể thêm từ đó vào từ điển của mình. Điều này sẽ ngăn Google Docs làm nổi bật từ trong kiểm tra chính tả trong tương lai.
Làm thế nào để thêm một cú đánh
Sử dụng tiện ích bổ sung Google Docs
Bạn có thể thêm các công cụ của bên thứ ba hoặc các tiện ích bổ sung vào tài liệu của mình. Những tiện ích bổ sung này chứa các tính năng độc đáo để giúp bạn cải thiện công việc của mình theo nhiều cách khác nhau.
Bạn có thể tìm thấy các tiện ích bổ sung này bằng cách định vị tab “Add-Ons” trong thanh điều hướng và nhấp vào “Get add-ons”.
Viết một tài liệu cần hỗ trợ dữ liệu? Cài đặt tiện ích này vào trình duyệt của bạn để thu thập ghi chú, nghiên cứu trường hợp và tài liệu tham khảo mà bạn dự định trích dẫn. Sau đó, sử dụng tiện ích bổ sung để kéo chúng vào khi cần thiết. Bạn cũng có thể chỉnh sửa các ghi chú bạn đã lưu với Google Keep.
Thương hiệu nhất quán rất quan trọng, nhưng điều đó có thể khó khăn khi bạn sử dụng các phông chữ độc đáo. Tiện ích bổ sung Phông chữ Extensis nhập hàng ngàn phông chữ từ thư viện Phông chữ của Google vào tài liệu của bạn để nâng cao tính thẩm mỹ tổng thể của tác phẩm.
Viết hợp đồng, thỏa thuận, hoặc bất kỳ giấy tờ nào khác cần có chữ ký? Tiện ích Google Docs này sẽ giúp bạn thu thập chữ ký điện tử một cách dễ dàng và .
Cần một dịch giả? Cài đặt tiện ích này để dễ dàng dịch nội dung của bạn sang ngôn ngữ khác.
Tiện ích bổ sung này cho phép bạn thêm các sơ đồ độc đáo vào tài liệu của mình, dễ thiết kế và chỉnh sửa. Nó hoàn hảo cho bất cứ ai làm việc với dữ liệu hoặc tìm kiếm một cách thú vị để hiển thị thông tin.
Hiệu đính dễ dàng hơn 20 ngôn ngữ. Bạn sẽ không phải tự hỏi về chính tả hoặc ngữ pháp của bạn nữa. Công cụ ngôn ngữ bổ trợ bắt lỗi và lỗi bất kể ngôn ngữ.
EasyBib là một trình tạo thư mục tự động với hơn 7.000 tùy chọn kiểu, bao gồm MLA, APA và, theo phong cách Harvard.
Google Docs, Google Sheets và Google Forms trong Google Docs
Với Google Docs, thật dễ dàng để tích hợp với các công cụ hữu ích khác như Google Sheets và Google Forms. Nếu bạn tạo bảng tính hoặc biểu đồ trong Google Sheets, bạn có thể chèn thông tin đó trực tiếp vào Google Docs.
Với Google Forms, bạn có thể tạo các khảo sát được lưu tự động vào Google Drive để dễ dàng truy cập và đánh giá từ Google Docs.
Google Sheets là một tùy chọn tuyệt vời cho bất kỳ ai cần xây dựng bất kỳ loại biểu đồ, danh sách, kế hoạch hoặc bảng tính nào. Nó là một trình tạo bảng tính – tương tự như Excel – và nó miễn phí.
Thực hiện việc này bằng cách đi lên thanh công cụ, nhấp vào “Insert”, “Chart” và “From Sheets”. Bạn sẽ có thể xem và chọn biểu đồ bạn muốn thêm vào tài liệu của mình.
Bạn và nhóm của bạn có thể hợp tác và chọn một mẫu từ thư viện của Google – hoặc tạo một mẫu độc đáo từ đầu để tạo kiểu theo sở thích của bạn.
Google Forms cũng miễn phí sử dụng và có thể tích hợp với phần mềm như và .
Ngoài ra, tất cả các tài liệu và phản hồi Google Forms của bạn sẽ được lưu tự động vào Google Drive để bạn có thể dễ dàng truy cập chúng khi ở trong trang Google Docs của bạn.
Để thực hiện việc này, nhấp vào biểu tượng “Ứng dụng” khi bạn mở Google Docs. Cuộn xuống “Biểu mẫu” để tìm biểu mẫu hoặc khảo sát bạn muốn mở.
Một tính năng cuối cùng cần lưu ý là những người phản hồi biểu mẫu hoặc khảo sát của bạn có thể làm như vậy trên mọi loại thiết bị, làm cho Google Forms trở thành một tùy chọn thuận tiện cho mọi người.
Xin chúc mừng! Bạn hiện là một chuyên gia Google Docs. Cho dù bạn là nhà tiếp thị hay CEO, những mẹo này sẽ cho phép bạn tận dụng phần mềm của Google và tạo tài liệu đáng kinh ngạc dưới mọi hình thức, bất kể nền tảng chuyên môn của bạn.
Google Docs cung cấp cho bạn khả năng chia sẻ công việc của bạn với nhiều người như bạn muốn, bất cứ khi nào bạn muốn, biến nó thành một công cụ tuyệt vời cho các nhóm hợp tác. Nó cũng giữ cho cuộc sống của bạn đơn giản bằng cách tự động lưu bất kỳ thay đổi nào vào tài liệu của bạn vào Cloud, nghĩa là không còn căng thẳng về việc mất công việc của bạn. Cuối cùng, bạn có thể làm việc trên các tài liệu của mình từ bất cứ đâu – dù bạn có Internet hay không.
Với tất cả các tính năng này, bạn có thể thấy lý do tại sao rất nhiều người đã nhảy vào nhóm nhạc Google Docs. Thêm vào đó, nó miễn phí! Hãy thử xem sao?
Liên hệ ATP Software Website : https://atpsoftware.vn/ Group : https://www.facebook.com/groups/CongDongATP/ Page : https://www.facebook.com/atpsoftware.tools/ Hotline : 0931 9999 11 – 0967 9999 11 – 1800 0096
Hướng Dẫn Sử Dụng Phần Mềm Xmeye
Hướng dẫn sử dụng và cài đặt ứng dụng XMEye Trên thiết bị di động
Đầu tiên các bạn phải lắp đặt camera ngon lành đi đã, Lên hình trên TV và kết nối dây mạng vào đầu ghi hình camera, cài đặt cấu hình hệ thống camera giám sát để xem qua mạng thành công ( thông thường việc cài đặt cấu hình hệ thống camera xem qua mạng thì các công ty lắp đặt camera giám sát sẽ cài đặt khi lắp đặt ). Các bạn phải chắc chắn rằng camera IP hoặc đầu ghi hình đang hoạt động tốt qua mạng LAN và qua mạng internet
Bước 1: Tìm kiếm và cài đặt ứng dụng trên thiết bị Trên màn hình chính của điện thoại các bạn tìm đến kho ứng dụng Appstore (ios) hoặc CHplay (android). Ứng dụng mình đã khoanh tròn đỏ, để tải ứng dụng Xmeye về điện thoại hoặc Tablet của mình
Bước 2: chạy ứng dụng và gán thiết bị vào ứng dụng
Sau khi tải ứng dụng về điện thoại và chạy ứng dụng lên
Đây là giao diện chính khi khởi động chạy ứng dụng XMeye, để sử dụng ứng dụng XMeye các bạn cần đăng kỹ tài khoản, việc đăng ký tài khoản vô cùng đơn giản ( xem bước 4 ) 1: Tên đăng nhập tìa khoản ( là tên lúc đăng ký tài khoản của ứng dụng ) 2: PassWord đăng nhập tài khoản ( là mật khẩu lúc đăng ký tài khoản ) 3: Cloud Login phím chứng năng đăng nhập tài khoản 4: Register chức năng đăng ký tài khoản sử dụng 5: Modify: thay đổi mật khẩu tài khoản 6: Local login: sử dụng ứng dụng không cần tài khoản ( nế các bạn không đăng ký tài khoản mà dùng chứng năng này thì khi cài đặt lại ứng dụng sẽ phải khai báo lại toàn bộ các thiết bị, nếu dùng tài khoản đăng ký thi fkhi cài lại ứng dụng chỉ cần đăng nhập vào tài khoản của mình các thiết bị vẫn còn trong list )
Bước 3: chạy ứng dụng và gán thiết bị vào ứng dụng
Bước 4: Đăng ký tài khoản sử dụng ứng dụng XMeye
Để đăng ký tài khoản sử dụng ứng dụng XMeye, từ bước 3 các bạn chọn mục Register
User Name: Nhập tên đăng nhập của bạn muốn sử dụng PassWord: Nhập mật khẩu của bạn Confirm Password: Nhập lại mật khẩu vừa nhập Email: Nhập e-mail của bạn ( phải sử dụng e-mail đang hoạt động bình thường ) Sau khi khai báo đầy đủ các thông số trên các bạn bấm chọn mục Register. Sau đó ứng dụng sẽ báo tài khoản của bạn đã được khởi tạo thành công chọn biểu tượng mũi tên để quay lại màn hình đăng nhậpNếu đăng nhập đã có tồn tại tại ( có thông báo là Register Exits ) thì bạn phải thay đổi sang tên đang nhập khác
Bước 5: đăng nhập và add thiết bị ( camera IP hoặc đầu ghi hình ) vào ứng dụng XMeye
Sau khi đăng ký xong và quay lại màn hình đăng nhập Ở màn hình đăng nhập vào ứng dụng các bạn khai báo các mục: 1: Nhập User Name mà bạn vừa đăng ký 2: Nhập PassWord của tài khoản cừa đăng ký 3,4: tích chọn remember và Auto login để tự động đăng nhập các lần sau sau khi khai báo xong bấm chọn Cloud Login để đăng nhập vào ứng dụng. bước tiếp theo là gán thiến bị ( camera IP hoặc đầu ghi hình ) vào ứng dụng để quản lý
Sau khi đăng nhập vào ứng ụng, ứng dụng Xmeye sẽ hiển thị mặc định ở trang Device List 1: là biểu tượng menu chính của ứng dụng Xmeye 2: Biểu tượng của chức năng gán thiết bị ( camera IP hoặc đầu ghi hình ) 3: List các thiết bị sau khi gán thành côngĐể gán thiết bị ( camera IP hoặc đầu ghi hình ) các bạn chọn biểu tượng “+” sau khi chọn chức năng gán thiết bị thì ứng dụng hiện ra mục cho phép chúng ta khai báo thông số cho các camera IP và đầu ghi hình cần gán vào ứng dụng Xmeye
Để gán thiết bị ta làm các bước sau 1: chọn thẻ Manually Add ( gán thiết bị theo cách thủ công ) 2: Device Name: tên thiết bị các bạn đặt tùy ý 3: SerialNum: Mục này các bạn lựa chọn như sau: + Nhập địa chỉ IP của đầu ghi hoặc camera cần gán ( gán bằng địa chỉ IP của đầu ghi hình chỉ xem được trọng mạng nội bộ – hay còn gọi là mạng LAN và không xem được khi sử dụng 3G hoặc wifi ở chỗ khác ) + Nhập tên miền ( hoặc địa chỉ wan nếu dịch vụ mạng bạn đang sử dụng là IP tĩnh ) xem camera qua mạng : thông thường tên miền này do công ty lắp đặt camera sẽ cài miễn phí cho các bạn it nhất trong 2 năm đầu tiên, Nhập bằng tên miền thì chỉ xem được thiết bị khi sử dụng 3G hoặc Wifi từ bên ngoài không xem được trong mạng LAN + Nhập ID ( SerialNumber ) của thiết bị: sử dụng cách này thì có thể xem chung được cả khi ở trong mạng LAN và ở bên ngoài, nhưng nhược điểm là khi xem camera load chậm hơn so với sử dụng tên miền rất nhiều – Ít người sử dụng 4: UserName: nhập UserName của tài khoản mạng của đầu ghi hình ( Hoặc camera ) 5: PassWord: nhập password của tài khoản mạng của đầu ghi hình ( hoặc camera ) 6: Port: nhập cổng mobile của đầu ghi ( hoặc camera ) 7: Chức năng tìm kiếm tự động: sử dụng tính năng này ứng dụng sẽ tự động tìm kiếm thiết bị trong mạng LAN Sau khi khai báo xong bấm OK để lưu lại cấu hình vừa khai báo
Bước 6: Xem camera bằng ứng dụng XMeye
Sau khi tiến hành gán thiết bị vào ứng dụng Xmeye xong ở trong mục Divice List sẽ có list các thiết bị mà các bạn vừa gán thành công Để xem camera IIP hoặc đầu ghi hình các bạn chọn vào mục có tên thiết bị muốn xem, sau đó đợi để ứng dụng login vào thiết bị ( khoảng 3 đến 10 giây tùy theo tốc độ mạng ). Trên ứng dụng sẽ hiện ra list số lượng camera của đầu ghi hình có Lúc này bạn muốn xem camera nào thì chọn vào camera đó để xem trực tiếp
Video hướng dẫn sử dụng ứng dụng XMEYE Full
Video Hướng dẫn xem lại camera trên ứng dụng XMEYE
ST
Cập nhật thông tin chi tiết về Hướng Dẫn Sử Dụng Jquery 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!