JQuery(1)

時間 2021-02-13

標籤 javascript css html java jquery 編程數組瀏覽器 app dom 欄目 JQuery 简体版

原文原文鏈接

JQuery的介紹

JQuery：即javascript庫。對原生的js代碼進行封裝，咱們能夠直接快速而高效的使用封裝好的功能
常見的JavaScript 庫：jQuery、Prototype、YUI、Dojo、Ext JS、移動端的zepto等，這些庫都是對原生 JavaScript 的封裝，內部都是用 JavaScript 實現的，咱們主要學習的是 jQuery。javascript

官網地址：https://jquery.com/，css

JQuery的優勢

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

2. 跨瀏覽器兼容，基本兼容瞭如今主流的瀏覽器java

3. 鏈式編程、隱式迭代。jquery

4. 對事件、樣式、動畫支持，大大簡化了DOM操做。編程

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

6. 免費、開源。瀏覽器

體驗JQuery

步驟app

引入jQuery文件。
在文檔最末尾插入 script 標籤，書寫體驗代碼。

JQuery入口函數

// 第一種: 簡單易用。
$(function () {   
    ...  // 此處是頁面 DOM 加載完成的入口
}) ; 

// 第二種: 繁瑣，可是也能夠實現
$(document).ready(function(){
   ...  //  此處是頁面DOM加載完成的入口
});

JQuery中的頂級對象

$是jQuery的頂級對象，至關於原生JavaScript中的 window。

$是 jQuery 的別稱，在代碼中可使用 jQuery 代替dom

<script>  
 //第一種方法  
 $(function() {  
       alert('hello JQuery')  
    })  
  
    //第二種方法  
 jQuery(function () {  
        alert('hello JQuery')  
    })  
</script>

DOM對象與JQuery對象

原生js獲取的對象稱爲DOM對象
用JQuery獲取到的對象稱爲Jquery對象 Jquery對象的本質實際上是$對DOM對象包裝後產生的對象（以僞數組的方式存儲）

DOM對象只能使用javascript原生的方法，而JQuery對象只能使用Jquery中的方法

<!DOCTYPE html>  
<html>  
    <head>  
         <meta charset="utf-8">  
        <title>DOM對象和JQuery對象</title>  
         <script src="./jquery-3.5.1.js"></script>  
    </head>  
<body>  
    <div>DOM對象</div>  
    <header>JQuery對象</header>  
</body>  
    <script>  
     //使用DON獲取元素  
     var div = document.querySelector('div');  
     console.dir(div);  
  
     //使用jQuery獲取元素  
     console.log($('header'))  
  
  
    </script>  
</html>

DOM對象和JQuery對象的相互轉換

DOM對象與JQuery對象是能夠相互轉換的。

// 1.DOM對象轉換成jQuery對象，方法只有一種
var box = document.getElementById('box');  // 獲取DOM對象
var jQueryObject = $(box);  // 把DOM對象轉換爲 jQuery 對象

// 2.jQuery 對象轉換爲 DOM 對象有兩種方法：
//   2.1 jQuery對象[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery對象.get(索引值)
var domObject2 = $('div').get(0)

JQuery的選擇器

JQuery的基本選擇器

$('選擇器')裏面的選擇器直接寫css的選擇器便可，可是須要加引號

JQuery中的層級選擇器

JQuery中的篩選選擇器

篩選選擇器顧名思義：就是在全部的選項中篩選符合條件的元素

<!DOCTYPE html>  
<html>  
<head>  
 <meta charset="utf-8">  
 <title>Jquery篩選選擇器</title>  
 <script src="jquery-3.5.1.js"></script>  
</head>  
<body>  
<ul>  
 <li>鋤禾日當午</li>  
 <li>鋤禾日當午</li>  
 <li>鋤禾日當午</li>  
 <li>鋤禾日當午</li>  
 <li>鋤禾日當午</li>  
 <li>鋤禾日當午</li>  
</ul>  
  
<ol>  
 <li>男兒當自強</li>  
 <li>男兒當自強</li>  
 <li>男兒當自強</li>  
 <li>男兒當自強</li>  
 <li>男兒當自強</li>  
 <li>男兒當自強</li>  
</ol>  
</body>  
<script>  
  
 $(function () {  
      $('ul li:first').css('color', 'red');  
 $('ul li:last').css('color', 'yellow');  
 $('ul li:eq(1)').css('background', 'pink');  
 $('ol li:odd').css('background', 'yellow');  
 $('ol li:even').css('background', 'blue')  
   })  
</script>  
</html>

jQuery中如何設置樣式

