jquery常用方法(學習筆記)

1、選擇器

$(this) -- 選擇當前元素

$("#test") -- 選擇id=test的元素

$(".test") -- 選擇class=test的元素

$("p") -- 選擇所有<p>元素


2、jQuery HTML

三個簡單實用的用於 DOM 操作的 jQuery 方法:

  • text() - 設置或返回所選元素的文本內容

  • html() - 設置或返回所選元素的內容(包括 HTML 標記)

  • val() - 設置或返回表單字段的值

  • attr()- 設置或返回所選元素的屬性值   $("#w3s").attr("href");


3、jQuery遍歷

祖先:parent()  、parents()、 parentsUntil()

$("span").parents("ul"); --span的所有祖先,且是ul元素      $("span").parentsUntil("div"); -- span和div之間所有祖先元素

後代:children()、 find()

$("div").children("p.c1"); -- 返回類名爲c1的所有p元素,且是div的直接子元素

同胞:siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()

$("h2").siblings("p"); -- 返回屬於 <h2> 的同胞元素的所有 <p> 元素

過濾:first()、last()、eq()、filter()、not()

$("div p").first(); -- div下第一個p元素     $("p").eq(1); -- 選取第二個p元素    $("p").filter(".intro"); -- 返回類名帶有"intro"的所有p元素


4、jQuery中ajax的3種常用請求方式:

(1)$.ajax()返回其創建的 XMLHttpRequest 對象

$.ajax() 只有一個參數:參數 key/value 對象,包含各配置及回調函數信息。

如果你指定了 dataType 選項,請確保服務器返回正確的 MIME 信息,(如 xml 返回 "text/xml")。

$.ajax({

                url: "/portal/validateCode/secondCheck?t=" + (new Date()).getTime(),

                type: "POST",

                async: false,

                dataType: "json",

                contentType: "application/x-www-form-urlencoded; charset=UTF-8",

                data: {name : "手機"},  或者直接提交表單  $("#phoneForm").serialize(),

                success: function (data, status) {

                    if (data.result.result) {

                        //TODO;

                    } else{

                        //TODO;

                    }

                },error: function(){

                         //請求出錯時調用

                         //TODO;

                }

});

(2)通過遠程 HTTP GET 請求載入信息

這是一個簡單的 GET 請求功能以取代複雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數,請使用 $.ajax。

$.get("/portal/validateCode/getCaptchaId",function(result){

        //TODO;

});

(3)通過遠程 HTTP POST 請求載入信息

這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數,請使用 $.ajax。

$.post("/login/loginSendYuyinMessage.do?interval=60", { username: username}, function(result){

        //TODO;

});


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章