Thủ thuật lập trình jquery

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (637.35 KB, 54 trang )

Làm quen với thư viện jQuery từ A đến Z
23:12 pm GMT +7 Hanoi
Học tập và làm quen với thư viện jQuery , hỗ trợ rất nhiều cho lập trình viên trong việc
viết các mã nguồn javascript nhanh hơn và xử lý tốt hơn
Đây là bài đầu tiên trong chuỗi bài sẽ đưa các bạn từng bước làm quen và sử dụng một trong
những thư viện JavaScript nổi tiếng nhất-JQuery. Chúng ta sẽ bước vào thư viện này một cách
không vội vã theo kiểu cấp tốc và dần dần làm giàu thêm các kiến thức về JQuery để có thể sử
dụng nó tạo ra những thứ mà bạn và người dùng cảm thấy thích thú. Chuỗi bài này dành cho
những người đã nắm vững những kỹ năng về HTML và CSS. Vì vậy nếu bạn chưa từng biết
đến hai ngôn ngữ trên, mình khuyên bạn nên tìm hiểu HTML và CSS trước rồi sau đó hãy
quay trở lại đọc tiếp.
JQuery là gì?
Mục đích của JQuery là làm cho JavaScript trở nên dễ dàng tiếp cận và sử dụng hơn vì thế lập
trình viên sẽ phải viết ít PHP hơn rất nhiều so với việc sử dụng JavaScript thuần túy. Ví dụ,
trong thực tế khi làm việc với JavaScript thuần túy bạn sẽ gặp vô số khó khăn khi giải quyết
việc trình duyệt web này hiển thị PHP của bạn theo cách này còn trình duyệt web khác lại
hiển thị kiểu khác. Thay vì tiêu tốn quá nhiều thời gian cho việc viết các đoạn mã khác nhau
để giải quyết vấn đề trên, bạn chỉ việc viết một đoạn mã duy nhất và JQuery sẽ giải quyết giúp
bạn các vấn đề về hiển thị trên các trình duyệt web khác nhau.
Trong bài viết này
Chúng ta sẽ bắt đầu từ những thứ cơ bản nhất. Trước hết bạn sẽ học cách làm thế nào để
nhúng JQuery vào trang web của bạn để sử dụng nó. Chúng ta sẽ xem xét cách lựa chọn và
tương tác với các element trong trang và sau đó để cho trực quan hơn ta sẽ làm một ví dụ cho
một element di chuyển trong trang của chúng ta. Mỗi bài viết sau mình sẽ bắt đầu tiếp từ phần
kết thúc của bài viết trước vì vậy các bạn nên theo dõi các bài viết một cách lần lượt. Các bạn
có thắc mắc gì hãy gửi lại cho mình trong phần comment. Và bây giờ, chúng ta cùng bắt đầu.
Nhúng JQuery vào trang của bạn
Trước khi chúng ta có thể sử dụng JQuery, ta cần phải nhúng thư viện này vào trang của
chúng ta. Thư viện JQuery là một tệp tin javascript có đuôi .js, thư viện này chứa các đoạn mã
làm nên tên tuổi của JQuery . Đầu tiên bạn có thể download JQuery và nhúng vào trang của
bạn theo cách sau đây:

