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

Với những bạn lập trình Web thì việc sử dung Jquery đã trở nên quen thuộc và cần thiết vì những lợi ích mà nó mang lại cho trang Web của chung ta. Tài liệu tổng hợp các bài viết và các thủ thuật về Jquery từ cơ bản đến nâng cao. Hướng dẫn chi tiết và rất dễ thực hành.

Trang 1

Làm quen với thư viện jQuery từ A đến Z

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

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

Trang 2

đả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

src="http://ajax.Googleapis.com/ajax/libs/jquery/1/jquery.min.js">

Đ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

src="http://ajax.Googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

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ã:

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:

Trang 3

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:

Trang 4

Để 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:

.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);

Trang 5

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>

</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

Trang 6

</script>

Ví dụ element name: Check vào một radio sẽ hiển thị alert

<input name="cks" type="radio" value="radio1"/>radio 1

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();

Trang 7

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

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

Trang 8

//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;

Trang 9

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:

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

Trang 10

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

Trang 11

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

Trang 12

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

Trang 13

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>

Trang 14

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:

$('#theImagé).attr('src', 'imagẹ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').datắ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.cookiẹindexOf("cookietest=") != -1; if(!cookiesEnabled) { //cookies have not been enabled }

38 How to Expire A Cookie:

var date = new Date(); datẹsetTime(datẹgetTime() + (x * 60 * 1000)); $.cookie('examplé, 'foó, { expires: date });

39 Replace any URL on your page with a clickable link

$.fn.replaceUrl = function() { var regexp = 9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi; this.each(function() { $(this).html( $

/((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-(this).html().replace(regexp,'<a href="$1">$1</a>‘) ); }); return $(this); } //usage $

số phương thức phương thức phổ biến của jQuery để thêm vào nội dung và các thành phần mới vào trong tài liệu HTML

Hôm nay mình sẽ giới thiệu với các bạn cách thêm thành phần mới vào tài liệu HTML

1 Phương thức after(content, [,content])

Phương thức after() cho phép chúng ta thêm vào nội dung, hoặc các thành phần HTML vào

Trang 15

ngay sau phần tử tìm được trong cấu trúc HTML

$('.inner').after('<p>Thành phần p được thêm vào khi sử dụng after()</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:

<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:

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>');

Trang 16

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>

<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

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

Trang 17

$('.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>

<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>

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

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

B2: Khai báo css cho miendatwebPopup plugin

CODE

B3: Tạo 1 control HTML để khi có event sẽ gọi sự kiện mở popup

CODE

Trang 18

<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

<h2>Tiêu Đề Popup</h2>

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

Trang 19

</p>

<p>

<label for="email">Email</label>

<input id="email" name="email"

placeholder="info@miendatweb.com" type="email" autocomplete="OFF" src=""/>

<input id="name" name="name" type="text"

<label for="cardnumber">Card number</label>

</p>

<p>

<label for="secure">Security code</label>

<input id="secure" name="secure" type="number"

autocomplete="OFF" src=""/>

</p>

<p>

<input id="namecard" name="namecard" type="text"

Trang 20

<option value="Daily" selected="">Daily</option> <option value="Weekly">Weekly</option>

<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"

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

Trang 21

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)

Trang 23

#steps form input:not([type=radio]),

#steps form textarea,

#steps form select{

Trang 24

var $this = $(this);

var prev = current;

Trang 25

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(){

var FormErrors = false;

for(var i = 1; i < fieldsetCount; ++i){

var error = validateStep(i);

kiểm tra dữ liệu các bước đã đúng hay chưa

and returns -1 if errors found, or 1 if not

var $this = $(this);

var valueLength = jQuery.trim($this.val()).length;

Trang 26

$this.css('backg round() -color','#FFFFFF');

Trang 27

2 Mã HTML để tạo các tab cho menu

<li><a href="">Web Development <small>8 Posts</small></a></li> </ul>

// Nếu là tab đầu tiên thì set hiệu ứng là trượt xuống dưới

var content_show = $(this).attr("title");

$("#"+content_show).slideDown();

Tiêu đề	Thủ Thuật Lập Trình JQuery
Trường học	University of Hanoi
Chuyên ngành	Lập trình web
Thể loại	Bài hướng dẫn
Năm xuất bản	2024
Thành phố	Hà Nội

Định dạng
Số trang	54
Dung lượng	824,5 KB