前端學習---jquery

標籤：var   刪除   使用方法   app   封裝   object   擷取   user   www   

本部分主要記錄jquery的  ‘選取器’  ‘dom操作’  ‘ajax’:

1:‘文法‘：

jquery的基本文法：$(selector).action()

$符號：定義jquery    selector:選取器，用於尋找html元素   action() 方法：對元素的操作

如：$(‘p‘).hide():隱藏所有<p>標籤

說明：文檔載入就緒的函數

實際的項目中所有的jquery函數都位於 document ready 函數中：這是一個文檔載入就緒的函數，為了防止文檔在載入就緒

之前運行jquery函數，導致失敗；

如： $(document).ready(function(){

             $(‘p‘).hide();

});

一個正確的載入jquery的函數應當如上所示；

2：選取器：

按照jquery的官方文檔來劃分：jquery可分為九大選取器：

1):  *   $("*")    所有元素

      #id    $("#name")   id="name"的元素

      .class   $(".info")     class="info" 的元素

       element   $("p")     <p>標籤的元素

       .class.class   $(".info.demo")    所有 class="intro" 且 class="demo" 的元素

具體的 jquery選取器的種類以及使用方法可點擊查看一下連結：

http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

3：‘dom操作‘：DOM = Document Object Model（文件物件模型）

獲得內容  --- text(),html()和val();

text() - 設定或返回所選元素的常值內容;

如：<b>this is the b element</b>    只是擷取其中的常值內容，文本不加黑體

html() - 設定或返回所選元素的內容（包括 HTML 標籤）

如：<b>this is the b element</b>     擷取其中的黑體常值內容

val() - 設定或返回表單欄位的值    擷取表單元素提交的值

擷取屬性---attr();

如：操作<a href="a11" target="_blank">點擊進入超連結</a>

$("href").attr();返回的值為：all

設定內容--  text("xxx")、html("xxx") 以及 val("xxx")

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

設定屬性---attr();

添加新的 HTML 內容---

• append() - 在被選元素的結尾插入內容
• prepend() - 在被選元素的開頭插入內容
• after() - 在被選元素之後插入內容
• before() - 在被選元素之前插入內容

刪除元素/內容---

• remove() - 刪除被選元素（及其子項目）
• empty() - 從被選元素中刪除子項目

4:jquery ajax操作：

AJAX 是與伺服器交換資料的藝術，它在不重載全部頁面的情況下，實現了對部分網頁的更新

這裡主要關注的是使用ajax技術實現前背景資料互動：

get方式：一般用於向後台請求資料的情境    Post方式：用於前端向後台提交資料

1):使用get請求擷取後台服務返回的資料

$("#button").click(function(){
          $.ajax({
                type:"get",    請求的方法
                url:"/user/getUser.do",   請求的服務地址
                contentType:"application/json",    返回資料的格式，這裡是json
                data:JSON.stringify(data),   向後台提交資料時，需要將json格式的資料轉化為json字串，這裡就是起這個作用的
                dataType:"json",    需要提交的資料格式
                success:function(result){   回呼函數：通過回呼函數可以擷取到後台返回的資料
                    alert(result.name);
                   
                }
            });
        });

2)post方式：

$("#button").click(function(){
           var data={"id":"1111","name":"張上亮","code":"beppe"};   需要提交到後台服務的資料，一般是通過dom操作擷取元素中的資料；
            $.ajax({    ajax模板，post請求和get請求基本一致
                type:"post",   
                url:"/user/saveUser.do",
                contentType:"application/json",
                data:JSON.stringify(data),
                dataType:"json",
                success:function(result){
                    
                    alert(result.shanghai);
                  
                }
            });
        });

基於ajax的個get請求和post請求都基本一致，而且各個方法中應用ajax的模板都是基本一致的，可以將這個方法進行封裝一層，這裡就不做這個操作了；

 

前端學習---jquery