jquery基礎總結

什麼是jquery？

        就是一個javascript函數庫，開源的。

jquery能做什麼

        javascript是做什麼的，jquery就是做什麼的，jquery是對javascript的封裝。

jquery的特點

          1、     寫少做多——write less,do more

          2、     很好的解決了不同浏覽器的相容問題(css還是有問題的)

          3、     對于不同控件具有統一的操作方式

          4、     體積小，使用簡單友善

          5、     鍊式程式設計、隐式疊代、插件豐富、開源、免費

          6、     讓編寫javascript程式更簡單，更強大)

         優點：

          1、     輕量級

          2、     強大的選擇器

          3、     出色的dom操作的封裝

          4、     可靠的事件處理機制

          5、     完善的ajax

          6、     不污染頂級變量

          7、     出色的浏覽器相容性

          8、     鍊式操作方式

          9、     隐式疊代

          10、   行為層與結構層的分離

          11、   豐富的插件支援

          12、   完善的文檔

          13、   開源

jquery中的頂級對象$

       $是jquery的簡寫，可以用jquery代替$

       window.onload(fn)和$(document).ready(fn)的差別：

 window.onload(fn)

$(document).ready(fn)

頁面完全加載完畢後才會觸發  

隻要dom元素加載完畢就觸發，提高相應速度

每次注冊新的事件都會将前面的覆寫掉   

可以多次注冊事件，最終都會執行

      使用jquery實作window.onload的效果:$(window).load(fn);

jquery中提供的兩個循環函數

$.trim(字元串)  去掉兩端的空格

 jquery對象和dom對象的轉換

          dom對象轉換為jquery對象：$(dom對象)

          jquery對象轉換為dom對象：$(dom對象).get(0);$(dom對象)[0];

 jquery選擇器

          id選擇器：$('#id');

          标簽選擇器：$('input');          $('*')擷取頁面上的所有元素

          屬性過濾選擇器：$('input[name=gender]')

          類樣式選擇器：$('.cls');

          标簽+類選擇器：$('div.cls');

          多條件選擇器：$('p,div,span.menuitem')//同時選擇p标簽、div标簽和擁有menuitem樣式的span标簽元素

          層次選擇器：$('div li')//div下的所有li元素(所有)

                             $('div>li')//div下直接li子元素

                             $('.menuitem+div')//樣式為menuitem之後的相鄰的第一個div元素    =   $('.menuitem').next('div')

                             $('.menuitem~div')//樣式為menuitem之後的所有的兄弟div元素       =   $('.menuitem').nextall('div')

          基本過濾選擇器：:first選取第一個元素     $('div:first')

                                    :last選取最後一個元素     $('div:last')

                                    :not選取不滿足選擇器條件的元素     $('input:not(.cls)')

                                    :even選取索引是偶數

                                    :odd選取索引是奇數

                                    $(':header')選取所有的h1——h6元素

                                    $('div:animated')選取正在執行動畫的<div>元素

          屬性過濾選擇器：$('div[id]')//選取有id屬性的div

                                    $('div[title=test]')//title屬性等于test

                                    $('div[title!=test]')//title屬性不等于test或沒有title屬性

                                    $('input[name^=n]')//name屬性以n開頭

                                    $('input[name$=n]')//name屬性以n結尾

                                    $('input[name*=n]')//name屬性包括n

          表單對象屬性過濾器：$('#form1:enabled')//選取id為form1的表單内所有啟用的元素

                                          $("#form1 :disabled")//選取id為form1的表單内所有禁用的元素

                                          $("input:checked”)//選取所有選中的元素（radio、checkbox）,這個中間不能加空格.

                                         $("select :selected")選取所有選中的選項元素

          表單選擇器：$(':input')//選取所有的input、textarea、select、button

                             $(':text')//與$('input[type=text]')差不多，但有一定的差別

                            $('textarea')//錯誤

          可見性過濾器：:hidden

          内容過濾器：:contains(text)//包含指定文本的元素

                             :empty//不包含元素或者文本的元素

                             :has(input)//包含指定元素的元素

                             :parent//作為父元素的元素

          子元素過濾器：     $('ul li:first');//隻傳回一個li元素

                                     $('ul li:first-child’);//為每個父元素ul都傳回一個li

                                     :only-child,比對目前父元素中隻有一個子元素的元素

                                     :nth-child(3n),選取3的倍數的元素

                                     :nth-child(3n+1),滿足3的倍數+1的元素

                                     .children()方法，隻考慮子元素，不考慮後代元素

鍊式程式設計

          注意：$('div').html('值').val('值')可以

                    $('div').html().val('值')不可以

                    括号中沒有值的時候是擷取值，擷取值傳回的是擷取的字元串而不是對象，是以不能鍊式程式設計

          end()方法可以恢複鍊被破壞前的情況

          toggleclass('cls')切換樣式的顯示

          hasclass('cls')判斷是否應用了某樣式

          $('p:eq(0)')代表的是第一個元素

          $('p:lt(2)')前兩個,索引為2之前的

          $('p:gt(2)')表示的是後兩個

獲得兄弟元素的幾個方法

          next();//目前元素之後的緊鄰着的第一個兄弟元素

          nextall();//目前元素之後的所有兄弟元素

          prev();//目前元素之前的緊鄰着的兄弟元素

          prevall();//目前元素之前的所有兄弟元素

          siblings();//目前元素的所有兄弟元素

jquery的疊代(包裝集)

          if($('#btn').length<=0)

          {

               alert("id為btn的元素不存在！");

          }

jquery的dom操作

          $('a:first').html('hello');

          $('a:first').text('hello');

          $('a:first').attr('href','http://www.baidu.com');

          $('a:first').removeattr('class');删除屬性

          $('a:first').attr('class','');屬性還有

動态建立dom節點

          $("<a href='http://www.baidu.com'>百度</a>").appendto('body');

          $('body').append("<a href='http://www.baidu.com'>百度</a>");

          prepend，在元素的開始添加元素（第一個子節點）。增加元素開始(兒子)

          after:在元素之後添加元素（添加兄弟）增加元素後面(兄弟)

          before:在元素之前添加元素（添加兄弟）增加元素前面(兄弟)

          (*)a.insertbefore(b);将a加到到b的前面，等同于b.before(a);

          (*)x.insertafter(y);将x加到到y的後面，等同于y.after(x);

          empty()清空某元素下的所有子節點

          remove()删除目前元素，傳回值為被删除的元素

          clone()克隆節點

          $('br').replacewith('<hr/>');用<hr/>替換br

          $('<br/>').replaceall('hr');用<br/>元素替換所有的hr

部落格位址：

<a href="http://www.cnblogs.com/wolf-sun">http://www.cnblogs.com/wolf-sun/</a>

部落格版權：

本文以學習、研究和分享為主，歡迎轉載，但必須在文章頁面明顯位置給出原文連接配接。

如果文中有不妥或者錯誤的地方還望高手的你指出，以免誤人子弟。如果覺得本文對你有所幫助不如【推薦】一下！如果你有更好的建議，不如留言一起讨論，共同進步！

再次感謝您耐心的讀完本篇文章。http://www.cnblogs.com/wolf-sun/p/3205619.html