專案中常用jquery知識總結

weixin_33860722發表於2016-12-19
jQuery

1、$(function(){})是什麼

-----------------(1)-----------------
$(function() {
      //...
});
 -----------------(2)-----------------
$(document).ready(function(){
     //...
});
 -----------------(3)-----------------
window.onload = function() {
     //...
}

說明：(1)就是(2)的簡寫形式，window.onload 只能出現一次，而(1)、(2)可以出現多個次，都是指當文件載入完畢後執行。如果該段js程式碼放到了dom文件的最後，可以不用寫這幾個方法。
注意：$(document).ready(function(){...})裡面還可以定義多個函式。但是，外面的語句無法呼叫裡面的函式；

2、常用的選擇器

選擇器 舉例 說明
#id $("#lastname") 選取id="lastname" 的元素
.class $(".intro") 選取class="intro" 的所有元素
element $("p") 選取所有<p> 元素
:first $("p:first") 選取第一個<p> 元素
:input $(":input") 選取所有 input 元素

例項
(1)獲取value等於10的input元素：$("input[value=" + 10 + "]")
(2)獲取id="hahaha"的直接父元素：$("#hahaha").parent

3、jQuery物件與DOM物件的相互轉換

(1)jQuery通過選擇器獲取的物件並不是原生的DOM物件。
jQuery物件是包裝DOM物件後產生的，是一個資料物件；jQuery無法使用DOM物件的任何方法，DOM物件也不能使用jQuery的任何方法。$("#test").innerHTML、document.getElementById("id").html()之類的寫法都是錯誤的。

(2)jQuery物件轉成DOM物件：
$("#id") [0]：其中$("#id")是jQuery物件，$("#id") [0]是DOM物件，在後面加上[0]可以獲取對應的DOM物件，或者使用$("#id").get(0)同樣可以獲取。
(3)DOM物件轉成jQuery物件:
只需要用$()把DOM物件包裝起來，就可以獲得一個jQuery物件，如：

var v = document.getElementById("id"); //DOM物件 
var v1 = $(v); //jQuery物件

4、jQuery設定元素的屬性等

假如有元素：<div id="haha"><input id="haha1" value="zhangSan"></div>
(1)設定某元素的高度：$("#haha").height("200px");
(2)設定某元素的樣式：$("#haha").css("display", "none");
(3)獲取瀏覽器視窗的高度：$(window).height()
(4)獲取input元素的值：$("#haha1").val()
(5)設定input元素的值：$("#haha1").val("liSi")
(6)設定src、href等屬性：
$('#img-id').attr("src","http://你的圖片地址");
$('#a-id').attr("href","http://你的連結地址");

5、常用處理方法

(1)遮蔽html標籤：$('<div/>').text("<h1>我是h1標籤</h1>").html()
(2)顯示文字內容：假如使用p標籤<p id="text-viewer"></p>，然後設定為：$("#text-viewer").html("要顯示的文字內容");
(3)text()、html() 、與val()的區別

text() - 設定或返回所選元素的文字內容
html() - 設定或返回所選元素的內容（包括 HTML 標記）
val()- 設定或返回表單欄位的值

(4)獲取某元素的scrollHeight值(實際高度，即使有由於滾動而不接見的部分)：
$("#id").prop('scrollHeight')
引自：Stack Overflow

---------------------------------
There is no scrollHeight in jQuery - it's scrollTop():

var elemHeight = $("#container").scrollTop();
var scrollHeight = $("#scrollbars").scrollTop();
Alternatively if you want to use the native scrollHeight property, 
you need to access the DOM element in the jQuery object directly, like this:

var elemHeight = $("#container")[0].scrollHeight;
var scrollHeight = $("#scrollbars")[0].scrollHeight;
------------------------------------
If you are using Jquery 1.6 or above, use prop to access the value.

$("#container").prop('scrollHeight')
Previous versions used to get the value from attr but not post 1.6.

6、jQuery常用事件

