說到jQuery，無非就是定位元素，使用方法，理清邏輯，寫程式碼就可以了。

   昨晚，寫了200行jQuery程式碼，就那個方法套方法，if else裡套if，else，我現在還懵著呢。現在看見if、else就有點發憷的感覺。

    先給大家推薦一個寫前端的工具：sublime。大小就30、40M，功能卻異常的強大，具有程式碼補全，輸入提示，自動調格式等功能，寫JavaScript、jQuery、css、HTML等非常的方便。

    廢話少講了，開始這篇部落格的正題。這篇部落格非常適合jQuery的初學者閱讀。內容非常的淺顯，基礎，但這也正是jQuery最核心的內容。

   1、定位元素（寫一段HTML程式碼來演示）

HTML

<div id="dv1">
		<div id="dv2">
			<input type="text" name="" id="txt1">
			<input type="text" name="" id="txt2">
			<input type="text" name="" id="txt3">
			<input type="text" name="" id="txt4">
			<p></p>
		</div>
		<input type="text" name="" id="txt5">
	</div>
 

我開始寫jQuery程式碼了：

       1、//子和孫輩。div的id為dv1的那個div，它下面的所有的input標籤（包括子和孫輩）。

$("#dv1 input").css("background-color","red");

        2、//子輩。div的id為dv1的那個div，它下面的子輩的input標籤（只包括子輩）。

$("#dv1 > input").css("background-color","red");

紅色的那個id為txt5

        3、////子輩。div的id為dv2的那個div，它下面的p標籤的文字為123。。如果改為dv1，則找不到p。

$("#dv2 >  p").html("123");

          4、//緊跟的兄弟輩。id為txt3後面緊跟的兄弟元素，即txt4.

（那個*號代表任意，也可以換成input），最後改變顏色的是txt4.

$("#txt3 + *").css("background-color","red");

txt4後為p標籤

$("#txt4 + *").html("123");

        5、//所有的兄弟輩。id為dv2，後面所有的兄弟結點。即txt5的背景為紅色

$("#dv2 ~ *").css("background-color","red");

         //id為txt1，後面所有的兄弟結點。即id為txt2、3、4.

還可以用方法來定位元素。

     1、子輩不包括孫子輩，相當於#dv1 >input 的那種情況。在這裡我都不截圖了。

var dv1=$("#dv1");
dv1.children("input").css("background-color","red");

     2、子孫輩，相當於#dv input 的那種情況。

dv1.find("input").css("background-color","red");

   3、子輩的子輩，相當於dv2的子輩

dv1.children().children().css("background-color","red");

dv1.children().children("p").html("133");

     4、緊跟自己的兄弟輩，（相當於#txt1 + *）的情況，即txt2

$("#txt1").next().css("background-color","red");

    5、自己後面所有的兄弟輩，（相當於#txt1 ~ *）,即txt2、3、4

$("#txt1").nextAll().css("background-color","red");

     6、父輩，txt2的父親輩的兄弟輩，即txt5

$("#txt2").parent().next().css("background-color","red");

    7、父輩以及祖輩。

$("#txt1").parents("div").find("input").css("background-color","red");

哈哈，定位元素就講完了。學會了這些，基本的查到元素都明白了。

本部落格還有一個重磅內容就是方法。

方法就講的簡單一點了。分為兩種，一種是直接呼叫的方法，一種是jQuery物件可以點出來的方法。

直接呼叫的方法

/*自己定義的方法f*/
function f(num1,num2){
	var max=num1>num2? num1:num2;
	alert(max);
}

/*頁面載入完成後呼叫，相當於c#裡的load方法*/
$(function(){
  f(1,2);
	
});

jQuery物件可以點出來的方法

/*主方法，相當於load*/
$(function(){
	 
	$("#btn").click(function(){
		$("#btn").f1().f2().f3("12","張三","男");
	});
});
/*自己定義了三個方法*/
$.fn.f1=function(){
	// alert("div");

	alert("hello world 一次");
	return this;
};
$.fn.f2=function(){
	// alert("div");

	alert("hello world 兩次");
	return this;
};
$.fn.f3=function(id,name,sex){
	// alert("div");

	alert("我的id"+id+"我的名字"+name+"我的性別"+sex);
	return this;
};

依次彈出框：

這就是所謂的鏈式程式設計，就能一直點下去。

就這篇部落格光寫就寫了三個小時，還有一上午的測試實驗，都是一點一點探索出來的。這絕對是我最用心、耗時最長的一篇部落格。覺得好的，可以留個評論或點個贊啊。