開發中面對的問題1

開發中面對的問題1

 

 

（一）a href="javascript:;"

(1)點擊連接後不作任何事情 

<a href="javascript:;" class="">手機註冊</a>

做用：讓點擊效果執行JavaScript空語句，防止點擊超連接標籤進行跳轉。

(2)點擊連接後，響應用戶自定義的點擊事件

<a href="javascript:void()" class="">手機註冊</a>

 

 

 

 

 

 （二）$(this).index()

做用：返回自身所在的位置

 

 （三）toggleClass()

$element.toggleClass( className );
// 至關於
if( $element.hasClass( className ) ){
    $element.removeClass( className );
}else{
    $element.addClass( className ); 

現實開發中常會有多個class一塊兒用 。

.toggleClass("none block");

做用：切換指定的css類名classNames。若是存在指定的類名，則移除該類名；若是不存在，則添加該類名。

 

 （四）.focus（）和.blur（）

觸發輸入域的 focus 事件

觸發輸入域的 blur 事件

大概意思是：在輸入域中點擊，使其得到焦點。而後在輸入域外面點擊，使其失去焦點。

 

 

 （五）(function($){...})(jQuery)其實是自調用匿名函數

 《須要結合另外一篇文章》：http://www.cnblogs.com/hewasdrunk/p/7457634.html

function(arg){...}
這就定義了一個匿名函數，參數爲arg

而調用函數時，是在函數後面寫上括號和實參的，因爲操做符的優先級，函數自己也須要用括號，即：
(function(arg){...})(param)
這就至關於定義了一個參數爲arg的匿名函數，而且將param做爲參數來調用這個匿名函數
至關於：

funtion OutPutFun(arg){alert(arg);};

OutPutFun("param");

而(function($){...})(jQuery)則是同樣的，之因此只在形參使用$，是爲了避免與其餘庫衝突，因此實參用jQuery
var fn = function($){....};
fn(jQuery);

同樣 

其實能夠這麼理解，不過要注意的是fn是不存在的
那個函數直接定義，而後就運行了。就「壓縮」成下面的樣子了
(function($){...})(jQuery) 
**************************************************************************
簡單理解是(function($){...})(jQuery)用來定義一些須要預先定義好的函數
$(function(){ })則是用來在DOM加載完成以後運行\執行那些預先定義好的函數.
************************************************************************** 

 （六） jquery $.fn

$.fn是指jquery的命名空間，加上fn上的方法及屬性，會對jquery實例每個有效。
如擴展$.fn.abc(),即$.fn.abc()是對jquery擴展了一個abc方法,那麼後面你的每個jquery實例均可以引用這個方法。
能夠這樣：$("#div").abc(); 

jQuery.fn = jQuery.prototype

jQuery爲開發插件提拱了兩個方法，分別是：

一種是類級別的插件開發，即給jquery添加新的全局函數，至關於給jquery類自己添加方法。jquery的全局函數就是屬於jquery命名空間的函數。

另外一種是對象級別的插件開發，即給jquery對象添加方法。

 

jQuery.extend(object);爲擴展jQuery類自己.爲類添加新的方法。
jQuery.fn.extend(object);給jQuery對象添加方法。 爲具體的查詢的節點對象擴展方法

 

（6.1）jQuery.extend(object);　爲jQuery類添加類方法，能夠理解爲添加靜態方法。如：

$.extend({ 
　　add:function(a,b){returna+b;} 
}); 

便爲　jQuery　添加一個爲add　的　「靜態方法」，以後即可以在引入 jQuery　的地方，使用這個方法了，
$.add(3,4); //return 7 

（6.2）jQuery.fn.extend(object);對jQuery.prototype進得擴展，就是爲jQuery類添加「成員函數」。jQuery類的實例可使用這個「成員函數」。

 

 

 

 

 

（七）var $this = $(this);

$this只是個自定義的變量，$(this)是將當前DOM對象轉換成jquery對象（也表達了this是指：當前DOM對象，它是一個集合。）

 

var $this = $(this);    //這行經過$(DOM對象)方法將DOM對象轉換成jQuery對象，並賦值給$this這個自定義變量

變量命名規則：必須以字母、下劃線、或者$開頭；因此$this是一個變量。

用$開頭命名只是爲了讓代碼閱讀者 能夠輕易區分jquery對象和其餘普通element對象而已。

 《須要結合另外一篇文章》：http://www.cnblogs.com/hewasdrunk/p/7457634.html

 

（八）Jquery 中function的options參數問題

（options：選擇項；defaults：默認值）

 《須要結合另外一篇文章》：http://www.cnblogs.com/hewasdrunk/p/7457634.html

沒傳參數就是undefined嘛，同時

 通常jQuery插件都是用一個options對象做爲參數。但在插件開頭會有以下代碼完成默認配置：

options = $.extend(true, {
    // 默認配置
}, options || {});

 

 

參考：

$.fn.bgChange = function(options){  
//給定一個默認值。  
   var defaults = {  
        color:"black",fontSize:"12"  
    }; 
//將傳遞的值替換爲默認值，(若是options爲空，則使用defaults，能夠避免傳遞的options爲null和沒有傳遞options的狀況)

 var options = $.extend(defaults,options);

//插件內容寫在這裏
return this.css({
    'color':options.color,
    'fontSize':options.fontSize
});

 } 

 咱們的插件能夠這樣被調用：字體大小未指定，會運用插件裏的默認值12px。

$("a").bgChange({
   color:"blue" 
})

 

 

暴露插件默認設置，目的：方便更改插件

$.fn.bgChange = function(options){  
    var options = $.extend({},$options);  
}; 
$.fn.bgChange.default={
    color:"black",fontSize:"12"  
}

 

如今使用者能夠包含這樣一行代碼在他們的腳本里：

// 這個只須要調用一次，且不必定要在ready塊中調用
$.fn.bgChange.defaults.color= "blue";

 

接下來咱們像這樣使用插件的方法，結果它設置藍色的字體顏色：

$("a").bgChange();

 

（九）$.extend(obj1,obj2)對於替換的用法

爲jQuery.extend(css1,css2)爲例，css1,css2個有一些屬性(法照樣會比處理,這裏之講屬性).
extend函數會把css2有而css2沒有的屬性加到css1中,若是css2的某個屬性與css1的某個屬性名稱享用，就會用css2的屬性去覆蓋css1的同名屬性。css1就是最後的整和對象。或者也能夠用 ：
var newcss = jquery.extend(css1,css2)  newcss就是合併的新對象。
var newcss = jquery.extend({},css1,css2) newcss就是合併的新對象.並且沒有破壞css1的結構。

//用法: jQuery.extend(obj1,obj2,obj3,..)
2var Css1={size: "10px",style: "oblique"}
3var Css2={size: "12px",style: "oblique",weight: "bolder"}
4$.jQuery.extend(Css1,Css2)
5//結果:Css1的size屬性被覆蓋,並且繼承了Css2的weight屬性
6// Css1 = {size: "12px",style: "oblique",weight: "bolder"}
7

新的extend()容許你更深度的合併鑲套對象。下面的例子是一個很好的證實。

// 之前的 .extend()   
 2   jQuery.extend(   
 3     { name: 「John」, location: { city: 「Boston」 } },   
 4     { last: 「Resig」, location: { state: 「MA」 } }   
 5   );   
 6    // 結果:   
 7    // => { name: 「John」, last: 「Resig」, location: { state: 「MA」 } }
 8  // 新的更深刻的 .extend()   
 9   jQuery.extend( true,   
10   { name: 「John」, location: { city: 「Boston」 } },   
11     { last: 「Resig」, location: { state: 「MA」 } }   
12  );   
13  // 結果   
14   // => { name: 「John」, last: 「Resig」,   
15  //      location: { city: 「Boston」, state: 「MA」 } }  
16

 

 

（十）js中 ||的意思，js中 o = o || {};是什麼意思呢？

o = o || {} 表示：若是o爲null或undefined，則將o初始化空對象（即{}），不然o不變。目的是防止o爲null或未定義的錯誤。

其中：||表示或操做，第一個條件爲真，則結果爲真而不須要執行第二個條件；不然執行第二個條件，等價於如下代碼：

if(o)

o = o;else o = {};