day45 jQuery

时间 2019-11-24

标签 day45 day jquery 栏目 JQuery 繁體版

原文原文链接

在用js写代码时，会遇到一些问题：javascript

window.onload 事件有事件覆盖的问题，所以只能写一个事件。css
代码容错性差。html
浏览器兼容性问题。java
书写很繁琐，代码量多。jquery
代码很乱，各个页面处处都是。编程
动画效果很难实现。json

jQuery的出现，能够解决以上问题api

关于jQuery的相关资料：数组

官网：http://jquery.com/浏览器
官网API文档：http://api.jquery.com/
汉化API文档：http://www.css88.com/jqapi-1.9/

jQuery 的两大特色

链式编程：好比.show()和.html()能够连写成.show().html()。
隐式迭代：隐式对应的是显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用咱们本身再进行循环，简化咱们的操做，方便咱们调用。

jQuery 的使用

使用 jQuery 的基本步骤

（1）引包

（2）入口函数

（3）功能实现代码（事件处理）

如图：

主要：导包的代码必定要放在js代码的最上面。

下载jQuery包以后里面会有两个文件，一个是jquery-3.3.1.js，一个是jquery-3.3.1.min.js

它们的区别是：

第一个是未压缩版，第二个是压缩版。
平时开发过程当中，可使用任意一个版本；可是，项目上线的时候，推荐使用压缩版。

jQuery 的入口函数和 `$` 符号

入口函数（重要）

原生 js 的入口函数指的是：window.onload = function() {}; 以下：

 //原生 js 的入口函数。页面上全部内容加载完毕，才执行。
        //不只要等文本加载完毕，并且要等图片也要加载完毕，才执行函数。
       window.onload = function () {
           alert(1);
       }

View Code

而 jQuery的入口函数，有如下几种写法：

写法一：

 //1.文档加载完毕，图片不加载的时候，就能够执行这个函数。
       $(document).ready(function () {
           alert(1);
       })

写法二：（写法一的简洁版）

//2.文档加载完毕，图片不加载的时候，就能够执行这个函数。
       $(function () {
           alert(1);
       });

写法三：

  //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
       $(window).ready(function () {
           alert(1);
       })

jQuery入口函数与js入口函数的区别：

区别一：书写个数不一样：

Js 的入口函数只能出现一次，出现屡次会存在事件覆盖的问题。
jQuery 的入口函数，能够出现任意屡次，并不存在事件覆盖问题。

区别二：执行时机不一样：

Js的入口函数是在全部的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就能够操做DOM了，不用等到全部的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

jQuery的`$`符号

jQuery 使用 $ 符号缘由：书写简洁、相对于其余字符不同凡响、容易被记住。

jQuery占用了咱们两个变量：$ 和 jQuery。当咱们在代码中打印它们俩的时候：

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

        console.log($);
        console.log(jQuery);
        console.log($===jQuery);


    </script>

打印结果：

从打印结果能够看出，$ 表明的就是 jQuery。

那怎么理解jQuery里面的 $ 符号呢？

$ 实际上表示的是一个函数名 以下：

