碼上快樂

相關內容    簡體    繁體

01-JQuery選擇器+JQuery操作樣式

本文轉載自   查看原文   2021-11-12 23:11   92    06-jQuery
jQuery階段: 將webAPI階段進行一個封裝
 
本質:
通過jQuery的方式實現網頁中的各種效果
 
jQuery階段學習核心:
操作網頁 ---> 操作標簽 ---> 獲取標簽 --> 設置樣式 --> 注冊事件
 

1. JQuery概述

1.1 概念

1. 什么是jQuery?
  • jQuery 是一個javaScript庫 (jQuery本身就是一個js文件,文件中封裝了大量的用來操作網頁的方法)
  • 跨各種瀏覽器都能使用 (體現jQuery的兼容性)
  • 總結: jQuery就是一個具有很好兼容性並且能夠實現各種效果的一個js文件

  • 舉例說明

    例如: 點擊按鈕實現頁面元素顯示效果
    //原生DOM版本
    var btn = document.querySelector('button');
    btn.onclick = function() {
    var divs = document.querySelectorAll('div');
     for(var i = 0; i < divs.length; i++) {
      divs[i].style.display = 'block';
     }
    }
    //JQ版本
    $('button').click(function(){
     $('div').show();
    })

  • 概念詳解

    • 什么叫 JavaScript 庫

      ☞倉庫：可以把很多東西放到這個倉庫里面。找東西只需要到倉庫里面查找到就可以了。
      ​
      ☞JavaScript庫：是一個封裝好的特定的集合包大量的方法。從封裝函數的角度理解庫，就是在JavaScrip庫中，封裝了很多預先定義好的函數在里面
      ​
      ☞簡單理解： 就是一個JS 文件，里面對我們原生js代碼進行了封裝，存放到里面。這樣我們可以快速高效的使用這些封裝好的功能了。
      ​
      JQuery就是這樣的一個js文件: 本質上就是對我們之前原生js代碼封裝后的一個js文件
      ​
      //備注: j 代表js Query 代表查詢

  • jQuery優點

    • 輕量級。核心文件才幾十kb，不會影響頁面加載速度

    • 跨瀏覽器兼容。基本兼容了現在主流的瀏覽器

    • 鏈式編程、隱式迭代

    • 對事件、樣式、動畫支持，大大簡化了DOM操作

    • 支持插件擴展開發。有着豐富的第三方的插件，例如：樹形菜單、日期控件、輪播圖等

    • 免費、開源

1.2 使用

  • 下載

    官網地址: https://jquery.com/
    版本地址: https://code.jquery.com/

  • 版本介紹

    1. jQuery目標最新的版本是 v3.6.0【該版本不兼容IE6，7，8但是官網主要維護更新的版本】
    2. jQuery v2版本 【不兼容IE6,7,8，不再維護】
    3. jQuery v1版本 【兼容IE6,7,8,不再維護】
    ​
    //Download the compressed, production jQuery 3.6.0       用於生產環境壓縮后的文件
    //Download the uncompressed, development jQuery 3.6.0   用於開發環境沒有經過壓縮
  • jQuery基本使用:
  1. 先下載jQuery文件
  2. 在網頁中引入jQuery文件(壓縮版本和開發版本二選一)
     注意:
     在網頁的任何位置都可以引入,jQuery就是一個js文件
      最好將文件放在html結構的后面
           
            // 3. 只要頁面中引入了JQuery文件,那么就可以使用jQuery中的方法
            // 注意: 引入了jQuery文件,可以不用提供的方法,使用webAPI中的方法也可以 

    2. 在HTML頁面中引用JQ文件 
    例如:
    <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <script type="text/javascript" src="jQuery.js"></script>
     //或者
     <script type="text/javascript" src="jQuery.min.js"></script>
    </head>
    3. 使用

1.4 入口函數

  • DOM中如果在HTML結構之前寫JS代碼,需要設置加載事件,獲取HTML元素

    <script type="text/javascript">
     window.onload = function() {
      var div = document.querySelector('div');
      console.log(div);
     }
    </script>

  • JQ如果在HTML結構之前寫js代碼,需要設置加載事件(入口函數)

    $(function(){
     var div = document.querySelector('div');
     console.log(div);
    })
    ​
    //或者
    $(document).ready(function(){ 
        var div = document.querySelector('div');
     console.log(div);
    });
    ​
    備注:
    // 如果將JQ代碼寫到HTML結構后面,則可以設置入口函數也可以不用設置

  • JQ入口函數與js中的load事件區別

    ☞ js中的load事件是整個頁面都加載完成后包括外部的資源文件都加載完畢后才執行
    ☞ jQuery中的入口函數是整個文檔加載完成后就立即執行代碼
    ​
    ☞ js中的load事件只能寫一個,如果寫多個會被覆蓋掉
    ☞ Jquery中的入口函數可以寫多個

