jQuery定位元素和封裝方法
說到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;
};
依次彈出框:
這就是所謂的鏈式程式設計,就能一直點下去。
就這篇部落格光寫就寫了三個小時,還有一上午的測試實驗,都是一點一點探索出來的。這絕對是我最用心、耗時最長的一篇部落格。覺得好的,可以留個評論或點個贊啊。