JQuery知识

一、JQuery动画

jQuery提供了三组基本动画，这些动画都是标准的，有规律的效果，jQuery还提供了自定义动画功能

1、三组基本动画

显示（show）与隐藏（hide）与切换（toggle）是一组动画

滑入（slideDown）与滑出（slideUp）与切换（slideToggle），效果与卷帘门类似

淡入（fadeIn）与淡出（fadeOut）与切换（fadeToggle）不断改变元素的透明度来实现的

1、$obj.show([speed],[callback])

参数一：speed 可选：动画执行的时间

如果不传，就没有动画效果，如果是slide和fade系列，会默认为normal

毫秒值（比如1000），动画在1000ms执行完毕

固定字符串，slow（600ms），normal（400ms）、fast（200ms），如果传入其他字符串，默认是normal

参数二：callback（可选）执行完动画后执行的回调函数

2、slideDown()/slideUp()/slideToggle()

3、fadeIn()/fadeOut()/fadeToggle() /fadeTo('时间','透明度')

2、自定义动画

animate：自定义动画 本质 : 在指定时间内不断改变元素样式值来实现的

$(selector).animate({parmas},[speed],[easing],[callback]);

参数一：{parmas}:要执行动画的css属性（必选）,可以写多个属性

参数二：speed：执行动画时长（可选）

参数三：easing：执行效果，默认为swing（缓动）可以是linear（匀速）(可选)

参数四：callback：动画执行完后立即执行的回调函数（可选）

3、动画队列与停止动画

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成后，才会执行下一个动画

stop方法：停止动画效果

stop(clearQueue,jumpToEnd)

参数一：是否清除队列

参数二：是否跳转到最终效果

 <script>
      $(function () {
        //   模拟动画队列
        $("#btn01").click(function () {
          $("div").slideDown(2000).slideUp(2000);
        });
        // 停止动画
        $("#btn02").click(function () {
        //   $("div").stop();
        //   $("div").stop(false,false);
        //   $("div").stop(true, false);
        //   $("div").stop(true, true);
        //   $("div").stop(false, true);
        });
      });
    </script>

总结: 每次使用动画之前，先调用 stop() ,在调用动画。

二、jQuery节点操作

1、创建结点

1>、html() 设置或获取内容

（1）、不传参，就是获取到对应元素的所有内容

（2）、传参，设置内容，会把原来的内容覆盖，

如果设置的内容中，有标签，会把标签给解析出来

$("#btn01").click(function () {
          // var val=$('#box').html()
          //console.log(val);
          $("#box").html("我是html设置的内容<h1>百度</h1>");
        });

2>、$() 能创建元素，但创建的元素只存在于内存中，如果需要在页面中显示，需要追加

$("#btn02").click(function () {
            // 创建结点
            var $h1=$('<h1>标题</h1>')
           // console.log($h1);
            //追加节点
            $("#box").append($h1)
        });

案例：添加表格

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>添加表格</title>
    <style>
      table {
        border-spacing: 0;
      }
    </style>
    <script src="./js/jQuery.js"></script>
  </head>
  <body>
    <button id="btn01">获取数据</button>
    <br /><br />
    <table border="1px">
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>住址</th>
        </tr>
      </thead>
      <tbody id="tbody">
        <!-- <tr>
          <td>01</td>
          <td>孙悟空</td>
          <td>男</td>
          <td>花果山</td>
        </tr> -->
      </tbody>
    </table>
    <script>
      $(function () {
        var data = [
          {
            id: 01,
            name: "孙悟空",
            sex: "男",
            address: "花果山",
          },
          {
            id: 02,
            name: "猪八戒",
            sex: "男",
            address: "高老庄",
          },
          {
            id: 03,
            name: "沙悟净",
            sex: "男",
            address: "通天河",
          },
        ];
        
        $("#btn01").click(function () {
          //第一种 html() 添加方式
          var list = [];
          for (var i = 0; i < data.length; i++) {
            //生成tr
            list.push("<tr>");
            //生成td
            for (var key in data[i]) {
              list.push("<td>");
              list.push(data[i][key]);
              list.push("</td>");
            }
            list.push("</tr>");
          }
          var listText=list.join('')
          $('#tbody').html(listText) 
          //第二种方式  $() 添加方式
        /*   for (var i = 0; i < data.length; i++) {
            var $tr = $("<tr><td>" + data[i]["id"] + "</td><td>" + data[i]["name"] + "</td><td>" + data[i]["sex"] + "</td><td>" + data[i]["address"] + "</td></tr>");
            $("#tbody").append($tr);
          } */
        });
      });
    </script>
  </body>
