web前段——jQuery1——效果

最新推荐文章于 2024-06-04 13:02:21 发布

灬Dan灬

最新推荐文章于 2024-06-04 13:02:21 发布

阅读量150

点赞数

分类专栏： WEB后端 WEB前段基础

本文链接：https://blog.csdn.net/qq_41448891/article/details/83387236

版权

WEB前段基础同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

WEB后端

5 篇文章 0 订阅

订阅专栏

jQuery语法

基础语法：$(selector).action()

$–定义jQuery
selector"查询"/"查找"HTML元素
jQuery的action()执行对元素的操作

实例

$(this).hide()–隐藏当前的元素
$(“p”).hide()–隐藏所有的段落
$(".test").hide()-隐藏所有class=“test"的元素
$(”#test").hide()-隐藏所有id="test"的元素

文档就绪函数

$(document).ready(function(){
//jQuery函数
});
目的:阻止文档在没有完全加载前运行函数

jQuery选择器

选择器	实例	选取
`*`	$("*")	所有元素
#id	$(“name”)	选取所以id=name的元素
.class	$(".intro")	所有class为intro的元素
element	$(“p”)	所有的p元素
.class.class	$(".into.demo")	所有class为intro企鹅class为demo的元素

:first	$(“p:first”)	第一个元素
:last	$(“p:last”)	最后一个元素
:even	$(“tr:even”)	所有偶数
:odd	$("tr:odd)	所有为基数的tr标签

标签

详细文档请走这扇门—?

jQuery 名称冲突

使用noConflict（）解决
比如 var JQ=jQuery.noConflict().

遵循以下原则,使代码更容易维护

把所有的jQuery代码放置于事件处理函数中
把所有的事件处理函数至于文档就绪事件处理其中
把jQuery的代码单独的至于.js文件中
如果名称冲突,则重命名jQuery库

####常用的jQuery事件

Event Function	功能
$(document).ready(function)	将函数帮地址文档的就绪事件(文档加载完成时)
$(selector).click(function)	触发事件绑定到被选择的点击事件中去
$(selector.dblclick(function)	触发或将函数绑定到被选预算内宿的点击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

jQuery效果

method	describe
show()/hide()	显示或者隐藏所选的元素
toggle()	显示隐藏的切换
fadeIn()/fadeOut()	淡入或淡出所选元素
fadeTo（）	改变所选颜色的通明度（0~1）
fadeToggle()	淡入淡出切换
slideDown()/slideUp()	通过调整高度来滑动的显示或隐藏被选的元素
slideToggle()	实现前两者的自由切换
dequeue()	运行被选元素的下一个排队函数
queue	显示被选元素的排队函数
stop()	停止在被选元素上运行动画

隐藏于显示
hide()/show()方法
可以用toggle()方法来切换hide()与show()方法

$(selector).hide(speed,callback);
$(selector).show(speed.callback);

speed 规定隐藏/显示的速度,取值为 “slow”/“fast”/毫秒
callback是隐藏完之后执行的函数名称

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="UTF-8">
</head>
<body>
    <script src="../jquery-3.3.1.min.js"></script><!--替换自己的jQuery·-->
    <script type="text/javascript">
        $(document).ready(function () {
            $(".hidden").click(function () {
                $(".demo").hide(1000);
         });
        $(".show").click(function () {
            $(".demo").show();
        });
    });</script>
    <p class="demo">this is a test</p>
    <button class="hidden" type="button" >隐藏</button><br>
    <button class="show" type="button">显示</button>
</body>
</html>

淡入淡出
四中fading方法

function	describe
fadein()	淡入
fadeout()	淡出
fadeToggle	淡入淡出切换
fadeTo（）	设置渐变的透明度0~1之间

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
以fadetoggle为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>faleToggle</title>
    <style type="text/css" rel="stylesheet">
      div{
          width: 100px;
          height: 100px;
          margin: 20px;
          position: relative;
          float: left;
      }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
        <script src="../jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
               $(".change").click(function () {
                  $(".red").fadeToggle();
                  $(".green").fadeToggle("slow");
                  $(".blue").fadeToggle(1000);
               });
            });
        </script>
            <div class="red"></div>
            <div class="green"></div>
            <div class="blue"></div>
        <button type="button" class="change">切换</button>
</body>
</html>

jQuery 效果-滑动

function	describe
slideDown（）	向下滑动的元素
slideUp()	向上滑动元素
slideToggle	前两者的来回切换

以slideToggle为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery效果滑动</title>
    <style type="text/css" rel="stylesheet">
    div{
        position: relative;
        float: left;
    }
    </style>
</head>
<body>
    <script src="../jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".clic").click(function () {
                $(".show").slideToggle();
            });
        });
    </script>
    <div><p class="show">
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
        The quick brown fox jumps over the lazy dog.<br>
    </p></div>
    <div><button class="clic"type="button">请点击这里</button></div>
</body>
</html>

jQuery效果-动画
animate() 方法

$(selector).animate({params},speed,callback);

params 定义形成动画的CSS属性
预定参数为show，hide，toggle
speed 参数规定时长
callback 规定参数完成后要执行的函数名称
==对位置进行操作，先把CSS position属性设置为relative，fixed 或 absolute！

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" rel="stylesheet">
        #move{
            background-color: aqua;
            height: 100px;
            width: 100px;
            position: absolute;
        }
    </style>
    <script src="../jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".click").click(function () {
                $("#move").animate({
                    left:'100px',
                    opacity:'0.5',
                    height:'200px',
                    width:'200px'
                   /*height:'toggle'*/
                });
            });
        });
    </script>
</head>
<body>

    <button class="click" type="button">move</button>
    <div id="move">p</div>
</body>
</html>

jQuery ————停止动画
$(selector).stop(stopALL,goToEnd);
实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>stop</title>
    <style type="text/css" rel="stylesheet">
        .demo{
            width: 200px;
            height: auto;
            background-color: green;
            color:red;
            display: none;
        }
    </style>
    <script src="../jquery-3.3.1.min.js"></script>
    <script type="text/javascript" rel="stylesheet">
        $(document).ready(function () {
            $(".click").click(function(){
                $(".demo").stop();
            });
            $(".slide").click(function () {
                $(".demo").slideDown(5000);
            });
        });
    </script>
</head>
<body>
        <button class="click" type="button">stop</button>
        <div class="slide">clic me</div>
        <div class="demo">this is a demo that I used to test my web project<br>
            this is a demo that I used to test my web project<br>
            this is a demo that I used to test my web project<br>
            this is a demo that I used to test my web project<br>
            this is a demo that I used to test my web project<br>
            this is a demo that I used to test my web project<br></div>
</body>
</html>

jQuery——callback
由于js语句是按次序逐一执行的，动画之后的语句可能会产生页面成图，（动画没有完成就执行下一语句）

$("p").hide(1000);
alert("The paragraph is now hidden");

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

前者会在执行隐藏动画的同事弹出对话框，看起来像是先弹框，在隐藏

jQuery——Chaining
实现在相同元素上运行多条jQuery命令

$("#p1").css("color","red").slideUp(2000).slideDown(2000);
/*先变红，再向上滑动，再向下滑动*/

灬Dan灬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前段——jQuery1——效果

jQuery语法基础语法：$(selector).action()$–定义jQueryselector&amp;amp;quot;查询&amp;amp;quot;/&amp;amp;quot;查找&amp;amp;quot;HTML元素jQuery的action()执行对元素的操作实例$(this).hide()–隐藏当前的元素$(“p”).hide()–隐藏所有的段落$(&amp;amp;quot;.test&amp;amp;quot;)
复制链接

扫一扫