$(); // 调用上面咱们自定义的函数$

    $(document）.ready(function(){}); // 调用入口函数

    $(function(){}); // 调用入口函数

    $(“#btnShow”) // 获取id属性为btnShow的元素

    $(“div”) // 获取全部的div标签元素

如上方所示，jQuery 里面的 $ 函数，根据传入参数的不一样，进行不一样的调用，实现不一样的功能。返回的是jQuery对象。

jQuery这个js库，除了$ 以外，还提供了另一个函数：jQuery。jQuery函数跟 $ 函数的关系：jQuery === $。

js中的DOM对象和 jQuery对象比较（重点，难点）

两者的区别

经过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。举例：

针对下面这样一个div结构：

<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div

经过原生 js 获取这些元素节点的方式是(id,标签,类选择器)：

    var myBox = document.getElementById("app");           //经过 id 获取单个元素
    var boxArr = document.getElementsByClassName("box");  //经过 class 获取的是伪数组
    var divArr = document.getElementsByTagName("div");    //经过标签获取的是伪数组

经过 jQuery 获取这些元素节点的方式是：（id,标签,类选择器）

  //获取的是数组，里面包含着原生 JS 中的DOM对象。
　　console.log($('#app'));
　　console.log($('.box'));
　　console.log($('div'));

设置当前4个div的样式(css操做)：

$('div').css({
                'width': '200px',
                'height': '200px',
                "background-color":'red',
                'margin-top':'20px'
            })

因为JQuery 自带了 css()方法，咱们还能够直接在代码中给 div 设置 css 属性。

总结：jQuery 就是把 DOM 对象从新包装了一下，让其具备了 jQuery 方法。

两者的相互转换

一、 DOM 对象转为 jQuery对象：

$(js对象);

二、jQuery对象转为 DOM 对象：

  jquery对象[index];      //方式1（推荐）

  jquery对象.get(index);  //方式2

jQuery对象转换成了 DOM 对象以后，能够直接调用 DOM 提供的一些功能。如：

$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';

总结：若是想要用哪一种方式设置属性或方法，必须转换成该类型。

举例：

隔行换色

代码以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        //入口函数
        jQuery(function () {
            var jqLi = $("li");
            for (var i = 0; i < jqLi.length; i++) {
                if (i % 2 === 0) {
                    //jquery对象，转换成了js对象
                    jqLi[i].style.backgroundColor = "pink";
                } else {
                    jqLi[i].style.backgroundColor = "yellow";
                }
            }
        });
    </script>
</head>
<body>
<ul>
    <li>小马哥</li>
    <li>小马哥</li>
    <li>小马哥</li>
    <li>小马哥</li>
    <li>小马哥</li>
    <li>小马哥</li>
</ul>
</body>
</html>

View Code

效果以下：

2、jQuery的选择器

咱们之前在CSS中学习的选择器有：

天来学习一下jQuery 选择器。

jQuery选择器是jQuery强大的体现，它提供了一组方法，让咱们更加方便的获取到页面中的元素。

一、jQuery 的基本选择器

代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div></div>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //入口函数
        $(function(){
            //三种方式获取jquery对象
            var jqBox1 = $("#box");
                   var jqBox2 = $(".box");
            var jqBox3 = $('div');

            //操做标签选择器
            jqBox3.css('width', '100');
            jqBox3.css('height', 100);
            jqBox3.css('background-color', 'red');
            jqBox3.css('margin-top', 10);


            //操做类选择器(隐式迭代，不用一个一个设置)
                    jqBox2.css("background", "green");
                    jqBox2.text('哈哈哈')

                    //操做id选择器
                    jqBox1.css("background", "yellow");
                   
        })
    </script>
    
</body>
</html>

View Code

效果以下：

二、层级选择器

代码以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //获取ul中的li设置为粉色
            //后代：儿孙重孙曾孙玄孙....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代：亲儿子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

View Code

效果以下：

三、基本过滤选择器

基础过滤器补充--->

:not(元素选择器)// 移除全部知足not条件的标签
:has(元素选择器)// 选取全部包含一个或多个标签在其内的标签(指的是从后代元素找)

解释：

代码以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本过滤选择器</title>
    </head>
    <body>
        <ul>
            <li>哈哈哈哈，基本过滤选择器</li>
            <li>嘿嘿嘿</li>
            <li>天王盖地虎</li>
            <li>小鸡炖蘑菇</li>
            
        </ul>
    </body>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //获取第一个 :first ,获取最后一个 :last
            
            //奇数
            $('li:odd').css('color','red');
            //偶数
            $('li:even').css('color','green');
            
            //选中索引值为1的元素 *
            $('li:eq(1)').css('font-size','30px');
            
            //大于索引值1
            $('li:gt(1)').css('font-size','50px');
            
            //小于索引值1
            $('li:lt(1)').css('font-size','12px');
            
            
            
            
        })
        
        
    </script>
</html>

View Code

效果以下：

表单筛选器(多用于找form表单里面出现的input标签)

表单对象属性

:enabled      可用的
:disabled　　　禁止使用
:checked       默认被选中
:selected      select标签中被选中

4.筛选器方法

　　① 下一个元素　

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它

　　② 上一个元素　　

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

　　③ 父类元素

$("#id").parent()
$("#id").parents()  // 查找当前元素的全部的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的全部的父辈元素，直到遇到匹配的那个元素为止，
　　　　　　这里直到body标签，不包含body标签，基本选择器均可以放到这里面使用。