CODE
<script type="text/javascript" src="path/to/jquery.min.js">
Nếu bạn làm theo cách này hãy download thư viện JQuery phiên bản minified, nó sẽ giảm bớt
gánh nặng cho server của bạn.
Cách thứ hai, cũng là cách được ưa chuộng hơn, đó là nhúng từ Google’s Content Delivery
Network, hay gọi tắt là CDN. Có ít nhất hai ưu điểm khi dùng cách này, thứ nhất bạn luôn
đảm bảo được sử dụng thư viện phiên bản mới nhất, thứ hai server của bạn sẽ không phải load
thư viện vì vậy tiết kiệm băng thông. Để nhúng từ CDN ta sử dụng dòng PHP tương tự như
trên:
CODE
<script type="text/javascript"
src="
Đoạn mã trên luôn load phiên bản mới nhất của thư viện JQuery(tính đến trước khi phiên bản
2 được release), tuy nhiên nếu bạn muốn load một phiên bản cụ thể, bạn cũng có thể dùng
đoạn PHP sau:
CODE
<script type="text/javascript"
src=" />Bây giờ chúng ta sẽ viết một ít PHP
Ta đã biết cách nhúng JQuery vào trang của ta, và sẽ viết một đoạn PHP xem JQuery hoạt
động như thế nào. Bạn nhúng JQuery theo một trong hai cách nêu trên vào trang của bạn tuy
nhiên bạn phải chờ cho trang của bạn load xong phần hiển thị nội dung của trang, điều đó có
nghĩa là tất cả các nội dung HTML phải được load trước JQuery, và cuối cùng mới là đoạn
mã:
<script type="text/javascript"></script>
Về mặt lý thuyết là như vậy, tuy nhiên bạn hoàn toàn có thể đặt đoạn mã trên vào giữa các thẻ
<head></head> hay bất cứ chỗ nào trong trang HTML, khi làm như thế bạn phải tuân thủ
ngyên tắc sau:
CODE
$(document).ready(function(){
//Tất cả các mã JQuery của bạn phải nằm trong function này

});
Nguyên tắc trên đảm bảo tất cả các mã bạn viết chạy sau khi nội dung của trang đã được load
đầy đủ. Nguyên tắc này chỉ phải tuân thủ khi bạn nhúng JQuery ở bất kỳ chỗ nào trong trang
HTML trước khi bạn đóng thẻ </body>. Còn nếu bạn nhúng JQuery sau khi đóng thẻ </body>
bạn không cần tuân thủ nguyên tắc này.
Bên trong <script type=”text/javascript”></script> ta sẽ viết PHP của ta. Trước khi tương tác
với các element, chúng ta sẽ tìm hiểu cách lựa chọn element. Nếu bạn biết về CSS, điều này
hết sức dễ dàng. Để lựa chọn element trong JQuery, ta sử dụng dấu $ theo bởi dấu ngoặc đơn
$(‘selector bạn chọn nằm ở đây’). Các selector là tất cả các selector hợp lệ bao gồm cả
selector trong CSS3. Ví dụ để chọn tất cả các div trong trang của mình bạn chỉ việc viết: $
(‘div’), một vài ví dụ nữa:
CODE
$('div p') //chọn tất cả các paragraph nằm bên trong thẻ div.
$('#something') //chọn element có id là 'something'
$('.something') //chọn tất cả các element có class='something'
Bạn hoàn toàn có thể chọn các element theo cách phức tạp hơn(Trong bài tiếp theo chúng ta
sẽ dành nhiều thời gian để học cách lựa chọn các element phức tạp)
$('div p#something a') //chọn tất cả các link nằm trong paragraph có id là ‘something’ nằm
trong thẻ div.
Bộ selector engine của JQuery có rất ít giới hạn, trong bài tới các bạn sẽ học cách khai thác
điều này để tận dụng tối đa khả năng của nó. Còn bây giờ để mọi thứ đơn giản, mình sẽ làm
một ví dụ đơn giản. Trong trang của ta, tạo một thẻ div mới như sau:
CODE
<div>
<p>this is some text</p>
</div>
Và tạo luôn css cho thẻ này:
CODE
#something {
width: 200px;

height: 200px;
background()-color: red;
color: white;
border: 4px solid black;
margin: 100px 0 0 80px;
}
Làm cho nó chuyển động
Để kết thúc bài này chúng ta sẽ làm cho phần <div> mà ta vừa tạo chuyển động trong trang
của ta theo chiều từ trên xuống dưới đồng thời từ trái qua phải. Dựa vào những hiểu biết về
lựa chọn selector, ta sẽ chọn selector của ta như sau:
CODE
$(‘something’)
Tương tự, bạn hoàn toàn có thể chọn với dòng PHP $(‘div’) nếu bạn thích, tuy nhiên cá nhân
mình, mình thích cụ thể hóa selector đến mức có thể. Sau khi đã chọn element, ta sử dụng
hàm animate() của JQuery để làm cho thẻ div của ta chuyển động:
CODE
$('#something').animate({'margin-top': '300px', 'margin-left': '400px'},3000);
Hàm animate() nhận 3 tham số truyền vào, tuy nhiên một trong 3 tham số trên là tuỳ
chọn(không bắt buộc)
CODE
.animate(things to change, speed, callback);
Ở đây ‘things to change’ là những thuộc tính của element mà ta muốn dịch chuyển, trong ví
dụ của chúng ta đó là căn lề trên và lề trái. Cách mà ta truyền nhiều thuộc tính của element
như sau:
CODE
.animate({'param': 'value', 'param2': 'value'}, speed, callback)
Sau giá trị của mỗi thuộc tính bạn thêm dấu phẩy, ngoài ra sau giá trị của thuộc tính cuối
cùng, ”speed” là thời gian chờ di chuyển hay: bao lâu trước khi element di chuyển. Khoảng
thời gian này tính theo mili giây(ở trong ví dụ của ta 3000 = 3 giây). “callback” là hàm sẽ
chạy tiếp theo sau khi hàm animate() chạy xong. Hiện tại ta không sử dụng tham số này. Cụ

