Jquery淺談之講解一

               對於web developement,我想說說我對於Jquery知識的瞭解和總結。希望對大家有幫助,同時也歡迎大家的評論

       

              簡介:jquery是由美國人John Resig創建,  jquery的宗旨是:writer less,do more   對於關於jquery的其它信息可以再www.jquery.com中瞭解

   jquery是基於javascript查詢庫,  當然如果你認爲它僅僅能做這種事情的話,那你也就太小看它了,我們通過jquery可以完成許多html的動態效果,能過輕鬆的進行ajax請求等

            

            歷史:jquery是 繼承prototype之後的又一個優秀的javascript框架 輕量級的js庫,擁有強大的兼容性,對於css和大部分瀏覽器都是兼容的,在頁面處理方面,jquery能過

更方便的處理html,document,events,實現動態效果,並可以提供方便的ajax交互,jquery能過很好的使得html代碼分離,從而避免在html中嵌入js的調用

 

           javacript中的五種基本數據類型:undefined,null,boolean,string,number

  

         基本的jquery用法:

                      typeOf ()   驗證關鍵字類型的返回

                      $(document).ready(function(){

                                 //這裏是jquery的基本,當html的Dom元素加載完畢,但是它們之間的相關聯關係並沒有完成時執行

                       });

                      $("a").click(function(){

                               //當html元素a被觸發click事件的時候執行

                     });

                     $("#sharmeId").click(function(){

                             //當html元素Id名爲sharmeId的元素被觸發click事件的時候執行

                      });

                     //添加子元素      ,在這裏注意jquery中html()這個函數有兩個作用,沒有沒有放參數體,那麼就是獲取html()內容,如果放了那麼就是設置內容,這裏是設置Id爲sharmeId的內容

                      $("#sharmeId").html("

                               <font color='red'>sharme Yao</font>

                        ");

                       

            選擇器的使用:

                         jquery的每一個對象都有length的屬性

                         在這裏想和大家說說在html中onload()函數和jquery中ready()函數的區別:

                                前者表示是html中整個DOM元素都加載完畢,並且他們之間的相關聯的關係也已經完成之後執行,而後者是整個DOM元素加載完畢,但是他們之間的相關聯的關係並沒有加載完畢的時候就已經執行

 

  以下是我對於jquery中的選擇器做了一些篩選之後的內容,希望對於大家使用

            基本選擇器:

                      $("#id") 根據Id找對應的元素,如果不存在返回一個空的jquery對象

                      $(".class")  更加css的class屬性找對應的元素,返回集合對象

                      $("p ")     選取所有的P標籤的元素

                      $(" * ")     找尋所有元素,返回所有元素

                     $("div,span,p")   將每一個選擇器合併在一起之後返回

         層次選擇器:

                     $("body div").css("background","red"); 將body一下的所有div元素的背景顏色改變

                     $("body > div").css("background","red");將body的直接子元素的背景顏色改變

                     $(",one+next").css(....);   將class爲one的下一個元素的樣式進行操作

                     $("#one ~ div")   獲取ID爲one的,後面所有的兄弟元素的集合

                     $("#one").next("div").css() ;  尋找到ID爲one,下一個div元素對象

                     $("#one").nextAll("div").css();  尋找ID爲one元素之後的所有div元素對象

                     $("#one").siblings("div").css()    尋找ID爲one的所有的div的兄弟元素

 

         由於時間的原因,下次將和大家更深入的瞭解選擇器和jquery的動畫,如果有哪些不好的地方希望大家提出來,謝謝

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

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