事件 說明 舉例
click() 點選元素時 $("p").click(function(){ //...});
dblclick() 雙擊元素時 $("p").dblclick(function(){//...});
mouseenter() 滑鼠指標穿過元素時 $("#p1").mouseenter(function(){//...});
hover() 游標懸停在元素時 $("#p1").hover(function(){//...});
mousedown() 滑鼠指標移動到元素上方，並按下滑鼠按鍵時 $("#p1").mousedown(function(){});
mouseup() 在元素上鬆開滑鼠按鈕時 $("#p1").mouseup(function(){//... });
focus() 元素獲得焦點時 $("input").focus(function(){//...});
blur() 當元素失去焦點時 $("input").blur(function(){/...});

另外兩個：
bind()：向被選元素新增一個或多個事件處理程式，以及當事件發生時執行的函式。
unbind()：從被選元素上移除新增的事件處理程式。

常用處理方法：
禁用右鍵：

$("#container").bind("contextmenu",function(e){   
            return false;
});

禁止選擇文字：這裡，選擇器可以是某個元素，但是如果寫成某個元素，依然可以從其他元素元素文字，然後拉動滑鼠，選中你禁止選擇文字的元素，所以最好用document。

//適用IE和Chrome
$(document).bind("selectstart",function(){return false;});
//適用Firefox:注意這裡不能寫document，否則會無效
$(document.body).css("-moz-user-select", "none");

監聽視窗大小改變

$(window).resize( function(){
    //調整視訊view的容器的高度
    $("#vedio-viewer").height($("#vedio-viewer").width()*2/3);
 });

為input標籤繫結enter事件

$("#input-id").keypress(function(e) {
        var key = window.event ? e.keyCode : e.which;
        if (key.toString() == "13") {//enter鍵
            //執行一些操作
              ...
              ...

             //防止事件繼續傳遞
            return false;
        }
    });

點選某一元素外的區域的事件

$(document).not($("#nav-search-input")).click(function(){
    //點選除nav-search-input之外的其他區域觸發的事件

});

//但是要加上這個，防止事件繼續傳遞
$("#nav-search-input").click(function(event) {
    event.stopPropagation();
    //操作...
});

禁止輸入特殊字元

$("#input-id").on('input',function(e){  
    var search = $("#input-id").val();
    $("#input-id").val(search.replace(/\#/g, ''));
});

7、jQuery迴圈遍歷

$(".hahaha").each(function(){//對所有class中含有hahaha的元素進行迴圈操作
      //這裡可以用this表示當前遍歷的jQuery物件
});

8、其他

(1)判斷字串是否以特定字串結尾

String.prototype.endWith=function(endStr){
      var d=this.length-endStr.length;
      return (d>=0&&this.lastIndexOf(endStr)==d)
}

function(name){
    name = name.toLowerCase();
    if(name.endWith(".docx") ){
       //...
         ...
    }
}

9、ajax

$.ajax({
    cache : false,//布林值，表示瀏覽器是否快取被請求頁面。預設是 true。
    type : "POST",//規定請求的型別（GET 或 POST）。
    url:"請求的url路徑",//規定傳送請求的 URL。預設是當前頁面。
    data :... ,//規定要傳送到伺服器的資料。
        
          //這裡要說明的是，data有三種形式：
          文字形式   data : "uname=alice&mobileIpt=110",(也可以在url後面直接拼接)
          json物件   data : {uanme:'vic',mobileIpt:'110'},
          json陣列   data : [
                           {"name":"uname","value":"alice"},
                           {"name":"mobileIpt","value":"110"},   
                           {"name":"birthday","value":"2012-11-11"}
                         ],
           //如果是表單資料，可以這樣寫：
           data : $('#表單的id').serialize(),

    async : false,//布林值，表示請求是否非同步處理。預設是 true。
    error : function(request) {//如果請求失敗要執行的函式。
                 //...
                   ...
            },
    success : function(data) {//當請求成功時執行的函式。
                  //假如獲取的資料型別是Map，如何取值？
                  //後臺Map map = new HashMap(); map.put("name", "zhangsan");
                  可以這樣來處理：data = eval("(" + data + ")");
                  那麼data.name就是字串"zhangsan"
                  //如何獲取map的長度
                  var length  = Object.keys(data).length ;
                  ...
            }
});

10、jQuery對各種資料的處理

待續

11、關於瀏覽器

(1)獲取瀏覽器的flash有沒有安裝以及版本

//使用示例
var flash = flashChecker();
if(!flash.f){
    //安裝了flash外掛
    console.log("flash的版本是：" + flash.v);
}else{
    //沒安裝flash外掛
    $("#vedio-viewer").html("<p style='margin-top:20px;'>
      您的瀏覽器沒有安裝flash外掛，需安裝後才能播放視訊：
      </p><a href='http://get.adobe.com/cn/flashplayer/'>點選安裝</a>");

}

//函式定義
function flashChecker(){
        var hasFlash = 0; // 是否安裝了flash
        var flashVersion = 0; // flash版本
        if (document.all) {
            var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
            if (swf) {
                    hasFlash = 1;
                    VSwf = swf.GetVariable("$version");
                    flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
            }
        } else {
            if (navigator.plugins && navigator.plugins.length > 0) {
                var swf = navigator.plugins["Shockwave Flash"];
                if (swf) {
                    hasFlash = 1;
                    var words = swf.description.split(" ");
                    for (var i = 0; i < words.length; ++i) {
                        if (isNaN(parseInt(words[i]))) continue;
                        flashVersion = parseInt(words[i]);
                    }
                }
            }
        }
        return {f:hasFlash,v:flashVersion};
    }

相關文章