0004.JQuery介绍

一、JQuery介绍

1. JQuery介绍

JQuery是一个JavaScript库，也是一个JS文件。JQ中封装实现了很多方法，让使用变得更加简单不再像js那样需要使用大量的方法调用。但JQ也只是实现了一些方法，还有些没有实现，因此能够使用JQ实现的，JS都能做，但能够用JS做的，JQ不一定能够实现。

2. JQuery理念

JQ总的来说，体现了：write less，do more。简单来说，就是代码量少，功能强大。

3. JQuery特性

① 丰富的强大的语法（CSS选择器），来查询文档元素；

② 高效的查询方法，用来找到与CSS选择器匹配的文档元素集；

③ 一套有用的方法，用来操作选中的元素；

④ 强大的函数式编程技巧，用来批量操作元素集，而不是每次操作单个；

⑤ 简介的语言用法（链式用法），用来表示一系列顺序操作。

引入方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p class="p1">腾讯课堂升级</p>
<p class="p1">这几天看不到大家的消息</p>
<button>按钮</button>

<ul>
    <li>this is python</li>
    <li>this is java</li>
    <li>this is c++</li>
</ul>
<!--引入jq-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>-->
<script src="jq-3_6.js"></script>
<script>
    // // $()jq选择器
    // $(
    //     function () {
    //         alert("123")
    //     }
    // )
    // js获取元素
    // class 值是重复  集合对象  需要加下标
    var ap1 = document.getElementsByClassName("p1")
    // console.log(ap1);
    // jq获取元素  .eq(下标)
    // var obtn = $("button").eq(0)

    var ap2 = $(".p1")
    //  console.log(obtn);

    // ======================================================
    // js 修改文本
    // ap1.innerText = "一个人上课 好无聊啊"
    // ap1.innerHTML = "<h1>一个人上课 好无聊啊</h1>"
    // //jq 修改文本
    // ap2.text("天气冷了 大家注意防寒保暖")
    // ap2.html("<h1>天气冷了 大家注意防寒保暖</h1>")

    // js获取元素
    // ap1.innerText = "一个人上课 好无聊啊" // js必须指定下标修改
    // // jq获取元素 个数区别
    // ap2.text("天气冷了 大家注意防寒保暖") // 不指定下标  全部修改
     // ======================================================
    //jq 转js    ap2是通过jq选择器获取到的元素  get()  []  指定元素下标
    // ap2.get(0).innerText = "一个人上课 好无聊啊"

    // js 转jq   ap1是通过js选择器获取到的元素  $()  进行转换
    // $(ap1).html("this is python")


    //each  遍历
    $("ul li").each(function () {
        //输出li的文本内容   this   li
        // console.log($(this).text());
        // console.log(this.innerText);
        console.log($(this).index()); //获取元素下标
    })


</script>
</body>
</html>

二、JQuery操作HTML属性

属性	类名
attr 设置、获取标签属性	addClass 加class名字
removeAttr() 移除标签属性	removeClass 移除传入的class；没有，移除全部
	toggleClass 操作Class类名，有就删，没有就加

JQuery	JavaScript
html()	innerHTML
text()	innerText
val()	value

