jQuery

什么是jQuery

• 什么是jQuery是一個(gè)快速歧斟，簡(jiǎn)潔的JavaScript框架(js庫(kù)儡率，JavaScript代碼庫(kù))罢洲。jQuery設(shè)計(jì)的宗旨的"write Less,Do More",即倡導(dǎo)寫(xiě)更少的代碼拴签，做更多的是运挫。它封裝JavaScript常用的功能代碼，提供簡(jiǎn)潔的JavaScript設(shè)計(jì)模式亲配，事件處理尘应，動(dòng)畫(huà)設(shè)計(jì)和Ajax交互。

jQuery特點(diǎn)

• 快速獲取文檔元素(并非原始的dom元素)
• 提供了更多豐富美觀的動(dòng)態(tài)效果
• 創(chuàng)建AJAX無(wú)刷新網(wǎng)頁(yè)
• 提供對(duì)JavaScript語(yǔ)言增強(qiáng)
• 增強(qiáng)的事件處理
• 更改網(wǎng)頁(yè)內(nèi)容

jQuery庫(kù)包含以下功能:

• HTML元素獲取
• HTML元素的操作
• CSS操作
• HTML事件函數(shù)
• JavaScript特效和動(dòng)畫(huà)
• HTML DOM遍歷和修改
• AJAX

jQuery安裝

網(wǎng)頁(yè)中添加jQuery
可以通過(guò)多種方法在網(wǎng)頁(yè)中添加jQuery

• 從jQuery官網(wǎng)(jQuery.com)下載jQuery庫(kù)吼虎。
• 從CDN中載入jQuery犬钢。
• 加速器:<script src="https://code.jquery.com/jquery-3.4.1.min.js"integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

jQuery.js和jQuery.min.js的區(qū)別

• 兩個(gè)文件完全一樣
• jQuery.js文件中的代碼沒(méi)有進(jìn)行處理的源代碼，使用于研究
• jQuery.min.js文件里的代碼進(jìn)行特殊處理(壓縮文件思灰，合并文件)玷犹，文件容量更小，使用于生成環(huán)境洒疚，加載速度更快歹颓。
• jQuery具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口。

jQuery語(yǔ)法

通過(guò)jQuery油湖，選取(查詢巍扛，query)HTML元素，并對(duì)它進(jìn)行操作(actions)
基礎(chǔ)語(yǔ)法：$(selector).actions()

• $(美元符號(hào))定義jQuery
• 選擇器(selector)"查詢"和"查找"HTML元素
• jQuery的actions()執(zhí)行對(duì)元素的操作

jQuery選擇器

• jQuery選擇器允許對(duì)HTML元素組或單個(gè)元素進(jìn)行操作
• jQuery選擇器基于元素的id,類,類型,屬性,屬性值等*(幾乎支持所有的css選擇器)
• jQuery中所有的 選擇器都是以美元符開(kāi)頭 $()==jQuery()
• 注意 jQuery獲取的元素是經(jīng)過(guò)處理之后的HTML元素乏德，并非原始的HTML元素撤奸，因此在使用過(guò)程中，獲取的 jQuery對(duì)象只能使用jQuery的操作方法喊括，不能混用原生js方法寂呛。

jQuery選擇器

jQuery常見(jiàn)的DOM事件

jQuery事件方法 語(yǔ)法

• click()
• dblclick()
• mouseenete()
• mouseleave()
• mousedown()
• mouseup()
• hover()
• focus()
• blur()

jQuery bind()

• 向元素添加事件處理程序
• bind()方法向被選元素添加一個(gè)或多個(gè)事件處理程序，以及當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)瘾晃。

jQuery on()

• jQuery 1.7版本以后贷痪，on()方法是向被選元素添加事件處理程序的首選方法。
• 注意：使用on()方法添加的事件處理程序使用于當(dāng)前以及未來(lái)的 元素 (比如有腳本創(chuàng)建的 元素)

jQuery DOM 操作

• 獲取和設(shè)置內(nèi)容
  <strong>text() 設(shè)置或返回元素的文本內(nèi)容</strong>
  獲缺奈蟆：(selector).text('要給元素設(shè)置的文本內(nèi)容')
  <strong>html() 設(shè)置或返回所選元素的所有內(nèi)容</strong>
  獲冉俾！：(selector).html('<span>百度</span>123123')
  <strong>val() 設(shè)置或返回表單字段的值</strong>
  獲取：(selector).val('<span>百度</span>123123')
  <strong>attr() 設(shè)置或返回元素的屬性值</strong>
  獲惹恳取：(selector).val('屬性名稱','屬性值')