thể trong đoạn PHP của chúng ta:
CODE
$('#something').animate({'margin-top': '300px', 'margin-left': '400px'},3000);
Chúng ta thay đổi căn lề trên của element từ 100px trong CSS lên 300px, và ta cũng thay đổi
cả căn lề trái. Mở trang của bạn trong trình duyệt web, bạn sẽ thấy thẻ div chuyển động sau 3
giây. Và đây là những gì bạn vừa làm được:
Hy vọng các bạn cảm thấy hứng thú với bài học đầu tiên về JQuery. Nếu các bạn có câu hỏi
gì, hãy gửi lại cho mình trong phần comment, mình sẽ cố gắng trả lời sớm nhất có thể. Chúc
vui vẻ!
Tập tin đính kèm là file hướng dẫn rất đầy đủ tiếng việt do giảng viên trường mình soạn.
Mong rằng các bạn sẻ học nhanh hiểu hết.
Hướng dẫn học jQuery
17:40 pm GMT +7 Hanoi
Đây là bài hướng dẫn cơ bản, nhằm giúp bạn có những kiến thức căn bản để sử dụng
jQuery. Nếu bạn chưa tạo một trang thí nghiệm, hãy tạo một tài liệu HTML với nội
dung như sau
Do jQuery thực chất là một thư viện của javascript. Do đó, jQuery cũng chỉ là một file js
thông thường như những file javascript khác.
Việc đầu tiên phải làm khi bắt đầu sử dụng jQuery là phải khai báo, hay nói cách khác là load
file jQuery javascript lên trên website của mình. Có hai cách để thực hiện việc này
Link trực tiếp tới file jQuery.
CODE
<head>
<script src="
</head>
Tải file jQuery.js về máy của mình và sử dụng như file js cá nhân.
Sử dụng jQuery như thế nào?
Dùng từ khóa định nghĩa bởi jQuery. Có hai từ khóa: jQuery và $.
CODE
VD: jQuery("#test") hoặc $("#test")

Sử dụng jQuery để truy xuất tới một Element trong HTML như thế nào?
Trước tiên, một element(là một thẻ trong html như div, table, ) có hai thuộc tính là id và
name. Để truy xuất tới một element có 2 cách sau:
Với ID: jQuery("#element_id") hoặc $("#element_id").
Với name: jQuery("[name='element_name']") hoặc $("[name='element_name']"). Với element
name bạn sẽ được trả ra một mảng các element có cùng name.
Ví dụ element id: Click vào button sẽ hiển thị ra alert
CODE
<script>
$(document).ready(function(){
$("#butAlert").click(function(){
alert("Bạn đã click vào button này.");
});
});
</script>
<input id="butAlert" type="button" value="Alert"/>
Ví dụ element name: Check vào một radio sẽ hiển thị alert
CODE
<script>
$(document).ready(function(){
$("[name='cks']").change(function(){
alert("Bạn đã chọn "+$(this).val()+" này.");
});
});
</script>
<input name="cks" type="radio" value="radio1"/>radio 1
<input name="cks" type="radio" value="radio2"/>radio 2
<input name="cks" type="radio" value="radio3"/>radio 3
<input name="cks" type="radio" value="radio4"/>radio 4
Thủ thuật lập trình jQuery - phần 1

10:04 am GMT +7 Hanoi
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="
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") + "");
});
}
Thủ thuật lập trình jQuery - phần 2
10:32 am GMT +7 Hanoi
Sau đây mình sẽ giới thiệu một số lưu ý hy vọng sẽ giúp ích các bạn khi lập trình với
Jquery
1. Tạo nhiều filter trên cùng một dòng:
//a filter allows you to reduce the set of matched elements //to those that match a given
selector. In this case the query //removes anything which doesn't (:not) have (:has) a child
with //class "selected" (.selected) .filter(":not(:has(.selected))")
2. Reuse Your Element Searches
var allItems = $("div.item"); var keepList = $("div#container1 div.item"); //Now you can keep
working with those jQuery objects. For example, //trim down the "keep list" based on
checkboxes whose names //correspond to <div>class names: $(formToLookAt + "
input:checked").each(function() { keepList = keepList.filter("." + $
(this).attr("name")); });</div>
3. Kiểm tra nếu có element hoặc class với lệnh has():
//jQuery 1.4.* includes support for the has method. This method will find //if a an element
contains a certain other element class or whatever it is //you are looking for and do anything
you want to them. $("input").has(".email").addClass("email_icon");
4. Đổi CSS với jquery:
//Look for the media-type you wish to switch then set the href to your new style sheet $
('link[media='screen']').attr('href', 'Alternative.css');
5. Limit the Scope of Selection (For Optimization):
//Where possible, pre-fix your class names with a tag name //so that jQuery doesn't have to
spend more time searching //for the element you're after. Also remember that anything //you
can do to be more specific about where the element is //on your page will cut down on

