jQuery 語法實例
$(this).hide()
演示 jQuery 的 hide() 函數,隱藏當前的 HTML 元素。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){
<code> $(this).hide()
});
});`
</script>
</head>
<body>
<button type="button">Click me</button>
</body>
</html>
</code>
$("p").hide()
演示 jQuery 的 hide() 函數,隱藏所有 < p> 元素。
$(".test").hide()
演示 jQuery 的 hide() 函數,隱藏所有 class="test" 的元素。
$("#test").hide()
演示 jQuery 的 hide() 函數,隱藏 id="test" 的元素。
Hiding - Sliding- Fading
jQuery fadeOut()
演示簡單的 jQuery fadeout() 函數(按時間淡出)。
jQuery hide()
演示簡單的 jQuery hide() 函數。
Hide explanations
演示如何隱藏部分文本。
$(document).ready(function(){
$(".ex .hide").click(function(){
/* 在類名為ex的div中,點擊其中一個類名為hide的元素,
則隱藏該div視圖,另一個同樣包含類名為hide元素的
div不受影響,除非也被點擊。*/
$(this).parents(".ex").hide("slow");
});
});
Slide panel
演示簡單的 Slide Panel 效果。
$(document).ready(function(){
$(".flip").click(function(){ // 點擊類名為filp的元素(點擊奇數次展開,偶數次收縮)
$(".panel").slideToggle("slow"); // 向下展開顯示類名為panel的元素
});
});
jQuery animate()
演示簡單的 jQuery animate() 函數。
HTML 操作
改變 HTML 元素的內容。
$("p").html("W3School");
向 HTML 元素追加內容。
在 HTML 元素之后追加內容。
例子解釋
CSS 操作
改變 HTML 元素的 CSS 屬性。
改變多個 CSS 屬性。
獲得元素的 CSS 屬性。
例子解釋
AJAX 和 jQuery
使用 $(selector).load(url) 來改變 HTML 內容。
使用 $.ajax(options) 來改變 HTML 內容。
例子解釋