在頁面加載完成之前執行：
$(document).ready(function(){
//可以執行多個函數
})
$(window).resize(TB_position);用戶在跳轉窗口大小時執行TB_position函數
$(window).scroll(TB_position);用戶在拖動頁面翻頁的時候執行TB_position函數
jQuery 元素選擇器
點擊button後，
$(document).ready(function(){
$("button").click(function(){
$(this).hide();所有的button都隱藏//$(“#test”).hide();讓id爲test的元素隱藏//
$(“.test”).hide();所有class爲test的都隱藏//$(“p”).hide();所有<p>元素隱藏
//$(this).show();顯示
});
})
jQuery 使用 CSS 選擇器來選取 HTML 元素
jQuery 屬性選擇器
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性
1.$(selector).css(name,value)
$("p").css("background-color","red");
2. $(selector).css({properties})
$("p").css({"background-color":"red","font-size":"200%"});
3. $(selector).css(name)返回指定的css的屬性值
$(this).css("background-color");
var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如 jq）來代替 $ 符號
顯示隱藏：
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");//點擊向下顯示OR隱藏
$(".panel").slideUp("slow");//點擊向上
$(".panel").slideDown("slow");//點擊向下
});
})
完全隱藏：
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});;
顏色淡出：
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo("slow",0.25);// 把被選元素淡出爲給定的不透明度
$(“div”).fadeOut(4000);//淡出
$(“div”).fadeIn(4000);//淡入
});
});
JQuery自定義動畫：
$(selector).animate({params},[duration],[easing],[callback])
關鍵的參數是 params。它定義產生動畫的 CSS 屬性。可以同時設置多個此類屬性：
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二個參數是 duration。它定義用來應用到動畫的時間。它設置的值是："slow", "fast", "normal" 或毫秒。
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
hide() 和 show() 都可以設置兩個可選參數：speed 和 callback。
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
使用callback，當動畫完成後即調用防止頁面出錯
speed 參數規定顯示或隱藏的速度。可以設置這些值："slow", "fast", "normal" 或毫秒。
callback 參數是在 hide 或 show 函數完成之後被執行的函數名稱function(){}
toggle()：隱藏顯示的元素，顯示隱藏的元素。$(“p”).toggle();
$(selector).toggle(speed,callback)
$(selector).html(content)改變所匹配的元素的內容
$("p").append(" W3School");在所匹配的元素內部追加內容
$(selector).after(content)：在所匹配的元素之後追加內容
JQuery和Ajax
$(selector).load(url,data,callback)
url爲指定數據的web地址
data爲向服務器發送的數據
callback爲執行完畢觸發的函數
|
$(selector).load(url,data,callback) |
把遠程數據加載到被選的元素中 |
|
$.ajax(options) |
把遠程數據加載到 XMLHttpRequest 對象中 |
|
$.get(url,data,callback,type) |
使用 HTTP GET 來加載遠程數據 |
|
$.post(url,data,callback,type) |
使用 HTTP POST 來加載遠程數據 |
|
$.getJSON(url,data,callback) |
使用 HTTP GET 來加載遠程 JSON 數據 |
|
$.getScript(url,callback) |
加載並執行遠程的 JavaScript 文件 |
(url) 被加載的數據的 URL（地址）
(data) 發送到服務器的數據的鍵/值對象
(callback) 當數據被加載時，所執行的函數
(type) 被返回的數據的類型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 請求的所有鍵/值對選項
Checkbox全選/取消全選
<html>
<head>
<script type="text/javascript" src="http://www.jb51.net/jslib/jquery/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#CheckedRev").click(
function () {
$("input:checkbox").attr("checked",this.checked);
});
var box=$("#d1 input");
box.click(function(){
if(box.length!=$("#d1 input").attr("checked").length){
$('#CheckedRev').removeAttr('checked');
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="CheckedRev"/> 全選
<div id="d1">
<input type="checkbox" name="check" />一
<input type="checkbox" name="check" />三
<input type="checkbox" name="check" />二
</div>
</body>
</html>
得到一組checkbox選中的值
$("#d5").click(function(){
$('input[type="checkbox"]:checked').each(
function() {
alert($(this).val());
}
);
})
$("[id^='chckId']").live("click",function(){})//模糊匹配，live每次點擊時變化
$(this).parents('div').next('input').attr('name'); 得到上一級div同級的input的name
$(this).parents('div').next('input').removeAttr("readonly");//去除input元素的readonly屬性
$(this).parents('div').next('input').css({"border":"1px solid black","background-color":"white"});得到上級爲div的父標籤的同級input
$("#tab input[type='text']") id爲tab的table表格中所有type=text的input
$("[id^='chckId']").live("click",function(){
if($(this).attr("checked")){
alert($(this).parents('div').next('input').attr('name'));
$(this).parents('div').next('input').removeAttr("readonly");//去除input元素的readonly屬性
$(this).parents('div').next('input').css({"border":"1px solid black","background-color":"white"});
}else if(!($(this).attr("checked"))){
$(this).parents('div').next('input').attr("readonly","readonly");
$(this).parents('div').next('input').css({"border":"0","background-color":"#f2f2f2"});
}
})