1.4 $ 介紹

  • $ 就是JQuery的一個別名

    $(function(){}) 
    ​
    // 可以寫成如下寫法:
    ​
    jQuery(function(){
     var div = document.querySelector('div');
     console.log(div);
    })

  • $ 是JQ中的頂級對象

    ☞ 在原生js中,頂級對象是window
    ☞ 在Jq中,頂級對象是 $, 本質就是通過JQ的方式將 window 對象轉化為JQ對象
    //例如:
    $(function(){
     console.dir($);
    })

1.5 DOM對象和JQ對象轉化

  • JQ就是對JS的封裝,可以通過原生的JS獲取頁面元素,那么也可以通過JQ獲取頁面元素

  • 體驗通過JQ獲取頁面元素,並設置樣式

    //通過JQ方式隱藏頁面中的div標簽
    var div = $('div');
    div.hide();

  • DOM對象

    通過 document 方式獲取到的元素都叫DOM對象

  • JQ對象

    通過 $ 方式獲取到的元素都叫 JQ對象
    ​
    //結論:
    //1 .JQ對象中的方法或者屬性原生DOM對象是不能使用的,反過來原生DOM對象中的方法或者屬性JQ對象也無法使用
    ​
    //例如:
    var div = $('div');
    div.style.display = 'none';

  • 將JQ對象轉為DOM對象方式一:

    var div = $('div');
    console.log(div);
    ​
    //通過$獲取到的div就是一個JQ對象,那么JQ對象本質上就是一個偽數組,這個數組中存儲的就是DOM對象
    ​
    //第一種轉化方式: JQ對象[索引]
    ​
    //代碼演示:
    var div = $('div');
        div = div[0];
    div.style.display = 'none';

  • 將JQ對象轉化為DOM對象方式二:

    //語法: JQ對象.get(索引)
    ​
    //例如:
    var div = $('div');
     div = div.get(0);
    div.style.display = 'none';

  • 將DOM對象轉化為JQ對象

    // 語法: $(dom對象)
    // 例如:
    var div = document.querySelector('div');
     div = $(div);
    div.hide();

2. JQ獲取頁面元素API

1.1基礎選擇器

  • 語法

    $('選擇器');
    注意: 選擇器就是CSS選擇器

  • ID選擇器

    $('#id名')

  • 通配符選擇器

    $('*');

  • 標簽選擇器

    $('標簽名');

  • 並集選擇器

    $('選擇器, 選擇器..');

  • 交集選擇器

    $('標簽名.class');

1.2層級選擇器

  • 子代選擇器

    $('選擇器 > 選擇器');

  • 后代選擇器

    $('選擇器 選擇器');

1.4 結構選擇器

  • :first

    $('選擇器:first');   //獲取第一個元素

  • :last

    $('選擇器:last');  //獲取最后一個元素

  • eq(index)

    $('選擇器:eq(值)');    //獲取第n個元素,從0開始,

  • odd

    $('選擇器:odd');     //獲取索引是奇數的元素

  • even

    $('選擇器:even');    //獲取索引是偶數的元素

1.5通過方法篩選

  • parent() 或者 parents(選擇器)

    $('元素').parent();      //獲取當前元素的直接父元素
    ​
    //例如:
    var p = $('span').parent();
    console.log(p);
    ​
    ​
    $('元素').parents([選擇器]);    //獲取所有的父元素或者指定父元素
    //例如:
    var p = $('span').parents();
    console.log(p);
    ​
    var p = $('span').parents('div');
    console.log(p);

  • children([選擇器])

    $('元素').children([選擇器]);    // 獲取當前元素的直接子元素,子代選擇效果一樣

  • find(選擇器)

    $('元素').find(選擇器);    //獲取當前元素下所有滿足條件的子元素, 后代選擇器
    例如:
    var res = $('div').find('span');
    console.log(res);

  • siblings(選擇器)

    $('元素').siblings([選擇器]);    //獲取當前元素的所有同級兄弟元素或者指定兄弟元素
    ​
    //例如:
    var res = $('a').siblings();   //獲取當前a標簽所有兄弟元素
    console.log(res);
    ​
    ​
    var res = $('a').siblings('p');  //只獲取當前元素的兄弟元素p
    console.log(res);

  • nextAll([選擇器])

    $('元素').nextAll([選擇器]);    // 獲取當前元素后面所有同級兄弟元素或者指定兄弟元素
    ​
    //例如:
    var res = $('a').nextAll();   //獲取當前a標簽后面所有兄弟元素
    console.log(res);
    ​
    ​
    var res = $('a').nextAll('h4'); //獲取當前a標簽后面的h4兄弟元素
    console.log(res);

  • prevAll([選擇器])

    $('元素').prevAll([選擇器]);  //獲取當前元素前面所有同級兄弟元素或者指定元素
    ​
    例如:
    var res = $('a').prevAll();
    console.log(res);

  • eq(值)

    $('元素').eq(值);    //獲取第幾個元素, 從0開始
    ​
    例如:
    var res = $('span').eq(1);
    console.log(res);