三、JQuery操作CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /*padding: 10px;*/
            /*border: 2px solid red;*/
        }

        * {
            margin: 0;
            padding: 0;
        }

        .box {
            background-color: red;
        }

        .box1 {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        .div1 {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            position: relative;
            margin: 100px;
        }
        .div2 {
            background-color: red;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<body>

<div class="div1">
    <div class="div2"></div>
</div>
<input type="text" value="8888">
<input type="text" value="9999">

<script src="jq-3_6.js"></script>
<script>
    // js修改html属性
    var odiv = document.getElementsByTagName("div")[0]
    // odiv.className = "div1"
    // jq  修改html属性  添加class 属性
    var adiv = $("div").eq(0)
    // adiv.addClass("box")
    // adiv.addClass("box1")   //叠加  添加
    // // 删除属性
    // adiv.removeClass("box1")
    // // 修改  删除后新增
    // adiv.addClass("box2")

    //
    // adiv.toggleClass("box") // 添加
    // adiv.toggleClass("box1") // 叠加  添加
    // adiv.toggleClass("box1") // 两个一致 执行删除操作


    // 其他属性操作  属性名   属性值
    // adiv.attr('id',"box")   // 添加
    // adiv.attr('id',"box1")  // 修改  后者覆盖前者
    // adiv.attr('name',"div1")
    //
    // //删除
    // adiv.removeAttr("name")

    //js 获取value 值
    // var oipt = document.getElementsByTagName("input")[0]
    // console.log(oipt.value);
    // jq 获取value值  val() 只获取一个   遍历修改操作
    // var aipt = $("input")
    // console.log(aipt.val(666));

    // js  修改样式
    // odiv.style["backgroundColor"] = "yellow"

    // jq 修改样式 css
    // adiv.css({
    //     "backgroundColor" :"red",
    //     "width" :"300px",
    // })

    // console.log(adiv.width());  //width height 获取内容宽 高
    // console.log(adiv.height());
    // console.log(adiv.innerWidth()); // innerWidth 获取内容宽 高 +内边距
    // console.log(adiv.innerHeight()); //
    // console.log(adiv.outerWidth()); //outerWidth 获取内容宽 高 +内边距+边框宽度
    // console.log(adiv.outerHeight()); //

    // console.log($(".div2").position());  父级必须是有加定位
    // console.log($(".div2").offset());  // 到窗口的定位

</script>
</body>
</html>

四、JQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            width: 300px;
            height: 300px;
            background-color: skyblue;

        }

        .div2 {
            width: 100px;
            height: 100px;
            background-color: red;

        }
    </style>
</head>
<body>
<button>按钮</button>
<button>按钮2</button>

<div class="div1">
    <div class="div2"></div>
</div>

<script src="jq-3_6.js"></script>
<script>

    //js事件
    // var obtn = document.getElementsByTagName("button")[0]
    // obtn.onclick = function () {
    //
    //     console.log(1)
    // }

    // jq事件 单击事件
    var abtn = $("button").eq(0)
    // abtn.click(function () {
    //     console.log(2);
    // })

    function f() {
        console.log(2);
    }

    function ff() {

        console.log(3);
    }

    // 双击事件
    // abtn.dblclick(f)

    // 划入事件
    // abtn.mouseenter(f)// 划入事件
    // abtn.mouseleave(ff) //划出事件
    // abtn.hover(f, ff) //划入划出事件

    //  冒泡事件
    // $(".div1").click(f)  // 划入事件
    // $(".div2").click(function (e) {
    //     e.stopPropagation() //  去除冒泡事件
    //     console.log(3);
    // }) //划出事件

    //绑定单个事件    button单击事件发生后激活div1单击事件，在div1单击事件后div1背景颜色变化成设定颜色
    $("button").eq(0).click(function () {
        $(".div1").on("click", function () {
            $(".div1").css({
                "backgroundColor": "yellow",
            })
        })
    })
    //绑定多个事件    同理button单击事件发生后激活div1单击事件
    $("button").eq(0).click(function () {
        $(".div1").on({
            "click": f,
            "dblclick": ff
        })
    })

    // 移除事件 off    
    $("button").eq(1).click(function () {
        $(".div1").off("click")  // 移除大盒子的单击事件
        $(".div1").off("dblclick")  // 移除大盒子的单击事件
    })

</script>
</body>
</html>

五、JQuery动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: relative;
        }
    </style>
</head>
<body>

<div></div>
<button>按钮</button>
<button>按钮2</button>
<button>按钮3</button>
<button>动画</button>
<button>暂停动画</button>

<script src="jq-3_6.js"></script>

<script>
    var abtn = $("button")  //按钮
    var adiv = $("div").eq(0)  //div
    abtn.eq(0).click(function () {
        // adiv.hide(2000)//隐藏 ms
        // adiv.slideUp(2000)//隐藏 ms
        adiv.fadeOut(5000)//隐藏 ms
    })

    abtn.eq(1).click(function () {
        // adiv.show(2000)//显示 ms
        // adiv.slideDown(2000)//显示 ms
        adiv.fadeIn(5000)//显示 ms
    })
    abtn.eq(2).click(function () {
        // adiv.toggle(2000)//隐藏 ms
        // adiv.slideToggle(2000)  //  取反
        adiv.fadeTo(5000, 0.3)  //  设置透明度  自定义淡入
    })

    abtn.eq(3).click(function () {
        adiv.animate({
            "width": "300px",
            "height": "300px",
            "top": "50px"
        }, 6000)
    })

    abtn.eq(4).click(function () {
        adiv.stop()
    })
