Javascript知识【jQuery-基本操作】下篇

简介: 本篇讲述:jQuery基本操作,以及动画效果的实现

1,jQuery基本操作

1.1:基础选择器【重点】

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Title</title>

   <script src="../js/jquery-3.3.1.min.js"></script>

   <script>

       /*

           id选择器:获取符合要求的第一个。如果获取不到,对象内容均为undefined

           元素选择器和类选择器:获取到返回jQuery数组,获取不到返回的jQuery数组长度为0

        */

       $(function(){

           //页面加载完成时,获取对应的标签对象

           //获取id为r01的标签对象

           var a1 = $("#r01");

           //alert(a1[0].value);

           //获取标签名为input的标签对象

           var arr = $("input");

           //alert(arr.length);

           //获取class属性值为hehe的标签对象

           var arr2 = $(".hehe");

           alert(arr2.length);

       });


   </script>

</head>

<body>

   <input type="radio" name="hobby" value="敲代码" id="r01"/>

   <input type="radio" name="hobby" value="调试bug" class="hehe"/>

   <input type="radio" name="hobby" value="谈需求" class="hehe"/>

</body>

</html>


为了更好地获取指定的标签对象


目标:学会使用jQuery三个基本选择器


ID选择器            $("#id值")


元素选择器        $("标签名")


类选择器            $(".类名")


1.2:动画效果

1.2.1:普通效果

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Title</title>

   <style>

       #d1{

           background-color:lightskyblue;

           width:300px;

           height:300px;

           display: none;

       }

   </style>

   <script src="../js/jquery-3.3.1.min.js"></script>

   <script>

       //展示

       function run1(){

           //$("#d1").show(500);//单纯展示动画

           //下面回调函数方式:适用于 动画展示完成,回来执行某些代码

           /*$("#d1").show(500,function () {

               //展示动画完毕,回来调用该函数

               alert("展示完毕");

           });*/


           //上下滑动

           //$("#d1").slideDown(500);

           //淡入淡出

           $("#d1").fadeIn(500);

       }

       //隐藏

       function run2(){

           //$("#d1").hide(500);

           //上下滑动

           $("#d1").slideUp(500);

       }

       //切换显示/隐藏

       function run3(){

           //$("#d1").toggle(500);

           //上下滑动

           $("#d1").slideToggle(500);

       }

   </script>

</head>

<body>

   <div id="d1"></div>

   <input type="button" value="展示" onclick="run1()" />

   <input type="button" value="隐藏" onclick="run2()" />

   <input type="button" value="切换显示/隐藏" onclick="run3()" />

</body>

</html>


目的:为了掌握基本弹出,收起动画


基本效果:(放大缩小滑动)






小结:


回调函数:某个效果执行完,回来调用执行的函数


1.2.2:自定义动画(扩展)



<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Title</title>

   <style>

       #d1{

           background-color:lightskyblue;

           width:300px;

           height:300px;

           position: absolute;

       }

   </style>

   <script src="../js/jquery-3.3.1.min.js"></script>

   <script>

       function run1() {

           $("#d1").animate({

               width:'150px',

               height:'150px',

               left:'50px'

           },1000,function () {

               alert("效果完毕");

           });

       }

   </script>

</head>

<body>

   <div id="d1"></div>

   <input type="button" value="自定义动画" onclick="run1()" style="position: absolute"/>

</body>

</html>



2,案例:重新弹出广告



分析:

关键点:


1、页面加载完成时   $(function(){})


2、定时器    setTimeout(function(){},2000)


3、获取元素: $("#id")


4、动画展示: slideDown    slideUp


步骤:


页面加载完成时,启动一个弹出广告的定时器

该定时器2秒后,滑动展示广告页面

展示完毕后,立刻启动收起广告的定时器

2秒后,滑动收起广告

代码实现:

<script src="../js/jquery-3.3.1.min.js"></script>

<script>

  //1、页面加载完成时,启动一个弹出广告的定时器

  $(function () {

     setTimeout(function () {

        //2、该定时器2秒后,滑动展示广告页面

        $("#ad").slideDown(500,function () {

           //3、展示完毕后,立刻启动收起广告的定时器

           setTimeout(function () {

              //4、2秒后,滑动收起广告

              $("#ad").slideUp(500);

           },2000);

        });

     },2000);

  })

</script>



小结:


获取元素: $("#id");

  slideDown         slideUp

 

相关文章
|
1月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
14 0
|
1月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
17 0
|
1月前
|
JavaScript 前端开发
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
14 0
|
1月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
20 0
|
1月前
|
JavaScript 前端开发
原生js与jQuery显示隐藏div的几种方法
原生js与jQuery显示隐藏div的几种方法
26 0
|
1月前
|
JavaScript
多条件搜索(单条件也可以)原生js/jquery
多条件搜索(单条件也可以)原生js/jquery
17 0
|
1月前
|
JavaScript 前端开发
|
1月前
|
JavaScript
实现一个网页同时调用多个倒计时 jquery/js
实现一个网页同时调用多个倒计时 jquery/js
|
2月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
38 0
|
Web App开发 JSON JavaScript
JavaScript及jQuery入门 【下】
什么是JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 历史 ECMAScript可以理解为是JavaScript的一个标准 最新版本已经到es6~ 但是大部分浏览器还停留在支持es5代码上 开发环境--线上环境,版本不一致 快速入门 引入

相关产品

  • 云迁移中心