　　④ 儿子和兄弟元素

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们，不包含本身，.siblings('#id')，能够在添加选择器进行进一步筛选

　　⑤查找(搜索全部与指定表达式匹配的元素)

$("div").find("p")
　等价于
$("div p")

　　⑥筛选

　　筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的，从全部的div标签中过滤出有class='c1'属性的div，
　　　　　　　　　　　　　　　　和find不一样，find是找div标签的子子孙孙中找到一个符合条件的标签
　等价于 
$("div.c1")

　　⑦补充

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

四、属性选择器

代码以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <p class="p1">
                <span>我是第一个span标签</span>
                <span>我是第二个span标签</span>
                <span>我是第三个span标签</span>
            </p>
            <button>按钮</button>
        </div>
        <ul>
            <li class="list">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        //获取第n个元素 数值从0开始
        $('span').eq(1).css('color','#FF0000');
        
        //获取第一个元素 :first :last    点语法  ：get方法 和set方法
        $('span').last().css('color','greenyellow');
        $('span').first().css('color','greenyellow');
        
        //查找span标签的父元素（亲的）
        $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});
        
        //选择全部的兄弟元素（不包括本身）
                  $('.list').siblings('li').css('color','red');

                  
                //查找全部的后代元素
                   $('div').find('button').css('background','yellow');

                
                //不写参数表明获取全部子元素。
                   $('ul').children().css("background", "green");
                   $('ul').children("li").css("margin-top", 10);
                   

        
        
    </script>
</html>

View Code

效果以下：

样式操做

　　1.样式类

　　①添加删除class类的值来修改样式　　

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，若是有就移除，若是没有就添加。

　　②直接修改css的属性来修改样式　

css("color","red")//DOM操做：tag.style.color="red"

示例：
$("p").css("color", "red"); //将全部p标签的字体设置为红色

　　③位置操做

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移，不能设置位置
$(window).scrollTop()  //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向左移动的距离

offset  和  position　的区别
.offset()方法容许咱们检索一个元素相对于文档（document）的当前位置。

.position()获取相对于它最近的具备相对位置(position:relative或position:absolute)的父级元素的距离，
　　　　若是找不到这样的元素，则返回相对于浏览器的距离。

　　④ 尺寸

height() //盒子模型content的大小，就是咱们设置的标签的高度和宽度
width()
innerHeight() //内容content高度 + 两个padding的高度
innerWidth()
outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，
　　　　　　不包括margin的高度，由于margin不是标签的，是标签和标签之间的距离
outerWidth()

文本操做

　　1.HTML代码　

html()// 取得第一个匹配元素的html内容，包含标签内容
html(val)// 设置全部匹配元素的html内容，识别标签，可以表现出标签的效果

　　2.文本值

text()// 取得全部匹配元素的内容，只有文本内容，没有标签
text(val)// 设置全部匹配元素的内容，不识别标签，将标签做为文本插入进去

　　3.值

val()// 取得第一个匹配元素的当前值
val(val)// 设置全部匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

　　①设置值

　　② 获取被选中的checkbox 或 radio 的值

　　③注意事项

文档处理

　　1.添加到指定元素内部的后面　

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

　　2.添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

　　3.添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

　　4.添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

　　5.移除和清空元素

remove()// 从DOM中删除全部匹配的元素。
empty()// 删除匹配的元素集合中全部的子节点，包括文本被所有删除，可是匹配的元素还在

　　6.替换

replaceWith()
replaceAll()

　　7.克隆

clone()// 参数，看下面的示例
          参数为true时 ,彻底克隆

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>克隆</title>
  <style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不加参数true，克隆标签但不克隆标签带的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加参数true，克隆标签而且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>


点击复制按钮

事件

　　1.经常使用事件

click(function(){...})    点击事件
hover(function(){...})　　　光标 移进 和 移出 (须要两个function)
blur(function(){...})　　　　丢失光标
focus(function(){...})　　　　获取光标
change(function(){...})   //内容发生变化，input，select等
keydown(function(){...})   按下某键
keyup(function(){...})  　　抬起某键　　
mouseover 和 mouseenter的区别是：mouseover事件只要你在绑定该事件的对象上移动就会一直触发，
　　　　　　　　　　　　　　　　　　 mmouseenter事件只触发一次，表示鼠标进入这个对象

