码迷,mamicode.com
首页 > Web开发 > 详细

JQuery的基本操作及案例

时间:2020-02-13 23:02:55      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:title   ide   执行   type   使用   play   隐藏   部分   定义   

jQuery是一个快速、简洁的JavaScript框架,本质上就是一些js文件,封装了js的原生代码。

一、jQuery的DOM操作

        1. 内容操作
            1. html(): 获取/设置元素的标签体内容   <a><font>内容</font></a>  --> <font>内容</font>
            2. text(): 获取/设置元素的标签体纯文本内容   <a><font>内容</font></a> --> 内容
            3. val(): 获取/设置元素的value属性值

        2. 属性操作
            1. 通用属性操作
                  1. attr(): 获取/设置元素的属性
                  2. removeAttr():删除属性
                  3. prop():获取/设置元素的属性
                  4. removeProp():删除属性
                       * attr和prop区别?
                       1. 如果操作的是元素的固有属性,则建议使用prop
                       2. 如果操作的是元素自定义的属性,则建议使用attr
             2. 对class属性操作
                  1. addClass():添加class属性值
                  2. removeClass():删除class属性值
                  3. toggleClass():切换class属性
                    * toggleClass("one"): 
                        * 判断如果元素对象上存在class="one",则将属性值one删除掉。  如果元素对象上不存在class="one",则添加
                  4. css():改变样式

 

二、jQuery动画的三种显示方式:

    1. 默认显示和隐藏方式
         1. show([speed,[easing],[fn]])
                参数:
                       1. speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000)
                        2. easing:用来指定切换效果,默认是"swing",可用参数"linear"
                            * swing:动画执行时效果是 先慢,中间快,最后又慢
                            * linear:动画执行时速度是匀速的
                        3. fn:在动画完成时执行的函数,每个元素执行一次。
    
            2. hide([speed,[easing],[fn]])
            3. toggle([speed],[easing],[fn])
            
      2. 滑动显示和隐藏方式
                1. slideDown([speed],[easing],[fn])
                2. slideUp([speed,[easing],[fn]])
                3. slideToggle([speed],[easing],[fn])
    
       3. 淡入淡出显示和隐藏方式
                1. fadeIn([speed],[easing],[fn])
                2. fadeOut([speed],[easing],[fn])
                3. fadeToggle([speed,[easing],[fn]])

 

三、案例:广告显示和隐藏

  需求:
        1. 当页面加载完,3秒后。自动显示广告
        2. 广告显示5秒后,自动消失。
   分析:
        1. 使用定时器来完成。setTimeout (执行一次定时器)
        2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
        3. 使用  show/hide方法来完成广告的显示

<!DOCTYPE html>
            <html>
            <head>
                <meta charset="UTF-8">
                <title>广告的自动显示与隐藏</title>
                <style>
                    #content{width:100%;height:500px;background:#999}
                </style>
            
                <!--引入jquery-->
                <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
                <script>
                   //入口函数,在页面加载完成之后,定义定时器,调用这两个方法
                    $(function () {
                       //定义定时器,调用adShow方法 3秒后执行一次
                       setTimeout(adShow,3000);
                       //定义定时器,调用adHide方法,8秒后执行一次
                        setTimeout(adHide,8000);
                    });
                    //显示广告
                    function adShow() {
                        //获取广告div,调用显示方法
                        $("#ad").show("slow");
                    }
                    //隐藏广告
                    function adHide() {
                        //获取广告div,调用隐藏方法
                        $("#ad").hide("slow");
                    }


?            
                </script>
            </head>
            <body>
            <!-- 整体的DIV -->
            <div>
                <!-- 广告DIV -->
                <div id="ad" style="display: none;">
                    <img style="width:100%" src="../img/adv.jpg" />
                </div>
            
                <!-- 下方正文部分 -->
                <div id="content">
                    正文部分
                </div>
            </div>
            </body>
            </html>

 

JQuery的基本操作及案例

标签:title   ide   执行   type   使用   play   隐藏   部分   定义   

原文地址:https://www.cnblogs.com/iceywu/p/12305458.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!