$('元素').css('屬性', '值')

JQuery中的隱式迭代

// 遍歷內部 DOM 元素（僞數組形式存儲）的過程就叫作隱式迭代。
// 簡單理解：給匹配到的全部元素進行循環遍歷，執行相應的方法，而不用咱們再進行循環，簡化咱們的操做，方便咱們調用。
$('div').hide();  // 頁面中全部的div所有隱藏，不用循環操做

<!DOCTYPE html>  
<html>  
<head>  
 <meta charset="utf-8">  
 <title>隱式迭代</title>  
</head>  
<script src="jquery-3.5.1.js"></script>  
<body>  
<div>hello word</div>  
<div>hello word</div>  
<div>hello word</div>  
<div>hello word</div>  
  
<ul>  
 <li>hello word</li>  
 <li>hello word</li>  
 <li>hello word</li>  
 <li>hello word</li>  
</ul>  
</body>  
<script>  
 var div = document.querySelectorAll('div')  
   for (var i = 0; i < div.length; i++) {  
      div[i].style.backgroundColor = 'pink'  
 }  
   $('ul li').css('background', 'yellow')  
</script>  
</html>

鏈式操做

// 鏈式編程是爲了節省代碼量，看起來更優雅。
$(this).css('color', 'red').sibling().css('color', '');

JQuery中的排他思想

// 想要多選一的效果，排他思想：當前元素設置樣式，其他的兄弟元素清除樣式。
$(this).css(「color」,」red」);
$(this).siblings(). css(「color」,」」);

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
 <meta charset="UTF-8">  
 <meta name="viewport" content="width=device-width, initial-scale=1.0">  
 <title>JQuery中的排它思想</title>  
 <script src="./jquery-3.5.1.js"></script>  
</head>  
  
<body>  
<button>按鈕</button>  
<button>按鈕</button>  
<button>按鈕</button>  
<button>按鈕</button>  
<button>按鈕</button>  
<button>按鈕</button>  
</body>  
<script>  

  
 // jquery中的排他思想  
  
 $(function () {  
   $('button').click(function () {  
   // $(this).siblings('button').css('background', '')  
 // $(this).css('background', 'red') // 鏈式編程  
 $(this).css('background', 'red').siblings('button').css('background', "")  
      })  
   })  
</script>  
</html>

淘寶精品

核心思路
思路分析:
1.核心原理：鼠標通過左側盒子某個小li，就讓內容區盒子相對應圖片顯示，其他的圖片隱藏。
2.須要獲得當前小li 的索引號，就能夠顯示對應索引號的圖片
3.jQuery 獲得當前元素索引號 $(this).index()
4.中間對應的圖片，能夠經過 eq(index) 方法去選擇
5.顯示元素 show() 隱藏元素 hide()

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>淘寶精品圖</title>
        <script src="./jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
                font-size: 14px;
            }

            ul {
                list-style: none;
            }

            a {
                text-decoration: none;
            }

            .wrapper {
                width: 250px;
                height: 248px;
                margin: 100px auto 0;
                border: 1px solid pink;
                border-right: 0;
                overflow: hidden;
            }

            #title,
            #content {
                float: left;
            }

            #title li {
                background: url(img/lili.jpg) repeat-x;
            }

            #title li a {
                display: block;
                width: 48px;
                height: 28px;
                border-radius: 1px solid pink;
                text-align: center;
                line-height: 28px;
                color: black;
            }

            #title li a:hover {
                background-image: url(img/abg.gif);
            }

            #content {
                border-left: 1px solid pink;
                border-right: 1px solid pink;
            }
        </style>
    </head>

    <body>
        <div class="wrapper">
            <ul id="title">
                <li>
                    <a href="#">女靴</a>
                </li>
                <li>
                    <a href="#">戰地靴</a>
                </li>
                <li>
                    <a href="#">冬裙</a>
                </li>
                <li>
                    <a href="#">毛大衣</a>
                </li>
                <li>
                    <a href="#">毛衣</a>
                </li>
                <li>
                    <a href="#">棉服</a>
                </li>
                <li>
                    <a href="#">女褲</a>
                </li>
                <li>
                    <a href="#">羽絨服</a>
                </li>
                <li>
                    <a href="#">牛仔褲</a>
                </li>
            </ul>

            <div id="content">

                <div>
                    <a href="#"><img src="./img/女靴.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/雪地靴.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/冬裙.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/呢大衣.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/毛衣.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/棉服.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/女褲.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/羽絨服.jpg" alt=""></a>
                </div>
                <div>
                    <a href="#"><img src="./img/牛仔褲.jpg"></a>
                </div>
            </div>
        </div>
        <script>
            $(function() {
                $("#title li").click(function() {
                    //得到當前li的索引號
                    var index = $(this).index();
                    //進行鏈式操做
                    console.log(index)
                    $('#content div').eq(index).show().siblings().hide()

                })
            })
        </script>
    </body>

