js程式碼改寫成jq程式碼的方法
- 改寫作文
- 關注:9.97K次
js程式碼改寫成jq程式碼篇一:jQuery工作原理解析以及原始碼示例
jQuery的開篇宣告裡有一段非常重要的話:jQuery是為了改變javascript的編碼方式而設計的。從這段話可以看出jQuery本身並不是UI元件庫或其他的一般AJAX類庫。jQuery改變javascript編碼方式!
那麼它是如何實現它的宣告的呢?這裡,用以下的一段簡短的使用流程:
1、查詢(建立)jQuery物件:$("selector");
2、呼叫jQuery物件的方法完成我們需要完成的工作:$("selector").doOurWork();好了,jQuery就是以這種可以說是最簡單的編碼邏輯來改變javascript編碼方式的。這兩個步驟是jQuery的編碼邏輯核心!
要實現這種簡潔編碼方式,建立jQuery物件這一環節至關重要。因此,jQuery的dom元素查詢能力相當強悍。此外,jQuery物件的方法肯定是有限的,有限的方法滿足不了日益增長各有所需的要求,所以,必須提供jQuery物件方法的擴充套件能力。
強悍的dom元素查詢能力,以及隨心所欲的方法擴充套件,這兩點正是jQuery的核心所在!來一個簡單的示例,來說明jQuery是如何工作的:
<!DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0
Transitional//EN”””>baidu
$(function(){
$(“a“).click(function(e){//1)查詢$(”a”);2)jQuery物件事件click;3)jQuery物件方法hide$(this).hide(“slow“);
returnfalse;
});
});
jQuery中有一個“配置”的思想,這一點使得物件的屬性/事件等設定變得容易理解且十分簡便,如下一個拖拽元件的初始化:
可以看到,$("#drag1")是查詢並建立一個jquery物件,然後呼叫Draggable方法進行拖拽初始化,在此方法呼叫時,傳遞一個“配置”物件,進行拖拽操作的初始化配置。這一“配置”的思想,極大簡化了一些編碼步驟,並相當直觀和易懂。
以下我進行三個問答:
1、問:為什麼$(selector)之後,返回的是jQuery物件?
答:從jQuery的原始碼中,我們可以知道:var$=jQuery。因此當我們$(selector)操作時,其實就是jQuery(selector),建立的是一個jQuery物件。當然正確的寫法應該是這樣的:varjq=new$(selector);而jQuery使用了一個小技巧在外部避免了new,在jquery方法內部:if(window==this)returnnewjQuery(selector);
2、問:為什麼建立一個jQuery物件之後,我們可以這樣寫
$(selector).each(function(index){…});進行遍歷操作呢?
答:其實jQuery(selector)方法呼叫時,在jQuery(selector)方法內部,最後返回的是一個數組:returnthis.setArray(a);而each方法體內部是一個for迴圈,在迴圈體內是這樣呼叫的:method.call(this[i],i)。
3、問:為什麼jQuery能做到jQuery物件屬性/方法/事件的外掛式擴充套件?
答:如果您有一些javasciprt的物件導向方面的知識,就會知道,jQuery.prototype原型物件上的擴充套件屬性/方法和事件,將會給jQuery的物件“擴充套件”。基於這一點,jQuery是這樣寫的:jQuery.fn=jQuery.prototype。所以,當我們擴充套件一個外掛功能時,如下:jQuery.fn.check=function(){
returnthis.each(function(){
其實就是:
綜上所述,jQuery給我們帶來了一個簡潔方便的編碼模型(1>建立jQuery物件;2>直接使用jQuery物件的屬性/方法/事件),一個強悍的dom元素查詢器($),外掛式程式設計介面(jQuery.fn),以及外掛初始化的”配置”物件思想.
附:實現自己的jQuery<!DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0
Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
divvv
fdsf
//實現自己的MyQuery框架
varMyQuery=function(selector){
if(window==this)returnnewMyQuery(selector);
//這裡只實現dom型別的簡單查詢,嘿嘿
vardoms=document.getElementsByTagName(selector);
vararr=[];
for(vari=0;i<doms.length;i++){
arr.push(doms.item(i));
}
returnthis.setArray(arr);
}
MyQuery.prototype.setArray=function(arr){this.length=0;
[].push.apply(this,arr);
returnthis;
}
MyQuery.fn=MyQuery.prototype;
var$=MyQuery;
//外掛擴充套件1)each
MyQuery.fn.each=functionethod){for(vari=0,l=this.length;i<l;i++){
method.call(this[i],i);
}
}
//外掛擴充套件2)show
MyQuery.fn.show=function(){
this.each(function(i){
alert(i+“:“+this.id+“:“+this.innerHTML);});
}
//debugger
$(“div“).show();
js程式碼改寫成jq程式碼篇二:JQ新增移除css樣式程式碼實現
jQuery新增/移除CSS類實現程式碼
在網頁設計中,我們常常要使用Javascript來改變頁面元素的樣式。
其中一種辦法是改變頁面元素的CSS類(Class),這在傳統的Javascript裡,我們通常是通過處理HTMLDom的classname特性來實現的;而jQuery裡提供三種方法來實現這個功能,雖然它們和傳統方法的'思想相通,但是卻節省了許多程式碼。還是那句話-“jQuery讓JavaScript程式碼變得簡潔!”
1.addClass()-新增CSS類
程式碼如下:
$("#target").addClass("newClass");
//#target指的是需要新增樣式的元素的ID
//newClass指的是CSS類的名稱
2.removeClass()-移除CSS類
程式碼如下:
$("#target").removeClass("oldClass");
//#target指的是需要移除CSS類的元素的ID
//oldClass指的是CSS類的名稱
3.toggleClass()-新增或者移除CSS類:如果CSS類已經存在,它將被移除;相反,如果CSS類不存在,它將被加上。
程式碼如下:
$("#target").toggleClass("newClass")
//如果ID為“target”的元素已經定義了CSS樣式,它將被移除;
//反之,CSS類”newClass“將被賦給該ID。
4.hasClass("className")-判斷是否已經存在CSS
在實際運用中,我們常常先定義好這些CSS類,然後通過Javascript事件觸發(比如點選某個連結)來改變頁面元素樣式。此外,jQuery還提供一種方法hasClass("className"),用來判斷某個元素是否已經被賦予某個CSS類。
Jquery使用addClass()與removeClass()來動態的新增或移出一個css類的具體例子如下:
1.$(“#para1”).addClass('highlight');新增一個“highlight”css類給id為para1的元素。
2.$(‘#para1’).removeClass(‘'highlight');從id為para1的元素中移出一個‘highlight’css類。
具體例項程式碼如下:
視窗標題-left
61.
62.
63.
64.
65.<img
src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg"alt="關閉"/>視窗標題-right
66.
67.
68.
69.
70.//獲取視窗的高度
indowHeight;
72.//獲取視窗的寬度
indowWidth;
74.//獲取彈窗的寬度
opWidth;
76.//獲取彈窗高度
opHeight;
tioninit(){
owHeight=$(window)ht();
owWidth=$(window)h();
eight=$("ow")ht();
idth=$("ow")h();
83.}
84.
85.//關閉視窗的方法
tioncloseWindow(){
87.$("_titleimg")k(function(){
88.$(this)nt()nt()("normal");
89.});
90.}
91.
tionpopCenterWindow(){
();
94.//計算彈出視窗的左上角Y的偏移量
opY=(windowHeight-popHeight)/2;//垂直方向偏移量
opX=(windowWidth-popWidth)/2;//水平方向偏移量
97.
98.//設定視窗的位置
99.$("#center")("top",popY)("left",popX)eToggle("fast");eWindow();
101.}
102.
tionpopLeftWindow(){
();
105.//計算彈出視窗的左上角Y的偏移量
opY=windowHeight-popHeight;
107.//varpopX=-(windowWidth-popWidth);
108.
109.//設定視窗的位置
110.$("#left")("top",popY-50)("left",50)eToggle("slow");eWindow();
112.}
tionpopRightWindow(){
();
115.//計算彈出視窗的左上角Y的偏移量
opY=windowHeight-popHeight;
opX=windowWidth-popWidth;
118.
119.//設定視窗的位置
120.$("#right")("top",popY-50)("left",popX-50)eToggle("normal"
);
eWindow();
122.}
123.
124.
125.
- 文章版權屬於文章作者所有,轉載請註明 https://wenshudu.com/zh-tw/ticaizuowen/gaixiezuowen/rnl3qo.html