js代碼改寫成jq代碼的方法

js代碼改寫成jq代碼的方法

　　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.//獲取窗口的高度

　　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.//關閉窗口的方法

　　86.functioncloseWindow(){

　　87.$(".win_titleimg").click(function(){

　　88.$(this).parent().parent().hide("normal");

　　89.});

　　90.}

　　91.

　　92.functionpopCenterWindow(){

　　93.init();

　　94.//計算彈出窗口的左上角Y的偏移量

　　95.varpopY=(windowHeight-popHeight)/2;//垂直方向偏移量

　　96.varpopX=(windowWidth-popWidth)/2;//水平方向偏移量

　　97.

　　98.//設定窗口的位置

　　99.$("#center").css("top",popY).css("left",popX).slideToggle("fast");100.closeWindow();

　　101.}

　　102.

　　103.functionpopLeftWindow(){

　　104.init();

　　105.//計算彈出窗口的左上角Y的偏移量

　　106.varpopY=windowHeight-popHeight;

　　107.//varpopX=-(windowWidth-popWidth);

　　108.

　　109.//設定窗口的位置

　　110.$("#left").css("top",popY-50).css("left",50).slideToggle("slow");111.closeWindow();

　　112.}

　　113.functionpopRightWindow(){

　　114.init();

　　115.//計算彈出窗口的左上角Y的偏移量

　　116.varpopY=windowHeight-popHeight;

　　117.varpopX=windowWidth-popWidth;

　　118.

　　119.//設定窗口的位置

　　120.$("#right").css("top",popY-50).css("left",popX-50).slideToggle("normal"

　　);

　　121.closeWindow();

　　122.}

　　123.

　　124.

　　125.