GIáo trình từ w3schools
1. Kiến thức cơ bản
1.1 Những điều cần biết trước khi học jquery
- HTML
- CSS
- JavaScript
1.2 Jquery là gì
jquery là tập hợp của
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
1.3 Download và cài đặt
Bạn có thể download tại jQuery.com.
sau đó thêm code vào mỗi file web .html .php…
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
1.4 jQuery Cú pháp
Cú pháp jQuery là thiết kế riêng làm cho việc lựa chọn các phần tử HTML và thực hiện một số hành động trên các yếu tố (s).
Cú pháp cơ bản là:. $ (Selector) hành động ()
A $ dấu hiệu để xác định / truy cập jQuery
A (selector) để "truy vấn (hoặc tìm)" các phần tử HTML
Một hành động jQuery () được thực hiện trên các phần tử (s)
ví dụ:
$(this).hide() -. ẩn các yếu tố hiện tại.
$("p").hide() -. giấu tất cả các yếu tố <p>.
$(". test").hide() -. giấu tất cả các phần tử với class = "thử nghiệm".
$("# test").hide() -. giấu các phần tử với id = "test".
Cấu trúc của 1 hàm event
$(document).ready(function(){
// jQuery methods go here…
});
hoặc cũng có thể
$(function(){
// jQuery methods go here…
});
1.5 ví dụ về cách sử dụng
Khi ta nhấn vào button clickme thì các phần tử của tất cả các thẻ p sẽ biến mất
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Với id = test
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
với class=test
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
1.6 Tìm hiểu thêm về cú pháp
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all <p> elements with class="intro" | Try it |
| $("p:first") | Selects the first <p> element | Try it |
| $("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
| $("[href]") | Selects all elements with an href attribute | Try it |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | Try it |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
| $("tr:even") | Selects all even <tr> elements | Try it |
| $("tr:odd") | Selects all odd <tr> elements | Try it |
1.7 Các kiểu Event
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
Ví dú :
1.6.1 dbclick
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
1.6.2 blur
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
1.6.3 hover
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
1.6.4 .hover
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
