JQuery中基本操作的示例分析-创新互联

这篇文章给大家分享的是有关JQuery中基本操作的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联专注于岳西网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供岳西营销型网站建设，岳西网站制作、岳西网页设计、岳西网站官网定制、微信平台小程序开发服务，打造岳西网络公司原创品牌,更为您提供岳西网站排名全网营销落地服务。

一、jQuery的DOM操作

1. 内容操作

1. html(): 获取/设置元素的标签体内容 <a>内容</a> --> 内容
2. text(): 获取/设置元素的标签体纯文本内容 <a>内容</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" >
          <img  src="../img/adv.jpg" />
        </div>
      
        <!-- 下方正文部分 -->
        <div id="content">
          正文部分
        </div>
      </div>
      </body>
      </html>

感谢各位的阅读！关于“JQuery中基本操作的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享文章：JQuery中基本操作的示例分析-创新互联
本文路径：https://www.cdcxhl.com/article18/dsdodp.html

成都网站建设公司_创新互联，为您提供域名注册、品牌网站制作、软件开发、品牌网站设计、移动网站建设、网站改版

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容