JQuery了解

最新推荐文章于 2024-07-29 20:01:23 发布

White.Magic

最新推荐文章于 2024-07-29 20:01:23 发布

阅读量92

点赞数

本文链接：https://blog.csdn.net/weixin_44659258/article/details/104376126

版权

JQuery介绍

JQuery引入

下载后，放进HTML的环境变量里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>

</body>
</html>

基本选择器

格式	说明
$("*")	选择所有
$(“标签名”)	标签选择器
$("#id值")	id选择器
$(".class值")	类选择器

JQuery

JQuery对象习惯性采用$开口，例如：
$div = $(“div”);
JQuery对象的格式是[Object]
JQuery对象转JS对象
jsObject = $jqueryOject[0];
jsObiect = $jqueryOject.get(0);
JS对象转JQuery对象
$jqueryObject = $(jsObject);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery2</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
    <input type="button" value="按钮" id="button_id">
    <script type="text/javascript">
        //1.得到按钮对象
        $buttonElement =$('#button_id');
        //2.绑定点击事件
        $buttonElement.click(function () {
            alert('按钮被点击了')
        });
    </script>
</body>
</html>

JQuery事件

例子：
< input type=“button” value=“按钮” id=“button_id”>
< script type=“text/javascript”>
//1.得到按钮对象
$buttonElement = $("#button_id")
//2.绑定点击事件
$buttonElement.click(function(){
alert(“按钮被点击了”);
});

在这里插入图片描述

JQuery动画

1.显示和隐藏

命令	说明
show(speed,callback)	显示
hide(speed,callback)	隐藏

注：
speed:
slow
normal
fast
2.淡入淡出

命令	说明
fadeIn(speed,callback)	淡入
fadeOut(speed,callback)	淡出

3.滑动

命令	说明
slideDown(speed,callback)	向下滑动
slideUp(speed,callback)	向上滑动

隐藏和显示的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery3</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>

</head>
<body>
    <input type="button" value="隐藏" id="button_hide">
    <input type="button" value="显示" id="button_show">

    <ul id="ul_id">
        <li>Python</li>
        <li>Java</li>
    </ul>

    <script type="text/javascript">
        //1.得到两个按钮对象
        $button_hide = $('#button_hide');
        $button_show = $('#button_show');
        //2.得到ul对象
        $ul = $('#ul_id');

        //隐藏
        $button_hide.click(function () {
            $ul.hide("slow");
        });

        //显示
        $button_show.click(function () {
            $ul.show("slow");
        });

    </script>

</body>
</html>