jQuery基礎

時間 2019-11-13

標籤 jquery 基礎欄目 JQuery 简体版

原文原文鏈接

前言：css

jQuery就是個JS文件，是JS寫的一個插件庫。jQuery能實現的，JS確定能實現；JS能實現的，jQuery未必能實現。JS是爸爸，jQuery是兒子。html

這個網站：http://www.bootcdn.cn/jquery/，能夠下載JQuery文件，也能夠在線引用。html5

開發用完整版的，上線時用mini版。mini版把全部的註釋、換行全去掉了，是壓縮事後的文件，小了不少。能夠減小不少資源。jquery

1、引入方式app

（一）.本地引用ide

（二）.在線引用函數

2、基本使用動畫

（一）.基本寫法網站

在jQ中，使用選擇器選擇元素。（和在CSS中使用CSS選擇器是同樣的）this

美圓符"$"是"jQuery"這個關鍵詞的簡潔。沒有哪一個程序猿有那麼多時間去寫這個完整的關鍵詞，都是用美圓符。

（二）.JS與jQuery之間相互轉換

(1).jQuery轉成JS（兩種方式任選其一）

$("#box")[0] 或 $("#box").get(0)

(2).JS轉成jQuery

$("JS對象")，而後才能夠用"點"來調用jQuery方法。

（三）.jQuery把大多數的JS，方法化了

好比：getElementById("box").innerHTML

在jQ中就變成了：$("#box").html()。注意，括號中不加參數是獲取值，加了參數就是修改值。

補充：length是爲數很少的屬性。

4、jQuery經常使用的方法

（一）.修改內容

html() 和 text()

（二）.轉換

get()/[] 和 $()

（三）.點擊

click()

（四）.鼠標通過

hover()

（五）.追加

append()

（六）.添加

prepend()

（七）.先後

before() 和 after()

（八）.移除

empty() 和 remove()

（九）.操做屬性

attr() 和 removeAttr()

（十）.添加移除

(1).addClass()

(2).removeClass()

(3).toggleClass()

（十一）.判斷

hasClass()

（十二）.索引

(1).each()

(2).index()

（十三）.滾動條事件

(1).scroll()

(2).scrollTop()

(3).scrollLeft()

（十四）.父子元素

(1).parent()

(2).children()

（十五）.兄弟

siblings()

（十六）.後代

find()

（十七）.祖宗

parents()

（十八）.定位父級

position()

（十九）.窗口

offset()

（二十）.寬高

width()/height()

（二十一）.循環添加

on()

（二十二）.移除

off()

（二十三）.例

5、操做樣式

6、動畫

（一）.隱藏

hide()

（二）.顯示

show()

（三）.取反

toggle()

（四）.向上

slideUp()

（五）.向下

slideDown()

（六）.取反

slideToggle()

（七）.淡入

fadeIn()

（八）.淡出

fadeOut()

（九）.自定義

fadeTo()

（十）.取反

fadeToggle()

（十一）.動畫

animate()

（十二）.中止

stop()

（十三）.延遲

delay()

（十四）.例

7、案例

（一）.banner輪播圖案例

