JQuery 基本操作

于 2020-12-09 21:11:56 发布
阅读量124 收藏 1
点赞数
分类专栏： html 文章标签： jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxz_dong/article/details/110940819
版权

JQuery 介绍

jQuery 是一个开源的，免费的JavaScript库，也是目前最广泛使用的JavaScript库。

JQuery 在语法上，极大的简化了js的功能，可以更加快捷，方便的编写web功能

在开发过程当中，JQuery就是一个js文件，我们直接导入就可以了。

https://jquery.com/

<script src="jquery.min.js"></script>
<script>
    $()
</script>

JQ使用js的基本语法

JQ选择器

JQ选择器的固定格式是$(“选择器”)，选择器的使用方式类似CSS

选择器描述
$("#id")id选择器
$(".class")类选择器
$(“tag”)标签选择器
$(“tag[attribute = ‘value’]”)属性选择器
$(“tag[attribute != ‘value’]”)属性反选择器
$(“a,b”)并列选择器
$(“a>b”)子选择器
$(“a b”)后代选择器
$(“a:eq(index)”)索引选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>p1</p>
    <p id="p2">p2</p>
    <p class="pp">p3</p>
    <p class="pp">p4</p>
    <p class="pp">p5</p>
    <p name="p_name">p6</p>
    <p>p7</p>

    <div class="d1">
        <span>1</span>
        <p>
            <span>2</span>
        </p>
    </div>
    <div class="d2">
        3
    </div>

    <script src="jquery.min.js"></script>
    <script>
        // $("#p2").css("color","red"); //id选择
        // $(".pp").css("color","green"); // class选择器，可以批量修改表情的属性
        //$("p").css("color","green") // 标签选择器，可以批量修改表情的属性

        // $("p[name='p_name']").css("color","red") // 属性选择器
        //$("p[name!='p_name']").css("color","red")  // 属性选择器取反

        // $(".d1,.d2").css("color","red")  // 并列选择器
        // $(".d1>span").css("color","red")  // 子选择器
        // $(".d1 span").css("color","red")  // 后代选择器

        $("p:eq(2)").css("color","red")  // 索引选择器取反

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

注意：

1、JQ和JS一样，只有id选择器返回一个对象，其他的返回数组对象，但是JQ可以直接批量操作

2、JQ批量选择的对象一旦被循环，遍历的对象就不是jq对象，是js对象了。

var p_list = $(".pp")[1];
// p_list.css("color","red");  建议写法 $(p_list).css("color","red")
// p_list.style.color = "red";
console.log(p_list)

JQuery选择方法

方法描述
parents先辈，包括父
parent父辈
siblings兄弟
prev上一个兄弟
next下一个兄弟
childre子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        parents
        <div>
            <p>prev</p>
            <p id="p_id">
                self
                <span>child1</span>
                <span>child2</span>
                <span>child3</span>
            </p>
            <p>next</p>
            <p>brother</p>
        </div>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        $("#p_id").css("border","1px black solid")
        $("#p_id").children().css("border","1px black solid")
        $("#p_id").parent().css("border","1px black solid")
        $("#p_id").parents().css("border","1px black solid")
        $("#p_id").siblings().css("border","1px black solid")
        $("#p_id").prev().css("border","1px black solid");
        $("#p_id").next().css("border","1px red solid")

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

JQ修改样式

JQ主要使用.css方法进行样式修改，但是.css方法实际上比js的style方法要灵活很多。

可以通过.css方法获取标签的css参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: red;
        }
    </style>
</head>
<body>
    <p id="p_id">
        这是一个P
    </p>
    <script src="jquery.min.js"></script>
    <script>
        var color = $("#p_id").css("background-color");
        console.log(color)
    </script>
</body>
</html>

也可以传递新的样式，修改样式到标签上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: red;
        }
    </style>
</head>
<body>
    <p id="p_id">
        这是一个P
    </p>
    <script src="jquery.min.js"></script>
    <script>
        var color = $("#p_id").css("background-color","blue");
        console.log(color)
    </script>
</body>
</html>

修改多个样式需要在css方法当中传入对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: red;
        }
    </style>
</head>
<body>
    <p id="p_id">
        这是一个P
    </p>
    <script src="jquery.min.js"></script>
    <script>
        $("#p_id").css({
            "background-color": "blue",
            "font-size": "80px"
        });

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

.css方法会对之前的css样式进行覆盖，单独修改一个样式不方便，所有还有三个方法可以使用。

方法描述
addClass添加class
removeClass移除class
toggleClass切换class，有就删除，没有就加上
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .big{
            font-size: 32px;
        }
        .small{
            font-size: 2px;
        }
        .red{
            color: white;
            background-color: red;
        }
    </style>
</head>
<body>
    <p id="p_id">
        这是一个P
    </p>
    <button id="b_id">变大</button>
    <button id="s_id">变小</button>
    <button id="r_id">变红</button>

    <script src="jquery.min.js"></script>
    <script>
        $("#b_id").click(
            function () {
                $("#p_id").toggleClass("big")
            }
        );
        $("#s_id").click(
            function () {
                $("#p_id").toggleClass("small")
            }
        );
        $("#r_id").click(
            function () {
                $("#p_id").toggleClass("red")
            }
        );

        // $("#p_id").addClass('big');
        // $("#p_id").addClass('red');
        // $("#p_id").removeClass('red')
    </script>
</body>
</html>

JQ修改属性

JQ的属性操作拥有一个方法叫作.attr

.attr 可以获取属性值

.attr 可以设置属性值

.attr 可以设置多个属性值