• 添加元素
  append()-在被選元素內(nèi)部的結(jié)尾插入內(nèi)容(允許包含HTML內(nèi)容)

  $('.showBox').append('插入內(nèi)容');
  

  prepend()-在被選元素內(nèi)部的開(kāi)頭插入內(nèi)容(允許包含HTML內(nèi)容)

  $('.showBox').prepend('開(kāi)頭')
  

  after()-在被選元素之后插入內(nèi)容(允許包含HTML內(nèi)容)

  $('.showBox').after('測(cè)試');
  

  before()-在被選元素之前插入內(nèi)容(允許包含HTML內(nèi)容)

  $('.showBox').before('<span>元素之前</span>');
  

  以上方法的語(yǔ)法：
  $(selector).active(textContent|elementContent)
  appendTo()-在被選元素的結(jié)尾插入HTML元素

   $('<h2>元素的結(jié)尾</h2>').appendTo('.box');
  

  prependTo()-在被選元素的開(kāi)頭插入HTML元素

  $('<h2>元素的開(kāi)頭</h2>').prependTo('.box');
  

  insertAfter()--在被選元素的后面插入HTML元素

  $('<h2>元素的后面</h2>').insertAfter('.box');
  

  insertBefore()--在被選元素的前面插入HTML元素

  $('<h2>元素的前面</h2>').insertBefore('.box');
  

  以上方法的語(yǔ)法：
  $(content).actions(selector)
• 刪除元素
  remove()-刪除被選元素(及其子元素)
  empty()-從被選的元素中刪除子元素
• 獲取并設(shè)置css類
  addClass()-向被選元素添加一個(gè)或多個(gè)類

   $('.btn').addClass('active');
  

  removeClass()-從被選中的元素刪除一個(gè)或多個(gè)類

   $('.btn').removeClass('active');
  

  toggleClass()-對(duì)被選元素進(jìn)行 添加/刪除類的切換操作

  $('.btn').toggleClass('active');
  

  css('porpertyname','porpertyvalue')-設(shè)置或返回指定的css屬性

  //設(shè)置單一css屬性
  $('li:first-child').css('color', 'yellowgreen')
  //設(shè)置多個(gè)css屬性
  $('li:first-child').css('color', 'yellowgreen').css('font-weight', 'bolder')
  $('li:first-child').css({'color': 'red', 'border': '2px solid #f00'})
  

• jQuery-尺寸

  通過(guò)jQuery舱沧，我們可以更容易的處理元素和瀏覽器窗口的尺寸
  

  • width()
    設(shè)置或返回元素的寬度(不包括內(nèi)邊距，邊框或外邊距)
  • height()
    設(shè)置或返回元素的高度(不包括內(nèi)邊距偶洋，邊框或外邊距)
  • innerWidth()
    返回元素的寬度(包括內(nèi)邊距)
  • innerHeight()
    返回元素的高度(包括內(nèi)邊距)
  • outerWidth()
    返回元素的寬度(包括內(nèi)邊距和邊框)
  • outerHeight()
    返回元素的高度(包括內(nèi)邊距和邊框)

jQuery 效果

• jQuery 效果-隱藏和顯示
  • hide()隱藏HTML元素

  /**
  $(selector).hide(speed,callback);
  $(selector).show(speed,callback);
  speed:可選參數(shù);規(guī)定隱藏/顯示的速度熟吏，值："sloe","fast"或者毫秒
  callback:可選參數(shù);隱藏/顯示效果執(zhí)行完成之后所要執(zhí)行的函數(shù)名稱
  */
  //點(diǎn)擊元素讓指定元素隱藏
  $('button').on('cilck',function(){
      $('h1').hide();
  })
  //點(diǎn)擊元素讓其父元素隱藏
   $('h1').on('click', function() {
      $(this).parents($('.box')).hide(5000, function() {
          $('p').show('fast');
      });
  })
  

  • show()顯示HTML元素

  $('button').on('cilck',function(){
      $('h1').show();
  })
  

  • toggle() 用來(lái)切換hide()和show()方法

  /**
  $().toggle(speed,callback);
  speed:可選參數(shù);規(guī)定隱藏/顯示的速度，值："sloe","fast"或者毫秒
  callback:可選參數(shù);隱藏/顯示效果執(zhí)行完成之后所要字符的函數(shù)名稱
  */
  