绑定滚动事件

$(window).scroll(function(){})

绑定click事件

对象.click(function(){})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: blue;

        }
        .c2{
            background-color: red;
        }
        .c1,.c2{
            width: 200px;
            height: 1000px;
        }
        .s1{
            background-color: #7fffd4;
            position: fixed;
            width: 80px;
            height: 40px;
            bottom: 20px;
            left: 20px;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
        }
        .s1 a{
            text-decoration: none;

        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<!--<a href="" name="top">顶部位置</a>-->
<p id="top"></p>

<div class="c1"></div>
<div class="c2"></div>

<span class="s1 hide">
    <a href="#top">返回顶部</a>
</span>

<script src="jquery.js"></script>
<script>
    $(window).scroll(function () {
        console.log($(window).scrollTop());
        if ($(window).scrollTop()>200){
            $('.s1').removeClass('hide');
        }
        else {
            $('.s1').addClass('hide');
        }
    })

</script>
</body>
</html>

View Code

　　2.input 事件(只能用 on 绑定)

　　　实时监听input输入值的变化

　　3.事件绑定

　　　　① .click(function(){...})

　　　　② .on('click',function(){...})

　　　　③移除事件

　　　　　　$('li').off('' click");

　　　　④阻止后续事件执行

　　　　　常见阻止表单提交等，若是input标签里面的值为空就组织它提交，就可使用这两种方法

　　　　　　1). return false;

　　　　2). e.stopPropagation();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">  #action里面若是没写url，默认是将内容提交到当前页面的url处
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.stopPropagation();
    });
</script>
</body>
</html>

　　　　⑤注意

　像click、keydown等DOM中定义的事件，咱们均可以使用`.on()`方法来绑定事件，

可是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。

　　　①阻止事件冒泡

　　子级标签事件发生带动父级标签事件发生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    //冒泡的意思就是由于html能够嵌套，若是你给儿子标签绑定了点事件或者没有绑定点击事件，
　　　　父级标签绑定了点击事件，那么你一点击子标签，无论子标签
    有没有绑定事件，都会触发父级标签的点击事件，若是有，会先触发子标签的点击事件，而后触发父级标签的点击事件，　　
　　无论子标签有没有点击事件，都会一级一级的还往上找点击事件
    //因此咱们要阻止这种事件冒泡
    $("span").click(function (e) { //这个参数e(只是个形参，写evt或者event名字的也不少)表示当前事件自己，这个事件也是一个对象
        alert("span");
        //return false；这个也能够阻止
        e.stopPropagation(); 用事件对象的这个方法就能阻止冒泡 （Propagation：传递的意思）
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

　　②事件委托

　　经过事件冒泡的原理，利用父标签去捕获子标签的事件，将将来添加进来的某些子标签自动绑定上事件。

$("table").on("click", ".delete", function () { //中间的参数是个选择器，前面这个$('table')是父级标签选择器，
　　　　　　　　　　　　选择的是父级标签，意思就是将子标签（子子孙孙）的点击事件委托给了父级标签
  //可是这里注意一点，你console.log(this)；你会发现this仍是触发事件的那个子标签，这个记住昂
  // 删除按钮绑定的事件 
})

页面载入　

　　页面加载完成以后要作的内容　

　　1.window.onload = funtion(){...}

缺点: ( 只能一个 , 慢 )
   1.若是你本身写了两个js文件，每一个js文件中都有一个window.onload的话，那么后引入的文件会把前面引入
的文件的window.onload里面的js代码所有覆盖掉，那么第一个文件的js代码就失去了效果，
   2.还有一个问题就是，window.onload会等到页面上的文档、图片、视频等全部资源都加载完才执行里面的js代码，
致使有些效果的加载比较慢，

　　2.①

$(document).ready(function(){
// 在这里写你的JS代码...
})

　　② (上面的简写经常使用)

$(function(){
// 你在这里写你的代码
})

补充

　　1. each 迭代函数,能够迭代对象和数组

　　　①迭代数组

li =[10,20,30,40]
$.each(li,function(i, v){  
  console.log(i, v);//function里面能够接受两个参数，i是索引，v是每次循环的具体元素。
})

　输出：

　　　　 ②遍历对象

// 为每个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
})