removeAttr 可以移除属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="p_id">
        123
    </p>
    <script src="jquery.min.js"></script>
    <script>
        // var id = $("#p_id").attr("id");
        // var id = $("#p_id").attr("class");
        // $("#p_id").attr("class","red");
        $("#p_id").attr({
            "class":"red",
            "name": "abc"
        });
        $("#p_id").removeAttr("class")

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

JQ文本操作

方法描述
text如果有值，覆盖当前的内容放入标签，只放入文本内容，没有传参就获取当前内容
html如果有值，覆盖当前的内容放入标签，可以放入HTML标签，没有传参就获取当前内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="p_id"></p>
    <script src="jquery.min.js"></script>
    <script>
        $("#p_id").text("<span>hello world</span>");
        console.log($("#p_id").text());

        $("#p_id").html("<span>hello world</span>");
        console.log($("#p_id").text());
    </script>
</body>
</html>

JQ尺寸操作

方法描述
width对象的宽度，没有值，获取当前的宽度，如果有值，设置宽度
height对象的高度，没有值，获取当前的，高度，如果有值，设置高度
offset对象的偏移量 (左，上)
offset.top上偏移量
offset.left左偏移量

offset不修改标签的位置，只是获取偏移量,如果想移动对象，还需要css方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: royalblue;
            position: absolute;
            top: 30px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <script src="jquery.min.js"></script>
    <script>
        // var offset = $("#box").offset();
        // console.log(offset)
        var offset_left = $("#box").offset().left;
        console.log(offset_left);
        $("#box").css("left","500px")
    </script>
</body>
</html>

JQ动画

显示和隐藏

三种参数

fast 快

slow 慢

毫秒

方法描述
show()显示
hide()隐藏
toggle()切换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <button id="btn">切换</button>
    <script src="jquery.min.js"></script>
    <script>
        $("#btn").click(
            function () {
                $("#box").toggle(3000)
            }
        )
    </script>
</body>
</html>

淡入淡出

方法描述
fadeIn淡入
fadeOut淡出
fadeToggle切换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <button id="btn">切换</button>
    <script src="jquery.min.js"></script>
    <script>
        $("#btn").click(
            function () {
                $("#box").fadeToggle(1000)
            }
        )
    </script>
</body>
</html>

滑入滑出

方法描述
slideDown滑出
slideUp滑入
slideToggle切换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <button id="btn">切换</button>
    <script src="jquery.min.js"></script>
    <script>
        $("#btn").click(
            function () {
                $("#box").slideToggle(1000)
            }
        )
    </script>
</body>
</html>

自定义动画

animate自定义动画，四个参数

参数描述
{attr:value，attr1:“value1”} style对象格式的css样式，就是要变化的结果样式
speed时间戳，用来表示整个效果执行的时间（快慢）
easing不同动画中设置动画的速度，swing linear
callbackanimate动画执行完成调用的函数，回调函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size: 50px;
            font-weight: 900;
            color: green;
            opacity: 1;
            display: block;
        }
    </style>
</head>
<body>
    <div id="box">
        hello world
    </div>
    <button id="btn">切换</button>
    <script src="jquery.min.js"></script>
    <script>
        $("#btn").click(
            function () {
                $("#box").animate(
                    {
                        opacity: "0",
                    },2000
                )
            }
        )
    </script>
</body>
</html>

回调函数使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size: 50px;
            font-weight: 900;
            color: green;
            opacity: 1;
            display: block;
        }
    </style>
</head>
<body>
    <div id="box">
        hello world
    </div>
    <button id="btn">切换</button>
    <script src="jquery.min.js"></script>
    <script>
        $("#btn").click(
            function () {
                $("#box").animate(
                    {
                        opacity: "0"
                    },2000,function () {
                        $("#box").css("display","none")
                    }
                )
            }
        )
    </script>
</body>
</html>

JQ事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn">点击</button>
    <script src="jquery.min.js"></script>
    <script>
        $("#btn").click(
            function () {
                $("#btn").text("点击过了")
            }
        )
    </script>
</body>
</html>

注意:不要再js当中写jq，jq当中可以使用js

JQ元素操作

创建HTML元素节点

方法描述
$("<p>")创建元素
append元素内尾部追加元素
prepend元素内头部添加元素
before元素外前边添加元素
after元素外后边添加元素
clone复制元素，记得加参数true来clone内容
remove删除元素
empty清空所有后代元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div_id">
        <span>1</span>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        var p = $("<p>这是一个p</p>");
        var div = $("#div_id");
        div.append(p.clone(true)); //放到后面
        div.prepend(p.clone(true));  //插入到前面
        div.after(p.clone(true));
        div.before(p);
        // p.remove()
        div.empty()
    </script>

</body>
</html>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c_p{
            border-bottom: black 2px solid;
            line-height: 50px;
            font-size: 24px;
        }
        .c{
            display: inline-block;
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p class="c_p">
        <span>城市：</span>
        <span class="c">北京</span>
        <span class="c">天津</span>
        <span class="c">上海</span>
        <span class="c">广州</span>
        <span class="c">深圳</span>
        <span class="c">张家口</span>
    </p>
    <p id="result" class="c_p" style="border: none;display: inline-block">

    </p>
    <span class="c_p" id="empty_span">清空</span>
    <script src="jquery.min.js"></script>
    <script>
        function del_self(obj) {
            $(obj).remove()
        } //删除自己

        function add_city(obj) {
            var clone_obj = $(obj).clone(true);
            clone_obj.attr("onclick","del_self(this)");
            $("#result").prepend(clone_obj)
        } //clone后添加

        $(".c").attr("onclick","add_city(this)"); // 给城市添加属性


        $("#empty_span").click(
            function () {
                $("#result").empty()
            }
        ) //清空
    </script>
</body>
</html>
cxz_dong
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值