那些年，我還在學習jquery 學習筆記

更新時間：2012年03月05日 22:12:01 作者：

那些年學習了一些基本的web開發(fā)知識，其中已經有javascript語言了，為什么還要學習Jquery啊

原來Jquery就是一個javascript寫的一個庫，它給我們提供了很多常用的方法，使用這些方法可以兼容多種瀏覽器，使用它可以達到很好的動畫效果，下面就來看看那些年的學習筆記吧
一、$符號
　　1、選擇器
　　　可以選擇html標簽，也可選擇ID,Class等
　　　如下：

復制代碼代碼如下:

 
　<script type="text/javascript"> 
$( 
function() { 
$("table.datalist tr:nth-child(odd)").addClass("one");//odd:匹配奇數(shù)，even：偶數(shù)，nth-child:匹配其父元素下的第N個子或奇偶元素，從1開始 
var obj = $("h2 a"); //得到h２下面的a,返回的是一個數(shù)組 
for (var i = 0; i < obj.length; i++) { 
obj[i].innerHTML = i.toString(); 
} 
var obj1 = $("#demo"); 
obj1.append("Demo_Id"); 
var obj2 = $(".Class"); //得到的是一個數(shù)組 
alert(obj2); 
$("div ul li:has(a)").addClass("Two"); //得到里中有a的標符添加一個Class="Two" 
$("li:lt(2)").addClass("one"); //得到前三個li，添加一個Class＝"one"，下標是從０開始的 
$("p>span").addClass("Two"); //得到p下的span,parent>child 
} 
) 
</script> 

2、得到標記中的屬性　　

復制代碼代碼如下:

 
var sTitle = $("p>span").attr("Title"); //得到標記中的屬性值 
$("p>a").text(sTitle);//設置值，若是用text()得到值，則是得到的文本，不包含html 

3、設置屬性

復制代碼代碼如下:

 
$("button:gt(0)").attr("disabled", "disabled"); //得到第一個button后的button,然后設置它們的disable屬性為不可用，沒有這個屬性就返回undefined 
$("img").attr({ src: "test.jpg", alt: "Test Image" }); 

3.1、刪出屬性
$("img").removeAttr("src");
　4、修改Class，如果存在（不存在）就刪除（添加）一個類。

復制代碼代碼如下:

 
$( 
function() { 
$("div>p").mouseover( 
function() { 
$(this).toggleClass("HightLight");//修改樣式class 
} 
); 
} 

4.1、移出Class
$("p").removeClass("selected");
4.2、添加Class
$("p").addClass("selected");
5、圖片的復制
　　　$("img:eq(0)").clone().appendTo($("p")); //得到第一張圖片
　6、事件綁定，可以綁定多個相同的事件

復制代碼代碼如下:

 
$(function() { 
$("img").bind("click", function() {　//綁定事件 
alert("你點啊?。?); 
}); 
　　　　　 $("img").bind("click", function() {　//綁定事件 
alert("你點?。。?); 
}); 
}) 

7、移出事件

復制代碼代碼如下:

 
$(function() { 
$("input[type=button]").click(function() { 
$("img").unbind("click", eventImg);//unbind來移出方法 
alert("移出事件！"); 
}); 
}) 

8、元素的顯示和隱藏

復制代碼代碼如下:

 
<script type="text/javascript"> 
$(function() { 
$("#demobtnF").click(function() { 
$("#p_btn").show(); //顯示 
}); 
$("#demobtn").click(function() { 
$("span:first").hide();//隱藏 
}); 
}) 
</script> 

漸入漸出的效果：在show(),與hide()方法上傳一個時間參數(shù)，從而得到淡入淡出的效果　　　

復制代碼代碼如下:

 
<script type="text/javascript"> 
$(function() { 
$("#Button1").click(function() { 
$("#imgs").show(10000); 
}); 
$("#Button2").click(function() { 
$("#imgs").hide(5000); 
}); 
}) 
</script> 

復制代碼代碼如下:

 
<input id="Button1" type="button" value="Show" /> 
<input id="Button2" type="button" value="hide" /> 
<hr /> 
<img id="imgs" src="images/27m03.jpg" alt="log" /> 
<hr /> 

二、淡入淡出的實現(xiàn)方法
　1、fadeIn()與fadeOut()：使用方法與show()、hide()一樣，效果更好
如下：

復制代碼代碼如下:

 
$("#Button3").click(function() { 
$("#imgs").fadeIn(10000); 
}); 
$("#Button4").click(function() { 
$("#imgs").fadeOut(5000); 
}); 

2、幻燈片效果-由slideUp()與slideDown()方法實現(xiàn)

復制代碼代碼如下:

 
$("#Button1").click(function() { 
$("#imgs").slideUp(10000); 
}); 
$("#Button2").click(function() { 
$("#imgs").slideDown(5000); 
}); 

三、Jquery功能函數(shù)
　1、瀏覽器的檢測$.browser, 如下：

復制代碼代碼如下:

 
if ($.browser.msie) return alert("IE"); 
if ($.browser.safari) return alert("safari"); 
if ($.browser.mozilla) return alert("mozilla"); 
if ($.browser.opera) return alert("opera"); 

2、盒子模型　$.boxModel　如下：
　　　　 alert($.boxModel ? "standard" : "IE");　　
　3、處理javascript對象　$.each(arr,function) //對數(shù)組的每個對象用function函數(shù)處理
　　如下：

復制代碼代碼如下:

 
var aArr = ["one", "two", "three"]; 
$.each(aArr, function(iNum, value) { 
alert(iNum + "," + value); 
}); 

$.grep(Arr,funtion(value)):過濾
　　　示例：

復制代碼代碼如下:

 
var aArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 
var DemoArr = $.grep(aArray, function(value) { 
return value > 4; 
}); 
document.write(DemoArr.join()); 
　$.map(Array,function(value,index)) 

本文全部來源于那些年的學習筆記。
總結
Jquery庫中有很多函數(shù)，還有一些，特別是Jquery里的Ajax,是非常重要的，此文以回憶那些年學習Jquery的日子。