jQuery入門

貓董發表於2018-11-20
jQuery

jQuery的優勢

  1. DOM操作方便。
  2. 解決了瀏覽器的相容性問題：（瀏覽器寬高，event,監聽等）

學習路線

  1. 常用方法
  2. 高階方法
  3. 熟練使用
  4. 理解原理

安裝方式

  1. download到本地
  2. npm/yarn 包管理
  3. 引入CDN

獲取DOM

  1. 與CSS選擇器比較類似，選擇的是一個類陣列，$('div')[0]才代表DOM元素；
  2. 注意區分DOM物件和jQuery物件，例如：$('this')才是jQuery物件，才可以使用jQuery方法；
  3. $('')裡面可以放以下幾類東西：
    • CSS選擇器
    • 原生DOM，可以是一個陣列，也可以是單個DOM
    • function，相當於$(document).ready(function)，自動執行函式，DOM文件解析完成後立即執行，解決了非同步問題
    • null，返回空物件

文字屬性text，html和val

  1. text(): 取值賦值都是一組，拼接字串
  2. html(): 取值只取第一個，賦值賦一組
  3. val(): 取值只取第一個，賦值賦一組，主要用於表單元素

屬性attr和prop

  1. attr即attribute，既可以獲取和設定DOM固有的屬性（如：id/class/href 等） 也可以設定自定義的新增屬性：
    $('div').attr('id'); //獲取id
$('div').attr('id', 'navbar'); //設定單個屬性
$('div').attr({         //傳入物件（鍵值對），設定多個屬性
    id:'navbar',
    age: '18'
})
複製程式碼
  2. prop即property，僅支援DOM固有屬性， 語法與attr一致；
  3. 刪除屬性：
    removeAttr('id');
removeProp('age'); //不能刪除id/class等自帶屬性；
複製程式碼
  4. prop可以動態的獲取，attr不能動態的獲取

新增和刪除class

  1. addClass('container') 支援鏈式操作，（一般設定類方法都會返回this）
  2. removeClass('container')
  3. hasClass('container') 不支援鏈式操作，返回布林值
  4. toggleClass('container') 開關式操作

CSS樣式獲取和操作

  1. $('div').css('width') 返回值是'100px'字串，而$('div').width返回數值，獲取多個樣式時，可以傳陣列，返回值是物件；
  2. $('div').css('width','100px')設定樣式，如果設定多個樣式，可以傳入物件；
  3. 關於width：
$('div').width   //content
$('div').innerWidth  //content+padding
$('div').outerWidth  //content+padding+border
$('div').outerWidth(ture) // content+padding+border+margin
複製程式碼
  1. 關於position：
$('div').offset()  //相對於文件而言的位置，可以傳值{top:100px,left:100px}
$('div').position()  //相對於父級（有定位的父級），不可以傳值
複製程式碼
  1. 關於scroll：
$(document).scrollTop();
$(document).scrollLeft();
複製程式碼

DOM篩選和遍歷

  1. 篩選方法
    $('li').find('.container');
$('li:first'); //同樣用法還有last/odd/even/eq(2)
$('li').first(); //同樣用法還有last()/eq(2), 不包括odd/even
$('li:eq(2)').prev(); //返回上一個標籤，還有prevAll()/next()/nextAll()/siblings()
$('li').filter(function(index,ele){return true/false} //選取返回值為true的元素
$('li').not('.test');
$('li').is('.test'); //返回布林值
$('li').slice(2,4); //選取第二三號元素，取頭不取尾[start,stop)
複製程式碼
  2. each: 只是遍歷，返回的還是之前的DOM不做篩選
    $('li').each(fucntion(index,ele){
    var arr= [];
    arr.push($(this).find('.name').text()); //find 方法查詢元素
    }
arr.join(',');
複製程式碼
  3. map: 遍歷，並篩選DOM，返回篩選後的物件
    $('li').map(fucntion(index,ele){
    if($(ele).find('.age').text()>15)
    return ele;
    }
複製程式碼
  4. $('li').has('p')查詢有p子元素的li

jQuery 整體架構封裝思想

  1. 如何全域性使用jQuery： window.jQuery=window.$=jQuery;
  2. 無new操作： 再套一層 init();
  3. 改變原型：init.prototype = jQuery.prototype
  4. 鏈式操作： return this;

相關文章