Python全栈最全学习之路-WEB前端（七）

最新推荐文章于 2023-06-08 12:46:06 发布

Fresh_anyu

最新推荐文章于 2023-06-08 12:46:06 发布

阅读量189

点赞数

分类专栏： python全栈学习文章标签： html js css javascript java

本文链接：https://blog.csdn.net/Sdhrs_nn/article/details/108703160

版权

python全栈学习专栏收录该内容

36 篇文章 12 订阅

订阅专栏

JQuery

一、JQuery介绍

1、介绍

JQuery介绍
jQuery是一个JavaScript库，也是一个JS文件。JQ中封装实现了很多方法，让使用变得更加简单不再像js那样需要使用大量的方法调用。但JQ也只是实现了一些方法，还有些没有实现，因此能够使用JQ是实现的，JS都能做，但是能够用JS做的，JQ不一定能够实现。
jQuery理念
JQ总的来说，体现了write less，do more。简单来说，就是代码量少，功能强大。
jQuery特性
丰富的强大的语法（CSS选择器），来查询文档元素
搞笑的查询方法，用来找到与CSS选择器匹配的文档元素集
一套有用的方法，用来操作选中的元素
强大的函数式编程技巧，用来批量操作元素集，而不是每次只操作单个
简介的语言用法（链式用法），用来表示一系列顺序操作

2、引入方法

官网
官网地址：https://jquery.com/
国内翻译参考：http://jquery.cuishifeng.cn/
前端资源查找：https://www.bootcdn.cn/
标准版本
jQuery完成版本，包含注释等，学习时可以参考，建议学习使用
下载地址：https://cdn.bootcss.com/jquery/3.4.1/jquery.js
压缩版
压缩版去除了不必要的注释和空格，变量名等内部标识符也替换成更短的名字
下载地址：https://cdn.bootcss.com/jquery/3.4.1/jquery.js

3、演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ导入</title>
</head>
<body>
<script src="JQ/JQ11.js"></script>
<script type="text/javascript">
    $(function () {
        alert(1);
    });
</script>
</body>
</html>

在JQ中，$()是最重要的办法，可以传递CSS选择器、Element、Document或者Windows对象、HTML文本字符串、函数、字符串等对象
注意：JQ的API只对自己开房，JQ不能用js的API，js也不能用JQ的API

4、JS和JQ的对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ导入</title>
</head>
<body>
<div class="box">aa</div>
<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
<script src="JQ/JQ11.js"></script>
<script type="text/javascript">
  /*  $(function () {
        alert(1);
    });*/
    // ----------------------------
    // js 对象
   /* var oBox = document.querySelector(".box");
    oBox.innerHTML = "bbb";*/
    // jq对象
    var $box = $(".box");
    console.log($box);
    $box.innerHTML = "ccc";
    $box.html("ddd");
    var $div = $("div");
    $div.html("eeee")
    var $li = $("ul li");
    $li.html('fff');
</script>
</body>
</html>

在这里插入图片描述
通过对比，我们可以发现，使用JQ可以极大的提高书写效率，同时语法规则也变得更加简单

5、JQ和JS对象相互转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ导入</title>
</head>
<body>
<div class="box">aa</div>
<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
<script src="JQ/JQ11.js"></script>
<script type="text/javascript">
  /*  $(function () {
        alert(1);
    });*/
    // ----------------------------
    // js 对象
   /* var oBox = document.querySelector(".box");
    oBox.innerHTML = "bbb";*/
    // jq对象
   /* var $box = $(".box");
    console.log($box);
    $box.innerHTML = "ccc";
    $box.html("ddd");
    var $div = $("div");
    $div.html("eeee")
    var $li = $("ul li");
    $li.html('fff');*/
   // ----------------------------
    var oBox = document.querySelector(".box");
    // oBox.html("bbb");  //js对象是没有这个方法的
    // js对象 ---> JQ对象
    $(oBox).html("bbb"); // $可以接收对象，所以直接传入js对象即可
    var $li = $("ul li");
    // alert($li.length); //长度是公用得
    $li.html("ccc");
    $li[2].innerHTML = "fff"; //直接使用索引就可以转换
    $li.get(3).innerHTML = "eee" //用get方法也可以直接转换
    // jq ---> 特定的jq
    $li.eq(1).html("000"); //正常改变所有的，特定的就改变一个
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ导入</title>
</head>
<body>
<div class="box">aa</div>
<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
<script src="JQ/JQ11.js"></script>
<script type="text/javascript">
  /*  $(function () {
        alert(1);
    });*/

    // --------------------------------------------------------

    // js 对象
   /* var oBox = document.querySelector(".box");
    oBox.innerHTML = "bbb";*/
    // jq对象
   /* var $box = $(".box");
    console.log($box);
    $box.innerHTML = "ccc";
    $box.html("ddd");
    var $div = $("div");
    $div.html("eeee")
    var $li = $("ul li");
    $li.html('fff');*/

   // --------------------------------------------------------

    /*var oBox = document.querySelector(".box");
    // oBox.html("bbb");  //js对象是没有这个方法的
    // js对象 ---> JQ对象
    $(oBox).html("bbb"); // $可以接收对象，所以直接传入js对象即可
    var $li = $("ul li");
    // alert($li.length); //长度是公用得
    $li.html("ccc");
    $li[2].innerHTML = "fff"; //直接使用索引就可以转换
    $li.get(3).innerHTML = "eee" //用get方法也可以直接转换
    // jq ---> 特定的jq
    $li.eq(1).html("000"); //正常改变所有的，特定的就改变一个*/

    // --------------------------------------------------------

    $("ul li").each(function(i){ // 第一个参数默认是序号，下标
        // this.innerHTML = "我是第" + i + "个";
        $(this).html("我是第" + i + "个");
    })