# 方法用来迭代jQuery对象中的每个DOM元素。
　每次回调函数执行时，会传递当前循环次数做为参数(从0开始计数)。
   因为回调函数是在当前DOM元素为上下文的语境中触发的，
   因此关键字  老是指向这个元素。.each()this

　　可直接写成

$("li").addClass("c1");  // 对全部标签作统一操做

　　③ 终止遍历

　　2. .data() 在标签上储存数据

　　① 设置值

　　　　　.data(key, value): 设置值

　　② 取值

　　　.data(key): 取值，没有的话返回undefined

　　③删除数据

　　3.插件

　　①. jQuery.extend(object)

　　　jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

<script>
jQuery.extend({ //$.extend({})
  min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max做为键，值是一个function
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

　　②.jQuery.fn.extend(object)

　　　　给任意的jQuery标签对象添加一个方法

<script>
  jQuery.fn.extend({  //给任意的jQuery标签对象添加一个方法
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

3、jquery动画效果

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给咱们了自定义动画的功能。

显示动画

方式一：

 $("div").show();

解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是经过display: block;实现的。

方式二：

$('div').show(3000);

解释：经过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。

方式三：

 $("div").show("slow");

参数能够是：

slow 慢：600ms
normal 正常：400ms
fast 快：200ms

解释：和方式二相似，也是经过控制元素的宽高、透明度、display属性，逐渐显示。

方式四：

 //show(毫秒值，回调函数;
    $("div").show(5000,function () {
        alert("动画执行完毕！");
    });

解释：动画执行完后，当即执行回调函数。

总结：

上面的四种方式几乎一致：参数能够有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

隐藏动画

方式参照上面的show()方法的方式。以下：

$(selector).hide();

    $(selector).hide(1000); 

    $(selector).hide("slow");

    $(selector).hide(1000, function(){});

实现点击按钮显示盒子，再点击按钮隐藏盒子

代码以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background-color: green;
                border: 1px solid red;
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="box">        
        </div>
        <button id="btn">隐藏</button>    
    </body>
    <script src="jquery-3.3.1.js"></script>
    
    <script type="text/javascript">
        
        //jquery 提供了一些方法 show() hide() 控制元素显示隐藏
        var isShow = true;
        $('#btn').click(function(){
            if(isShow){
                $('#box').show('slow',function(){
                    $(this).text('盒子出来了');            
                    $('#btn').text('显示');
                    isShow = false;
                })
            }else{
                $('#box').hide(2000,function(){
                    $(this).text('');    
                    $('#btn').text('隐藏');
                    isShow = true;
                    
                })
            }
        })
    
        
    </script>
</html>

View Code

开关式显示隐藏动画

$('#box').toggle(3000,function(){});

显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。

代码以下：

    $('#btn').click(function(){
            $('#box').toggle(3000,function(){
                $(this).text('盒子出来了');    
                if ($('#btn').text()=='隐藏') {
                    $('#btn').text('显示');    
                }else{
                    $('#btn').text('隐藏');    
                }
            });
        })

滑入和滑出

一、滑入动画效果：（相似于生活中的卷帘门）

$(selector).slideDown(speed, 回调函数);

解释：下拉动画，显示元素。

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（一样适用于fadeIn/slideDown/slideUp）

二、滑出动画效果：

 $(selector).slideUp(speed, 回调函数);

解释：上拉动画，隐藏元素。

三、滑入滑出切换动画效果：

 $(selector).slideToggle(speed, 回调函数);

代码以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            background-color: green;
        }
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //点击按钮后产生动画
            $("button:eq(0)").click(function () {

                //滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);
                $("div").slideDown(2000, function () {
                    alert("动画执行完毕！");
                });
            })

            //滑出动画
            $("button:eq(1)").click(function () {

                //滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);
                $("div").slideUp(2000, function () {
                    alert("动画执行完毕！");
                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切换（一样有四种用法）
                $("div").slideToggle(1000);
            })

        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div></div>

</body>
</html>

View Code

淡入淡出动画

一、淡入动画效果：

 $(selector).fadeIn(speed, callback);

做用：让元素以淡淡的进入视线的方式展现出来。

二、淡出动画效果：

$(selector).fadeOut(1000);

做用：让元素以渐渐消失的方式隐藏起来

三、淡入淡出切换动画效果：

$(selector).fadeToggle('fast', callback);

做用：经过改变透明度，切换匹配元素的显示或隐藏状态。

参数的含义同show()方法。

代码以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            /*透明度*/
            opacity: 0.5;
            background-color: red;
        }
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //点击按钮后产生动画
            $("button:eq(0)").click(function () {

//                //淡入动画用法1:   fadeIn();   不加参数
                $("div").fadeIn();

//                //淡入动画用法2:   fadeIn(2000);   毫秒值
//                $("div").fadeIn(2000);
//                //经过控制  透明度和display

                //淡入动画用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeIn("slow");
//                $("div").fadeIn("fast");
//                $("div").fadeIn("normal");

                //淡入动画用法4:   fadeIn(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").fadeIn(5000,function () {
//                    alert("动画执行完毕！");
//                });
            })

            //滑出动画
            $("button:eq(1)").click(function () {
//                //滑出动画用法1:   fadeOut();   不加参数
               $("div").fadeOut();

//                //滑出动画用法2:   fadeOut(2000);   毫秒值
//                $("div").fadeOut(2000);  //经过这个方法实现的：display: none;
//                //经过控制  透明度和display

                //滑出动画用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeOut("slow");
//                $("div").fadeOut("fast");
//                $("div").fadeOut("normal");

                //滑出动画用法1:   fadeOut(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").fadeOut(2000,function () {
//                    alert("动画执行完毕！");
//                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切换
                //一样有四种用法
                $("div").fadeToggle(1000);
            })

            $("button:eq(3)").click(function () {
                //改透明度
                //一样有四种用法
                $("div").fadeTo(1000, 0.5, function () {
                    alert(1);
                });
            })
        })
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>改透明度为0.5</button>
<div></div>

</body>
</html>

View Code

自定义动画

语法：

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

做用：执行一组CSS属性的自定义动画。

第一个参数表示：要执行动画的CSS属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后，当即执行的回调函数（可选）

代码以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

                //自定义动画
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("动画执行完毕！");
                    });
                });

            })
        })
    </script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>