</script>
</body>
</html>

作业（包含左右箭头以及自动轮播）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        /*父级盒子*/
        #box {
            width: 530px;
            height: 300px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative; /*相对定位*/
        }

        /*图片样式*/
        .limg {
            width: 530px;
            height: 300px;
        }

        /*清除浏览器样式*/
        * {
            margin: 0;
            padding: 0;
        }

        ul > li {
            list-style: none; /*清除小黑点*/
        }

        .pic {
            position: absolute; /*绝对定位*/
        }

        /*左右箭头的ul */
        .btn > li {
            position: absolute; /*绝对定位*/
            width: 50px;
            height: 50px;
            /*background-color: red;*/
            /*top: 125px;*/
            top: 50%;
            line-height: 50px;
            text-align: center;
            transform: translateY(-25px);
            font-size: 36px;
            color: white;
        }

        .btn .left {
            left: 0;
        }

        .btn .right {
            right: 0;
        }

        .btn > li:hover {
            background-color: #888888;

        }

        /*小圆点ul*/
        .tab {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }

        /*小圆点li浮动*/
        .tab li {
            float: left;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            margin-left: 5px;
        }

        /*小圆点鼠标悬浮式*/
        .tab li:hover {
            background-color: skyblue;

        }

        .tab li.on {
            background-color: orange;
        }

    </style>
</head>
<body>


<div id="box">
    <!--    图片-->
    <ul class="pic">
        <li><img src="./img/01.jpg" class="limg"></li>
        <li><img src="./img/02.jpg" class="limg"></li>
        <li><img src="./img/03.jpg" class="limg"></li>
        <li><img src="./img/04.jpg" class="limg"></li>

    </ul>
    <!--    左右箭头-->
    <ul class="btn">
        <li class="left">&lt;</li>
        <li class="right">&gt;</li>
    </ul>

    <ul class="tab">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<script src="../lesson9/jq-3_6.js"></script>
<script>

    // 获取所有元素
    var apic = $(".pic li")
    var abtn = $(".btn li")
    var atab = $(".tab li")
    var abox = $("#box")
    // console.log(apic, atab, abtn);
    // 轮播图初始化 先把所有的隐藏  在对第一张展示
    apic.hide().eq(0).show()
    // 清除所有小圆点class  在对第一个小圆点加 class ="on"
    atab.removeAttr("class").eq(0).addClass("on")
    var fist = 0

    // 定义变化函数
    function change(i) { // 0 1 2 3  //i = 3  i=2
        apic.hide().eq(i).show()
        atab.eq(fist).removeAttr("class")  // fist =3
        atab.eq(i).addClass("on")
        fist = i // fist = 3  全局变量
    }

    // 小圆点
    atab.click(function () {
        // 得到当前点击事件元素下标 index
        var num = $(this).index()
        // apic.hide().eq(num).show()
        //atab.removeAttr("class").eq(0).addClass("on")
        change(num)
    })

    // 左右箭头
    abtn.click(function () {
        var num = fist // 拿到当前图片下标
        if ($(this).index()) {
            // 上一张
            // 得到当前图片下标  +1 //num+1
            num += 1
            if (num > apic.length - 1) {
                num = 0
            }

        } else {
            //下一张
            num -= 1
            if (num < 0) {
                num = apic.length - 1
            }

        }

        change(num)
    })

    // 自动轮播
    function auto() {
        time1 = window.setInterval(function () {
            var num = fist // 拿到当前图片下标
            num += 1 // num=3

            if (num > apic.length - 1) {
                num = 0
            }
            change(num)
        }, 3000)
    }

    auto()
    // 划入暂停定时器  划出执行定时器
    abox.hover(function () {
        clearInterval(time1)
        console.log(1);
    }, function () {
        auto() //执行函数 开启定时器
        console.log(2);
    })
</script>
</body>
</html>

posted on 2022-11-25 15:05 興華阅读(41) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 0003.JavaScript

· 0004.Django Template之模板标签

· Jquery

· JQuery内容讲解，方法讲解及示例

· jQuery学习

lxinghua

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

一、JQuery介绍

二、JQuery操作HTML属性

三、JQuery操作CSS样式

四、JQuery事件

五、JQuery动画