jQuery基础

Posted 2020-11-04 蓝色玛格丽特

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery基础相关的知识，希望对你有一定的参考价值。

前言：

jQuery就是个JS文件，是JS写的一个插件库。jQuery能实现的，JS肯定能实现；JS能实现的，jQuery未必能实现。JS是爸爸，jQuery是儿子。

这个网站：http://www.bootcdn.cn/jquery/，可以下载JQuery文件，也可以在线引用。

开发用完整版的，上线时用mini版。mini版把所有的注释、换行全去掉了，是压缩过后的文件，小了很多。可以减少很多资源。

一、引入方式

（一）.本地引用

（二）.在线引用

二、基本使用

（一）.基本写法

在jQ中，使用选择器选择元素。（和在CSS中使用CSS选择器是一样的）

美元符"$"是"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是为数不多的属性。

四、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()

（二十三）.例

五、操作样式

六、动画

（一）.隐藏

hide()

（二）.显示

show()

（三）.取反

toggle()

（四）.向上

slideUp()

（五）.向下

slideDown()

（六）.取反

slideToggle()

（七）.淡入

fadeIn()

（八）.淡出

fadeOut()

（九）.自定义

fadeTo()

（十）.取反

fadeToggle()

（十一）.动画

animate()

（十二）.停止

stop()

（十三）.延迟

delay()

（十四）.例

七、案例

（一）.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

以上是关于jQuery基础的主要内容，如果未能解决你的问题，请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段