</html>

2、添加结点

（1）、父元素.append(子元素) 在被选元素的结尾插入内容

注意：如果把已经存在的子元素append到父元素中，则是会剪切过去作为最后一个子元素添加

$("#append").click(function () {
          var $h1 = $("<h1>一级标题</h1>");
          $("ul").append($h1);
        });

（2）、父元素.prepend() 在被选元素的开头插入内容

注意：如果把已经存在的子元素prepend到父元素中，则是会剪切过去作为第一个子元素添加

$("#prepend").click(function () {
          var $h1 = $("<h1>一级标题</h1>");
          $("ul").prepend($h1);
        });

（3）、元素A.before(元素B)把元素A插入到元素B的前面，作为兄弟元素添加

 $("#before").click(function () {
          var $h1 = $("<h1>一级标题</h1>");
          $("#oltwo").before($h1);
        });

（4）、元素A.after(元素B)把元素A插入到元素B的后面，作为兄弟元素添加

$("#after").click(function () {
          var $h1 = $("<h1>一级标题</h1>");
          $("#oltwo").after($h1);
        });

（5）、子元素.appendTo(父元素) 把子元素作为父元素的最后一个元素添加

$("#appendTo").click(function () {
          var $h1 = $("<h1>一级标题</h1>");
          $h1.appendTo("ol");
        });

（6）、子元素.prependTo (父元素) 把子元素作为父元素的第一个元素添加

$("#prependTo").click(function () {
          var $h1 = $("<h1>一级标题</h1>");
          $h1.prependTo("ol");
        });

案例：城市选择

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>城市选择</title>
    <style>
        select {
            width: 200px;
            background-color: teal;
            height: 200px;
            font-size: 20px;
        }
        .btn-box {
            width: 30px;
            display: inline-block;
            vertical-align: top;
        }
    </style>
<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="5">西红柿</option>
</select>
<div class="btn-box">
    <!--实体字符-->
    <button id="btn-sel-all"> &gt;&gt; </button>
    <button id="btn-sel-none"> &lt;&lt; </button>
    <button id="btn-sel"> &gt;</button>
    <button id="btn-back"> &lt; </button>
</div>
<select id="tar-city" name="tar-city" multiple></select>
 </body>
</html>
<script src="./js/jQuery.js"></script>
<script>
  $(function () {
    //1.全部到右边
    //找到左边select下拉菜单的所有option项,把这些option项都添加到右边的select下拉菜单中去.
    $('#btn-sel-all').click(function () {
      $('#src-city>option').appendTo($('#tar-city'));
    });

    //2.全部到左边
    //找到右边select下拉菜单中的所有option项,把这些option项都添加到左边的select下拉菜单中去.
    $('#btn-sel-none').click(function () {
      $('#tar-city>option').appendTo($('#src-city'));
    });

    //3.选中的到右边.
    //找到左边select下拉菜单中,被选中的option项, 把这些option项添加到右边的select下拉菜单中.
    $('#btn-sel').click(function () {
      $('#src-city>option:selected').appendTo($('#tar-city'));
    });
    
    //4.选中的到左边.
    //找到右边select下拉菜单中,被选中的option项,把这些option项添加到左边的select下拉菜单中.
    $('#btn-back').click(function () {
      $('#tar-city>option:selected').appendTo($('#src-city'));
    });
  });
</script>

3、清空结点与删除结点

empty：清空指定节点的所有元素，自身保留（清理门户）

remove：相对于empty，自身也会删除（自杀）

$('div').empty();//清除div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）
$('div').html('')//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除
$("#l2").remove();//自杀 移除某一个元素

4、克隆结点

clone() 克隆节点只存在与内存中，如果要在页面上显示，就应该添加到页面上

clone(参数) 参数是布尔值 true false，默认是false

true：表示会把事件一起克隆