execution/search times var in_stock = $('#shopping_cart_items input.is_in_stock'); <ul
id="shopping_cart_items"> <li> <input value="Item-X" name="item" class="is_in_stock"
type="radio"> Item X</li> <li> <input value="Item-Y" name="item" class="3-5_days"
type="radio"> Item Y</li> <li> <input value="Item-Z" name="item" class="unknown"
type="radio"> Item Z</li> </ul>
6. Correctly Use ToggleClass:
//Toggle class allows you to add or remove a class //from an element depending on the
presence of that //class. Where some developers would use: a.hasClass('blueButton') ?
a.removeClass('blueButton') : a.addClass('blueButton'); //toggleClass allows you to easily do
this using a.toggleClass('blueButton');
7. Thiết lập các hàm dành riêng cho IE:
if ($.browser.msie) { // Internet Explorer is a sadist. }
Thay thế một element với Jquery:
$('#thatdiv').replaceWith('fnuh');
Kiểm tra một element rỗng hay không:
if ($('#keks').html()) { //Nothing found ;}
Find out the index of an element in an unordered set
$("ul > li").click(function () { var index = $(this).prevAll().length; });
Bind a function to an event:
$('#foo').bind('click', function() { alert('User clicked on "foo."'); });
Append or add HTML to an element:
$('#lal').append('sometext');
Use an object literal to define properties when creating an element
var e = $("", { href: "#", class: "a-class another-class", title: " " });
8. Filter using multiple-attributes
//This precision-based approached can be useful when you use //lots of similar input elements
which have different types var elements = $('#someid input[type=sometype]
[value=somevalue]').get();
9. Preload images with jQuery:
jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments); } }; // Usage

$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
Set an event handler for any element that matches a selector:
$('button.someClass').live('click', someFunction); //Note that in jQuery 1.4.2, the delegate
and undelegate options have been //introduced to replace live as they offer better support for
context //For example, in terms of a table where before you would use // .live() $
("table").each(function(){ $("td", this).live("hover", function(){ $
(this).toggleClass("hover"); }); }); //Now use $("table").delegate("td", "hover", function(){ $
(this).toggleClass("hover"); });
10. Find an option element that’s been selected:
$('#someElement').find('option:selected');
11. Hide an element that contains text of a certain value:
$("p.value:contains('thetextvalue')").hide();
12. AutoScroll to a section of your page:
jQuery.fn.autoscroll = function(selector) { $('html,body').animate( {scrollTop: $
(selector).offset().top}, 500 ); } //Then to scroll to the class/area you wish to get to like this: $
('.area_name').autoscroll();
13. Disable right-click contextual menu :
$(document).bind('contextmenu',function(e){ return false; });
Define a Custom Selector
$.expr[':'].mycustomselector = function(element, index, meta, stack){ // element- is a DOM
element // index - the current loop index in stack // meta - meta data about your selector //
stack - stack of all elements to loop // Return true to include current element // Return false to
explude current element }; // Custom Selector usage: $('.someClasses:test').doSomething();
14. Check if an element exists
if ($('#someDiv').length) {//hooray!!! it exists }
15. Detect Both Right & Left Mouse-clicks with jQuery:
$("#someelement").live('click', function(e) { if( (!$.browser.msie && e.button == 0) ||
($.browser.msie && e.button == 1) ) { alert("Left Mouse Button Clicked"); } else if(e.button
== 2) alert("Right Mouse Button Clicked"); });
16. Show or Erase a Default Value In An Input Field:

//This snippet will show you how to keep a default value //in a text input field for when a user
hasn't entered in //a value to replace it swap_val = []; $(".swap").each(function(i){ swap_val
= $(this).val(); $(this).focusin(function(){ if ($(this).val() == swap_val) { $
(this).val(""); } }).focusout(function(){ if ($.trim($(this).val()) == "") { $
(this).val(swap_val); } }); });
17. Automatically Hide or Close Elements After An Amount Of Time (supports 1.4):
//Here's how we used to do it in 1.3.2 using setTimeout setTimeout(function() { $
('.mydiv').hide('blind', {}, 500) }, 5000); //And here's how you can do it with 1.4 using the
delay() feature (this is a lot like sleep) $(".mydiv").delay(5000).hide('blind', {}, 500);
18. Add Dynamically Created Elements to the DOM:
var newDiv = $(''); newDiv.attr('id','myNewDiv').appendTo('body');
19. Limit The Number Of Characters in a "Text-Area" field:
jQuery.fn.maxLength = function(max){ this.each(function(){ var type =
this.tagName.toLowerCase(); var inputType = this.type? this.type.toLowerCase() : null;
if(type == "input" && inputType == "text" || inputType == "password"){ //Apply the
standard maxLength this.maxLength = max; } else if(type == "textarea"){ this.onkeypress =
function(e){ var ob = e || event; var keyCode = ob.keyCode; var hasSelection =
document.selection? document.selection.createRange().text.length > 0 : this.selectionStart !=
this.selectionEnd; return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 ||
keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection); };
this.onkeyup = function(){ if(this.value.length > max){ this.value =
this.value.substring(0,max); } }; } }); }; //Usage: $('#mytextarea').maxLength(500);
20. Create a basic test for a function:
//Separate tests into modules. module("Module B"); test("some other test", function() {
//Specify how many assertions are expected to run within a test. expect(2); //A comparison
assertion, equivalent to JUnit's assertEquals. equals( true, false, "failing test" ); equals( true,
true, "passing test" ); });
21. Clone an element in jQuery:
var cloned = $('#somediv').clone();
Test if an element is visible in jQuery:

if($(element).is(':visible') == 'true') { //The element is Visible }
22. Center an element on screen:
jQuery.fn.center = function () { this.css('position','absolute'); this.css('top', ( $
(window).height() - this.height() ) / +$(window).scrollTop() + 'px'); this.css('left', ( $
(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;} //Use the
above function as: $(element).center();
23. Put the values of all the elements of a particular name into an array:
var arrInputValues = new Array(); $("input[name='table[]']").each(function()
{ arrInputValues.push($(this).val()); });
24. Strip HTML From Your Element
(function($) { $.fn.stripHtml = function() { var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
this.each(function() { $(this).html( $(this).html().replace(regexp,”") ); }); return $(this); } })
(jQuery); //usage: $('p').stripHtml();
25. Get a parent element using closest:
$('#searchBox').closest('div');
26. Log jQuery events using Firebug and Firefox:
// Allows chainable logging // Usage: $('#someDiv').hide().log('div
hidden').addClass('someClass'); jQuery.log = jQuery.fn.log = function (msg) { if (console)
{ console.log("%s: %o", msg, this); } return this; };
27. Force links to open in a pop-up window:
jQuery('a.popup').live('click', function(){ newwindow=window.open($
(this).attr('href'),'','height=200,width=150'); if (window.focus) {newwindow.focus()} return
false; });
28. Force links to open in a new tab:
jQuery('a.newTab').live('click', function(){ newwindow=window.open($(this).href);
jQuery(this).target = "_blank"; return false; });
29. Select siblings in jQuery using .siblings()
// Rather than doing this $('#nav li').click(function(){ $('#nav li').removeClass('active'); $
(this).addClass('active'); }); // Do this instead $('#nav li').click(function(){ $
(this).addClass('active') .siblings().removeClass('active'); });

30. Toggle All the checkboxes on a page:
var tog = false; // or true if they are checked on load $('a').click(function() { $
("input[type=checkbox]").attr("checked",!tog); tog = !tog; });
31. Filter down a list of elements based on some input text:
//If the value of the element matches that of the entered text //it will be returned $
('.someClass').filter(function() { return $(this).attr('value') == $('input#someId').val() ; })
32. Get mouse cursor X and Y
$(document).mousemove(function(e){ $(document).ready(function() { $
().mousemove(function(e){ $("#XY").html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); });
});
33. Make an entire List Element (LI) clickable
$("ul li").click(function(){ window.location=$(this).find("a").attr("href"); return false; });
<ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a
href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul>
34. Parse XML with jQuery (Basic example):
function parseXML(XML) { //find every Tutorial and print the author $
(XML).find("Tutorial").each(function() { $("#output").append($(this).attr("author") + ""); });
}
35. Check if an image has been fully loaded:
$('#theImage').attr('src', 'image.jpg').load(function() { alert('This Image Has Been
Loaded'); });
36. How to namespace events using jQuery:
//Events can be namespaced like this $('input').bind('blur.validation', function(e){ // });
//The data method also accept namespaces $('input').data('validation.isValid', true);
37. Check if Cookies Are Enabled Or Not:
var dt = new Date(); dt.setSeconds(dt.getSeconds() + 60); document.cookie = "cookietest=1;
expires=" + dt.toGMTString(); var cookiesEnabled =
document.cookie.indexOf("cookietest=") != -1; if(!cookiesEnabled) { //cookies have not been
enabled }
38. How to Expire A Cookie:

<h1>Thành phần h1</div>
<div class="inner">
<p>Thành phần p là con của div</p>
</div>
<p>Thành phần p được thêm vào khi sử dụng .after()</p>
2. Phương thức .before(content, [.content]
Ngược lại với .after(), before() sẽ thêm vào nội dung phía trước phần tử tìm được
CODE
$('.inner').before('<p>Thành phần p được thêm vào khi sử dụng .before()</p>');
Kết quả thành phần p được thêm vào tài liệu HTML ngay sau thành phần như sau:
CODE
<h1>Thành phần h1</div>
<p>Thành phần p được thêm vào khi sử dụng .after()</p>
<div class="inner">
<p>Thành phần p là con của div</p>
</div>
3. Phương thức .append(content, [,content])
Phương thức .append() sẽ cho phép chúng ta thêm vào nội dung bên trong thành phần tìm
được, nhưng sau phần tử con cuối cùng của thành phần đó.
Tiếp tục với ví dụ trên, chúng ta sử dụng phương thức .append() như sau:
CODE
$('.inner').append('<p>Thành phần p được thêm vào khi sử dụng .append()</p>');
Kết quả thành phần p được thêm vào bên trong thành phần div.inner ở vị trí sau cùng so với
các thành phần con của div.inner
CODE
<h1>Thành phần h1</div>
<div class="inner">
<p>Thành phần p là con của div</p>
<p>Thành phần p được thêm vào khi sử dụng .append()</p>
</div>

4. Phương thức .appendTo(selector)
Tác dụng của .appendTo() tương tự như append(), chỉ khác về cách thức khai báo.
Xét ví dụ với .append() ta có thể viết lại sử dụng .appendTo() như sau, kết quả thì hoàn toàn
giống nhau:
CODE
$('<p>Thành phần p được thêm vào khi sử dụng .append()</p>').appendTo('.inner');
Chúng ta nhận thấy rằng, khác với append(), .appendTo() chỉ định nội dung trước khi selector
được chọn.
.appendTo() còn có một tác dụng khác là nó có thể di chuyển một thành phần đến một vị trí
khác.
Xét đoạn mã sau:
CODE
$('h1').appendTo('.inner');
Kết quả:
CODE
<div class="inner">
<p>Thành phần p là con của div</p>
<h1>Thành phần h1</div>
</div>
Như vậy thành phần h1 được được di chuyển đến vị trí mới div.inner
5. Phương thức .prepend(content, [,content])
Giống như append(), Phương thức .prepend() sẽ cho phép chúng ta thêm vào nội dung bên
trong thành phần tìm được, nhưng trước các phần tử con của thành phần đó.
CODE
$('.inner').prepend('<p>Thành phần p được thêm vào khi sử dụng .prepend()</p>');
Kết quả thành phần p được thêm vào bên trong thành phần div.inner ở vị trí đầu tiên so với
các thành phần con của div.inner
CODE
<h1>Thành phần h1</div>
<div class="inner">

<p>Thành phần p được thêm vào khi sử dụng .append()</p>
<p>Thành phần p là con của div</p>
</div>
6. Phương thức .prependTo(selector)
Tác dụng của prependTo() tương tự như appendTo(), chỉ khác là nội dung sẽ được thêm vào
trị đầu tiên (index = 0) so với các thành phần con của thành phần tìm được
Ngoài ra chúng ta còn có insertAfter() được sử dụng như appendTo() và insertBefore() được
sử dụng như prependTo()
wrap(), unwrap(), wrapAll(), wrapInner() bạn có thể tìm hiểu thêm round()/]tại đây
Tạo popup với jQuery đơn giản và nhanh chóng
11:20 am GMT +7 Hanoi
Trong lập trình website, chắc hẳn không ít bạn đã dùng đến popup. Sau đây mình xin
giới thiệu 1 plugin hỗ trợ hiển thị popup đơn giản và nhanh chóng.
Đây là plugin do mình viết, cũng rất đơn giản và dễ hiễu. Còn viết plugin cho jQuery như thế
nào và để tránh đụng độ với các jquery khác thì để bài sau mình sẽ giới thiệu về "plugin trong
jquery và cách tạo 1 plugin"
Quay trở lại với vấn đề popup của chúng ta, chúng ta làm theo thứ tự các bước sau:
B1: Khai báo sử dụng jquery và plugin popup
CODE
<script type="text/javascript" src="js/jquery.1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.popupMiendatweb.min.js"></script>
B2: Khai báo css cho miendatwebPopup plugin
CODE
<link rel="stylesheet" type="text/css" media="screen" href="css/popup.css" />
B3: Tạo 1 control HTML để khi có event sẽ gọi sự kiện mở popup
CODE
<input type="button" id="open_popup" name="open_popup" rel="miendatwebPopup"
href="#popup_content" value="Mở popup"/>
Lưu ý: phải có thuộc tính rel="miendatwebPopup" để plugin nhận biết nó sẽ gọi popup cho
event của control này, và href của control chính là id tham chiếu của popup cần gọi đến.

B4: Tạo nội dung cho popup bằng HTML
CODE
<div id="popup_content" class="popup">
<div class="popup-header">
<h2>Tiêu Đề Popup</h2>
<a class="close_popup" href="javascript:void(0)"></a>
<p>Nội dung mô tả thêm cho tiêu đề (nếu có)</p>
</div>
<div class="info_popup">
miendatwebPopup<br/>
Phiên bản popup: 1.0<br/>
Tác giả: Miền Đất Web<br/>
Liên hệ: <br/>
Ngày tạo: 22/07/2012
</div>
</div>
B5: Cuối cùng, khởi tạo một popup bằng lệnh javascript như sau
CODE
$(function(){
/* khởi tạo popup */
$('input[rel*=miendatwebPopup]').showPopup({
top : 200, //khoảng cách popup cách so với phía trên
closeButton: ".close_popup" , //khai báo nút close cho popup
scroll : false, //cho phép scroll khi mở popup, mặc định là không cho
phép
onClose:function(){
//sự kiện cho phép gọi sau khi đóng popup, cho phép chúng ta gọi 1 số
sự kiện khi đóng popup, bạn có thể để null ở đây
}
});

});
Tạo form đăng ký step by step bằng jQuery
14:22 pm GMT +7 Hanoi
jQuery ngày nay được ứng dụng rất nhiều, để tạo một form đăng ký với jQuery cũng
không có gì là khó. Bạn có thể tham khảo và sử dụng demo dưới đây.
Hôm nay mình sẽ hướng dẫn các bạn tạo một form đăng ký các bước bằng jQuery kết hợp với
ajax để kiểm tra và post thông tin đăng ký mà không cần submit.
HTML sẽ bao gồm một danh sách các fieldset . Mỗi fieldset sẽ là một bước trong quá trình
đăng ký của form. Nào chúng ta cùng bắt đầu
1. Tạo form HTML như sau, mỗi fieldset chứa 1 step(bước) của quá trình đăng ký
CODE
<div id="wrapper">
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>Account</legend>
<p>
<label for="username">User name</label>
<input id="username" name="username" </p>
<p>
<label for="email">Email</label>
<input id="email" name="email"
placeholder="" type="email" autocomplete="OFF" src=""/>
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password"
autocomplete="OFF" src=""/>
</p>
</fieldset>

<fieldset class="step">
<legend>Personal Details</legend>
<p>
<label for="name">Full Name</label>
<input id="name" name="name" type="text"
autocomplete="OFF" src=""/>
</p>
<p>
<label for="country">Country</label>
<input id="country" name="country" type="text"
autocomplete="OFF" src=""/>
</p>
<p>
<label for="phone">Phone</label>
<input id="phone" name="phone" placeholder="e.g.
+351215555555" type="tel" autocomplete="OFF" src=""/>
</p>
<p>
<label for="website">Website</label>
<input id="website" name="website" placeholder="e.g.
" type="tel" autocomplete="OFF" src=""/>
</p>
</fieldset>
<fieldset class="step">
<legend>Payment</legend>
<p>
<label for="cardtype">Card</label>
<select id="cardtype" name="cardtype">
<option>Visa</option>
<option>Mastercard</option>

<option>American Express</option>
</select>
</p>
<p>
<label for="cardnumber">Card number</label>
<input id="cardnumber" name="cardnumber" type="number"
autocomplete="OFF" src=""/>
</p>
<p>
<label for="secure">Security code</label>
<input id="secure" name="secure" type="number"
autocomplete="OFF" src=""/>
</p>
<p>
<label for="namecard">Name on Card</label>
<input id="namecard" name="namecard" type="text"
autocomplete="OFF" </p>
</fieldset>
<fieldset class="step">
<legend>Settings</legend>
<p>
<label for="newsletter">Newsletter</label>
<select id="newsletter" name="newsletter">
<option value="Daily" selected="">Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Never">Never</option>
</select>
</p>
<p>

<label for="updates">Updates</label>
<select id="updates" name="updates">
<option value="1" selected="">Package 1</option>
<option value="2">Package 2</option>
<option value="0">Don't send updates</option>
</select>
</p>
<p>
<label for="tagname">Newsletter Tag</label>
<input id="tagname" name="tagname" type="text"
autocomplete="OFF" src=""/>
</p>
</fieldset>
<fieldset class="step">
<legend>Confirm</legend>
<p>
Everything in the form was correctly filled
if all the steps have a green checkmark icon.
A red checkmark icon indicates that some field
is missing or filled out with invalid data. In
this
last step the user can confirm the submission of
the form.
</p>
<p class="submit">
<button id="registerButton"
type="submit">Register</button>
</p>
</fieldset>
</form>

</div>
<div id="navigation" style="display:none;">
<ul>
<li class="selected">
<a href="#">Account</a>
</li>
<li>
<a href="#">Personal Details</a>
</li>
<li>
<a href="#">Payment</a>
</li>
<li>
<a href="#">Settings</a>
</li>
<li>
<a href="#">Confirm</a>
</li>
</ul>
</div>
</div>
Lưu ý là các fieldset này phải đặt có thứ tự để việc điều hướng bằng jQuery và chỉnh CSS dễ
dàng hơn
2. Thiết kế CSS cho phần khung bao ngoài của các fieldset(các bước)
CODE
#wrapper{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
-moz-border-radius:10px;

-webkit-border-radius:10px;
border-radius:10px;
border:2px solid #fff;
background()-color:#f9f9f9;
width:600px;
overflow:hidden;
}
#steps{
width:600px;
overflow:hidden;
}
.step{
float:left;
width:600px;
}
3. Thiết kế style cho mỗi fieldset
CODE
#navigation{
height:45px;
background()-color:#e9e9e9;
border-top:1px solid #fff;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#navigation ul{
list-style:none;
float:left;

margin-left:22px;
}
#navigation ul li{
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
position:relative;
margin:0px 2px;
}
4. Tạo style cho link với CSS3 gradient và nền cho link của mỗi step
CODE
#navigation ul li a{
display:block;
height:45px;
background()-color:#444;
color:#777;
outline:none;
font-weight:bold;
text-decoration:none;
line-height:45px;
padding:0px 20px;
border-right:1px solid #fff;
border-left:1px solid #fff;
background():#f0f0f0;
background():
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(240,240,240)),

color-stop(0.55, rgb(227,227,227)),
color-stop(0.78, rgb(240,240,240))
);
background():
-moz-linear-gradient(
center bottom,
rgb(240,240,240) 9%,
rgb(227,227,227) 55%,
rgb(240,240,240) 78%
)
}
#navigation ul li a:hover,
#navigation ul li.selected a{
background():#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
}[/PHP]
5. Đây là phần style dành cho các bước nếu việc kiểm tra(validate) đúng hoặc sai
CODE
span.checked{
background():transparent url( /images/checked.png) no-repeat top left;
position:absolute;
top:0px;
left:1px;
width:20px;
height:20px;
}
span.error{
background():transparent url( /images/error.png) no-repeat top left;
position:absolute;

top:0px;
left:1px;
width:20px;
height:20px;
}
6. Tạo style cho các thành phần của các bước trong form như sau
CODE
#steps form fieldset{
border:none;
padding-bottom:20px;
}
#steps form legend{
text-align:left;
background()-color:#f0f0f0;
color:#666;
font-size:24px;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
float:left;
width:590px;
padding:5px 0px 5px 10px;
margin:10px 0px;
border-bottom:1px solid #fff;
border-top:1px solid #d9d9d9;
}
#steps form p{
float:left;
clear:both;
margin:5px 0px;
background()-color:#f4f4f4;

