- 相關(guān)推薦
js代碼改寫成jq代碼的方法
js代碼改寫成jq代碼篇一：jQuery工作原理解析以及源代碼示例
jQuery的開篇聲明里有一段非常重要的話：jQuery是為了改變javascript的編碼方式而設(shè)計(jì)的。從這段話可以看出jQuery本身并不是UI組件庫或其他的一般AJAX類庫。jQuery改變javascript編碼方式！
那么它是如何實(shí)現(xiàn)它的聲明的呢？這里，用以下的一段簡短的使用流程：
1、查找(創(chuàng)建)jQuery對(duì)象：$("selector");
2、調(diào)用jQuery對(duì)象的方法完成我們需要完成的工作：$("selector").doOurWork();好了，jQuery就是以這種可以說是最簡單的編碼邏輯來改變javascript編碼方式的。這兩個(gè)步驟是jQuery的編碼邏輯核心！
要實(shí)現(xiàn)這種簡潔編碼方式，創(chuàng)建jQuery對(duì)象這一環(huán)節(jié)至關(guān)重要。因此，jQuery的dom元素查找能力相當(dāng)強(qiáng)悍。此外，jQuery對(duì)象的方法肯定是有限的，有限的方法滿足不了日益增長各有所需的要求，所以，必須提供jQuery對(duì)象方法的擴(kuò)展能力。
強(qiáng)悍的dom元素查找能力，以及隨心所欲的方法擴(kuò)展，這兩點(diǎn)正是jQuery的核心所在！來一個(gè)簡單的示例，來說明jQuery是如何工作的：
<!DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0
Transitional//EN”””>baidu
$(function(){
$(“a“).click(function(e){//1)查找$(”a”);2)jQuery對(duì)象事件click;3)jQuery對(duì)象方法hide$(this).hide(“slow“);
returnfalse;
});
});
jQuery中有一個(gè)“配置”的思想，這一點(diǎn)使得對(duì)象的屬性/事件等設(shè)置變得容易理解且十分簡便，如下一個(gè)拖拽組件的初始化：
可以看到，$("#drag1")是查找并創(chuàng)建一個(gè)jquery對(duì)象，然后調(diào)用Draggable方法進(jìn)行拖拽初始化，在此方法調(diào)用時(shí)，傳遞一個(gè)“配置”對(duì)象，進(jìn)行拖拽操作的初始化配置。這一“配置”的思想，極大簡化了一些編碼步驟，并相當(dāng)直觀和易懂。
以下我進(jìn)行三個(gè)問答：
1、問：為什么$(selector)之后，返回的是jQuery對(duì)象？
答：從jQuery的源代碼中，我們可以知道：var$=jQuery。因此當(dāng)我們$(selector)操作時(shí)，其實(shí)就是jQuery(selector)，創(chuàng)建的是一個(gè)jQuery對(duì)象。當(dāng)然正確的寫法應(yīng)該是這樣的：varjq=new$(selector);而jQuery使用了一個(gè)小技巧在外部避免了new，在jquery方法內(nèi)部：if(window==this)returnnewjQuery(selector);
2、問：為什么創(chuàng)建一個(gè)jQuery對(duì)象之后，我們可以這樣寫
$(selector).each(function(index){…});進(jìn)行遍歷操作呢？
答：其實(shí)jQuery(selector)方法調(diào)用時(shí)，在jQuery(selector)方法內(nèi)部，最后返回的是一個(gè)數(shù)組：returnthis.setArray(a);而each方法體內(nèi)部是一個(gè)for循環(huán)，在循環(huán)體內(nèi)是這樣調(diào)用的：method.call(this[i]，i)。
3、問：為什么jQuery能做到j(luò)Query對(duì)象屬性/方法/事件的插件式擴(kuò)展？
答：如果您有一些javasciprt的面向?qū)ο蠓矫娴闹R(shí)，就會(huì)知道，jQuery.prototype原型對(duì)象上的擴(kuò)展屬性/方法和事件，將會(huì)給jQuery的對(duì)象“擴(kuò)展”。基于這一點(diǎn)，jQuery是這樣寫的：jQuery.fn=jQuery.prototype。所以，當(dāng)我們擴(kuò)展一個(gè)插件功能時(shí)，如下：jQuery.fn.check=function(){
returnthis.each(function(){
其實(shí)就是：
綜上所述,jQuery給我們帶來了一個(gè)簡潔方便的編碼模型(1>創(chuàng)建jQuery對(duì)象;2>直接使用jQuery對(duì)象的屬性/方法/事件),一個(gè)強(qiáng)悍的dom元素查找器($),插件式編程接口(jQuery.fn),以及插件初始化的”配置”對(duì)象思想.
附:實(shí)現(xiàn)自己的jQuery<!DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0
Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
divvv
fdsf
//實(shí)現(xiàn)自己的MyQuery框架
varMyQuery=function(selector){
if(window==this)returnnewMyQuery(selector);
//這里只實(shí)現(xiàn)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;
//插件擴(kuò)展1)each
MyQuery.fn.each=functionethod){for(vari=0,l=this.length;i<l;i++){
method.call(this[i],i);
}
}
//插件擴(kuò)展2)show
MyQuery.fn.show=function(){
this.each(function(i){
alert(i+“:“+this.id+“:“+this.innerHTML);});
}
//debugger
$(“div“).show();
js代碼改寫成jq代碼篇二：JQ添加移除css樣式代碼實(shí)現(xiàn)
jQuery添加/移除CSS類實(shí)現(xiàn)代碼
在網(wǎng)頁設(shè)計(jì)中，我們常常要使用Javascript來改變頁面元素的樣式。
其中一種辦法是改變頁面元素的CSS類(Class)，這在傳統(tǒng)的Javascript里，我們通常是通過處理HTMLDom的classname特性來實(shí)現(xiàn)的；而jQuery里提供三種方法來實(shí)現(xiàn)這個(gè)功能，雖然它們和傳統(tǒng)方法的思想相通，但是卻節(jié)省了許多代碼。還是那句話-“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類已經(jīng)存在，它將被移除；相反，如果CSS類不存在，它將被加上。
代碼如下:
$("#target").toggleClass("newClass")
//如果ID為“target”的元素已經(jīng)定義了CSS樣式，它將被移除；
//反之，CSS類”newClass“將被賦給該ID。
4.hasClass("className")-判斷是否已經(jīng)存在CSS
在實(shí)際運(yùn)用中，我們常常先定義好這些CSS類，然后通過Javascript事件觸發(fā)（比如點(diǎn)擊某個(gè)鏈接）來改變頁面元素樣式。此外，jQuery還提供一種方法hasClass("className")，用來判斷某個(gè)元素是否已經(jīng)被賦予某個(gè)CSS類。
Jquery使用addClass()與removeClass()來動(dòng)態(tài)的添加或移出一個(gè)css類的具體例子如下：
1.$(“#para1”).addClass('highlight');添加一個(gè)“highlight”css類給id為para1的元素。
2.$(‘#para1’).removeClass(‘'highlight');從id為para1的元素中移出一個(gè)‘highlight’css類。
具體實(shí)例代碼如下：
窗口標(biāo)題-left
61.
62.
63.
64.
65.<img
src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg"alt="關(guān)閉"/>窗口標(biāo)題-right
66.
67.
68.
69.
70.//獲取窗口的高度
71.varwindowHeight;
72.//獲取窗口的寬度
73.varwindowWidth;
74.//獲取彈窗的寬度
75.varpopWidth;
76.//獲取彈窗高度
77.varpopHeight;
78.functioninit(){
79.windowHeight=$(window).height();
80.windowWidth=$(window).width();
81.popHeight=$(".window").height();
82.popWidth=$(".window").width();
83.}
84.
85.//關(guān)閉窗口的方法
86.functioncloseWindow(){
87.$(".win_titleimg").click(function(){
88.$(this).parent().parent().hide("normal");
89.});
90.}
91.
92.functionpopCenterWindow(){
93.init();
94.//計(jì)算彈出窗口的左上角Y的偏移量
95.varpopY=(windowHeight-popHeight)/2;//垂直方向偏移量
96.varpopX=(windowWidth-popWidth)/2;//水平方向偏移量
97.
98.//設(shè)定窗口的位置
99.$("#center").css("top",popY).css("left",popX).slideToggle("fast");100.closeWindow();
101.}
102.
103.functionpopLeftWindow(){
104.init();
105.//計(jì)算彈出窗口的左上角Y的偏移量
106.varpopY=windowHeight-popHeight;
107.//varpopX=-(windowWidth-popWidth);
108.
109.//設(shè)定窗口的位置
110.$("#left").css("top",popY-50).css("left",50).slideToggle("slow");111.closeWindow();
112.}
113.functionpopRightWindow(){
114.init();
115.//計(jì)算彈出窗口的左上角Y的偏移量
116.varpopY=windowHeight-popHeight;
117.varpopX=windowWidth-popWidth;
118.
119.//設(shè)定窗口的位置
120.$("#right").css("top",popY-50).css("left",popX-50).slideToggle("normal"
);
121.closeWindow();
122.}
123.
124.
125.