false：就不会克隆事件

 $("#btn01").click(function () {
          //克隆h1
          var $h1 = $("h1").clone();
          //把克隆h1放到body中
          $("body").append($h1);
        });

5、val()获取表单元素内容

val()

不给参数，获取表单的内容

给参数，就是设置表单的内容

  $("#inp1").click(function () {
        //   var text = $("#usename").val();
         $("#usename").val('hello world');
        //   console.log(text);
        });

三、jQuery操作属性

1、attr()、removeAttr()

（1）、attr() 设置属性，可以添加单属性，也可以添加多属性，传入{}参数即可

参数1:需要设置的属性

参数2:设置属性的值

 $("#btn02").click(function () {
          //1.1 可以更改原有的属性
          //$('img').attr('src','./img/pic_02.jpg');
          //1.2 可以更改自定义属性
          //$('img').attr('aaa','AAA');
          //1.3 如果元素原来没有这个属性，那就是添加属性
          //$('img').attr('bbb','BBB')
          $("img").attr({
            src: "./img/pic_02.jpg",
            aaa: "AAA",
            bbb: "BBB",
          });
        });

（2）、获取属性 attr(属性名) 可以获取原有属性值，自定义属性值，

如果是未定义的属性，则获得undefined

 $("#btn01").click(function () {
          var val = $("img").attr("src");
          console.log(val);
        });

（3）、移除属性 removeAttr(属性名) 也可以移除多个属性，removeAttr('属性名1 属性名2')

 $("#btn03").click(function () {
          //   $("img").removeAttr('aaa');
          $("img").removeAttr('title aaa');
        });

案例：动物相册

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>动物相册</title>
    <style type="text/css">
      body {
        font-family: "Helvetica", "Arial", serif;
        color: #333;
        background-color: #ccc;
        margin: 1em 10%;
      }
      h1 {
        color: #333;
        background-color: transparent;
      }
      a {
        color: #c60;
        background-color: transparent;
        font-weight: bold;
        text-decoration: none;
      }
      ul {
        padding: 0;
      }
      li {
        float: left;
        padding: 1em;
        list-style: none;
      }
      #imagegallery {
        list-style: none;
      }


      #imagegallery li {
        margin: 0px 20px 20px 0px;
        padding: 0px;
        display: inline;
      }


      #imagegallery li a img {
        border: 0;
      }
    </style>
  </head>
  <body>
    <h2>动物画廊</h2>


    <ul id="imagegallery">
      <li>
        <a href="./img/pic_01.jpg" title="小狗">
          <img src="./img/pic_01.jpg" width="100" alt="小狗" />
        </a>
      </li>
      <li>
        <a href="./img/pic_02.jpg" title="小猫">
          <img src="./img/pic_02.jpg" width="100" alt="小猫" />
        </a>
      </li>
      <li>
        <a href="./img/pic_04.jpg" title="小兔子">
          <img src="./img/pic_04.jpg" width="100" alt="小兔子" />
        </a>
      </li>
      <li>
        <a href="./img/pic_05.jpg" title="小熊">
          <img src="./img/pic_05.jpg" width="100" alt="小熊" />
        </a>
      </li>
    </ul>
    <div style="clear: both"></div>
    <img id="image" src="./img/pic_01.jpg" width="450px" />
    <p id="des">选择一个图片</p>
    <script src="./js/jQuery.js"></script>
    <script>
      $(function () {
        //1.需求
        //给小图片a标签设置一个单击事件.
        //让id为image的img标签修改src属性为当前点击的a标签的href属性的值
        //让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.
        $("#imagegallery>li>a").click(function () {
          //获取当前点击的a标签的href属性的值和title属性的值。
          var srcValue = $(this).attr("href");
          var contentValue = $(this).attr("title");
          // console.log(srcValue, contentValue);
          //给img标签的src属性赋值，以及给p标签的内容赋值。
          $("#image").attr("src", srcValue);
          $("#des").text(contentValue);
          //阻止默认跳转
          return false;
        });
      });
    </script>
  </body>
</html>

2、prop操作

在jQuery1.6版本之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法

//设置属性

$(':checked').prop('checked',true)

//获取属性

$(':checked').prop('checked') //返回true或者false