border:1px solid #fff;
width:400px;
padding:10px;
margin-left:100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
}
#steps form p label{
width:160px;
float:left;
text-align:right;
margin-right:15px;
line-height:26px;
color:#666;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select{
background(): #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;

padding: 5px;
width: 200px;
float:left;
}
#steps form input:focus{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background()-color:#FFFEEF;
}
#steps form p.submit{
background():none;
border:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
#steps form button {
border:none;
outline:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor:pointer;
margin: 0px auto;
clear:both;
padding: 7px 25px;
text-shadow: 0 1px 1px #777;

font-weight:bold;
font-family:"Century Gothic", Helvetica, sans-serif;
font-size:22px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background():#4797ED;
}
#steps form button:hover {
background():#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
}
7. Việc thiết kế HTML và CSS đã xong, việc tiếp theo là viết các đoạn mã jQuery để thực thi
và validate
CODE
$(function() {
/*
number of fieldsets
*/
var fieldsetCount = $('#formElem').children().length;
/*
Bước hiện hành mà người dùng đang điền thông tin
*/
var current = 1;
/*
tính tổng độ rộng của form
*/
var stepsWidth = 0;
var widths = new Array();

$('#steps .step').each(function(i){
var $step = $(this);
widths = stepsWidth;
stepsWidth += $step.width();
});
$('#steps').width(stepsWidth);
/*
to avoid problems in IE, focus the first input of the form
*/
$('#formElem').children(':first').find(':input:first').focus();
/*
show the navigation bar
*/
$('#navigation').show();
/*
Đóng tất cả các bước khi nhấn sang 1 bước khác, sau đó active bước vừa nhấn
*/
$('#navigation a').bind('click',function(e){
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
/*
lưu trữ giá trị của bước hiện hành
*/
current = $this.parent().index() + 1;
/*
Tạo animation cho các bước khi nhấn link di chuyển đến các bước khác
*/
$('#steps').stop().animate({

marginLeft: '-' + widths[current-1] + 'px'
},500,function(){
if(current == fieldsetCount)
validateSteps();
else
validateStep(prev);
$('#formElem').children(':nth-child('+ parseInt(current)
+')').find(':input:first').focus();
});
e.preventDefault();
});
/*
kiểm tra lỗi ở các bước mà vừa lost focus
*/
$('#formElem > fieldset').each(function(){
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e){
if (e.which == 9){
$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
/*
hàm kiểm tra tất cả các bước có lỗi hay không trước khi submit
records if the form has errors in $('#formElem').data()
*/
function validateSteps(){

Thủ thuật lập trình jquery

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về