JQuery thư viện JavaScriptđa trình duyệt được thiết kế để đơn giản hóa lập trình phía máy người dùng của HTML Đó là phát hành vào tháng 1 năm 2006 tại BarCamp NYC bởi John Resig. Được sử dụng bởi hơn 52% trong 10.000 truy cập nhiều nhất các trang web, jQuery là phổ biến nhất của thư viện JavaScript trong sử dụng ngày nay .
jQuery là miễn phí, mã nguồn mở phần mềm, kép cấp phép theo MIT Giấy phép GNU General Public License, phiên bản 2 jQuery của được để làm cho nó dễ dàng hơn để di chuyển một tài liệu, chọn DOM các yếu tố, tạo ra hoạt hình s, xử lý Sự kiện, và phát triển Ajax (lập trình) | Ajax ứng dụng . jQuery cũng cung cấp khả năng cho các nhà phát triển để tạo ra plug-in s trên đầu trang của thư viện JavaScript. Điều này cho phép các nhà phát triển để tạo ra trừu tượng hóa ở mức độ thấp tương tác và hình ảnh động, hiệu ứng tiên tiến và vật dụng cao cấp, chủ đề có thể. Cách tiếp cận mô-đun để thư viện jQuery cho phép tạo ra các công cụ mạnh mẽ và năng động web và các ứng dụng web.
Cách dùng:
Ta có 2 cách khai báo thư viện jQuery như sau:
C1: Dùng thư viện trực tuyến
C2: Tải thư viện jQuery về rồi để vào thư mục web ( Link:jQuery ,-> save as -> name: jquery.js)<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
</head>
Demo:<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<html>JQuery Events:<head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(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>
Xử lý sự kiện khi click
Cú pháp:
$("button").click(function() {..some code... } )Demo:$("p").hide();
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(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>
Ngoài thu viện chuẩn, chúng ta cũng có thể tạo ra cái mang phong cách riêng ta, khi do ta khai bao như sau:
JQuery Effects:<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery hide(): khi ta click thì con trỏ " this" gọi phương thức " hide()" , những gì thuộc biến "p" sẽ thực thi " ẩn đi".
Demo:
Demo:
Demo:
Demo:
Demo:
css(name): trả ve giá tri thuộc tính
css(name,value): lấy thuộc tính và giá trị
css(properties); lấy nhiều thuộc tính và giá trị
Demo:
Demo:
jQuery và Ajax: có 2 phương thức sau:
$(selector).load(url,data,callback):
$.ajax(options):
Demo: tạo file "test1.txt" để ở thư mục web, file chứa cái khỉ khô gì cũng được tùy you, sau khi nhấp" Change Content " thi nó sẽ in nọi dung file "test1.txt" ra màn hình.
Demo: giống như trên nhưng có tí khác
Demo:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Hay Clck de thay co su thay doi.</p>
<p>Click B!</p>
<p>Click A!</p>
</body>
</html>
Demo:
jQuery slideToggle(): Dùng ẩn hiện 1 đối tượng nào đó<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>Island Trading</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Helen Bennett<br />
Garden House Crowther Way<br />
London</p>
</div>
<h3>Paris spécialités</h3>
<div class="ex">
<button class="hide">Hide me</button>
<p>Contact: Marie Bertrand<br />
265, Boulevard Charonne<br />
Paris</p>
</div>
</body>
</html>
Demo:
jQuery fadeTo(): Ẩn đi 1 vùng nằm trong "style"<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
<p class="flip">Show/Hide Panel</p>
</body>
</html>
Demo:
jQuery Callback: dùng cấu trúc sau: $(selector).hide(speed,callback) , trong đó " selector" thuộc tính chọn, " speed" số giây ẩn đối tượng, "callback" hàm.<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
});
</script>
</head>
<body>
<div style="background:yellow;width:300px;height:300px">
<button>Click to Fade</button>
</div>
</body>
</html>
Demo:
Demo:<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
jQuery HTML: dùng cấu trúc :$(selector).html(content), trong đó : thay những gì ở "selector" bằng thẻ html " content".<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
Demo:
Demo:<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").html("W3Schools");
});
});
</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>
Demo:<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>W3Schools</b>.");
});
});
</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>
jQuery và CSS: có các phương thức sau:<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").after(" W3Schools.");
});
});
</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>
css(name): trả ve giá tri thuộc tính
css(name,value): lấy thuộc tính và giá trị
css(properties); lấy nhiều thuộc tính và giá trị
Demo:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
$("p").html($(this).css("background-color"));
});
});
</script>
</head>
<body>
<div style="width:100px;height:100px;background:#ff0000"></div>
<p>Click in the red box to return the background color.</p>
</body>
</html>
Demo:
Demo:<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","yellow");
});
});
</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>
Demo:<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"yellow","font-size":"200%"});
});
});
</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>
Demo:<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").height("200px");
});
});
</script>
</head>
<body>
<div id="div1" style="background:yellow;height:100px;width:100px">HELLO</div>
<div style="background:yellow;height:100px;width:100px">W3SCHOOLS</div>
<button>Click me</button>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div2").width("300px");
});
});
</script>
</head>
<body>
<div style="background:yellow;height:100px;width:100px">HELLO</div>
<div id="div2" style="background:yellow;height:100px;width:100px">W3SCHOOLS</div>
<button>Click me</button>
</body>
</html>
jQuery và Ajax: có 2 phương thức sau:
$(selector).load(url,data,callback):
$.ajax(options):
Demo: tạo file "test1.txt" để ở thư mục web, file chứa cái khỉ khô gì cũng được tùy you, sau khi nhấp" Change Content " thi nó sẽ in nọi dung file "test1.txt" ra màn hình.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").load('test1.txt');
});
});
</script>
</head>
<body>
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>
Demo: giống như trên nhưng có tí khác
Tham khảo thêm : w3schools<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){ $.ajax({url:"test1.txt", success:function(result){ $("div").html(result); }});});});</script></head><body><div><h2>Let AJAX change this text</h2></div><button>Change Content</button></body></html>
0 nhận xét:
Đăng nhận xét