<!DOCTYPE html>  <!-- 聲明這個是一個html5的網頁 -->
<html lang="en"> <!-- lang 語言 -->
<head>
    <meta charset="UTF-8"> <!-- 編碼  -->
    <meta name="author" content="Which"> <!-- 做者 -->
    <title>02 demo</title>   <!-- 標題  -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            /* 清除無序列表小黑點 */
            list-style: none;
        }

        #banner {
            width: 530px;
            height: 320px;
            border: 1px solid skyblue;
            margin: 0 auto;
            position: relative;
        }

        /* banner  無縫   */
        .img ul {
            width: 1000%;
        }

        .img ul li {
            width: 530px;
            height: 320px;
            /* 6張圖片 所有疊在一塊兒    淡入淡出 */
            position: absolute;
            display: none;
        }

        .tab {
            width: 152px;
            position: absolute;
            border-radius: 5px;
            bottom: 0;
            left: 50%;
            margin-left: -76px;
        }

        .tab ul li {
            width: 15px;
            height: 15px;
            background: #a2bfa2;
            float: left;
            margin: 4px 5px;
            /*display: inline-block;*/
            /*  css 圓角屬性 */
            border-radius: 50%;
            cursor: pointer;
        }

        .tab ul li.active {
            background: #334248;
        }

        .btn div {
            width: 30px;
            height: 60px;
            background: rgba(0, 0, 0, 0.55);
            font-size: 25px;
            line-height: 60px;
            text-align: center;
            color: #fff;
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
        }

        .btn div:hover {
            background: rgba(0, 0, 0, 0.77);
        }

        #left {
            left: 0;
        }

        #right {
            right: 0;
        }
    </style>
</head>
<body>
<!-- banner開始 -->
<div id="banner">
    <!-- 圖片 -->
    <div class="img">
        <ul>
            <li style="display: block">
                <img src="https://res.shiguangkey.com//file/201804/20/20180420174256335092491.jpg" alt="">
            </li>
            <li>
                <img src="https://res.shiguangkey.com//file/201804/13/20180413154427225047910.png" alt="">
            </li>
            <li>
                <img src="https://res.shiguangkey.com//file/201804/11/20180411103001506230792.png" alt="">
            </li>
            <li>
                <img src="https://res.shiguangkey.com//file/201804/18/20180418194336983231925.png" alt="">
            </li>
            <li>
                <img src="https://res.shiguangkey.com//file/201804/13/20180413154427225047910.png" alt="">
            </li>
        </ul>
    </div>
    <!-- 小點點 -->
    <div class="tab">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- 左右按鈕 -->
    <div class="btn">
        <div id="left">&lt;</div>
        <div id="right">&gt;</div>
    </div>
</div>
<!-- banner結束 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    var $banner = $('#banner');
    var $tabLi = $('#banner .tab ul li');
    var $imgLi = $('#banner .img ul li ');
    var $btn = $('#banner .btn  div');
    var $index = 0;

    $tabLi.hover(function () {
        // 索引值
        $index = $(this).index();
        // console.log($index);
        console.log($index);
        $(this).addClass('active').siblings().removeClass('active');
        $imgLi.eq($index).stop(true).fadeIn().siblings().stop(true).fadeOut();
    });
    // 點擊左右按鈕
    $btn.click(function () {
        var $i = $(this).index();
        console.log('btn', $i);
        // 1 == > true  0 ==> false
        if ($i) {
            $index++;
            $index %= $tabLi.length; // 當前索引值 %= 整個長度 1 %= 4
            // console.log($index);
        } else {
            // $index --;
            // if($index<0) $index=$tabLi.length-1;
            $index < 0 ? $index = $tabLi.length - 1 : $index--;
            // console.log($index);
        }
        // 給每一個tab下li加class
        $tabLi.eq($index).addClass('active').siblings().removeClass('active');
        // 圖片 淡入淡出
        $imgLi.eq($index).stop(true).fadeIn().siblings().stop(true).fadeOut();
    }).mousedown(function () {
        return false
    });


    // 把定時器封裝成一個函數
    var timer;

    function auto() {
        timer = setInterval(function () {
            $index++;
            $index %= $tabLi.length;
            // 給每一個tab下li加class
            $tabLi.eq($index).addClass('active').siblings().removeClass('active');
            // 圖片 淡入淡出
            $imgLi.eq($index).stop(true).fadeIn().siblings().stop(true).fadeOut();
        }, 2000);
    }

    // 默認調用定時器
    auto();

    $banner.hover(function () {
        // 劃入的時候  清除定時器
        clearInterval(timer);
    }, function () {
        // 調用定時器
        auto();
    })
</script>
</body>
</html>

View Code

相關標籤/搜索

每日一句

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