HTML5+CSS3+JavaScript从入门到精通-21

原创

qiqi_fu

发布于 2021-12-06 16:49:33

3K0

发布于 2021-12-06 16:49:33

文章被收录于专栏：CQ品势CQ品势

HTML5+CSS3+JavaScript从入门到精通

作者：王征，李晓波

第二十一章 JavaScript的框架库jQuery

案例

21-01 jQuery的使用

<!DOCTYPE html>
<!--web21-01-->
<!--
    $("#h01"), #后接的是id，要加引号
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery的使用</title>
    <script src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        function myFunction()
        {
            $("#h01").html("大家好，我是jQuery~");//调用id=h01
        }
        $(document).ready(myFunction);//HTML 页面所有DOM元素加载完成，就可以执行此ready()事件方法
    </script>
</head>
<body>
    <h2>jQuery的使用</h2>
    <hr />
    <h3 id="h01"></h3>
</body>
</html>

21-02 jQuery的常用选择器

<!DOCTYPE html>
<!--web21-02-->
<!--
    jQuery选择器完全继承了css选择器的风格
    元素选择器：  $("元素名")
    id选择器：    $("#id名")
    class选择器： $(".类名")
    群组选择器：  $("选择器1，选择器2，...，选择器n")
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery的常用选择器</title>
    <script src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        function myf1()
        {
            $("div").css("color", "red");
            $("div").css("background-color", "yellow");
        }
        function myf2()
        {
            $("#myd1").css("color", "blue");
            $("#myd1").css("background-color", "pink");
        }
        function myf3()
        {
            $(".myc1").css("border", "10px green groove");
        }
        function myf4()
        {
            $("p, span").css("font-size", "18px");
            $("p, span").css("font-weight", "bold");
        }
    </script>
</head>
<body>
    <h2>基本选择器</h2>
    <hr />
    <div class="myc1">我是div元素！</div>
    <p class="myc1">我是段落元素！</p>
    <p>我也是段落元素！</p>
    <span class="myc1" >我是span元素！</span>
    <br><br>
    <span id="myd1">我也是span元素，我的id是"myd1"</span>
    <br><br>
    <div>我也是div元素</div>
    <br />
    <input type="button" name="b1" value="div样式" onclick="myf1()" />
    <input type="button" name="b2" value="id样式" onclick="myf2()" />
    <input type="button" name="b3" value="class样式" onclick="myf3()" />
    <input type="button" name="b4" value="群组选择器" onclick="myf4()" />
</body>
</html>

21-03 鼠标常用事件方法

<!DOCTYPE html>
<!--web21-03-->
<html>
<head>
    <meta charset="utf-8" />
    <title>鼠标常用事件方法</title>
    <script src="jquery-1.7.1.min.js"></script>
    <style type="text/css">
        p {
            font-size: 15px;
            text-indent: 30px;
            color: red;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myimg1").click(function () {//click
                window.alert("你单击了第一幅图像！ ");
                $("#a").html("提醒信息，你单击了第一幅图像！ ");
            });
            $("#myimg2").dblclick(function () {//dblclick
                window.alert("你双击了第二幅图像！ ");
                $("#a").html("提醒信息，你双击了第二幅图像！ ");
            });
            $("#myimg3").mouseover(function () {//mouseover
                window.alert("你已移入第三幅图像！ ");
                $("#a").html("提醒信息，你已移入第三幅图像！ ");
            });
            $("#myimg3").mouseout(function () {//mouseout
                window.alert("你已移出第三幅图像！ ");
                $("#a").html("提醒信息，你已移出第三幅图像！ ");
            });
            $("p").mousedown(function () {//mousedown
                $("#a").html("提醒信息，在段落文字中，你已按下鼠标左键！ ");
            });
            $("p").mouseup(function () {//mouseup
                $("#a").html("提醒信息，在段落文字中，你已松开鼠标左键！ ");
            });
        });
    </script>
</head>
<body>
    <h2>鼠标常用事件方法</h2>
    <hr />
    <p>鼠标常用事件方法有6种，分别是鼠标单击事件方法click(), 双击事件方法dbclick(), 移入事件方法mouseover(), 移出事件方法mouseout(), 按下事件方法mousedown(), 松开事件方法mouseup().</p>
    <h4 id="a">提醒信息：</h4>
    <img id="myimg1" src="b1.png" />
    <img id="myimg2" src="g1.gif" width="100" height="100" />
    <img id="myimg3" src="mp3mp4/BREAK.swf" width="100" height="100" />
</body>
</html>

21-04 键盘常用事件方法

<!DOCTYPE html>
<!--web21-04-->
<!--
    keypress \ keydown \ keyup
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>键盘常用事件方法</title>
    <script src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        var i = 0;
        $(document).ready(function () {
            $("input").keypress(function () {//按删除键并没有更新统计按下的次数
                $("span").text(i = i + 1);
            });
            $("textarea").keydown(function () {
                $("textarea").css("background-color", "yellow");
            });
            $("textarea").keyup(function () {
                $("textarea").css("background-color", "pink");
            });
        });
    </script>
</head>
<body>
    <h2>键盘常用事件方法</h2>
    <hr />
    姓名：<input type="text" />&nbsp&nbsp按键的次数统计：<span>0</span><br />
    留言内容：<br />
    <textarea name="myta" rows="10" cols="30" placeholder="按下键盘上的键，背景色变成黄色；松开键盘上的键，背景色变成粉红色！ "></textarea>