</html>

tab欄切換

思路分析: 1.點擊上部的li，當前li 添加current類，其他兄弟移除類。
          2.點擊的同時，獲得當前li 的索引號
          3.讓下部裏面相應索引號的item顯示，其他的item隱藏

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>tab欄切換</title>
        <script src="./jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                overflow: hidden;
                list-style: none;
            }

            .tab {
                width: 800px;
                margin: 200px auto;
            }

            .tab-list li {
                box-sizing: border-box;
                float: left;
                width: 200px;
                height: 30px;
                color: white;
                text-align: center;
                padding: 7px 0px;
                font: normal normal 14px '楷體';
                background-color: rgb(70, 99, 117)
            }

            .tab-con {
                width: 800px;
            }

            .tab-con div {
                width: 100%;
                height: 30PX;
                text-align: center;
                line-height: 30PX;
                background-color: PINK;
                margin-bottom: 1px;
            }

            .curent {
                background-color: skyblue !important;
            }

            .items {
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="tab">
            <div class="tab-list">
                <ul>
                    <li class="curent">選項一</li>
                    <li>選項二</li>
                    <li>選項三</li>
                    <li>選項四</li>
                </ul>
            </div>
            <div class="tab-con">
                <div class="items" style="display: block;">選項一</div>
                <div class="items">選項二</div>
                <div class="items">選項三</div>
                <div class="items">選項四</div>

            </div>
        </div>

        <script>
            $('.tab-list li').click(function() {
                $(this).addClass('curent').siblings('li').removeClass('curent');
                // 獲取索引
                var index = $(this).index();
                $('.tab-con div').eq(index).show().siblings().hide()
            })
        </script>
    </body>

</html>

JQury樣式操做

操做CSS方法

// 1.參數只寫屬性名，則是返回屬性值
var strColor = $(this).css('color');

// 2.  參數是屬性名，屬性值，逗號分隔，是設置一組樣式，屬性必須加引號，值若是是數字能夠不用跟單位和引號
$(this).css(''color'', ''red'');

// 3.  參數能夠是對象形式，方便設置多組樣式。屬性名和屬性值用冒號隔開， 屬性能夠不用加引號
$(this).css({ "color":"white","font-size":"20px"});

操做類樣式方法

// 1.添加類
$("div").addClass("current");

// 2.刪除類
$("div").removeClass("current");

// 3.切換類
$("div").toggleClass("current");

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Jquery類操做</title>
    <script src="./jquery-3.5.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .one {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: #0000FF;
        }

        .two {
            background-color: purple;
            transition: all 2s;
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
<div class="one"></div>
<script>

    $('.one').click(function () {
        $(this).toggleClass('two')
    })
    
    

</script>
</body>

</html>

JQuery中的效果

顯示與隱藏

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jquery效果之顯示與隱藏</title>
        <script src="./jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .box {
                width: 145px;
                height: 400px;
                background-color: purple;
            }
        </style>
    </head>

    <body>
        <button>顯示</button>
        <button>隱藏</button>
        <button>顯示與隱藏</button>
        <div class="box"></div>
        <script>
            $(function() {
                $('button').eq(0).click(function() {
                    $('.box').show(1000, function() {
                        console.log('顯示')
                    })
                })

                $('button').eq(1).click(function() {
                    $('.box').hide(1000, function() {
                        console.log('隱藏')
                    })
                })

                $('button').eq(2).click(function() {
                    $('.box').toggle(1000, function() {
                        console.log('顯示與隱藏')
                    })
                })

            })
        </script>
    </body>

</html>

滑入滑出

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jquery效果之滑動與滑落</title>
        <script src="./jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            p {
                display: flex;
            }

            button {
                flex: 3;
            }
        </style>
    </head>

    <body>
        <p> <button>上滑動</button>
            <button>下滑動</button>
            <button>切換滑動</button>
        </p>
        <div><img src="img/MI.png"></div>
        <script>
            $(function() {
                $('button').eq(0).click(function() {
                    $('div').slideUp(1000, function() {
                        console.log("向上滑動")
                    })
                })

                $('button').eq(1).click(function() {
                    $('div').slideDown(1000, function() {
                        console.log("向上滑動")
                    })
                })
                $('button').eq(2).click(function() {
                    $('div').slideToggle(1000, function() {
                        console.log("向上滑動")
                    })
                })
            })
        </script>
    </body>