View Code

中止动画

$(selector).stop(true, false);

里面的两个参数，有不一样的含义。

第一个参数：

true：后续动画不执行。
false：后续动画会执行。

第二个参数：

true：当即执行完成当前动画。
false：当即中止当前动画。

PS：参数若是都不写，默认两个都是false。实际工做中，直接写stop()用的多。

案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: pink;
        }

        .wrap li {
            background-color: green;
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        //入口函数
        $(document).ready(function () {
            //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
            var jqli = $(".wrap>ul>li");

            //绑定事件
            jqli.mouseenter(function () {
                $(this).children("ul").stop().slideDown(1000);
            });

            //绑定事件(移开隐藏)
            jqli.mouseleave(function () {
                $(this).children("ul").stop().slideUp(1000);
            });
        });
    </script>

</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
                <li><a href="javascript:void(0);">二级菜单4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">二级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
                <li><a href="javascript:void(0);">二级菜单4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">三级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">三级菜单2</a></li>
                <li><a href="javascript:void(0);">三级菜单3</a></li>
                <li><a href="javascript:void(0);">三级菜单4</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

View Code

ps:

javascript:void(0); //跟javascript:;效果同样

上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉以前的动画

4、jquery的属性操做

04-jQuery的属性操做

jquery的属性操做模块分为四个部分：html属性操做，dom属性操做，类样式操做和值操做

html属性操做：是对html文档中的属性进行读取，设置和移除操做。好比attr()、removeAttr()
DOM属性操做：对DOM元素的属性进行读取，设置和移除操做。好比prop()、removeProp()
类样式操做：是指对DOM属性className进行添加，移除操做。好比addClass()、removeClass()、toggleClass()
值操做：是对DOM属性value进行读取和设置操做。好比html()、text()、val()

attr()

设置属性值或者返回被选元素的属性值

       //获取值：attr()设置一个属性值的时候 只是获取值
        var id = $('div').attr('id')
        console.log(id)
        var cla = $('div').attr('class')
        console.log(cla)
        //设置值
        //1.设置一个值 设置div的class为box
        $('div').attr('class','box')
        //2.设置多个值，参数为对象，键值对存储
        $('div').attr({name:'hahaha',class:'happy'})

removeAttr()

移除属性

//删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class');

//删除多个属性
$('#box').removeAttr('name class');

prop()

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

语法：

返回属性的值：

$(selector).prop(property)

设置属性和值：

$(selector).prop(property,value)

设置多个属性和值：

$(selector).prop({property:value, property:value,...})

关于attr()和prop()的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    男<input type="radio" id='test' name="sex"  checked/>
    女<input type="radio" id='test2' name="sex" />
    <button>提交</button>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //获取第一个input
            var el = $('input').first();
            //undefined  由于attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，天然输出undefined
            console.log(el.attr('style'));
            // 输出CSSStyleDeclaration对象，对于一个DOM对象，是具备原生的style对象属性的，因此输出了style对象
            console.log(el.prop('style'));
            console.log(document.getElementById('test').style);

            $('button').click(function(){
                alert(el.prop("checked") ? "男":"女");
            })
            


        })
    </script>
    
