jQuery框架使用準(zhǔn)備

1. jQuery框架和JavaScript加載模式對(duì)比
   • window.onload
     • 執(zhí)行時(shí)機(jī): (css/js/images)都加載完畢后執(zhí)行包裹代碼
     • 執(zhí)行次數(shù): 方法調(diào)用N次只會(huì)執(zhí)行一次, 后面的會(huì)覆蓋前面
   • $(document).ready(function () {} )
     • 執(zhí)行時(shí)機(jī): jQuery框架的ready方法等DOM結(jié)構(gòu)加載完畢后執(zhí)行包裹代碼
     • 執(zhí)行次數(shù): 方法調(diào)用N次會(huì)執(zhí)行N次, 不存在覆蓋問(wèn)題
     • 簡(jiǎn)寫(xiě)方式
       • $().ready(function () {} )
       • $(function() {} )
2. jQuery框架解決沖突
   • 在實(shí)際開(kāi)發(fā)中, 可能用到多個(gè)第三方框架, 如果這些框架本身在設(shè)計(jì)時(shí), 沒(méi)有命名空間的約束, 那么庫(kù)與庫(kù)之間發(fā)生沖突將在所難免
   • jQuery框架在設(shè)計(jì)時(shí), 使用閉包的形式將所有的代碼都封裝到一個(gè)立即調(diào)用函數(shù)中, 對(duì)外僅僅提供了$/jquery作為框架的入口
   • jQuery當(dāng)中所有的操作都是使用$/jquery對(duì)象進(jìn)行的
     • 產(chǎn)生沖突: 在使用jQuery之前, 使用了$符號(hào)
     • 解決沖突: var jq = $.noConflict();
3. 對(duì)象的相互切換
   • DOM對(duì)象: 每個(gè)HTML頁(yè)面都有一個(gè)DOM對(duì)象(Document Object Model, 文本對(duì)象模型), 通過(guò)傳統(tǒng)的JavaScript方法訪問(wèn)頁(yè)面中的元素, 就是訪問(wèn)DOM對(duì)象
   • jQuery對(duì)象: 在 jQuery框架中杖们，通過(guò)本身自帶的方法獲取頁(yè)面元素的對(duì)象
     • ps:其實(shí)jQuery本身只是個(gè)工廠函數(shù)悉抵，我們通常意義上所說(shuō)的jQuery實(shí)例對(duì)象其實(shí)是jQuery的原型對(duì)象上面的init方法創(chuàng)建出來(lái)的實(shí)例對(duì)象。即 jQuery對(duì)象 = new jQuery.prototype.init() , 只是因?yàn)閕nit方法和jQuery構(gòu)造函數(shù)共用相同的原型對(duì)象摘完，所以我們才會(huì)稱init構(gòu)造函數(shù)創(chuàng)建出來(lái)的對(duì)象為jQuery實(shí)例對(duì)象
   • DOM對(duì)象-->jQuery對(duì)象
     • $(DOM對(duì)象)
   • jQuery對(duì)象-->DOM對(duì)象
     • jquery對(duì)象.get(index) |jquery對(duì)象[index]

jQuery操作CSS

1. jQuery操作CSS方法, 語(yǔ)法如下
   1. 單個(gè)操作: $("div").css("height","200px");
   2. 鏈?zhǔn)椒?多個(gè)操作): $("selector").css(name1,value).css(name2,value)...;
   3. 傳遞樣式鍵值對(duì)的對(duì)象作為參數(shù): $("selector").css( { name1 : value , name2 : value})
2. jQuery框架操作Class
   • hasClass：檢查選定的標(biāo)簽中是否存在指定的Class
     • $("selector").hasClass("class1");: 只要選中的所有標(biāo)簽中有一個(gè)標(biāo)簽存在該Class姥饰，就返回true,否則返回false。
   • addClass : 為選中的所有標(biāo)簽批量的添加Class
     • $("selector").addClass("class1");
     • $("selector").addClass("class1").addClass("class2");
     • $("selector").addClass("class1 class2");
   • removeClass：把選定標(biāo)簽中指定的Class刪除
     • 語(yǔ)法同添加Class一樣
   • toggleClass： 切換Class
     • 語(yǔ)法同添加Class一樣
3. jQuery框架操作位置的方法
   • $("selector").width()和$("selector").height()
     • 不傳遞參數(shù)-->獲取指定標(biāo)簽的寬度|高度
     • 傳遞參數(shù)-->要設(shè)置標(biāo)簽的寬度|高度
   • .offset()和.position()
     • offset獲取當(dāng)前標(biāo)簽距離瀏覽器窗口的位置
     • position獲取當(dāng)前標(biāo)簽距離父標(biāo)簽的位置

jQuery選擇器

• jQuery選擇器說(shuō)明

  • jQuery 最核心組成部分: 選擇器引擎
    • 它完全繼承了 CSS 的風(fēng)格,可以對(duì) DOM 元 素的標(biāo)簽名孝治、屬性名列粪、狀態(tài)等進(jìn)行快速準(zhǔn)確的選 擇审磁，而且不必?fù)?dān)心瀏覽器的兼容性，寫(xiě)法更加簡(jiǎn)潔岂座。
  • jQuery 選擇器根據(jù)獲取頁(yè)面中元素的不同态蒂，可以劃分為四大類
    1. 基本選擇器
    2. 層級(jí)選擇器
    3. 篩選選擇器
    4. 表單選擇器

• 基本選擇器

  基本選擇器

• 層級(jí)選擇器

  層級(jí)選擇器
  • next() == 下一個(gè)相鄰兄弟 || nextAll() == 后面所有兄弟
  • 父子選擇器相關(guān)方法
    • parent(): 獲取當(dāng)前標(biāo)簽的父節(jié)點(diǎn)
    • parents(): 獲取當(dāng)前標(biāo)簽的祖先節(jié)點(diǎn)
    • parentsUntil(): 獲取當(dāng)前標(biāo)簽的祖先節(jié)點(diǎn)直到選中的祖先元素(不包括選中的祖先元素)
    • children(): 獲取當(dāng)前標(biāo)簽的子節(jié)點(diǎn)
    • siblings(): 獲取當(dāng)前標(biāo)簽的兄弟節(jié)點(diǎn)

• 篩選選擇器

  1. 基本篩選選擇器

     基本篩選選擇器

  2. 內(nèi)容篩選選擇器

     內(nèi)容篩選選擇器

  3. 屬性篩選選擇器

     屬性篩選選擇器

  4. 子元素篩選選擇器

     子元素篩選選擇器

  5. 可見(jiàn)性篩選選擇器

     可見(jiàn)性篩選選擇器

  6. 表單對(duì)象屬性篩選選擇器

     表單對(duì)象屬性篩選選擇器

• 表單選擇器

  表單選擇器