• jQuery 效果-淡入淡出
  • fadeIn()

  /**
  $(selector).actions(speed,callback);
  speed:可選參數(shù);規(guī)定淡入/淡出的速度，值："sloe","fast"或者毫秒
  callback:可選參數(shù);規(guī)定淡入/淡出效果執(zhí)行完成之后所要字符的函數(shù)名稱
  */
  

  • fadeOut()
  • fadeToggle()
  • fadeTo()

  /**
  $(selector).actions(speed,opacity,callback);
  speed:可選參數(shù);規(guī)定淡入/淡出的速度牵寺，值："sloe","fast"或者毫秒
  opacity:元素結(jié)余0-1之間的 透明度值悍引。
  callback:可選參數(shù);規(guī)定淡入/淡出效果執(zhí)行完成之后所要字符的函數(shù)名稱
  */
  

• jQuery 效果-滑動(dòng) ```
  通過(guò)以下方法實(shí)現(xiàn)滑動(dòng)效果
  • slideDown
  • slideUp
  • slideToggle

  /**
  $(selector).actions(speed,callback);
  speed:可選參數(shù);規(guī)定滑入/滑出的速度，值："sloe","fast"或者毫秒
  callback:可選參數(shù);規(guī)定滑入/滑出效果執(zhí)行完成之后所要字符的函數(shù)名稱
  */
  

• jQuery 效果-動(dòng)畫(huà)
  • animate() 允許創(chuàng)建自定義的動(dòng)畫(huà)

  /**
   $(selector).animate({params},speed,callback)
   {params}
  */
  $('.btn1').on('click', function() {
      $('ul').animate({
          left: '200px',
          top: '100px'
      }, 5000);
  })
  // 使用相對(duì)值
  // 可以定義相對(duì)值(相對(duì)于元素的當(dāng)前值)帽氓。需要早值的前面加上+=或-=;
  $('.btn2').on('click', function() {
      $('ul').animate({
          left: '200px',
          height: '+=100px',
             width: '-=100px'
      });
  })
  // 使用預(yù)定義的值
  

jQuery 遍歷

什么是遍歷

• jQuery提供了多種遍歷DOM的方法
• 遍歷方法中最大的種類是樹(shù)遍歷(tree-teaversal)

jQuery遍歷-祖先 向上遍歷DOM樹(shù)

• parent()

  parent()方法返回被選元素的直接父元素
  該方法只會(huì)向上一級(jí)對(duì)DOM樹(shù)激進(jìn)遍歷
  

   $(document).ready(function() {
      var p_element = $('span').parent();
      console.log(p_element);
  })
  

• parents()

  parents() 方法返回被選元素的元素祖先元素趣斤，一直向上遍歷直到文檔的根元素(<html>)
  

  // 返回所有祖先元素
  $(document).ready(function() {
      console.log($('span').parents();
  })
  // 使用可選參數(shù)用來(lái)過(guò)濾對(duì)祖先元素的 搜索遍歷
  // 返回祖先元素中指定 的元素
  $(document).ready(function() {
      console.log($('span').parents('.fbox'));
  })
  

• parentsUntil()

  parentsUntil()返回介于兩個(gè)元素之間的所有祖先元素
  

  // 返回介于<span>與<div>元素之間的所有祖先元素
  $(document).ready(function() {
      $('span').parentsUntil("body").css({
          'color': 'red',
          'border': '1px solid red'
      })
  })
  

jQuery遍歷-后代 向下遍歷DOM樹(shù)

• children()

  children() 方法返回被選元素的所有的直接子元素
  

  // 獲取直系的子元素
  $(document).ready(function() {
      console.log($('.f_fbox').children())
      $('.f_fbox').children().css('border', '1px solid red')
  })
  // 獲取直系的子元素中指定 的元素
  $(document).ready(function() {
      console.log($('.f_fbox').children('fbox1'))
  })
  

• find()

  find()方法返回被選元素的后代元素，一路向下直到最后一個(gè)后代
  

  // 返回所有的后代
  $(document).ready(function() {
      console.log($('.fbox').find('*'))
  })
  // 返回指定的后代元素
  $(document).ready(function() {
      console.log($('.fbox').find('span'))
  })
  

jQuery遍歷-同胞 (silblings)

在DOM樹(shù)中水平遍歷

• siblings()

  siblings()方法返回被選元素的所有同胞元素
  

• next()

  方法返回被選元素的后一個(gè)同胞元素黎休。
  

• nextAll()

  返回被選元素之后的所有同胞元素
  

• nextUntil()

  返回兩個(gè)給定參數(shù)之間的每個(gè)元素之后的所有同胞元素
  

• prev()

  方法返回被選元素的前一個(gè)同胞元素
  

• prevAll()

  返回被選元素之前的所有同胞元素
  

• prevUntil()

  返回兩個(gè)給定參數(shù)之間的每個(gè)元素之前的所有同胞元素
  

jQuery遍歷-過(guò)濾

• first()

  返回被選元素的首個(gè)元素
  

• last()

  返回被選元素的最后一個(gè)元素
  

• eq()

  返回被選元素中帶有指定搜索引號(hào)的元素
  索引從0開(kāi)始
  

• filter()

  filter()方法允許規(guī)定一個(gè)標(biāo)準(zhǔn)浓领，不匹配這個(gè)標(biāo)準(zhǔn)的元素都會(huì)被從集合中刪除，返回匹配的元素
  

• not()

  not()返回不匹配標(biāo)準(zhǔn)的所有元素
  

jQuery AJAX

什么是AJAX

AJAX是與服務(wù)器做數(shù)據(jù)交換|交互 的技術(shù)势腮，在不重載全部的情況下联贩，對(duì)部分網(wǎng)頁(yè)的更新。
AJAX=異步 JavaScript和XML(Asynchronous JavaScript And XML)

jQuery與AJAX

jQuery提供多個(gè)與AJAX有關(guān)的方法
通過(guò)jQuery AJAX方法捎拯，使用HTTP GET和HTTP POST 從遠(yuǎn)程服務(wù)器上請(qǐng)求文本泪幌、HTTP、XML或JSON玄渗，以方便我們可以將這些外部數(shù)據(jù)直接載入網(wǎng)頁(yè)的被選元素中

• load()

  load()方法從服務(wù)器加載數(shù)據(jù)座菠，并把返回的數(shù)據(jù)放入被選元素中
  

  // 語(yǔ)法：
  // $(selector).load(URL,data,callback);
  /**
   * URL:必選 url規(guī)定要加載的URL
   * data:可選 規(guī)定與請(qǐng)求一起發(fā)送的查詢字符串 鍵/值對(duì)集合
   * callback:可選 load()方法執(zhí)行完成后所執(zhí)行的函數(shù)名稱
  */
  

• get()

  用于通過(guò)HTTP GET請(qǐng)求從服務(wù)器請(qǐng)求數(shù)據(jù)
  HTTP GET 從指定的資源(接口)請(qǐng)求數(shù)據(jù)
  

  // 語(yǔ)法：
  // $.get(URL,callback);
  
  

• post()

  用于通過(guò)HTTP POST請(qǐng)求從服務(wù)器請(qǐng)求數(shù)據(jù)
  HTTP POST 向指定的資源(接口)提交要處理的數(shù)據(jù)
  

  // 語(yǔ)法：
  // $.post(URL,data,callback);
  
  

• ajax()

  // $.ajax({key:val,key:val,……})
  //type:HTTP 請(qǐng)求的類型(GET和POST)
  //url:發(fā)送請(qǐng)求的URL地址默認(rèn)是當(dāng)前頁(yè)面
  // data:發(fā)送到服務(wù)器的數(shù)據(jù)狸眼。
  // complete(xhr,statue)請(qǐng)求完成時(shí)運(yùn)行的函數(shù)(在請(qǐng)求成功或請(qǐng)求失敗之后都會(huì)調(diào)用)
  // sucscess(result,status,xhr)請(qǐng)求成功運(yùn)行的函數(shù)
  //error(xhr,statue,error)請(qǐng)求失敗運(yùn)行的函數(shù)