</body>
</html>

View Code

何时使用attr()，何时使用prop()？

1.是有true,false两个属性使用prop();

2.其余则使用attr();

addClass（添加多个类名）

为每一个匹配的元素添加指定的类名。

$('div').addClass("box");//追加一个类名到原有的类名

还能够为匹配的元素添加多个类名

$('div').addClass("box box2");//追加多个类名

removeClass

从全部匹配的元素中删除所有或者指定的类。

移除指定的类（一个或多个）

$('div').removeClass('box')；

移除所有的类

$('div').removeClass();

能够经过添加删除类名，来实现元素的显示隐藏

代码以下：

var tag  = false;
        $('span').click(function(){
            if(tag){
                $('span').removeClass('active')
                tag=false;
            }else{
                $('span').addClass('active')
                tag=true;
            }    
})

案例：

代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
     <ul>
         <li class="item">张三</li>
         <li class="item">李四</li>
         <li class="item">王五</li>
     </ul>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){

             $('ul li').click(function(){
                 // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
                 $(this).addClass('active').siblings('li').removeClass('active');
             })
         })
     </script>
    
</body>
</html>

View Code

toggleClass

若是存在（不存在）就删除（添加）一个类。

语法：toggleClass('box')

$('span').click(function(){
    //动态的切换class类名为active
    $(this).toggleClass('active')
})

html

获取值：

语法;

html() 是获取选中标签元素中全部的内容

$('#box').html();

设置值：设置该元素的全部内容会替换掉标签中原来的内容

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

text

获取值：

text() 获取匹配元素包含的文本内容

语法：

$('#box').text();

设置值：
设置该全部的文本内容

$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

注意：值为标签的时候不会被渲染为标签元素只会被当作值渲染到浏览器中

val

获取值：

val()用于表单控件中获取值，好比input textarea select等等

设置值：

$('input').val('设置了表单控件中的值')；

绑定滚动事件$(window).scroll(function(){})绑定click事件对象.click(function(){})

day45 jQuery

jQuery 的两大特色

jQuery 的使用

使用 jQuery 的基本步骤

jQuery 的入口函数和 $ 符号

入口函数（重要）

jQuery的$符号

js中的DOM对象 和 jQuery对象 比较（重点，难点）

两者的区别

两者的相互转换

隔行换色

2、jQuery的选择器

一、jQuery 的基本选择器

二、层级选择器

三、基本过滤选择器

四、属性选择器

样式操做

文本操做

文档处理

页面载入

补充

3、jquery动画效果

显示动画

隐藏动画

实现点击按钮显示盒子，再点击按钮隐藏盒子

开关式显示隐藏动画

滑入和滑出

淡入淡出动画

自定义动画

中止动画

4、jquery的属性操做

04-jQuery的属性操做

attr()

removeAttr()

prop()

关于attr()和prop()的区别

何时使用attr()，何时使用prop()？

addClass（添加多个类名）

removeClass

案例：

toggleClass

html

text

val

jQuery 的入口函数和 `$` 符号

jQuery的`$`符号

js中的DOM对象和 jQuery对象比较（重点，难点）

页面载入　