Hướng dẫn và ví dụ jQuery
Xem thêm các chuyên mục:

Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.




- jQuery 1.x
- jQuery 2.x



<!-- Khai báo sử dụng jquery, trỏ nguồn tới vị trí để thư viện jquery của bạn -->
<script type="text/javascript" src="../jquery-1.11.3.min.js"></script>
<!-- Hoặc khai báo sử dụng nguồn trên mạng -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js">
</script>
// Khi document sẵn sàng.
jQuery(document).ready(function(){
alert('Hello jQuery');
});
// Bạn cũng có thể sử dụng $ thay cho jQuery.
$(document).ready(function(){
alert('Hello jQuery');
});
<html>
<head>
<meta charset="utf-8">
<title>Hello jQuery Example</title>
<!-- (1): Khai báo sử dụng thư viện JQuery -->
<script src="../jquery-1.11.3.min.js"></script>
</head>
<body>
<h2>Hello jQuery Example</h2>
<a href="">Reset</a>
<script type="text/javascript">
jQuery(document).ready(function(){
alert("Hello jQuery");
});
</script>
</body>
</html>
Khái niệm về Selector là một trong những khái niệm quan trọng nhất của jQuery.

// Lựa chọn ra tất cả các phần tử <div> trong tài liệu HTML
jQuery('div')
// Bạn có thể sử dụng $ thay cho jQuery.
$('div')
<html>
<head>
<meta charset="utf-8">
<title>jQuery Select elements by tagName</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div {
padding: 5px;
margin:5px;
width: 100px;
}
</style>
<script>
function selectDiv() {
$('div').css("border","1px solid red");
}
</script>
</head>
<body>
<input type="button" onclick="selectDiv();" value="Select Div"/>
<a href="">Refresh this page</a>
<div>Div1</div>
<h2>H2 tag</h2>
<div>
<div>Div3</div>
<div>Div4</div>
</div>
</body>
</html>
// Chọn ra tất cả các phần tử có classname='abc'.
jQuery('.abc')
// Bạn có thể thay thế jQuery bởi $
$('.abc')
<html>
<head>
<meta charset="utf-8">
<title>jQuery Select elements by classname</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
h2, div {
padding: 5px;
margin:5px;
width: 250px;
}
</style>
<script>
function selectByClassName() {
$('.abc').css("border","1px solid red");
}
</script>
</head>
<body>
<input type="button" onclick="selectByClassName();" value="Select By ClassName"/>
<a href="">Reset</a>
<div>Div1</div>
<h2 class='abc'>H2 with class='abc'</h2>
<div>
<div class='abc'>Div3 with class='abc'</div>
<div class='abc'>Div4 with class='abc'</div>
</div>
</body>
</html>
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") | Tất cả các phần tử <p> |
el1,el2,el3 | $("h1,div,p") | Tất cả các phần tử <h1>, <div> và <p> |
:first | $("p:first") | Phần tử <p> đầu tiên |
:last | $("p:last") | Phần tử <p> cuối cùng |
:even | $("tr:even") | Tất cả các phần tử <tr> có thứ tự chẵn |
:odd | $("tr:odd") | Tất cả các phần tử <tr> có thứ tự lẻ |
:first-child | $("p:first-child") | Tất cả các phần tử <p> là phần tử con đầu tiên của phần tử cha chúng. |
:first-of-type | $("p:first-of-type") | Tất cả các phần tử <p> là phần tử <p> đầu tiên của cha chúng. |
:last-child | $("p:last-child") | Tất cả các phần tử <p> là phần tử cuối cùng của cha mẹ chúng. |
:last-of-type | $("p:last-of-type") | Tất cả phần tử <p> là phần tử <p> cuối cùng của cha mẹ chúng. |
:nth-child(n) | $("p:nth-child(2)") | Tất cả phần tử <p> là phần tử con thứ 2 của cha mẹ chúng. |
:nth-last-child(n) | $("p:nth-last-child(2)") | Tất cả phần tử <p> là phần tử con thứ 2 của cha mẹ chúng, tính từ cuối trở về trước. |
:nth-of-type(n) | $("p:nth-of-type(2)") | Tất cả phần tử <p> là phần tử <p> thứ 2 của cha mẹ chúng. |
:nth-last-of-type(n) | $("p:nth-last-of-type(2)") | Tất cả phần tử <p> là phần tử <p> thứ 2 của cha mẹ chúng, tính từ cuối trở về trước. |
:only-child | $("p:only-child") | Tất cả phần tử <p> là phần tử con duy nhất của bố mẹ chúng. |
:only-of-type | $("p:only-of-type") | Tất cả các phần tử <p> mà nó là phần tử <p> con duy nhất của bố mẹ chúng. |
parent > child | $("div > p") | Tất cả các phần tử <p> là con trực tiếp của phần tử <div> |
parent descendant | $("div p") | Tất cả các phần tử <p> là hậu duệ của phần tử <div> (con, cháu, ...) |
element + next | $("div + p") | Các phần tử <p> nằm bên cạnh các phần tử <div> |
element ~ siblings | $("div ~ p") | Tất cả các phần tử <p> là anh em với phần tử <div> (Cùng cha mẹ) |
: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)") | Tất cả các phần tử <input> không rỗng (not empty). |
:header | $(":header") | Tất cả các phần tử header <h1>, <h2> ... |
: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)") | Tất cả các phần tử <div> có một phần tử <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") | Tất cả các phần tử <p> ẩn (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)") | Tất cả phần tử <p> với một giá trị thuộc tính lang bắt đầu với "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" |
[attribute|=value] | $("[title|='Tomorrow']") | 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") | Tất cả các phần tử <input> với type="text" |
:password | $(":password") | Tất cả các phần tử <input> với type="password" |
:radio | $(":radio") | Tất cả các phần tử <input> với type="radio" |
:checkbox | $(":checkbox") | Tất cả các phần tử <input> với type="checkbox" |
:submit | $(":submit") | Tất cả các phần tử <input> với type="submit" |
:reset | $(":reset") | Tất cả các phần tử <input> với type="reset" |
:button | $(":button") | Tất cả các phần tử <input> với type="button" |
:image | $(":image") | Tất cả các phần tử <input> với type="image" |
:file | $(":file") | Tất cả các phần tử <input> với type="file" |
:enabled | $(":enabled") | Tất cả các phần tử <input> có tác dụng (enabled) |
:disabled | $(":disabled") | Tất cả các phần tử <input> bị vô hiệu hóa (disabled) |
:selected | $(":selected") | Tất cả các phần tử <input> đang được chọn (selected) |
:checked | $(":checked") | Tất các các phần tử <input> đang được check (checked) |
- $('div') - Các phần tử <div>.
- $('.abc') - Các phần tử có class='abc'.
- $('#slider') - Phần tử có ID là slider
- $('div.abc') - Các phần tử <div> có class='abc'.
- $('div#slider') - Phần tử <div> có id ='slider'.
- $("p:first-child") - Các phần tử <p> là con đầu tiên của cha mẹ chúng.
- $('div') - Các phần tử <div>
- $("div p") - Các phần tử <p> là hậu duệ của <div> (Con, cháu, ..)
- $('div p:first-child') - Các phần tử <p> là con đầu tiên của các phần tử <div>