案例：全选反选

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>表格全选反选</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .wrap {
        width: 300px;
        margin: 100px auto 0;
      }


      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
      }


      th,
      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }


      th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
      }


      td {
        font: 14px "微软雅黑";
      }


      tbody tr {
        background-color: #f0f0f0;
      }


      tbody tr:hover {
        cursor: pointer;
        background-color: #fafafa;
      }
    </style>
  </head>


  <body>
    <div class="wrap">
      <table>
        <thead>
          <tr>
            <th>
              <input type="checkbox" id="j_cbAll" />
            </th>
            <th>姓名</th>
            <th>性别</th>
          </tr>
        </thead>
        <tbody id="j_tb">
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>唐僧</td>
            <td>男</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>孙悟空</td>
            <td>男</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>猪八戒</td>
            <td>男</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>白骨精</td>
            <td>女</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="one"></div>
  </body>
  <script src="./js/jQuery.js"></script>
  <script>
    $(function () {
      //需求1:上面的多选框选中,下面的多选框们跟着选中,上面的多选框没有选中,下面的多选框们跟着不选中.
      //需求2:下面的多选框们,都有单击事件:
      //如果下面的多选框们都选中了,那么上面的那个多选框跟着选中,如果下面多选框有一个没有选中,那么上面的多选框就不选中.


      //需求1：
      $("#j_cbAll").click(function () {
        //获取这多选框的checked值。
        var checkedValue = $(this).prop("checked");
        //console.log(checkedValue);
        //让下面的多选框们的checked跟随这个checkedValue
        $("#j_tb input").prop("checked", checkedValue);
      });


      //需求2：
      $("#j_tb input").click(function () {
        //第一种方式 判断下面的那四个多选框是否都被选中了。
        var numOfAll = $("#j_tb input").length; //获取到下面所有多选框的个数。
        var numOfSelect = $("#j_tb input:checked").length; //获取到下面被选中的多选框的个数。
        // console.log(numOfAll + ":" + numOfSelect);
        //判断
        // if(numOfAll == numOfSelect){
        //     //全部被选中。
        //     $('#j_cbAll').prop('checked',true);
        // }else {
        //     //有的有没选中。
        //     $('#j_cbAll').prop('checked',false);
        // }
        
        //上面这个判断优化。
        $("#j_cbAll").prop("checked", numOfAll == numOfSelect);
      });
    });
  </script>
</html>

四、jQuery尺寸和位置操作

1、width方法和heigth方法

css()方法获取box的宽高

//1.css()方法 获取box的宽高
var cssHeight = $(".box").css("height");
var cssWidht = $(".box").css("height");
//console.log(cssHeight,cssWidht); //200px

设置或获取高度，不包括内边距、边框和外边距

//带参数  设置宽高
$('div').height(200)
//不带参数  获取宽高
$('div').height()

获取网页的可视区宽高

//获取可视区宽高
$(window).width()
//获取可视区高度
$(window).height()

2、innerWidth/innerHeight/outerWidth/outerHeight

//3、innerWidth/innerHeight 包括内边距

var innerWidth = $(".box").innerWidth();

var innerHeight = $(".box").innerHeight();

//console.log(innerWidth, innerHeight, "inner");//240



//4、outerWidth/outerHeight 包括内边距和边框

var outerWidth = $(".box").outerWidth();

var outerHeight = $(".box").outerHeight();

// console.log(outerWidth, outerHeight, "outer");//260



//5、outerWidth(true)/outerHeight(true) 包括内边距和边框和外边距

var outerWidthT = $(".box").outerWidth(true);

var outerHeightT = $(".box").outerHeight(true);

console.log(outerWidthT, outerHeightT, "outerT");//320

3、scrollTop和scrollLeft

设置或者获取垂直滚动条的位置

//获取页面被卷去的高度,如果加参数数值，可以设置被卷去的高度

$(window).scrollTop()

//获取页面被卷去的宽度，,如果加参数数值，可以设置被卷去的宽度

$(window).scrollLeft()

4、offset方法与position方法

offset方法获取元素距离document的位置

position方法获取的是元素距离有定位的父元素的位置

//获取元素距离document的位置，返回值为对象：{left:100,top:100}

$(selector).offset()

//获取相对于其最近的有定位的父元素的位置

$(selector).position()