溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

例分析

發(fā)布時(shí)間：2021-05-07 10:50:47 來源：億速云 閱讀：135 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要介紹了例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

jquery是什么

jquery是一個(gè)簡潔而快速的JavaScript庫，它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫，以便快速開發(fā)網(wǎng)站。

鏈?zhǔn)秸{(diào)用

jQuery對(duì)象調(diào)用任何方法(除了節(jié)點(diǎn)關(guān)系方法)執(zhí)行完后,方法都會(huì)有一個(gè)返回值,返回值就是jQuery對(duì)象自己,這個(gè)現(xiàn)象給我們提供了便利,可以對(duì)執(zhí)行結(jié)果繼續(xù)打點(diǎn)調(diào)用jQuery的方法和屬性。即——可以使用jQuery對(duì)象進(jìn)行連續(xù)打點(diǎn)調(diào)用

例分析

console.log($(this).css("background-color", "pink").html("hello"));

jQuery對(duì)象調(diào)用除了節(jié)點(diǎn)關(guān)系的方法之外，其他的方法執(zhí)行后，返回值就是對(duì)象自己，可以繼續(xù)鏈?zhǔn)秸{(diào)用其他的jQuery對(duì)象的方法和屬性。這樣可以達(dá)到簡化代碼書寫

一個(gè)小案例

? 點(diǎn)擊一個(gè)元素，使它自己變粉色，兄弟變黃色，其父級(jí)變藍(lán)色，父級(jí)的兄弟變色，父級(jí)的兄弟的自己變橘色

<style>
  * {
       margin: 0;
       padding: 0;
     }

  .box {
       width: 400px;
       height: 60px;
       border: 1px solid #000;
       margin-top: 2px;
      }

  .box p,.box h3 {
       float: left;
       width: 60px;
       height: 60px;
       margin-right: 20px;
       background-color: rgb(164, 247, 233);
    }
</style>
<!------------------------------------------------------------------->

<body>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <h3>h3</h3>
  </div>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <h3>h3</h3>
  </div>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <h3>h3</h3>
  </div>
  <div class="box">
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <h3>h3</h3>
  </div>
  <script src="../jq/jquery-1.12.4.min.js"></script>
  <script>
     var $p = $("p");
     var $box = $(".box")
     $p.click(function () {
      // 鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)  
       $(this).css("background-color","pink")   //自己變粉色
       .siblings().css("background-color","yellow")  //自己的兄弟變黃色
       .parent().css("background-color","skyblue")   //并且自己的父級(jí)變藍(lán)色                     .siblings().css("background-color","lightgreen")  //父級(jí)的兄弟跟著變成淺綠色
       .children().css("background-color","orange")  //父級(jí)的兄弟的自己變橘色
     })

例分析

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手