<html>
<head>
<meta charset="utf-8">
<title>jQuery Select First child of div</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
h2, div , p {
padding: 5px;
margin:5px;
width: 350px;
border: 1px solid blue;
}
</style>
<script>
function selectAdv() {
$('div p:first-child').css("background","#ccc");
}
</script>
</head>
<body>
<input type="button" onclick="selectAdv();" value="Select First Child of div"/>
<a href="">Reset</a>
<div>Div element</div>
<h2 class='abc'>H2 element</h2>
<div> Div element
<p class='abc'>p - first child of div</p>
<p class='abc'>p - second child of div</p>
<div class='abc'> Div element
<p>p - first child of div</p>
</div>
</div>
<div>
<div class='abc'>Div element</div>
<p class='abc'>p - second child of p</p>
</div>
</body>
</html>
<!-- Một phần tử <a> có 2 thuộc tính href & target -->
<a href="abc.html" target="_blank">Abc.html</a>
<html>
<head>
<meta charset="utf-8">
<title>jQuery - Get Attribute</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
function getAttr() {
// Lấy ra giá trị thuộc tính href của phần tử có id= 'atag'
var hrefValue = $('#atag').attr("href");
// Sét html vào thẻ có id = 'atag'.
$('#atag').html(hrefValue);
}
</script>
</head>
<body>
<input type="button" onclick="getAttr();" value="Get Attribute"/>
<a href="">Reset</a>
<br><br>
<a id="atag" href="http://jquery.com" target="_blank">jQuery</a>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery - Set Attribute</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
function setAttr() {
// Sét đặt giá trị mới cho thuộc tính src.
$('img').attr("src","images/jquery-mobile.png");
}
</script>
</head>
<body>
<input type="button" onclick="setAttr();" value="Set Attribute"/>
<a href="">Reset</a>
<br><br>
<img src="images/jquery.png" > <img src="images/jquery2.png" >
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery - Apply Style</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
.selected {color: red; }
.highlight {background: yellow;}
</style>
<script>
function applyStyle() {
$('h1').addClass('selected highlight');
$('h2').addClass('selected');
}
</script>
</head>
<body>
<input type="button" onclick="applyStyle();" value="Apply Style"/>
<a href="">Reset</a>
<br><br>
<h1>H1 will apply selected + highlight</h1>
<h2>H2 will apply selected</h2>
<h1>H1 will apply selected + highlight</h1>
</body>
</html>
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 )
Sét giá trị thuộc tính cho tất cả các phần tử phù hợp. Nếu nó được gọi trên phần từ <input>, nếu gọi trên <select> thì giá trị sẽ chuyển sang cho <option>, nếu nó gọi trên checkbox hoặc radio thì tất cả các check box, hoặc radio phù hợp sẽ được checked. |
$("input").val('New value'); |
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<h3>jQuery Traversing</h3>
<div>
<ul>
<li>Java</li>
<li>.Net</li>
<li>PHP</li>
</ul>
</div>
</body>
</html>

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ử.
- parent()
- parents()
- parentsUntil()
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, ul, li { width: 200px;padding: 5px; margin: 5px; border: 1px solid blue;}
.abc {border: 1px solid red;}
</style>
<script>
function highlightParent() {
$('.abc').parent().css("background","#ccc");
}
</script>
</head>
<body>
<h3>jQuery Traversing - parent </h3>
<input type="button" onclick="highlightParent();" value="Highlight parent of element with class='abc'"/>
<a href="">Reset</a>
<div>
<ul>
<li class='abc'>li class='abc' </li>
<li>li element</li>
<li>li element</li>
</ul>
</div>
<div>
<div class='abc'>Div class='abc'</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, ul, li { width: 200px;padding: 5px; margin: 5px; border: 1px solid blue;}
.abc {border: 1px solid red;}
</style>
<script>
function highlightParents() {
$('.abc').parents('div').css("background","#ccc");
}
</script>
</head>
<body>
<h3>jQuery Traversing - parent </h3>
<input type="button" onclick="highlightParents();" value="Highlight DIV ancestors of element with class='abc'"/>
<a href="">Reset</a>
<div>
<ul>
<li class='abc'>li class='abc' </li>
<li>li element</li>
<li>li element</li>
</ul>
</div>
<div>
<div class='abc'>Div class='abc'</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - parentsUntil</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, span, ul, li , h2 {padding: 5px; margin: 5px; border: 1px solid blue;}
</style>
<script>
function highlightParentsUntil() {
$('h2').parentsUntil('div').css("border","2px solid red");
}
</script>
</head>
<body>
<h3>jQuery Traversing - parentsUtil</h3>
<p>$('h2').parentsUntil('div').css("border","2px solid red");</p>
<input type="button" onclick="highlightParentsUntil();"
value="Highlight ancestors elements between H2 and DIV"/>
<a href="">Reset</a>
<div> div element
<ul> ul element
<li>
li element
<h2>h2 element</h2>
</li>
<li>li element</li>
</ul>
</div>
</body>
</html>
- children()
- find()
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - children</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, span, ul, li , h2 {padding: 5px; margin: 5px; border: 1px solid blue;}
</style>
<script>
function highlightChildren() {
$('div').children().css("border","2px solid red");
}
</script>
</head>
<body>
<h3>jQuery Traversing - children</h3>
<p>$('div').children().css("border","2px solid red");</p>
<input type="button" onclick="highlightChildren();"
value="Highlight children of DIV"/>
<a href="">Reset</a>
<div> div element
<h2>h2 element</h2>
<ul>
ul element
<li>li element</li>
<li>li element</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - find</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, h2 , ul, li {padding: 5px; margin: 5px; border: 1px solid blue;}
</style>
<script>
function highlightFind() {
$('div').find('h2').css("border","2px solid red");
}
</script>
</head>
<body>
<h3>jQuery Traversing - find</h3>
<p>$('div').find('h2').css("border","2px solid red");</p>
<input type="button" onclick="highlightFind();"
value="Highlight descendants H2 of DIV"/>
<a href="">Reset</a>
<h2>h2 element</h2>
<div> div element
<h2>h2 element</h2>
<ul>ul element
<li>li element
<h2>h2 element</h2>
</li>
<li>li element</li>
</ul>
</div>
</body>
</html>
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()


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]) | Phương thức prev() trả về phần tử anh em ngay trước phần tử được chọn. | $('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().
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - siblings</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
h1, h2, h4, p, div {padding: 5px; margin: 5px; border: 1px solid black;}
h2 {border: 2px solid red;}
.blue {border: 2px solid blue;}
</style>
<script>
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");
}
</script>
</head>
<body>
<h3>jQuery Traversing - siblings</h3>
<input type="button" onclick="highlightSiblings();" value="siblings()"/>
<input type="button" onclick="highlightNext();" value="next()"/>
<input type="button" onclick="highlightPrev();" value="prev()"/>
<input type="button" onclick="highlightNextAll();" value="nextAll()"/>
<input type="button" onclick="highlightPrevAll();" value="prevAll()"/>
<input type="button" onclick="highlightNextUntil();" value="nextUntil()"/>
<input type="button" onclick="highlightPrevUntil();" value="prevUntil()"/>
<a href="">Reset</a>
<div>div element
<h1 class='blue'>h1 element (Until)</h1>
<div>div element</div>
<div>div element</div>
<h2>h2 element (current)</h2>
<p>p element</p>
<div>div element
<br>
<p style="background:white;">p element</p>
</div>
<h1>h1 element</h1>
<h4>h4 element</h4>
<h4 class='blue'>h4 element class='blue' (Until)</h4>
<div>div element</div>
</div>
</body>
</html>
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.
// Tìm phần tử <p> thứ 2
$("p").eq(1);
$("h3").filter(".abc");
// Function
Function( Integer index, Element element ) => Boolean
$('h4').filter(function(index, element) {
if(index == 1) {
return true;
}
if( $(element).hasClass('highlight') ) {
return true;
}
return false;
}).css('color','red');
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - filter(fn)</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, h2 , ul, li {padding: 5px; margin: 5px; border: 1px solid blue;}
</style>
<script>
function highlightFilter() {
$('h4').filter(function(index, element) {
if(index == 1) {
return true;
}
if( $(element).hasClass('highlight') ) {
return true;
}
return false;
}).css('color','red');
}
</script>
</head>
<body>
<h3>jQuery Traversing - filter(fn)</h3>
<input type="button" onclick="highlightFilter();"
value="Highlight filter(fn)"/>
<a href="">Reset</a>
<h4>h4 element (index = 0)</h4>
<h4>h4 element (index = 1)</h4>
<p>p element</p>
<h4 class="highlight">h4 element with class = 'highlight' (index = 2)</h4>
<h4>h4 element (index = 3)</h4>
</body>
</html>
$('p').not('.abc')
// Function
Function( Integer index, Element element ) => Boolean
$('h4').not(function(index, element) {
if(index == 1) {
return true;
}
if( $(element).hasClass('highlight') ) {
return true;
}
return false;
}).css('color','red');
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - not(fn)</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
div, h2 , ul, li {padding: 5px; margin: 5px; border: 1px solid blue;}
</style>
<script>
function highlightNot() {
$('h4').not(function(index, element) {
if(index == 1) {
return true;
}
if( $(element).hasClass('highlight') ) {
return true;
}
return false;
}).css('color','red');
}
</script>
</head>
<body>
<h3>jQuery Traversing - not(fn)</h3>
<input type="button" onclick="highlightNot();"
value="Highlight not(fn)"/>
<a href="">Reset</a>
<h4>h4 element (index = 0)</h4>
<h4>h4 element (index = 1)</h4>
<p>p element</p>
<h4 class="highlight">h4 element with class = 'highlight' (index = 2)</h4>
<h4>h4 element (index = 3)</h4>
</body>
</html>
Tìm tất cả các phần tử <div> có phần tử <p> bên trong nó:
$("div").has("p")
<html>
<head>
<meta charset="utf-8">
<title>jQuery Traversing - has(selector)</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<style>
p, div {padding: 5px; margin: 5px; border: 1px solid blue; width: 300px;}
</style>
<script>
function highlightHas() {
$('div').has("p").css('border','2px solid red');
}
</script>
</head>
<body>
<h3>jQuery Traversing - has(selector)</h3>
<p>$("div").has("p").css('border','2px solid red');</p>
<input type="button" onclick="highlightHas();"
value="Highlight has(selector)"/>
<a href="">Reset</a>
<div>div element
<div>div element
<p>p element</p>
</div>
</div>
<div>div element
<p>p element</p>
</div>
</body>
</html>
Kiểu sự kiện | Sự kiện | Mô tả |
MOUSE EVENT | click | Xẩy ra khi có click chuột |
dblclick | 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). |
// Tại thời điểm trang web sẵn sàng
$(document).ready(function() {
// Gắn hàm sử lý khi phần tử h3 bị click
$("h3").click(function(){
// Sử dụng $(this) để ám chỉ phần tử phát ra sự kiện. ( h3 )
$(this).css("background:#ccc");
});
// Gắn hàm sử lý khi phần tử h4 bị nhấn kép chuột.
$("h4").dblclick(function(){
// Sử dụng $(this) để ám chỉ phần tử phát ra sự kiện. ( h4 )
$(this).css("background:yellow");
});
});
<html>
<head>
<meta charset="utf-8">
<title>jQuery Event - Hello World example</title>
<style>
h3 {border: 1px solid blue; padding: 5px; width: 200px;}
h4 {border: 1px solid red; padding: 5px; width: 200px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
// Tại thời điểm trang web sẵn sàng
$(document).ready(function() {
// Gắn hàm sử lý khi phần tử h3 bị click
$("h3").click(function(){
// Sử dụng $(this) để ám chỉ phần tử phát ra sự kiện. ( h3 )
$(this).css("background","#ccc");
});
// Gắn hàm sử lý khi phần tử h4 bị nhấn kép chuột.
$("h4").dblclick(function(){
// Sử dụng $(this) để ám chỉ phần tử phát ra sự kiện. ( h4 )
$(this).css("background","yellow");
});
});
</script>
</head>
<body>
<h2>jQuery Event - Hello World example</h2>
<a href="">Reset</a>
<h3>H3 - Click me!</h3>
<h3>H3 - Click me!</h3>
<h4>H4 - Double Click me!</h4>
</body>
</html>
selector.bind( eventType[, eventData], handler)
- eventType − Một string chứa kiểu sự kiện, ví dụ click, submit,.... Xem thêm danh sách các sự kiện ở bảng trên.
- 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.
$(document).ready(function() {
$('div').bind('click', function( event ){
alert('Hi there!');
});
});
selector.unbind(eventType, handler)
// Hoặc
selector.unbind(eventType)
- eventType − Một string tên sự kiên, chẳng hạng click, submit,...
- handler − Nếu được cung cấp, nó sẽ chỉ định cụ thể cái sẽ được loại bỏ.
<html>
<head>
<meta charset="utf-8">
<title>jQuery Event - bind()/unbind() example</title>
<style>
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;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
// Tại thời điểm trang web sẵn sàng
$(document).ready(function() {
// Gắn hàm sử lý khi phần tử h3 bị click
$("h3").bind('click', function() {
$(this).css("background","#ccc");
});
// Gắn hàm sử lý khi phần tử h4 bị nhấn kép chuột.
$("h4").bind('dblclick', function(){
$(this).css("background","yellow");
});
$("p").bind('click', function() {
// Loại bỏ điều khiển sự kiện click trên các h3.
$("h3").unbind("click");
$("h3").text("click handler removed!");
$("h3").css("background", "white");
});
});
</script>
</head>
<body>
<h2>jQuery Event - bind()/unbind() example</h2>
<a href="">Reset</a>
<h3>H3 - Click me!</h3>
<h3>H3 - Click me!</h3>
<h4>H4 - Double Click me!</h4>
<p>Click to remove click handler in h3</hp>
</body>
</html>
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 | Cho tất cả các sự kiện, chỉ định kiểủ sự kiện đã xẩy ra, chẳng hạn click. |
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). |
<html>
<head>
<meta charset="utf-8">
<title>jQuery Event attribute example</title>
<style>
div {margin : 10px; width: 250px; height: 150px; float: left; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
$("div").click(function(event) {
var s="Type = "+ event.type+ "<br>"
+"pageX = "+ event.pageX+"<br>"
+"pageY = "+ event.pageY+"<br>"
+"screenX = "+ event.screenX+"<br>"
+"screenY = "+ event.screenY+"<br>"
+"which = "+ event.which+"<br>"
+"target = "+ event.target.innerHTML+"<br>"
;
$('div#log').html(s);
});
});
</script>
</head>
<body>
<h2>jQuery Event attribute example</h2>
<div style="background:blue;">
DIV 1
</div>
<div style="background:red;">
DIV 2
</div>
<hr style="clear:both;"/>
<div id="log" style="border:1px solid #ccc;padding:10px;width:550px;">
</div>
</body>
</html>
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. |

