代碼風格
$(function(){}); //執行一個匿名函數
$("#box"); //進行執行的ID元素選擇
$("#box").css("color","red");
$恆等於jQuery;
多個庫之間的衝突解決
$(function(){ // jQuery庫在base庫之前引用，那麼$所有權就是base庫的
alert($('#box').ge(0));
alert($$('#box').get(0));
})
jQuery.noConflict(); //自行了斷，把自己的$所有權剔除
var $$=jQuery;
$(function(){ // jQuery庫在base庫之後引用，那麼$所有權就是jQuery庫的
alert($('#box').ge(0));
alert($$('#box').get(0));
})
常規選擇器
ID選擇器
$(function(){
$("#box").css("color","red");
$("div").css("color","oracle");
$(".pox").css("color","green");
});
警告：ID是唯一標識符，只能在頁面出現一次。
get(0)/eq(0):獲取第一個元素
#box>p{ //css子選擇器，IE6不支持
color:red
}
$(#box).css("color","red"); jQuery兼容IE6
//js容錯判斷
if(document.getElementById("pox")){
document.getElementById("pox").style.color="red";
//很多情況下有動態DOM生成的問題，會導致執行不存在的ID選擇器
}
判斷
if($("#pox").size()>0){
$("#pox").css("color","red");
}
if($("#pox").get(0)){
...
}
兩個相等
if($("#pox")[0]){
...
}
元素選擇器
$('div') 獲取所有div元素的DOM對象
ID選擇器
$('#box') 獲取一個ID爲box元素的DOM對象
類(class)選擇器
$('.box') 獲取所有class爲box的所有DOM對象
進階選擇器
羣組選擇器
${'span,em,box'} 獲取多個選擇器的DOM對象
後代選擇器
$('ul li a') 獲取追溯到的多個DOM對象
通配選擇器
$('*') 獲取所有元素的DOM元素
高級選擇器
子選擇器
$('div p') 只獲取子類節點的多個DOM對象
next選擇器
$('div+p') 只獲取某節點後一個同級DOM對象
nextAll 選擇器
$('div～p') 獲取某節點後面所有同級DOM對象
find()方法
$('box').find('p').css("color","red")
next()方法
$('box').next('p').css("color","red")
$('box').next('').css("color","red") //next()等選擇器方法不傳參，就相當於傳遞了*號
//prevAll()
$('box').prevAll('p').css("color","red")
$('box').nextAll('p').css("color","red")
//siblings上下同級所有
$('box').siblings('p').css("color","red")
//nextUntil()方法
$('box').nextUntil('p').css("color","red")
//prevUntil()方法
$('box').prevUntil('p').css("color","red")
過濾選擇器
$("li:first") 選取第一個元素
$("li:last") 選取最後一個元素
$("li:not(red)") 選取class不是red的li元素
$("li:even") 選擇索引（0開始）是偶數的所有元素
$("li:odd") 選擇索引（0開始）是奇數的所有元素
$("li:eq(2)") 選擇索引（0開始）等於index的元素
$("li:gt(2)") 選擇索引（0開始）大於index的元素
$("li:lt(2)") 選擇索引（0開始）小於index的元素
$(".header") 選擇標題元素，h1~h6
$(".animated") 選擇正在執行動畫的元素
$(".focus") 選擇當前被焦點的元素
內容過濾器
$(":contains("yckucom")")
$(".empty") 選取不包括子元素或空文本的元素
$(".has(.red)") 選取含有class是red的元素
$(".parent") 選取含有子元素或文本的元素
子元素過濾器
$("li:first-child") 獲取每個父元素的第一個元素
$("li:last-child") 獲取每個父元素的最後一個元素
$("li:only-child") 獲取只有一個子元素的元素
$("li:nth-child(1)") 獲取每個自定義的元素（索引值從1開始）
alert($('.red').is(function(){
return $(this).attr('title')=='列表3'；
}));
//注意必須用$(this)來表示要判斷的元素，否則不管function裏面是否返回true或false都和調用的元素無關
$("li").slice(2,-2).css("background","#ccc"); 選中順數第2位至倒數第2位
DOM
D表示的是頁面文檔Document
O 表示對象
M 表示模型 即頁面上的元素節點和文本節點
元素內容的操作
html() 獲取元素中的html內容
next() 獲取元素中的文本內容，有html會自動清理
val() 獲取表單中的文本內容 ,可以傳遞數組
$(function(){
$('input').val();
})
$('div').attr('title'.'我是域名'); //class不建議用attr來設置
$('div').attr('title'.function(index,value){
return '原來的title是: '+value+',現在的title是:我是'+(index+1)+'號域名'；
})
});
$('div').removeAttr('title'); //刪除指定的元素
基礎DOM和CSS樣式
var box=$('div').css(["color","height","width"]);
for(var i in box){
alert(i+":" +box[i]);
}
$.each(box,function(attr,value){
alert(attr+":"+value);
});
$('div').each(function(index,element){
alert(index+':'+element);
});
$('div').css({
'color':'blue',
'background-color':'#eee',
'width':'200px',
'height':'200px'
});
$('div').css('width',function(index,value){
//局部操作
return (parselnt(value)-500)+'px';
});
$('div').addClass('red'); //添加
$('div').removeClass('bg'); //刪除
css類的樣式切換
$('div').click(function(){
$(this).toggleClass('red size');
});
var count=0;
$('div').click(function(){
$(this).toggleClass('red size',count++%2==0);
});
$('div').click(function(){
$(this).toggleClass('red size');
if($(this).hasClass('red')){
$(this).removeClass('gress');
}else{
$(this).addClass('green');
}
});
$('div').click(function(){
$(this).toggleClass(function(){
if($(this).hasClass('red')){
$(this).removeClass('red');
return'green';
} else{
$(this).removeClass('green');
return 'red';
}
});
});
width(value) 設置某個元素的長度
width(function(index,width){}) 通過匿名函數設置某個元素的長度
height(value) 設置某個元素的高度
innerWidth(); //包含內邊距
offset() //獲取某個元素相對於視口的偏移位置
position //獲取某個元素相對於父元素的偏移位置
scrollTop() //獲取垂直滾動條的值
scrollTop(value) //設置垂直滾動條的值
scrollLeft() //獲取水平滾動條的值
scrollLeft(value) //設置水平滾動條的值
DOM節點操作
append(content) //向指定的元素內部後面插入節點content
append(function(index,html){}) //使用匿名函數向指定元素內部後面插入節點
appendTo(content) //將指定元素移入到指定元素content內部後面
prepend(content) //向指定元素content內部的前面插入節點
prepend(function(index,html){}) //使用匿名函數向指定元素內部的前面插入節點
prependTo(content) //將指定元素移入到指定元素content內部前面
包裹節點
wrap(html) //向指定元素包裹一層html代碼
wrap(element) //向指定元素包裹一層DOM對象節點
wrap(function(index){}) //使用匿名函數向指定元素包裹一層自定義內容
unwrap() //移除一層指定元素包裹的內容
wrapAll(html) //用html將所有元素包裹到一起
wrapInner(html) //向指定元素的子內容包裹一層html
wrapInner(element) //向指定元素的子內容包裹一層DOM對象節點
wrapInner(function(index){}) //用匿名函數向指定元素的子內容包裹一層
表單選擇器
$('input').val(); //元素名定位，默認獲取第一個
$('input').eq(1).val(); //同上，獲取第二個
$('input[type=password]').val(); //選擇type爲paddword的字段
$('input[name=user]').val(); //選擇name爲user的字段
表單過濾器
$(':enabled').size(); //獲取可用元素
$(':disabled').size(); //獲取不可用元素
$(':checked').size(); //獲取單選、複選框中被選中的元素
$(':selected').size(); //獲取下拉列表中被選中的元素
基礎事件
$('input').unbind(); //刪除全部事件
$('input').unbind('click'); //只刪除click事件
$('input').mousedown(function(){
//鼠標左鍵按下
})
$('input').mouseup(function(){
//鼠標左鍵按下彈起
})
表單提交作用於form
$('form').submit(function(){
alert("表單提交！")；
})；
$('div').mouseover(function(){ //移入
$(this).css("background","red");
}).mouseout(function(){ //移出
$(this).css("background","red")
});
$('div').mouseenter(function(){ //進入
$(this).css("background","red");
}).mouseleave(function(){ //離開
$(this).css("background","red")
});
$('div').mouseover(function(){ //over會觸發子節點
$('strong').html(function(index,value){
return value+'1';
});
});
$('div').mouseenter(function(){ //enter不會觸發子節點
$('strong').html(function(index,value){
return value+'1';
});
});
$('input').keyup(function(){ //鍵盤彈起
alert('鍵盤');
});
$('input').keydown(function(){ //按下鍵盤
alert('鍵盤');
});
$('input').focus(function(){ //光標激活
alert('光標激活');
});
$('input').blur(function(){ //光標丟失
alert('光標丟失');
});
$('div').hover(function(){
$(this).css('background','red');
}.function(){
$(this).css('background','green');
});
$('div').toggle(function(){
$(this).css('background','red');
}.function(){
$(this).css('background','green');
}.function(){
$(this).css('background','green');
});
//禁止提交表單跳轉
$('form').submit(function(e){
e.preventDefault();
});
$('a').click(function(){
e.preventDefault();//阻止默認行爲
alert("點擊彈窗");
});
$('a').click(function(e){
return false,
});
//禁止表單提交
$('input').click(function(){
$('input').click(function(){
e.preventDefault();//阻止默認行爲
alert("表單提交");
});
//阻止冒泡又禁止了默認行爲
$('a').click(function(e){
e.preventDefault();//阻止默認行爲
e.stopPropagation();
alert("點擊彈窗");
});
高級事件
//trigger額外數據，只有一條的時候，可以省略中括號，多條不能省略，第二條之後就無法識別了
$('input').click(function(e,data1,data2){
alert(data1+'|'+data2);
}).trigger('click',['123','abc']);
$(function(){
//bind委託綁定了三個事件
$('button').bind('click',function(){
alert("事件不委託");
})
//使用live綁定的是document,而非button
//所以，永遠只會綁定一次事件
$('button').live('click',function(){
alert("事件委託");
})
//bind無法動態綁定事件
$('button').bind('click',function(){
$(this).clone().appendTo('#box');
});
//live可以動態綁定事件，因爲事件綁定在document上
$('button').live('click',function(){
$(this).clone().appendTo('#box');
});
});
高級事件
$(function(){
//普通綁定.bind
//普通解綁 .unbind
//新方法綁定 .on
//新方法解綁
$('.button').on('click',{user:'Lee'},function(e){
alert('替代bind'+e.data.user);
});
$('.button').on('mouseover mouseout',function(e){
alert('移入移出');
});
$('.button').on({
mouseover:function(){
alert('移入')；
}，
mouseout:function(){
alert('移出')；
}
});
$('form').on('submit',function(){
return false;
});
//移除事件
$('.button').off('click');
//替代.live .delegate
$('#box').on('cilck','button',function(){
$(this).clone().appendTo('#box');
});
//移除事件委託
$('#box').off('cilck');
//類似於.bind()只觸發一次
$('button').one('cilck',function(){
alert('僅一次事件觸發！')
});
$('#box').one('cilck','button',function(){
$(this).clone().appendTo('#box');
});
});