</script>
</body>
</html>

在这里插入图片描述
在each内部可以使用js方法，也可以使用JQ的形式

二、jQuery操作HTML属性

1、jQuery操作HTML属性

属性：
attr设置、获取标签属性
removerAttr（）移除标签属性
类名：
addClass加class名字
removerClass移除传入的class；没有，移除全部
toggleClass操作class类名，有就删，没有则加

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

2、JQ获取属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery获取HTML属性</title>
    <style>
        .show{
            background: yellowgreen;
        }
    </style>
</head>
<body>
<div id="box">aa</div>
<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
<script src="JQ/JQ11.js"></script>
<script type="text/javascript">
    var $box = $("#box");
    // alert($box.attr("class"));
    $box.attr("class","show"); //获取和设置属性
    $box.removeAttr("class"); // 删除属性
</script>
</body>
</html>

在这里插入图片描述
在JQ中，设置某个值的时候，一般自带遍历，获取某个值的时候，一般获取第一个

3、JQ添加属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery获取HTML属性</title>
    <style>
        .show{
            background: yellowgreen;
        }
        .box{
            color: red;
        }
        .wrap{
            color: blue;
        }
    </style>
</head>
<body>
<!--<div id="box">aa</div>
<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>-->
<!-------------------------------------------------------------------------->
<div id="box">
    <p>1</p>
    <p class="box">2</p>
    <p class="wrap">3</p>
</div>
<script src="JQ/JQ11.js"></script>
<script type="text/javascript">
    /*var $box = $("#box");
    // alert($box.attr("class"));
    $box.attr("class","show"); //获取和设置属性
    $box.removeAttr("class"); // 删除属性*/

    // -----------------------------------------------------------------

    $("p").eq(0).addClass("show box"); //可以添加多个空格分割就好了
    $("p").toggleClass("wrap"); // 有就删掉，没有就加上
</script>
</body>
</html>

在这里插入图片描述

三、jQuery操作CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作CSS样式</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            padding: 50px;
            border: 3px solid red;
            background: goldenrod;
            margin: 50px auto;
            position: relative;
        }
        #wrap{
            width: 50px;
            height: 50px;
            background: blueviolet;
            position: absolute;
            top: 50px;
            left: 60px;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="wrap"></div>
</div>
<script src="JQ/JQ11.js"></script>
<script type="text/javascript">
    console.log($("#box").width()); //获取宽
    console.log($("#box").innerWidth()); //获取加上padding之后的宽
    console.log($("#box").innerHeight()); //获取加上padding之后的高
    console.log($("#box").outerWidth()); //获取加上padding和border之后的宽
    console.log($("#box").outerHeight()); //获取加上padding和border之后的高
    $("#box").css("width","400px"); //更改一个样式
    $("box").css({ // 更改多个样式
        "width": "400px",
        "height": "400px"
    })
    console.log($("#box").offset().left); //到浏览器的距离
    console.log($("#box").offset().top); //到浏览器的距离
    console.log($("#wrap").position().top); // 到父级定位的距离
    console.log($("#wrap").position().left); // 到父级定位的距离
</script>
</body>
</html>

在这里插入图片描述

四、jQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery事件</title>
    <style type="text/css">
        li{
            list-style: none;
            background: gold;
            width: 30px;
            margin: 10px;
        }
    </style>