</html>

事件切換

JQuery爲咱們提供了一個新事件，至關於css中的hover

hover([over,]out)     // 其中over和out爲兩個函數

over:鼠標移到元素上要觸發的函數（至關於mouseenter）
out:鼠標移出元素要觸發的函數（至關於mouseleave）
若是隻寫一個函數，則鼠標通過和離開都會觸發它

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jquery效果之滑動與滑落</title>
        <script src="./jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            p {
                display: flex;
            }

            button {
                flex: 3;
            }
        </style>
    </head>

    <body>
        <p> <button>按鈕</button>
            <button>按鈕</button>

        </p>
        <div><img src="img/MI.png"></div>
        <script>
            //第一種方法
            /*$(function(){
                    
                $('button').hover(function(){
                    // 第一個回調函數至關於鼠標通過
                    $('div').slideUp(1000)
                },function(){
                    // 第二個回調函數至關於鼠標離開
                    $('div').slideDown(1000)
                })
            })*/

            // 第二種方法 利用hover事件切換與slideToggle完成效果

            $(function() {
                $('button').hover(function() {
                    $('div').stop().slideToggle()
                })


            })
        </script>
    </body>

</html>

自定義動畫

自定義動畫很是強大，經過參數上的傳遞能夠模擬不少動畫，方法是animate();

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jquery中的animate動畫</title>
        <script src="./jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                display: flex;
            }

            button {
                flex: 1;
            }

            .box {
                position: absolute;
                top: 0;
                left: 0;
                width: 200px;
                height: 200px;
                background-color: blue;
            }
        </style>
    </head>

    <body>
        <button>點擊移動</button>
        <div class="box"></div>
        <script>
            $(function() {
                $('button').click(function() {
                    $('.box').animate({
                        left: 200,
                        top: 100,


                    }, 1000)
                })
            })
        </script>
    </body>

</html>

手風琴

鼠標通過某個小li 有兩步操做
1.當前小li 寬度變爲 224px，同時裏面的小圖片淡出，大圖片淡入
2.其他兄弟小li寬度變爲69px，小圖片淡入，大圖片淡出

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JQuery手風琴效果</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            img {
                display: block;
            }

            ul {
                list-style: none;
            }

            .king {
                width: 720px;
                margin: 200px auto;
                background: url(./img/bg.png) no-repeat;
                overflow: hidden;
                padding: 10px;
            }

            .king li {
                position: relative;
                float: left;
                width: 69px;
                height: 69px;
                margin-right: 10px;
            }

            .king li.curent {
                width: 224px;
            }

            .king li.curent .small {
                display: none;
            }

            .king li.curent .big {
                display: block;
            }

            .king .big {
                width: 224px;
                display: none;
            }

            .king .small {
                position: absolute;
                top: 0;
                left: 0;
                width: 69px;
                height: 69px;
                background-color: blue;
                border-radius: 5px;
            }
        </style>
        <script src="./jquery-3.5.1.js"></script>
    </head>

    <body>
        <div class="king">
            <ul>
                <li class="curent">
                    <a href="#"><img src="./img/m.png" alt="" class="big"><img src="./img/m1.jpg" alt="" class="small"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/t.png" alt="" class="big"><img src="./img/t1.jpg" alt="" class="small"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/w.png" alt="" class="big"><img src="./img/w1.jpg" alt="" class="small"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/z.png" alt="" class="big"><img src="./img/z1.jpg" alt="" class="small"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/c.png" alt="" class="big"><img src="./img/c1.jpg" alt="" class="small"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/h.png" alt="" class="big"><img src="./img/h1.jpg" alt="" class="small"></a>
                </li>
                <li>
                    <a href="#"><img src="./img/h.png" alt="" class="big"><img src="./img/h1.jpg" alt="" class="small"></a>
                </li>
            </ul>
        </div>
        <script>
            //入口函數
            $(function() {

                // 鼠標通過某個小li 有兩步操做：
                $(".king li").mouseenter(function() {
                    // 1.當前小li 寬度變爲 224px， 同時裏面的小圖片淡出，大圖片淡入
                    $(this).stop().animate({
                        width: 224
                    }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn()
                    // 2.其他兄弟小li寬度變爲69px， 小圖片淡入， 大圖片淡出
                    $(this).siblings('li').stop().animate({
                        width: 69
                    }).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut()
                })



            });
        </script>
    </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。