jQuery常用小功能

最新推荐文章于 2021-06-26 14:45:02 发布

m0_38056893

最新推荐文章于 2021-06-26 14:45:02 发布

阅读量380

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/m0_38056893/article/details/77113701

版权

一.jQuery事件

1.设置点击(单击，双击)段落就会隐藏段落的方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>隐藏</title>
</head>
<script src="jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("p").click(function () {  //单击隐藏p标签元素
            $(this).hide();
        });
        $("span").dblclick(function () {   //双击隐藏span标签元素
            $(this).hide();
        });
    });
</script>
<body>
    <p>单击消失</p>
    <span>双击消失</span>
</body>
</html>

2.登录界面填写信息时，当点击输入框时候对应的输入框更换背景色，失去焦点时恢复白色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点事件</title>
</head>
<script src="jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("input").focus(function () {
            $(this).css("background-color","#cccccc")
        });
        $("input").blur(function(){
           $(this).css("background-color","#ffffff");
        });
    })
</script>
<body>
    姓名： <input type="text" name="name"><br>
    密码： <input type="password" name="psd">
</body>
</html>

3.点击隐藏按钮，段落消失；点击显示，段落重新出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏和显示</title>
</head>
<script src="jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("#hide").click(function () {
            $("p").hide();
        })
        $("#show").click(function () {
            $("p").show();
        })
    })
</script>
<body>
    <p>点击隐藏－消失，点击显示－再次出现</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
</body>
</html>

更简洁方法－－隐藏显示的直接切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏和显示</title>
</head>
<script src="jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("#change").click(function () {
            $("p").toggle();
        });
    })
</script>
<body>
    <p>隐藏，显示切换</p>
    <button id="change">change</button>
</body>
</html>

4. 淡入／淡出效果及其切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function(){
            //淡入的三种参数形式
            $("button").click(function(){
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000);
            });
        });
    </script>
</head>
<body>
    <p>jQuery fadeIn() 用于淡入已隐藏的元素。（不同参数）</p>
    <button>点击查看效果</button><br><br>
<!-- 注意设置display属性为none -->
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

更简洁方法－－直接切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>淡入淡出切换</title>
</head>
<script src="jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").fadeToggle();
            $("#div2").fadeToggle("slow");
            $("#div3").fadeToggle(3000);
        });
    });
</script>
</head>
<body>
    <p>fadeToggle()用于淡入淡出状态的切换。</p>
    <button>淡入／淡出切换</button><br><br>
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div> <br>
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div> <br>
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

二.jQuery动画

1.Query animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
1)必需的 params 参数定义形成动画的 CSS 属性。
2)可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
3)可选的 callback 参数是动画完成后所执行的函数名称。

例：将div元素向右移动250像素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画</title>
</head>
<script src="jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({left: '250px'});  //把 <div> 元素往右边移动了250像素
        });
    });
</script>
<body>
    <button>开始动画</button>
    <!--
        默认情况下，所有HTML元素都具有静态位置因此无法移动。
        首先应该把元素的CSS位置属性设置为相对，固定或绝对才能进行对位置的操作
    -->
    <div style="background:#98bf21;height:120px;width:120px;position:absolute;"></div>
</body>
</html>

animate还可操作多属性：

<script type="text/javascript">
	$("button").click(function(){
	    $("div").animate({
	        left: '250px',
	        opacity: '0.5',
	        height: '150px',
	        width: '150px'
	    });
	}); 
</script>

注意：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，使用 marginRight 而不是 margin-right，等等。

animate() 可以使用相对值，也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

<script type="text/javascript">
	$("button").click(function(){
	    $("div").animate({
	        left: '250px',
	        height: '+=150px',
	        width: '+=150px'
		});
	}); 
</script>

2.停止动画：jQuery stop()

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
默认地，stop() 会清除在被选元素上指定的当前动画。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>停止动画</title>
<script src="jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideDown(5000);    //单击后向下滑动面板
        });
        $("#stop").click(function(){
            $("#panel").stop();     //单击后停止面板的滑动
        });
    });
</script>

<style>
    #panel, #flip {
        padding: 5px;
        font-size: 18px;
        text-align: center;
        background-color: #555;
        color: white;
        border: solid 1px #666;
        border-radius: 3px;
    }

    #panel {
        padding: 50px;
        display: none;
    }
</style>

</head>
<body>
    <button id="stop">停止滑动</button>
    <div id="flip">向下滑动面板</div>
    <div id="panel">点击停止滑动后停止!</div>
</body>
</html>

三.jQuery链

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>链式</title>
</head>
<script src="jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#p1").css("color", "red").slideUp(1000).slideDown(1000);
        });
    });
</script>
</head>
<body>
    <p id="p1">哈哈，点击可以先向上，再向下</p>
    <button>点击</button>
</body>
</html>