</head>
<body>
<ul id="box">
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
</ul>
<script src="JQ/JQ11.js"></script>
<script type="text/javascript">
    // JS的事件通过赋值来实现
  /*  var oBox = document.querySelector("#box");
    oBox.onclick = function(){
        alert(1);
    }
    // 并且会以后面的为准，之前的会被覆盖掉
    oBox.onclick = function(){
        alert(2);
    }*/
    // JQ是采用方法调用的方法，并且不会覆盖
    $("#box").click(function(){
        alert(1);
    });
    $("#box").click(function(){
        alert(2);
    });

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery事件</title>
    <style type="text/css">
        /*li{
            list-style: none;
            background: gold;
            width: 30px;
            margin: 10px;
        }*/

        #box{
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            margin: 50px auto;
            position: relative;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
<!--<ul id="box">
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
</ul>-->

<div id="box">有点意思</div>
<script src="JQ/JQ11.js"></script>
<script type="text/javascript">
    // JS的事件通过赋值来实现
  /*  var oBox = document.querySelector("#box");
    oBox.onclick = function(){
        alert(1);
    }
    // 并且会以后面的为准，之前的会被覆盖掉
    oBox.onclick = function(){
        alert(2);
    }*/
    // JQ是采用方法调用的方法，并且不会覆盖
/*    $("#box").click(function(){
        alert(1);
    });
    $("#box").click(function(){
        alert(2);
    });*/

// -----------------------------------------------------------------------------------------

    //on绑定单个事件
    /*$("#box li").on("click",function(){
        alert($(this).index()); //index()在jq里面是方法，对应的是下标
    });*/
    //on绑定多个事件
    $("#box").on({
        "mouseenter": function(){
            $("#box").css("background","red");
        },
        "mouseleave": function(){
            $("#box").css("background","grey");
        }
    });
    //事件的移除
    $("#box").off("mouseenter"); // 移除满足条件的事件
    $("#box").off(); // 移除所有事件
    // 也可以使用hover来实现移入移出
    $("#box").hover(function () {
            $("#box").css("color","yellow"); // 移入移出都执行这个函数
    });
    //分别定义移入移出事件
    $("#box").hover(function(){
        $("#box").css("color","red"); // 移入函数
    },function () {
        $("#box").css("color","grey"); // 移出函数
    });
</script>
</body>
</html>

在这里插入图片描述

五、jQuery动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: gold;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<input type="button" value="按键1">&emsp;&emsp;&emsp;&emsp;&emsp;
<input type="button" value="按键2">
<div id="box"></div>
<script src="JQ/JQ11.js"></script>
<script type="text/javascript">
    var $box = $("#box");
    var $inp = $("input");
    $inp.eq(0).click(function(){
        // $box.toggle(); // 自动隐藏和消失
        // $box.toggle(2000); // 增加一个时间维度
        // $box.toggle(2000,0.1); // 改变透明度
        $box.slideToggle(2000); // 改变高度
    })
    var off = true;
    $inp.eq(1).click(function () {
        if(off){
            // $box.hide(2000); // 点击的时候隐藏
            // $box.fadeOut(2000); // 淡出
            $box.slideToggle(2000); // 淡出
        }else{
            // $box.show(2000); // 点击的时候显示
            // $box.fadeIn(2000); // 淡入
            $box.slideToggle(2000); // 淡入
        }
        off = !off //改变判断值
    })
</script>
</body>
</html>

D 在这里插入图片描述 show 显示
hide 隐藏
toggle 自动显示隐藏
fadeIn/fadeOut/fadeTo(1000,0.1)可以把透明度设置一个值，时间参数不能省略
slideDown/slideUp/slideToggle改变高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ动画</title>
   <style>
        div{
            width: 200px;
            height: 200px;
            background: skyblue;
            position: relative;
        }
    </style>
</head>
<body>
<button id="btn1" type="button">按钮一</button>
<button id="btn2" type="button">按钮二</button>
<div></div>
<script src="JQ/JQ11.js"></script>
<script type="text/javascript">
    $("#btn1").click(function(){
        $("div").animate({
            width:300,
            height:300,
            top:100,
            left:200
        },2000).delay(4000);
    });
    $("#btn2").click(function(){
        $("div").stop();
    });
</script>
</body>
</html>

在这里插入图片描述

Fresh_anyu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Python全栈最全学习之路-WEB前端（七）

JQuery一、JQuery介绍1、介绍JQuery介绍jQuery是一个JavaScript库，也是一个JS文件。JQ中封装实现了很多方法，让使用变得更加简单不再像js那样需要使用大量的方法调用。但JQ也只是实现了一些方法，还有些没有实现，因此能够使用JQ是实现的，JS都能做，但是能够用JS做的，JQ不一定能够实现。jQuery理念JQ总的来说，体现了write less，do more。简单来说，就是代码量少，功能强大。jQuery特性丰富的强大的语法（CSS选择器），来查询文档元素搞
复制链接

扫一扫