// Hủy hiển thị của sổ contextmenu khi nhấn phải chuột vào thẻ div có id= div2
$("div").bind('contextmenu', function(event) {
if( $(this).attr('id') == "div2") {
event.preventDefault();
}
});
// Huỷ hành động mặc định khi nhấn vào thẻ <a>
$("a").click(function(event) {
event.preventDefault();
alert("a element not working!!");
});
<html>
<head>
<meta charset="utf-8">
<title>jQuery Event preventDefault()</title>
<style>
div {margin : 10px; padding:5px; width: 250px; height: 150px; float: left; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
$("div").bind('contextmenu', function(event) {
if( $(this).attr('id') == "div2") {
event.preventDefault();
}
});
$("a").click(function(event) {
event.preventDefault();
alert("a element not working!!");
});
});
</script>
</head>
<body>
<h2>jQuery Event preventDefault() example: Disable contextmenu on right click</h2>
<a href="http://jquery.com">Go to jQuery.com (Not working)</a>
<br>
<div style="background:blue;" id="div1">
Right-click to show context menu
</div>
<div style="background:red;" id="div2">
Disable context menu
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Event stopPropagation()</title>
<style>
div {margin : 20px; padding:5px; float: left; }
.outerDiv {background: red; width: 250px; height: 150px; }
.innerDiv {background: yellow; width: 250px; height: 100px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
$("div").click( function(event) {
if( $(this).attr('id') == "stopDiv") {
event.stopPropagation();
}
alert("click "+ $(this).html());
});
});
</script>
</head>
<body>
<h2>jQuery Event stopPropagation() example</h2>
<div class="outerDiv">
Outer Div
<div class="innerDiv">
Inner Div
</div>
</div>
<div class="outerDiv">
Outer Div
<div class="innerDiv" id="stopDiv">
Inner Div (stopPropagation)
</div>
</div>
</body>
</html>