Thủ thuật lập trình jQuery - phần 1

Thủ thuật lập trình jQuery - phần 1

  

Những thủ thuật trong lập trình jquery mà giúp ích cho chúng ta rất nhiều để giải quyết một số vấn đề thường gặp của các bạn

1. Sử dụng jQuery từ Google
Google có một phiên bản mới của jQuery được làm sẵn có cho các nhà phát triển. Thay vì sử dụng bản sao jQuery riêng, bạn nên tận dụng dự “hào phóng” từ Google để sử dụng jQuery 

CODE



<script src="http://ajax.Googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

2. Kiểm tra ngày sinh sử dụng jQuery
Kiểm tra ngày sinh là một chức năng thường có ở các trang web có nội yêu cầu độ tuổi phải trên 18. Với jQuery điều này thực hiện như sau: 

CODE


$("#lda-form").submit(function(){
    var day = $("#day").val();
    var month = $("#month").val();
    var year = $("#year").val();
    var age = 18;
    var mydate = new Date();
    mydate.setFullYear(year, month-1, day);

    var currdate = new Date();
    currdate.setFullYear(currdate.getFullYear() - age);
    if ((currdate - mydate) < 0){
        alert("Sorry, only persons over the age of " + age + " may enter this site");
        return false;
    }
    return true;
});

3. Kiểm tra hình ảnh nạp đúng cách
Làm thế nào để bạn biết nếu một hình ảnh đã được tải? Trong một số trường hợp đặc biệt như hình ảnh xác thực, người sử dụng có thể gặp vấn đề nếu hình ảnh không được nạp đúng cách. Sử dụng code dưới đây, bạn sẽ có thể biết nếu hình ảnh của được hiển thị.

CODE


$('#myImage').attr('src', 'image.jpg').load(function() {
    alert('Image Loaded');
});

4. Kiểm tra thuộc tính target=”blank” trong XHTML 1.0 Strict
Thuộc tính target=”blank”dùng trong việc muốn mở link ở 1 tab hoặc cửa số khác. Trong xHTML 1.0 Strict thì target=”blank” không được hỗ trợ. Dử dụng jQuery sẽ khắc phục được điều này.

CODE


$("a[@rel~='external']").click( function() {
    window.open( $(this).attr('href') );
    return false;
});

5. Tìm kiếm trong văn bản bằng cách sử dụng jQuery
Chức năng sau đây sẽ cho phép tìm kiếm văn bản đầy đủ trên trang bằng cách sử dụng jQuery. Tính năng này là không chỉ đẹp mắt mà còn hữu ích.

CODE


$.fn.egrep = function(pat) {

var out = [];
var textNodes = function(n) {
  if (n.nodeType == Node.TEXT_NODE) {
   var t = typeof pat == 'string' ?
    n.nodeValue.indexOf(pat) != -1 :
    pat.test(n.nodeValue);
   if (t) {
    out.push(n.parentNode);
   }
  }
  else {
   $.each(n.childNodes, function(a, b) {
    textNodes(b);
   });
  }
};
this.each(function() {
  textNodes(this);
});
return out;
};

6. outerHTML
Thuộc tính innerHTML rất hữu ích: Nó cho phép lấy nội dung của 1 phần tử HTML. Nhưng nếu bạn cần cả nội dung lẫn tag HTML? bạn cần “outerHTML”

CODE


jQuery.fn.outerHTML = function() {
    return $('
<div>').append( this.eq(0).clone() ).html();
};</div>

7. Mở popup
Mặc dù phổ biến của popup giảm cùng với sự gia tăng của các chức năng chặn popup, cửa sổ pop-up vẫn có thể có ích trong một số trường hợp cụ thể. Đây là code để mở các liên kết trong cửa sổ pop-up. Chỉ cần thêm class css “popup” vào liên kết của bạn để nó làm việc.

CODE


jQuery('a.popup').live('click', function(){
    newwindow=window.open($(this).attr('href'),'','height=200,width=150');
    if (window.focus) {newwindow.focus()}
    return false;
});

8. Nhận dạng trình duyệt
Như tiêu đề, việc phát triển website thích hợp với tất cả trình duyệt là một thử thách cho các nhà phát triển, đoạn code giúp ích cho việc đó.

CODE


//A. Target Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );

//B. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//C. Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//D. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );

9. Lấy vị trí tương đối của con trỏ chuột
Bạn có bao giờ muốn lấy được vị trí chuột tương đối? Chức năng này rất tiện dụng sẽ trả lại vị trí chuột (x và y) theo phần tử cha của nó

CODE


function rPosition(elementID, mouseX, mouseY) {
  var offset = $('#'+elementID).offset();
  var x = mouseX - offset.left;
  var y = mouseY - offset.top;

  return {'x': x, 'y': y};
}

10. Phân tích một file XML bằng cách sử dụng jQuery
XML là loại tập tin rất quan trọng trên Internet , và nhiều nhà phát triển phân tích chúng time by time.Toàn bộ quá trình phân tích thể hiện qua đoạn code sau:

CODE


function parseXML(XML) {
  //find every Tutorial and print the author
  $(XML).find("Tutorial").each(function()
  {
    $("#output").append($(this).attr("author") + "");
  });
}