jQuery đơn giản hóa trong việc phát triển web và đã trở thành bắt buộc trong thư viện Javascript có sẵn. Có rất nhiều đoạn jQuery hữu ích có sẵn nhưng ở đây trong bài viết này tôi sẽ chia sẻ 7 đoạn mã cơ bản và sử dụng rộng rãi mà mỗi nhà phát triển web phải có. Ngay cả đối với những người mới jQuery có thể dễ dàng hiểu và có lợi từ các đoạn mã thường được sử dụng.
1. Tùy chọn in trang
Cung cấp các tùy chọn để in trang là nhiệm vụ chung cho các nhà phát triển web. Sau đây là mã có sẵn:
<!-- jQuery: Print Page -->
$('a.printPage').click(function(){
window.print();
return false;
});
<!-- HTML: Print Page -->
<div>
<a class="printPage" href="#">Print</a>
</div>
2. Giúp nhập trường Field/Swap
Để cho trường văn bản nhập vào hữu ích, chúng ta thường hiển thị một số văn bản mặc định bên trong nó (Ví dụ "Tên công ty") và khi người dùng click vào nó, văn bản biến mất và người dùng có thể nhập giá trị cho nó. Bạn có thể thử nó cho mình bằng cách sử dụng đoạn mã sau đây.
<!-- jQuery: Helping Input Field -->
$('input[type=text]').focus(function(){
var $this = $(this);
var title = $this.attr('title');
if($this.val() == title)
{
$this.val('');
}
}).blur(function() {
var $this = $(this);
var title = $this.attr('title');
if($this.val() == '')
{
$this.val(title);
}
});
<!-- HTML: Swap Input Field -->
<div>
<input type="text"
name="searchCompanyName"
value="Company Name"
title="Company Name" />
</div>
3. Chọn/Bỏ chọn Tất cả tùy chọn
Chọn hoặc bỏ chọn tất cả các tùy chọn hộp kiểm có sẵn sử dụng liên kết trên trang HTML là nhiệm vụ chung.
<!-- jQuery: Select/Deselect All -->
$('.SelectAll').live('click', function(){
$(this).closest('.divAll').find('input[type=checkbox]').attr('checked', true);
return false; });
$('.DeselectAll').live('click', function(){
$(this).closest('.divAll').find('input[type=checkbox]').attr('checked', false);
return false; });
<!-- HTML: Select/Deselect All -->
<div class="divAll"> <a href="#" class="SelectAll">Select All</a>
<a href="#" class="DeselectAll">Deselect All</a> <br /> \
<input type="checkbox" id="Lahore" /><label for="Lahore">Lahore</label>
<input type="checkbox" id="Karachi" /><label for="Karachi">Karachi</label>
<input type="checkbox" id="Islamabad" /><label for="Islamabad">Islamabad</label> </div>
4. Vô hiệu hóa nhấp chuột phải
Đối với các nhà phát triển web, nó thường để vô hiệu hóa kích chuột phải vào các trang nhất định, do đó, mã sau đây sẽ thực hiện công việc.
<!-- jQuery: Disabling Right Click -->
$(document).bind("contextmenu",function(e){
e.preventDefault();
});
5. Xác định các phím được nhấn.
Đôi khi, chúng ta cần phải xác nhận giá trị đầu vào trên hộp văn bản. Ví dụ, đối với "Tên", chúng ta có thể cần phải tránh các giá trị số. Vì vậy, chúng ta cần phải xác định các phím được nhấn và sau đó thực hiện phù hợp.
<!-- jQuery: Which key is Pressed. -->
$('#txtFirstName').keypress(function(event){
alert(event.keyCode);
});
<!-- HTML: Which key is Pressed. -->
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
6. Xác nhận email.
Xác nhận địa chỉ email là nhiệm vụ rất phổ biến trên các mẫu HTML.
<!-- jQuery: Validating an email. -->
$('#txtEmail').blur(function(e) {
var sEmail = $('#txtEmail').val();
if ($.trim(sEmail).length == 0) {
alert('Please enter valid email address');
e.preventDefault();
}
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]
{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(sEmail)) {
alert('Valid Email');
}
else {
alert('Invalid Email');
e.preventDefault();
}
});
<!-- HTML: Validating an email-->
<asp:TextBox id="txtEmail" runat="server" />
7. Hạn chế maxlength cho TextArea
Cuối cùng, nó bình thường để đặt một vùng văn bản trên Form và xác nhận số lượng tối đa của các ký tự trên nó.
<!-- jQuery: Limiting MaLength for TextArea -->
var MaxLength = 500;
$('#txtDescription').keypress(function(e)
{
if ($(this).val().length >= MaxLength) {
e.preventDefault();}
});
<!-- HTML: Limiting MaLength for TextArea-->
<asp:TextBox ID="txtDescription" runat="server"
TextMode="MultiLine" Columns="50" Rows="5"></asp:TextBox>
Đây là lựa chọn của tôi về đoạn mã jQuery nhưng jQuery là framework phía client