3. JQ方式元素注冊事件

1.1 直接注冊事件

語法:
JQ對象.事件名稱(function(){
     處理程序
})
​
例如:
<input type="button" value="按鈕">
$('input').click(function(){
 alert(123);
})
​
//補充事件名稱:
點擊事件: click
鼠標進入事件: mouseenter
鼠標離開事件: mouseleave

1.2隱式迭代

<input type="button" value="btn1">
<input type="button" value="btn2">
<input type="button" value="btn3">
​
//注冊事件
var btns = $('input');
btns.click(function(){
 console.log(this.value);
})
​
//補充: 獲取每一個元素的索引位置 JQ對象.index();
​
//分析: 獲取頁面中的所有按鈕后,給按鈕注冊事件,JQ不需要我們手動遍歷注冊,自己內部就可以遍歷注冊事件
​
//隱式迭代: JQ內部自動遍歷DOM元素的過程

4. JQ方式操作元素樣式

1.1 通過.css方式操作樣式

  • .css設置單個樣式

    語法:
    $('元素').css('屬性', 值);
    ​
    //例如:
    $('div').css('background-color','red');
    ​
    //注意:
    1. 這種寫法只能給元素設置一個樣式
    2. 這種寫法本質上就是通過行內樣式給標簽設置樣式
    ​
    //思考: 如果頁面中有多個元素,通過這種方式能否給所有的標簽都設置樣式?
    <div></div>
    <div></div>
    $('div').css('background-color','red');
    ​
    //代碼驗證: 是可以的, 因為這里面有隱式迭代

  • 課堂案例-導航隱藏顯示

    <div class="nav">
      <div class="w">
       <ul class="ul1">
        <li><a href="javascript:;">首頁</a></li>
        <li><a href="javascript:;">關於我們</a></li>
        <li>
         <a href="javascript:;">聯系我們</a>
         <ul class="u2">
          <li><a href="javascript:;">郵件聯系</a></li>
          <li><a href="javascript:;">電話聯系</a></li>
          <li><a href="javascript:;">微信聯系</a></li>
         </ul>
        </li>
       </ul>
      </div>
    </div>
    ​
    //鼠標進入:
    $('.ul1 > li:last').mouseenter(function(){
        //備注: 這里必須寫$(this). 因為 find是JQ對象中的方法,必須將DOM對象轉化為JQ對象
     var ul = $(this).find('.u2');
     ul.css('display','block');
    });
    //鼠標離開:
    $('.ul1 > li:last').mouseleave(function(){
     $('.u2').css('display', 'none');
    });

  • 導航隱藏顯示案例-鏈式編程寫法

    $('.ul1 > li:last').mouseenter(function(){
     var ul = $(this).find('.u2');
     ul.css('display','block');
    }).mouseleave(function(){
     $('.u2').css('display', 'none');
    })
    ​
    //總結:
    1. 給元注冊事件,可以在當前元素后面連着繼續寫
    2. 鏈式編程核心,給具體的對象設置,如果不是一個對象,則不能使用鏈式編程寫法

  • .css設置多個樣式

    語法:
    $('元素').css({
       '屬性': '值',
       '屬性': '值',
        ...
    })
        
    例如:
    $('div').css({
     'width': '200px',
     'height': 200,
     'background-color': 'red'
    })
    //注意:
    1. 如果設置的值是數字,可以不用帶有引號
    2. 如果屬性是按照CSS的屬性方式設置,需要帶有引號 . 例如 'background-color' 或者 backgroundColor

  • 課堂案例淘寶

    1. 獲取元素索引位置

      //DOM版本
      var divs = document.querySelectorAll('div');
      for(var i = 0; i < divs.length; i++) {
       divs[i].index = i;
       divs[i].onclick = function() {
        alert(this.index);
       }
      }
      //JQ版本 通過 index()方法獲取
      $('div').click(function(){
       console.log($(this).index());
      })

    2. 排他思想實現

      //DOM實現排他思想, 點擊div設置文字顏色
      var divs = document.querySelectorAll('div');
      for(var i = 0; i < divs.length; i++) {
       divs[i].onclick = function() {
        for(var j = 0; j < divs.length; j++) {
         divs[j].style.color = '#000';
        }
        this.style.color = 'red';
       }
      }
      //JQ實現排他思想
      $('div').click(function(){
       $(this).css('color', 'red').siblings().css('color','#000');
      })

    3. 實現淘寶案例

      //每一個item注冊一個鼠標進入事件
      $('.item').mouseenter(function(){
       //當前元素設置背景圖片
       $(this).css({
        'background-image': 'url(imgs/abg.gif)',
        'color' : '#fff'
       })
       //當前元素對應的圖片顯示
       var index = $(this).index();
           
           //根據當前index顯示對應的內容
       $('img').eq(index).css({
        'display': 'block'
       }).siblings().css({
        'display' : 'none'
       })
          
      }).mouseleave(function(){
       $(this).css({
        'background-image' : 'linear-gradient(to bottom, #fff, pink)',
        'color' : '#000'
       })
      })

    4. 改進版淘寶案例寫法

      • hover方法介紹

        語法:
        hover(function(){}, function(){});
        ​
        //代碼演示:
        $('div').hover(function(){
         console.log('鼠標進入');
        }, function(){
         console.log('鼠標離開');
        })
        ​
        介紹:
        1. 第一個參數回調函數,表示鼠標進入時候觸發的事件 (mouseenter)
        2. 第二個參數回調函數,表示鼠標離開時候觸發的事件 (mouseleave);

      • 改版后淘寶案例

        $('.item').hover(function(){
         $(this).css({
          'background-image': 'url(imgs/abg.gif)',
          'color' : '#fff'
         })
         //當前元素對應的圖片顯示
         var index = $(this).index();
         //根據當前index顯示對應的內容
         $('img').eq(index).css({
          'display': 'block'
         }).siblings().css({
          'display' : 'none'
         })
        },function(){
         $(this).css({
          'background-image' : 'linear-gradient(to bottom, #fff, pink)',
          'color' : '#000'
         })
        })