</body>

</html>

21-05 显示、隐藏和切换动画效果

<!DOCTYPE html>
<!--web21-05-->
<!--
    hide \ show \ toggle(若是隐藏，变成显示；若是显示，变成隐藏；toggle就是改变现在的状态)
    (speed, callback) -- speed,速度，毫秒   callback，动画执行后的回调函数，可省略
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>显示、隐藏和切换动画效果</title>
    <script src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myb1").click(function () {
                $("img").hide(1000);
            });
            $("#myb2").click(function () {
                $("img").show(1000);
            });
            $("#myb3").click(function () {
                $("img").toggle(500);
            });
        });
    </script>
</head>
<body>
    <h2>显示、隐藏和切换动画效果</h2>
    <hr />
    <img src="b1.png" width="300" height="200" />
    <br>
    <input type="button" name="b1" id="myb1" value="隐藏" />
    <input type="button" name="b1" id="myb2" value="显示" />
    <input type="button" name="b1" id="myb3" value="切换" />
</body>

</html>

21-06 淡入和淡出动画效果

<!DOCTYPE html>
<!--web21-06-->
<!--
    fadeOut \ fadeIn \ fadeToggle \  透明度0-1间变化
    (speed, callback) -- speed,速度，毫秒   callback，动画执行后的回调函数，可省略

    fadeTo
    (speed, opacity, callback) -- opacity透明度
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>淡入和淡出动画效果</title>
    <script src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myb1").click(function () {
                $("img").fadeOut(3000);
            });
            $("#myb2").click(function () {
                $("img").fadeIn(3000);
            });
            $("#myb3").click(function () {
                $("img").fadeToggle(5000);
            });
            $("#myb4").click(function () {
                $("img").fadeTo(5000, 0.5);
            });
        });
    </script>
</head>
<body>
    <h2>淡入和淡出动画效果</h2>
    <hr />
    <img src="b1.png" width="300" height="200" />
    <br />
    <input type="button" name="b1" id="myb1" value="淡出" />
    <input type="button" name="b1" id="myb2" value="淡入" />
    <input type="button" name="b1" id="myb3" value="切换" />
    <input type="button" name="b1" id="myb4" value="设置半透明" />
</body>
</html>

21-07 滑动动画效果

<!DOCTYPE html>
<!--web21-07-->
<!--
    slideDown \ slideUp \ slideToggle
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>滑动动画效果</title>
    <script src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        var flag = 0;
        $(function () {
            $("h4").click(function () {
                if (flag == 0) {
                    $("p").slideDown(3000);
                    flag = 1;
                }
                else {
                    $("p").slideUp(3000);
                    flag = 0;
                }
            });
            $("h3").click(function () {
                $("#mya").slideToggle(5000);
            });
        })
    </script>
</head>
<body>
    <h2>滑动动画效果</h2>
    <hr />
    <h4>jQuery概述</h4>
    <p>jQuery是一个快速和简洁的Javascript框架库，可简化HTML文档元素的遍历，事件处理，动画和Ajax交互以实现快速Web开发，它被设计用来改变编写Javascript脚本的方式。
        jQuery的文档排版非常丰富，因为其轻量级的特性，文档并不复杂，随着新版本的发布，可以很快被翻译成多种语言，这也为jQuery的流行提供了条件。
    </p>
    <h3>jQuery的常用事件方法</h3>
    <div id="mya">事件往往都是HTML页面的动作引起的，例如当用户按下鼠标或者提交表单，甚至在页面移动鼠标时，事件都会出现。不同的用户行为会触发不同的事件。jQuery封装了Javascript中所有的事件，使得其操作更加简单方便，并且使得这些事件能够兼容各大浏览器，减少我们大量代码的编写</div>
</body>
</html>

21-08 自定义动画

<!DOCTYPE html>
<!--web21-08-->
<!--
    $().animate({params}, speed, callback)
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>自定义动画</title>
    <script src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myb1").click(function () {
                $("#my1").animate({ width: "100px", height: "100px" }, 5000);
            });
            $("#myb2").click(function () {
                $("#my1").animate({ width: "150px", height: "80px", opacity: "0.5" }, 3000);
            });
            $("#myb3").click(function () {
                $("#my1").animate({ height: "toggle" }, 5000);
            });
            $("#myb4").click(function () {
                var div = $("#my1");
                div.animate({ height: "200", opcacity: "0.4" }, "slow");
                div.animate({ width: "200", opcacity: "0.8" }, "slow");
                div.animate({ height: "100", opcacity: "0.4" }, "slow");
                div.animate({ width: "100", opcacity: "0.8" }, "slow");
            });
            $("#myb5").click(function () {
                $("#my1").stop();
            });
        });
    </script>
</head>
<body>
    <h2>自定义动画</h2>
    <hr />
    <div id="my1" style="background-color:red;width:50px;height:50px"></div>
    <br />
    <input type="button" name="b1" id="myb1" value="改变图像大小动画" />
    <input type="button" name="b1" id="myb2" value="改变图像大小和透明度动画" />
    <input type="button" name="b1" id="myb3" value="使用预定义的动画效果" />
    <br /><br />
    <input type="button" name="b1" id="myb4" value="队列动画效果" />
    <input type="button" name="b1" id="myb5" value="停止" />
</body>
</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript