jquery的基礎知識初學總結
本文是轉帖吆。。。。
1，$(document).ready
資料上說這個是在文檔加載完畢的時候發生，document這裏的意思是獲取整個文檔對象，使用方法如下
$(document).ready(function(){
alert('test');
});
2，鼠標點擊事件，給某個元素加類似js裏的onclick動作，代碼如下
jquery code:
$(document).ready(function(){
$("div").click(function(){
alert('test');
})
});
html code
<div id='test1'>test1</div>
<div id='test2'>test2</div>
$("div")的意思是所有html的div標籤都適用此規則
3，jquery對id的作用
$("#test1")訪問的是id = 'test1'
例如
jquery code:
$("#test1").click(function(){
alert('test');
});
html code:
<div id = 'test1'>test1</div>
4，jquery對css的作用
addClass和removeClass部分
jquery code:
$(document).ready(function(){
$("div").addClass("css_test1");
$("div").click(function(){
$(this).removeClass("css_test1");
});
});
css code:
.css_test1{border:2px dashed #ff0000;margin-bottom:5px;}
html code:
<div id="test1">test1</div>
<div id="test2">test2</div>
$(this)，這裏面的this是傳進來的當前對象，不是所有對象
css部分
css(key, value)，資料上的解釋：在所有匹配的元素中，設置一個樣式屬性的值。
jquery code:
$("#test1").click(function(){
$(this).css("border","1px solid #FF0000")
});
html code:
<div id="test1">test1</div>
css(name)，資料上的解釋：獲取name的屬性值
jquery code:
$("#test1").click(function(){
$(this).css("border","1px solid #FF0000");
alert($(this).css("border"));
});
html code:同上
css(properties)，直接改變這個id的css屬性，類似style = properties的意思
$("#test1").click(function(){
$(this).css({color:"FF0000"});
});
height,width部分
$("#test1").height("200px");
$("#test1").width("200px");
裏面如果是空值可用於輸出，例
alert($("#test1").height())
5，jquery的漸變效果實現
fadeOut(speed,callback)，漸變淺，完成後回調callback，callback可選
fadeIn(speed,callback)，漸變深，完成後回調callback，callback可選，此方法可搭配和fadeOut用
fadeTo(speed,opacity,callback)，調整到opacity，opacity爲0-1可選
speed(string|number),string可選爲slow,normal,fast,number爲毫秒數，例如1000
下面是例子
jquery code:
$(document).ready(function(){
$("#test1").click(function(){
$("#test2").fadeOut("slow",function(){alert("下面這個層慢慢消失了！")});
})
$("#test3").click(function(){
$("#test2").fadeIn("slow",function(){alert("下面這個層慢慢出來了了！")});
})
$("#test4").click(function(){
$("#test2").fadeTo("slow",1,function(){alert("是不是下面這個層慢慢變了！")});
})
});
html code:
<div id="test1">test1</div>
<div id="test2">test2</div>
<div id="test3">test3</div>
<div id="test4">test4</div>
6，jquery的滑動效果實現
slideDown(speed,callback)，動態顯示（資料），實際上是把通過id.slideDown這樣的用法把id向下滑動打開
slideup(speed,callback)，動態隱藏（資料），這個和slideDown相對應，實際是把id.slideup的ip向上華東隱藏
slideToggle(speed,callback)，這個比較好用，同時具備了上面兩個的功能
代碼如下：
jquery code:
$(document).ready(function(){
$("#test1").click(function(){
$("#test2").slideDown("slow");
})
$("#test3").click(function(){
$("#test2").slideUp("slow");
})
$("#test4").click(function(){
$("#test2").slideToggle("slow");
})
});
html code:
<div id="test1">test1</div>
<div id="test2">test2</div>
<div id="test3">test3</div>
<div id="test4">test4</div>
7，jquery的選擇器
$("[@title]")，所有含有title的元素
$("[@title=ttt]")，所有含有title=ttt的元素
$("[@title^=ttt]")，所有title開頭爲ttt的元素
$("[@title$=tt2]")，所有title結尾爲tt2的元素
$("[@title*=tt]")，所有title包含tt的元素
$("[@title*=tt][@id=test1]")，根據多個屬性判斷
8，load方法及小技巧
$("#test1").click(function(){
$("#test2").load("./test1.html");
})
$("#test1").click(function(){
$("#test2").load("./test1.html #test3");
})
把test1.html或test1.html 的id=test3的部分載入到原網頁的test2裏面
load原型:load(url, params, callback)