1.2 通過添加類方式操作樣式

  • addClass('類名')

    語法:
    $('元素').addClass('類名');
    ​
    //注意:
    1. addClass中設置的是類名,不是類選擇器
    ​
    2. 通過addClass如果需要設置多個類名可以調用多次,如下代碼:
    $('input').click(function(){
     $('div').addClass('box');
     $('div').addClass('br');
    })
    ​
    3. 設置多個類名還可以如下寫法
    $('input').click(function(){
     $('div').addClass('box br');
    })

  • removeCLass('類名')

    語法:
    $('元素').removeClass('類名');
    ​
    //例如:
    $('input').click(function(){
     $('div').removeClass('box')
    })
    ​
    $('input').click(function(){
     $('div').removeClass('box br');
    })
    ​
    $('input').click(function(){
     $('div').removeClass('box');
     $('div').removeClass('br');
    })
    ​
    $('input').click(function(){
     $('div').removeClass('box').removeClass('br');
    })

  • toggleClass('類名')

    語法:
    $('元素').toggleClass('類名');
    ​
    //例如:
    $('input').click(function(){
     $('div').toggleClass('br');
    })
    ​
    $('input').click(function(){
     $('div').toggleClass('br box');
    })

  • 課堂案例-tab欄切換

    $('li').mouseenter(function(e){
     $(this).addClass('active').siblings().removeClass('active');
     let index = $(this).index();
     $('.item').eq(index).show().siblings().hide();
    }).mouseleave(function(){
     $('.item').hide();
     $(this).removeClass('active');
    });

     

  •  

 

 

 

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Jquery選擇器與樣式操作 01-jQuery的介紹 JQuery（選擇器、事件、DOM操作） jquery的選擇器 jquery的基本選擇器 jQuery 選擇器 jQuery的選擇器和屬性操作 jQuery 選擇器和dom操作 jQuery之選擇器 jquery 選擇器 或 且
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM