Chủ Nhật, 12 tháng 4, 2015

10 Hàm của JQuery

I.Hàm .add()

-Hàm dùng để thêm những giá trị, thẻ hợp lệ và được định dạng sẵn.


-Ví dụ:



<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>add demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<span id="a">I'm Quan</span>
<script>
$( "p" ).add( document.getElementById( "a" ) ).css( "background", "yellow" );
</script>
</body>
</html>
-Trình duyệt : I'm Quan 
II.Hàm .after() 
-Hàm dùng để chèn nội dung, tham số hợp lệ sau mỗi phần tử của một tổ hợp các phần tử hợp lệ.
-Ví dụ: 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Xin chào: </p>
<script>
$( "p" ).after( document.createTextNode( "Quân" ) );
</script>
</body>
</html>
-Trình duyệt: Xin chào : Quân
III.Hàm .before()
-Hàm tương tự như after() nhưng chèn vào đằng trước
-Ví dụ :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>before demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p> muốn làm quen với bạn...</p>
<script>
$( "p" ).before( "<b>Tôi</b>" );
</script>
</body>
</html>
-Trình duyệt : Tôi muốn làm quen với bạn...
IV.Hàm .clone() -Hàm tạo ra một bản sao-Ví dụ: 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>clone demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Chào</b><p>, bạn khỏe chứ?</p>
<script>
$( "b" ).clone().prependTo( "p" );
</script>
</body>
</html>
-Trình duyệt: Chào Chào, bạn khỏe chứ? V.Hàm .bind() -Hàm gài hiệu ứng xử lý vào phẩn tử được chọn-Ví dụ:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bind demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Click or double click here.</p>
<span></span>
<script>
$( "p" ).bind( "click", function() {
alert( $( this ).text("Hahaha") );
});
});
</script>
</body>
</html> VI.Hàm .empty() -Xóa mọi phần tử trên trình duyệt khi click hoặc thực hiện một dạng xử lý nào đấy.-Ví dụ: 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>empty demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
Hello, <span>Person</span> <em>and person</em>.
</p>
<button>Call empty() on above paragraph</button>
<script>
$( "button" ).click(function() {
$( "p" ).empty();
});
</script>
</body>

</html> VII.Hàm .eq() -Giảm số lượng nhóm phần tử được chọn về con số một.-Ví dụ:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>eq demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$( "body" ).find( "div" ).eq( 2 ).addClass( "blue" );
</script>
</body>
</html> VIII.Hàm .error() -Làm một phần tử đã được định dạng trở nên mất định dạng ===>Lỗi hiện thị-Ví dụ:
$( "img" )
.error(function() {
$( this ).hide();
})
.attr( "src", "missing.png" ); IX.Hàm .first() -Giảm số phần tử được định dạng sẵn còn một và là phần tử đứng đầu tiên.-Ví dụ:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>first demo</title>
<style>
.highlight{
background-color: yellow
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
<span>Look:</span>
<span>This is some text in a paragraph.</span>
<span>This is a note about it.</span>
</p>
<script>
$( "p span" ).first().addClass( "highlight" );
</script>
</body>
</html> X.Hàm .hide() -Ẩn hết mọi nội dung được định dạng-Ví dụ:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hide demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
<script>
$( "p" ).hide();
$( "a" ).click(function( event ) {
event.preventDefault();
$( this ).hide();
});
</script>
</body>
</html>