jQuery教程-优快云博客

JS库

即library。是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数，比如动画animate，hide，show，比如获取元素等。【简单理解就是一个JS文件里面对原生的JS进行了封装，存放在里面方便我们快速高效的调用】

jQuery入口函数

入口函数的两种写法

<script>
  //  1
  $(document).ready(function () {

  })
  
  //  2
  $(function () {

  })
</script>

jquery入口函数与window.onload入口函数的区别

window.onload入口函数不能写多个，jquery入口函数可以写多个
执行时机不同：jQuery入口函数快于window.onload。因为：
- jquery入口函数要等待页面上dom树加载完成后执行
- window.onload要等待页面上的所有资源（dom树/外部css/js链接，图片等）加载完成后执行

jQuery 文件结构, $及其参数

// 文件结构
  // 其实就是一个自执行函数
  (function () {
    window.jQuery = window.$ = jQuery
  } ())

  // 引入一个js文件是会执行这个js文件中的代码的
  // jQuery文件是一个自执行函数，执行这个jQuery中的代码就是其实就是执行这个自执行函数
  // 这个自执行文件就是给window对象添加一个jQuery和$属性
  // 这个$其实是和jQuery等价的，是一个函数


  // $是一个函数
  // 参数传递不同，效果就不一样
  // 1.如果参数传递的是一个匿名函数-入口函数
  $(function () {

  })
  // 2.如果参数传递的是一个字符串：选择器/创建一个标签
  $('#one');
  $('<div>我是一个div</div>');

  // 3.如果参数是一个dom对象，那他就会把dom对象转换为jQuery对象
  $(dom对象)

Dom对象和jQuery对象

$(function () {
    // 1.dom对象：原生js选择器获取到的对象
    // 特点：只能调用dom方法或者属性，不能调用jQuery的属性或方法
    document.getElementById("");
    document.getElementsByTagName("");

    var div1 = document.getElementById("one");
    div1.style.backgroundColor("pink");   // dom对象是可以调用dom的属性和方法的
    div1.css("backgroundColor", "lightgrey");   // 报错div1.css is not a function，dom对象不能调用jQuery的属性或方法

    // 2.jQuery对象：利用jQuery选择器获取到的对象
    // 特点：只能调用jQuery的方法或者属性，不能调用原生js dom对象的属性和方法

    var $div1 = $('one');
    $div1.css('backgroundColor', 'lightgrey'); // jQuery对象可以调用jQuery的属性或方法
    $div1.style.backgroundColor = "pink";   // 报错了


    // 3.jQuery对象长什么样
    // jQuery对象是一个伪数组，jQuery对象其实是dom对象的一个包装集
    var div1 = document.getElementById('one');
    console.log("dom对象");
    console.log(div1);

    var $div1 = $('one');
    console.log("jQuery对象");
    console.log($div1);

    //验证jQuery对象是不是一个数组
    console.log("验证jQuery对象是不是一个数组", $div1.__proto__ === Array.prototype);   // false, jQuery对象是一个伪数组

    // 
    var $divs = $('div');
    console.log("$divs",$divs);
  })

dom对象如何转换为jQuery对象

$(function(){
    console.log("dom转换成jQuery:");
    // dom对象转换成jQuery对象
    var div1 = document.getElementById('one');
    var $div1 = $(div1)
    console.log(div1);

    console.log("jQuery转换成dom:");
    // jQuery对象转换成dom对象
    // 两种方法
    // 1.使用下表来取
    var $divs = $('div');
    console.log("$divs",$divs);
    var div1 = $divs[0];
    console.log("div1",div1);

    // 2.使用jQuery的方法get()
    var $divs = $('div');
    var div2 = $divs.get(1);
    console.log("div2",div2);
  })

开关灯demo

<body>
  <button>开灯</button>
  <button>关灯</button>
  <img src="./Mickey_8.jpg">
</body>
<script>
  $(function() {
    var btns = document.getElementsByTagName('button');
    // btns[1].onclick  这块是用dom方法获取的
    btns[1].onclick = function(){
      $('body').css('background', 'lightgrey');
    }

    // $(btns[0]).click  这块是用jQuery获取的
    $(btns[0]).click(function (){
      $('body')[0].style.backgroundColor = 'white'
    })
  })
</script>

JQuery ？

jquery其实就是一个封装了很多方法的js库。学习jquery其实就是学习这些方法怎么使用。（调用参数，返回值，方法有什么效果等待）

设置、获取文本text()

<body>
  <button id="getTxt">获取文本</button>
  <button id="setTxt">设置文本</button>

  <div id="div1">
    <p>hello world 1</p>
    <span>hi ~</span>
  </div>

  <div>
    <p>hello world 2</p>
    <span>hi !</span>
  </div>
</body>

<script>
  $(function () {
    // 获取文本
    $('#getTxt').click(function () {
      // 这里的 .text() 不给参数的话就是获取文本

      // 获取到 id 为 div1 的所有文本（包括后代元素的文本）
      // console.log($('#div1').text());

      // 获取 标签 为 div 的所有文本（包括后代元素的文本）
      // 包含了多个dom元素的jquery对象，通过text()方法获取文本，会把所有dom元素的文本获取到
      console.log($('div').text());
    })

    $('#setTxt').click(function () {
      // 给 id 为 div1 的标签设置文本
      // 设置文本会覆盖该文本原来的内容,如果设置的文本中包含了标签，是不会把这个标签解析出来的
      // $('#div1').text('I am settext');
      // $('#div1').text('I am settext<a>hihi</a>');

      // 给标签为div的元素设置文本
      // 包含了多个dom元素的jquery对象，通过text()方法设置文本，会把所有dom元素的文本设置到
      $('div').text('set all text'); // 这里有一个隐式迭代（隐式便利），也就是把所有的div标签都便利一次并赋给新的值
    })
  })
</script>

设置获取样式CSS

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    #div1 {
      height: 200px;
      background-color: pink;
      border: 1px solid gray;
    }
  </style>
</head>

<body>
  <input type="button" value="set" id="setBtn">
  <input type="button" value="get" id="getBtn">
  <div id="div1" style="width: 200px"></div>
  <div id="div2" style="width: 300px"></div>
  <div id="div3" style="width: 400px"></div>
</body>

<script>
  $(function () {
    // css(): 设置/获取样式

    // 获取样式： css()方法设置参数为要获取值的样式名
    $('#getBtn').click(function () {
      //   console.log($('#div1').css('width'));
      //   console.log($('#div1').css('background-color'));
      //   console.log($('#div1').css('border'));
      //   注意：在ie浏览器中，要获取边框这样的样式值，需要给一个准确的边框
      //   console.log($('#div1').css('border-top-width'));

      // 隐式迭代：
      // 设置操作的时候：如果是多个元素，那么给所有元素设置相同的值
      // 获取操作的时候：如果是多个元素，那么只会返回第一个元素的值

      // 获取标签为div的元素们的样式
      // 下面的方法只能获取到第一个dom对象的样式：200px
      console.log($('div').css('width'));
    })

    // 设置样式: css('width', '500px');
    // 设置的样式是行内样式
    $('#setBtn').click(function () {
      // 给id为div1的元素设置样式
      // 设置单样式（挨个设置）
      // $('#div1').css('width', '300px');
      // $('#div1').css('height', 300);
      // $('#div1').css('background-color', 'lightblue');

      // 设置多样式
      // $('#div1').css({
      //   width: 300,
      //   'height': '300px',
      //   'background-color': 'lightblue'
      // })

      // 给标签为div的元素们设置样式
      $('div').css({
        width: 300,
        'height': '300px',
        'background-color': 'pink',
        border: '10px solid gray',
        'margin-top': '10px'
      })
    })
  })
</script>
</html>

基本选择器

jquery选择器就是jquery提供的一种方法，可以更加方便的获取到页面中的元素。注意：jquery选择器返回的是jquery的对象

其实和css选择器的用法差不多

名称	用法	描述
id选择器	$(’#id’)	获取指定id的元素
类选择器	$(’.class’)	获取同一类class的元素
标签选择器	$(‘div’)	获取同一类标签的所有元素
并集选择器	$(‘div, p, li’)	使用逗号分割，只要符合条件之一就好
交集选择器	$(‘div.redClass’)	获取class为redClass的div元素

层级选择器

名称	用法	描述
子代选择器	$(‘ul > li’)	使用-号，获取儿子层级的元素，注意：并不会获取孙子层级的元素
后代选择器	$(‘ul li’)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

过滤选择器

这类选择器都带冒号:

名称	用法	描述
:eq(index)	$(‘li : eq(2)’).css(‘color’, ‘red’)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(‘li : odd’).css(‘color’: 'red;)	获取到的li元素中，选择索引号为奇数的元素
:even	$(‘li : even’.css(‘color’, ‘red’))	获取到的li元素中，选择索引号为偶数的元素

筛选选择器

筛选选择器和过滤选择器有些类似，但是用法不一样，主要是方法。

名称	用法	描述
children(selector)	$(‘ul’).children(‘li’)	相当于$(‘ul-li’)，子类选择器
find(selector)	$(‘ul’).find(‘li’)	相当于$(‘ul li’)，后代选择器
siblings(selector)	$(’#first’).siblings(‘li’)	查找兄弟节点，不包括自己本身
parent()	$(’#first’).parent()	查找父亲
eq(index)	$(‘li’).eq(2)	相当于$(‘li:eq(2)’), index从0开始
next()	$(‘li’).next()	找下一个兄弟
prev()	$(‘li’).prev()	找上一个兄弟

筛选选择器demo👇

1.突出展示demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    body {
      background-color: black;
    }
    .warp {
      width: 900px;
      background-color: lightgrey;
      margin: auto;
    }
    .warp ul {
      list-style: none;
    }
    .warp img {
      padding: 2px;
      width: 280px;
      float: left;
    }
  </style>
</head>
<body>
  <div class="warp">
    <ul>
      <li><a href="#"><img src="./Mickey_8.jpg" alt=""></a></li>
      <li><a href="#"><img src="./Mickey_8.jpg" alt=""></a></li>
      <li><a href="#"><img src="./Mickey_8.jpg" alt=""></a></li>
      <li><a href="#"><img src="./Mickey_8.jpg" alt=""></a></li>
      <li><a href="#"><img src="./Mickey_8.jpg" alt=""></a></li>
      <li><a href="#"><img src="./Mickey_8.jpg" alt=""></a></li>
    </ul>
  </div>
</body>
<script>
  $(function () {
    //需求1: 给图片所在的li标签设置鼠标移入事件：当前li标签的透明度为1，其他li标签的透明度为0.4
    //需求2: 鼠标离开外部div时所有li标签的透明度都为1

    // 获取每个图片所在的li的两种方法：
    //1.  $('.warp li')
    //2.  $('warp').find('li')

    // 完成需求1
    $('.warp').find('li').mouseenter(function () {
      // 下面这个方法有返回值，返回值就是设置这个方法的元素本身
      // $(this).css('opacity', 1)   
      // siblings(): 查找兄弟节点，不包括自己本身
      $(this).css('opacity', 1).siblings('li').css('opacity', 0.4);
    })

    // 完成需求2
    $('.warp').mouseout(function () {
      // $('.warp').find('li').css('opacity', 1);
      // 也可以用下面这个方式来写，这里的 $(this) 指的就是这整个大盒子（外部的div）
      $(this).find('li').css('opacity', 1);

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

2.手风琴demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  </style>
  <style>
    body {
      background-color: lightcyan;
    }

    .menuGroup {
      list-style: none;
      width: 200px;
      background-color: lightgrey;
      border: 1px pink solid;
    }

    .menuGroup div {
      height: 200px;
      background-color: white;
      display: none;
    }
  </style>
</head>

<body>
  <ul class="parentWarp">
    <li class="menuGroup">
      <span class="groupTitle">title_1</span>
      <div>content_1</div>
    </li>
    <li class="menuGroup">
      <span class="groupTitle">title_2</span>
      <div>content_2</div>
    </li>
    <li class="menuGroup">
      <span class="groupTitle">title_3</span>
      <div>content_3</div>
    </li>
    <li class="menuGroup">
      <span class="groupTitle">title_4</span>
      <div>content_4</div>
    </li>
  </ul>
</body>
<script>
  $(function () {
    // 需求：点击标题li标签，对应的div显示，其他的兄弟标签li下面的div隐藏
    $('.parentWarp>.menuGroup').click(function () {
      // jQuery特性：隐式迭代，链式编程（在于一个方法返回的是一个jQuery对象，既然是jQuery对象所以就可以继续点出jQuery的方法来）
      // 下面这两种方法都可以，推荐2
      // $(this).find('div').css('display', 'block').parent().siblings('li').find('div').css('display', 'none')
      $(this).children('div').show().parent().siblings('li').children('div').hide();
    });
  })
</script>
</html>

3.淘宝服饰精品demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    .warp {
      margin: auto;
      width: 900px;
      height: 600px;
      display: flex;
      background: lightcyan;
    }
    #left {
      flex: 1;
      background-color: lightcoral;
    }
    #center {
      flex: 3;
      background-color: lightgoldenrodyellow;
      border: 10px linen solid;
    }
    #right {
      flex: 1;
      background-color: lightgrey;
    }
    #left li,
    #right li {
      height: 30%;
      margin: 20px 10px 0 0;
    }
    #left li a,
    #right li a {
      display: block;
      width: 90%;
      text-align: center;
      background-color: white;
    }
    #center li a img {
      width: 90%;
      height: 100%;
      margin-top: 50px;
    }
    li {
      list-style: none;
    }
    a {
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div class="warp">
    <ul id="left">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
    </ul>
    <ul id="center">
      <li><a href="#"><img src="./demoimg_1.jpeg" alt=""></a></li>
      <li><a href="#"><img src="./demoimg_2.jpeg" alt=""></a></li>
      <li><a href="#"><img src="./demoimg_3.jpeg" alt=""></a></li>
      <li><a href="#"><img src="./demoimg_4.jpeg" alt=""></a></li>
      <li><a href="#"><img src="./demoimg_5.jpeg" alt=""></a></li>
      <li><a href="#"><img src="./demoimg_6.jpeg" alt=""></a></li>
    </ul>
    <ul id="right">
      <li><a href="#">D</a></li>
      <li><a href="#">E</a></li>
      <li><a href="#">F</a></li>
    </ul>
  </div>
</body>

<script>
  $(function () {
    // 需求: 给左边/右边的li标签们设置鼠标移入事件，让中间索引对应的li显示，其他的li隐藏
    $('#left>li').mouseenter(function () {
      // 1 获取当前鼠标移入的这个li标签的索引
      var index = $(this).index();

      // 2 让中间索引对应的li标签显示，其他的隐藏
      // 用下面这个方法的话需要拼接一下index
      // $('#center>li:eq('+index+')')
      // 或者用下面的这个方法
      $('#center>li').eq(index).show().siblings('li').hide();
    })

    $('#right>li').mouseenter(function () {
      // 1 获取当前鼠标移入的这个li标签的索引
      var index = $(this).index();

      // 2 让中间索引对应的li标签显示，其他的隐藏
      // 用下面这个方法的话需要拼接一下index
      // $('#center>li:eq('+index+')')
      // 或者用下面的这个方法
      $('#center>li').eq(index+3).show().siblings('li').hide();
    })
  })
</script>
</html>

class类操作

addClass / removeClass / hasClass / toggleClass

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
      margin-top: 20px;
    }
    .bgc {
      background-color: lightcoral;
    }
    .fontSize {
      font-size: 30px;
    }
    .width200 {
      width: 200px;
    }
  </style>
</head>
<body>
  <input type="button" value="添加类" id="addClass">
  <input type="button" value="移除类" id="removeClass">
  <input type="button" value="判断类" id="hasClass">
  <input type="button" value="切换类" id="toggleClass">
  <div id="div1" class="bgc">
    div
  </div>
</body>
<script>
  $(function () {
    // 添加类  .addClass(类名)
    $('#addClass').click(function () {
      // 添加单个类
      // $('#div1').addClass('fontSize');
      // 添加多个类
      $('#div1').addClass('fontSize width200');
    })
    // 移除类   .removeClass(类名);
    $('#removeClass').click(function(){
      // 移除单个类
      // $('#div1').removeClass('fontSize');
      // 移除多个类
      // $('#div1').removeClass('fontSize width200');
      // 移除多有类
      $('#div1').removeClass();
    })
    // 判断类     .hasClass(类名)
    $('#hasClass').click(function(){
      // 判断一个元素有没有某个类，有返回true,没有返回false
      console.log($('#div1').hasClass('fontSize'));
    })
    // 切换类     .toggleClass(类名)
    $('#toggleClass').click(function(){
      // 如果元素有某个类，则移除这个类
      // 如果元素没有这个类，就添加这个类
      $('#div1').toggleClass('fontSize');
    })
  })
</script>
</html>

class类操作的 tab栏切换demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    .wrapper {
      width: 800px;
      margin: auto;
      background-color: antiquewhite;
    }
    ul {
      list-style: none;
      background-color: honeydew;
      height: 50px;
    }
    li {
      width: 100px;
      float: left;
      margin: 5px 80px 10px 0;
      border: 1px solid #000;
      text-align: center;
    }
    .tab {
      border: 1px solid gray;
      height: 36px;
    }
    img {
      width: 400px;
      height: 300px;
      margin-left: 140px;

    }
    .products {
      height: 400px;
      border: 1px solid #ccc;
    }
    .products .main {
      float: left;
      margin: 50px 100px 0 50px;
      display: none;
    }
    .products .main.selected {
      display: block;
    }
    .tab li.active {
      border: 3px solid pink;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <ul class="tab">
      <li class="tab-item active">tab_1</li>
      <li class="tab-item">tab_2</li>
      <li class="tab-item">tab_3</li>
      <li class="tab-item">tab_4</li>
    </ul>
    <div class="products">
      <div class="main seleted">
        <a href="#"><img src="demoimg_1.jpeg" alt=""></a>
      </div>
      <div class="main">
        <a href="#"><img src="demoimg_2.jpeg" alt=""></a>
      </div>
      <div class="main">
        <a href="#"><img src="demoimg_3.jpeg" alt=""></a>
      </div>
      <div class="main">
        <a href="#"><img src="demoimg_4.jpeg" alt=""></a>
      </div>
    </div>
  </div>
</body>
<script>
$(function(){
  // 需求1：给tab栏的每一个li标签设置鼠标移入事件，当前li添加active类，其他的li移除active类
  // 需求2：找到当前tab栏索引一致的div,给该div添加select类，其他div移除select类

  // 需求1
  $('.tab > .tab-item').mouseenter(function(){
    $(this).addClass('active').siblings('li').removeClass('active');

    // 获取鼠标当前移入的li标签的索引
    var index = $(this).index();

    // 需求2
    $('.products > .main').eq(index).addClass('selected').siblings('div').removeClass('selected');
  })
})
</script>
</html>

jQuery动画

jQuery提供了三组基本动画和自定义动画的功能

三组基本动画

显示 show() 和隐藏 hide()
滑入 slideDown() 、滑出 slideUp() 和切换 slideTpggle() ，效果与卷帘门类似
淡入 fadeIn() 、淡出 fadeOut() 和切换 fadeToggle()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: antiquewhite;
      display: none;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <!-- 动画一 -->
  <input type="button" value="显示" id="show">
  <input type="button" value="隐藏" id="hide">
  <input type="button" value="切换" id="toggle">

  <!-- 动画二 -->
  <input type="button" value="滑入" id="slideDown">
  <input type="button" value="滑出" id="slideUp">
  <input type="button" value="切换" id="slideToggle">


  <!-- 动画三 -->
  <input type="button" value="淡入" id="fadeIn">
  <input type="button" value="淡出" id="fadeOut">
  <input type="button" value="切换" id="fadeToggle">
  <input type="button" value="淡入到哪里" id="fadeTo">


  <div id="div1"></div>

</body>
<script>
  $(function(){
    // 显示: show()
    // 参数1: 代表执行动画的时长，毫秒数/代表时长的字符串（fase/normal/slow）
    // 参数2: 代表动画执行完毕之后的回调函数
    $('#show').click(function(){
      // 如果show()没有参数，那就没有动画效果
      // $('#div1').show();

      // 想要动画效果，就要给参数 - 给一个动画执行的时间参数：毫秒数
      $('#div1').show(2000);
      // // 想要动画效果，就要给参数-代表时长的字符串（fase/normal/slow）
      // 注意：如果代表时长的单词写错了，就相当于写了一个normal（400毫秒）
      // $('#div1').show('fast');    // 200毫秒
      // $('#div1').show('normal');    // 400毫秒
      // $('#div1').show('slow');    // 600毫秒

      // 想要动画效果，就要给参数 - 给了两个参数：(毫秒数,回调函数)
      // $('#div1').show(2000, function(){
      //   alert("动画展示")
      // })
    })

    $('#hide').click(function(){
      // 没有参数就是没有动画效果
      // $('#div1').hide();
      $('#div1').hide(2000);
      // $('#div1').hide(2000, function(){
      //   alert("动画隐藏")
      // });
    })

    $('#toggle').click(function(){
      // 如果元素是隐藏状态，就动画显示
      // 如果元素是显示状态，就动画隐藏
      $('#div1').toggle(2000);
    })

    $('#slideDown').click(function(){
      // 没有参数是有动画效果的（因为会有一个默认的动画时长：normal（400毫秒））
      // $('#div1').slideDown();
      // 给一个动画执行的时间参数 / 代表时长的字符串（fase/normal/slow）
      $('#div1').slideDown(2000);
      // $('#div1').slideDown(2000, function(){
      //   alert("ahhh~")
      // });
    })

    $('#slideUp').click(function(){
      // $('#div1').slideUp();
      $('#div1').slideUp(2000);
      // $('#div1').slideUp(2000, function(){
      //   alert("oooo~")
      // });
    })

    $('#slideToggle').click(function(){
      $('#div1').slideToggle(1000);
    })

    $('#fadeIn').click(function(){
      // $('#div1').fadeIn();
      $('#div1').fadeIn(2000);
      // $('#div1').fadeIn(2000, function(){
      //   alert("hi");
      // });
    })

    $('#fadeOut').click(function(){
      // $('#div1').fadeOut();
      $('#div1').fadeOut(2000);
      // $('#div1').fadeOut(2000, function(){
      //   alert("bye");
      // });
    })

    $('#fadeToggle').click(function(){
      $('#div1').fadeToggle(2000);
    })

    // fadeTo()  淡入到哪里，是指控制透明度（正常情况下淡入淡出的透明度都是从0到1），这里可以设置透明度淡入到哪里的值
    $('#fadeTo').click(function(){
      $('#div1').fadeTo(1000, 0.2)
    })
  })
</script>

</html>

自定义动画 : animate()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  <style>
    div {
      width: 50px;
      height: 50px;
      background-color: antiquewhite;
      position: absolute;
      left: 0px;
    }

    #div1 {
      top: 50px;
    }

    #div2 {
      top: 270px;
    }
  </style>
</head>

<body>
  <input type="button" value="从左到右800" id="lr800">
  <div id="div1"></div>
  <div id="div2"></div>

</body>

<script>
  $(function () {
    //自定义动画  animate(prop, speed, easing, callback)
    // 参数1 prop: 必须的，对象 ，要执行动画的css属性
    // 参数2 speed: 可选的，执行动画的时长
    // 参数3 easing: 可选的，执行效果：是匀速（linear）还是缓动（swing）    
    // 参数4 callback: 可选的，动画执行完后的回调函数
    $('#lr800').click(function () {
      // 让div的动画移动到800的位置

      // 匀速   默认用这种      
      // $('#div1').animate({
      //   left: 800,
      //   width: 200,
      //   height: 200,
      //   opacity: 0.5
      // }, 2000, 'linear', function(){
      //   alert("动画执行完毕了")
      // })

      // 既然有回调函数，就可以在回调函数中写代码，把它做成动画
      $('#div1').animate({
        left: 800,
        width: 200,
        height: 200,
        opacity: 0.5
      }, 2000, 'linear', function () {
        $('#div1').animate({
          left: 400,
          width: 100,
          height: 100,
          top: 150,
          opacity: 1
        }, 2000, 'linear')
      })

      // 缓动 先慢后快再慢
      $('#div2').animate({
        left: 800
      }, 2000, 'swing')
    })
  })
</script>

</html>

自定义动画的开机动画demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  <style>
    .box{
      width: 300px;
      position: fixed;
      bottom: 0;
      right: 0;overflow: hidden;
    }
    #closeButton{
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 20px;
      cursor: pointer;
      background-color: #ccc;
    }
    div{
      display: block;
    }
    img{
      width: 300px;
      height: 300px;
    }
    #bottomPart{
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <div class="box" id="box">
    <span id="closeButton">X</span>
    <div class="hd" id="headPart">
      <img src="demoimg_1.jpeg" alt="">
    </div>
    <div class="bd" id="bottomPart">
      <img src="demoimg_2.jpeg" alt="">
    </div>
  </div>
</body>
<script>
$(function(){
  $('#closeButton').click(function(){
    // 先让下面那部分的高度动画变为0
    $('#bottomPart').animate({
      height: 0
    },1000,function(){
      // 然后让整个box的宽度动画变为0
      $('#box').animate({
        width: 0
      }, 2000)
    })
  })
})
</script>
</html>

动画队列和停止动画

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

stop方法：停止动画效果

stop(clearQueue, jumpToEnd)

clearQueue: 是否清除队列
jumpToEnd: 是否跳转到最终效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    div {
      width: 200px;
      height: 300px;
      background-color: antiquewhite;
      display: none;
    }
  </style>
</head>

<body>
  <input type="button" value="开始动画" id="start">
  <input type="button" value="停止动画" id="stop">
  <div></div>
</body>
<script>
$(function(){
  // 开始动画：模拟一个动画队列
  $('#start').click(function(){
    $('div').slideDown(2000).slideUp(2000)
  })
  // 停止动画：执行stop()方法
  // stop(clearQueue, jumpToEnd)
  // clearQueue：是否清除队列
  // jumpToEnd：是否跳转到最终效果
  $('#stop').click(function(){
    // $('div').stop(true, true);
    // $('div').stop(true, false);
    // $('div').stop(false, true);
    // $('div').stop(false, false);
    // 如果stop()方法不写参数，默认就是两个false即 stop(false, false)
    $('div').stop();
  })
})
</script>
</html>

jQuery节点操作

创建节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    #div1{
      width: 300px;
      height: 300px;
      margin-top: 20px;
      border: 1px solid lightcoral;
    }
  </style>
</head>
<body>
  <input type="button" value="html()" id="btnHtml1">
  <input type="button" value="$()" id="btn1">

  <div id="div1">
    <p>
      p1
      <span>
        span1
      </span>
    </p>
  </div>
  
</body>

<script>
$(function(){
  // 原生js中创建节点：
  // 1. 慎用，可能会覆盖页面  document.write('<div></div>')
  // 2. innerHtml()
  // 3. 这种方式创建出来的标签只存在与内存中，想再页面展示需要追加元素 document.createElement('div')

  // jQuery中创建节点：
  // 1. html() 
  // 设置或获取内容
  $('#btnHtml1').click(function(){
    // 获取内容：html()不给参数。获取到元素的所有内容
    console.log($('#div1').html());
    // 设置内容：html()给参数。会把原来的内通覆盖
    // 如果设置的内容中包含了标签，是会把标签给解析出来的
    $('#div1').html('我是设置的内容<a href="https://www.baidu.com">百度</a>')
  })

  // 2. $() 确实可以创建元素，但是创建的元素只存在与内从中，如果要在页面展示的话需要追加
  $('#btn1').click(function(){
    var $link = $('<a href="https://news.baidu.com">我是新闻</a>')
    console.log($link);

    // 追加节点
    $('#div1').append($link);
  })

})
</script>
</html>

创建节点 - 表格生成demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    table,
    th,
    td {
      border: 1px solid lightcoral;
    }
  </style>
</head>

<body>
  <input type="button" value="获取数据" id="getData">
  <table>
    <thead>
      <tr>
        <th>标题</th>
        <th>地址</th>
        <th>说明</th>
      </tr>
    </thead>
    <tbody id="tbodyData">

    </tbody>
  </table>
</body>

<script>
  $(function () {
    // 模拟从后端拿到的数据
    var data = [{
        name: "name1",
        url: "https://name1.xxx.com",
        type: "type1"
      },
      {
        name: "name2",
        url: "https://name2.xxx.com",
        type: "type2"
      },
      {
        name: "name3",
        url: "https://name3.xxx.com",
        type: "type3"
      }
    ]

    // 需求：点击按钮，根据data数组中的数据来给tbody追加tr
    // data这个数组中有多少个元素，就生成多少个tr,每一个元素又是一个对象，所以对象有多少个键值对就有多少个td

    // 给获取数据按钮设置点击事件

    $('#getData').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>");
      // }
      // // list.join('') 是把所有的内容都连接起来
      // $('#tbodyData').html(list.join(''));

      // $()：是追加内容，不会覆盖原来的
      for (var i = 0; i < data.length; i++) {
        // 这块就需要拼接了
        var $tr = $("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['url']+"</td><td>"+data[i]['type']+"</td></tr>");
        // 把创建出来的tr追加到tbody中去
        $('#tbodyData').append($tr);
      }
    })
  })
</script>
</html>

jQuery中添加节点的方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>

  </style>
</head>

<body>
  <input type="button" value="append" id="btnAppend">
  <input type="button" value="prepend" id="btnPrepend">
  <input type="button" value="after" id="btnAfter">
  <input type="button" value="before" id="btnBefore">
  <input type="button" value="appendTo" id="btnAppendTo">

  <ul id="ul1">
    <li>first li label</li>
    <li>second li label</li>
    <li id="li3">third li label</li>
    <li>fourth li label</li>
    <li>fifth li label</li>
  </ul>

  <ul id="ul2">
    <li>first li label</li>
    <li>second li label</li>
    <li id="li3-2">third li label</li>
    <li>fourth li label</li>
    <li>fifth li label</li>
  </ul>
</body>

<script>
  $(function () {
    //1. append()
    // 父元素.append(子元素)   // 作为最后一个元素添加
    $('#btnAppend').click(function () {
      //1.1 新创建一个li标签，并添加到ul中去
      // 作为最后一个子元素添加
      // var $linew = $("<li>我是新创建的 li 标签</li>");
      // $('#ul1').append($linew);

      //1.2 把ul1中已经存在的li标签添加到ul中去   
      // 会剪切后作为最后一个子元素添加
      // var $li3 = $('#li3');
      // $('#ul1').append($li3);

      // 1.3 把ul2中已经存在的li标签添加到ul1中去
      // 会剪切后作为最后一个子元素添加
      $li32 = $('#li3-2');
      $('#ul1').append($li32);
    })

    // 2. prepend()
    $('#btnPrepend').click(function () {
      //2.1 新创建一个li标签，并添加到ul中去
      // 作为第一个子元素添加
      // var $linew = $("<li>我是新创建的 li 标签</li>");
      // $('#ul1').prepend($linew);


      //2.2 把ul1中已经存在的li标签添加到ul中去   
      // 会剪切后作为第一个子元素添加
      // var $li3 = $('#li3');
      // $('#ul1').prepend($li3);

      //2.3 把ul2中已经存在的li标签添加到ul1中去
      // 会剪切后作为第一个子元素添加
      $li32 = $('#li3-2');
      $('#ul1').prepend($li32);

    })

    // 3. before()
    // 元素A.before(元素B)  // 把元素B插入到元素A的前面，作为兄弟元素添加
    $('#btnBefore').click(function () {
      // 新建一个div
      var $divnew = $('<div>我是新建的div</div>');
      $('#ul1').before($divnew);
    })

    // 4. after()
    // 元素A.after(元素B)  // 把元素B插入到元素A的后面，作为兄弟元素添加
    $('#btnAfter').click(function () {
      // 新建一个div
      var $divnew = $('<div>我是新建的div</div>');
      $('#ul2').after($divnew);
    })

    // 5. appentTo()
    // 子元素.appendTo(父元素); // 把子元素作为父元素的最后一个元素添加
    $('#btnAppendTo').click(function () {
      //5.1 新创建一个li标签，并添加到ul中去
      var $linew = $("<li>我是新创建的 li 标签</li>");
      $linew.appendTo($('#ul1'))
    })
  })
</script>

</html>

jQuery中添加节点的方式-城市选择demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    select {
      width: 200px;
      background-color: antiquewhite;
      height: 200px;
      font-size: 20px;
    }

    option {
      font-weight: normal;
      display: block;
      white-space: pre;
      min-width: 1.2em;
      padding: 0 2px 1px;
    }

    .btn-box {
      width: 30px;
      display: inline-block;
      vertical-align: top;
      margin: 0 30px;
    }
  </style>
</head>

<body>
  <h1>城市选择：</h1>
  <select name="src-city" id="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 name="tar-city" id="tar-city" multiple>
  </select>

</body>

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

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

</html>

清空节点 empty / 移除节点 remove

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
  <input type="button" value="按钮" id="btn">
  <ul id="ul1">
    <li>first li label</li>
    <li>second li label</li>
    <li id="li3">third li label</li>
    <li>fourth li label</li>
    <li>fifth li label</li>
  </ul>
</body>
<script>
  $(function () {
    $('#btn').click(function(){
      // 1. 清空元素
      // 1.1. 不推荐。这种方法可能会造成内存泄漏，不安全
      // $('#ul1').html();
      // 1.2. 推荐。
      // $('#ul1').empty();

      // 2. 移除某个元素
      // 2.1 “自杀”。本质还是找到父节点后移除子节点  父元素.remove(子元素)
      // $('#li3').remove();
      // 2.2 移除ul,但是只能获取li3这个标签
      $('#li3').parent().remove();

      // remove 是将ul的内容清空并且ul也不在了
      // empty 是将ul的内容清空，但是ul还在
    })
  })
</script>
</html>

清空节点empty和移除节点remove-表格删除demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    table,
    th,
    td {
      border: 1px solid lightcoral;
    }

    a {
      text-decoration: none;
    }
  </style>
</head>

<body>
  <input type="button" value="清空内容" id="btn">
  <table>
    <thead>
      <tr>
        <th>标题</th>
        <th>地址</th>
        <th>说明</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tbodyData">
      <tr>
        <td>name1</td>
        <td>https://name1.xxx.com</td>
        <td>type1</td>
        <td><a href="javascript:;" class="get">DELETE</a></td>
      </tr>
      <tr>
        <td>name2</td>
        <td>https://name2.xxx.com</td>
        <td>type2</td>
        <td><a href="javascript:;" class="get">DELETE</a></td>
      </tr>
      <tr>
        <td>name3</td>
        <td>https://name3.xxx.com</td>
        <td>type3</td>
        <td><a href="javascript:;" class="get">DELETE</a></td>
      </tr>
    </tbody>
  </table>
</body>

<script>
  $(function () {
    $('#btn').click(function () {
      $('#tbodyData').empty();
    })

    $('#tbodyData .get').click(function () {
      $(this).parent().parent().remove();
    })
  })
</script>

</html>

克隆节点 clone()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    #div1 {
      width: 300px;
      height: 200px;
      border: 1px solid lightblue;
      margin-bottom: 20px;
    }
  </style>
</head>

<body>
  <input type="button" value="克隆" id="clone">
  <div id="div1">
    <span>span1</span>
    <p>
      p1
      <b>b1</b>
    </p>
  </div>
</body>

<script>
  $(function () {
    $('#div1').click(function(){
      alert("hihi~")
    })
    // clone()
    // 注意：jQuery中的clone()只存在于内存中，如果页面要展示的话需要手动追加

    $('#clone').click(function () {
      // var $clonediv = $('#div1').clone();

      // 把clone的节点追加到body中
      // 注意：克隆后的节点的id/class都是和之前的一样的
      // $('body').append($clonediv);

      // clone(参数)方法的参数不管是true还是false,都会克隆到后代节点上的。
      // 不给参数默认表示的是：false
      // 区别在于：
      // true：表示会把事件一起克隆到
      // false: 不会克隆事件
      var $clonediv = $('#div1').clone(true);
      // 修改克隆节点的id
      $clonediv.attr('id', 'div2');
      $('body').append($clonediv);
    })
  })
</script>

</html>

获取或设置表单内容 val()

<body>
  <input type="button" value="按钮" id="btn">
  <input type="text" name="txt" id="txt">
</body>

<script>
$(function(){
  // 原生js中通过value属性来获取或设置表单元素的值

  // jQuery中通过val()
  $('#btn').click(function(){
    // val()不给参数就是获取
    $('#txt').val();
    // val()给了参数就是设置
    $('#txt').val("hello~");
  })
})
</script>

获取或设置表单内容val()-动态数据添加和删除demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    .warp {
      width: 300px;
      margin: 50px auto 0;
    }

    table,
    th,
    td {
      border: 1px solid lightcoral;
    }

    a {
      text-decoration: none;
    }

    .mask {
      position: absolute;
      left: 0px;
      top: 0px;
      background: rgba(0, 0, 0, 0.4);
      width: 100%;
      /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
      height: 100%;
      filter: alpha(opacity=60);
      opacity: 0.7;
      display: none;
      z-Index: 1;
    }

    .formAdd {
      position: absolute;
      width: 500px;
      height: 300px;
      top: 20%;
      left: 34%;
      border: 1px solid lightseagreen;
      background-color: #fff;
      display: none;
      cursor: pointer;
      z-Index: 2;
    }

    .formAddTitle {
      height: 30px;
      border-bottom: 1px solid lightseagreen;
      padding: 5px 10px 0 10px;
      display: flex;
      justify-content: space-between;
    }

    .formItem {
      height: 30px;
      padding: 30px;
    }

    .formSubmit input {
      width: 60px;
      margin: 30px;
    }
  </style>
</head>

<body>
  <div class="warp">
    <div>
      <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd">
    </div>
    <table>
      <thead>
        <tr>
          <th>标题</th>
          <th>地址</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tbodyData">
        <tr>
          <td>name1</td>
          <td>https://name1.xxx.com</td>
          <td><a href="javascript:;" class="get">DELETE</a></td>
        </tr>
        <tr>
          <td>name2</td>
          <td>https://name2.xxx.com</td>
          <td><a href="javascript:;" class="get">DELETE</a></td>
        </tr>
        <tr>
          <td>name3</td>
          <td>https://name3.xxx.com</td>
          <td><a href="javascript:;" class="get">DELETE</a></td>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="j_mask" class="mask"></div>
  <div id="j_formAdd" class="formAdd">
    <div class="formAddTitle">
      <span>添加数据</span>
      <div id="j_hideFormAdd">X</div>
    </div>
    <div class="formItem">
      <label for="j_txtTitle" class="lb">标题：</label>
      <input type="text" class="txt" id="j_txtTitle" placeholder="请输入标题...">
    </div>
    <div class="formItem">
      <label for="j_txtAddress" class="lb">地址：</label>
      <input type="text" class="txt" id="j_txtAddress" placeholder="https://www.xxx.com">
    </div>
    <div class="formSubmit">
      <input type="button" value="添加" id="j_btnAdd">
    </div>
  </div>

</body>

<script>
  $(function () {
    // 需求
    // 1. 点击添加数据按钮，显示添加面板和遮罩层
    // 2. 点击添加面板里面的关闭按钮，隐藏添加面板和遮罩层
    // 3. 点击添加面板里面的添加按钮，会把输入的内容生成一个tr,这个tr添加到body中
    // 4. 点击delete这些a标签，会删除对应的tr

    // 1
    $('#j_btnAddData').click(function () {
      $('#j_mask').show();
      $('#j_formAdd').show();
    })

    // 2
    $('#j_hideFormAdd').click(function () {
      $('#j_mask').hide();
      $('#j_formAdd').hide();
    })

    // 3
    $('#j_btnAdd').click(function () {
      // 先获取input中输入的值
      var txtTitle = $('#j_txtTitle').val();
      var txtAddress = $('#j_txtAddress').val();

      // 把用户输入的值创建成一个tr
      var $trNew = $('<tr>' +
        '<td>' + txtTitle + '</td>' +
        '<td>' + txtAddress + '</td>' +
        '<td><a href="javascript:;" class="get">DELETE</a></td>' +
        '</tr>');

      // 给新添加的 $trNew 中的a标签添加一个事件，可以删除新添加的tr
      $trNew.find('.get').click(function () {
        $(this).parent().parent().remove();
        // 这两个效果一样
        $trNew.remove();
      })

      // 把新创建的tr标签添加到tbody中
      $('#tbodyData').append($trNew);

      // 隐藏添加数据面板和遮罩层  可以直接调用2的点击事件
      $('#j_hideFormAdd').click();
    })

    // 4
    $('.get').click(function () {
      // 可以删除已经一开始就有的数据，但不能删除后面弹框中添加的数据
      // 因为后面添加的数据事件没有注册。所以在添加新的数据时，需要将添加进来的tr注册一下（添加一个事件）👆
      $(this).parent().parent().remove();
    })
  })
</script>

</html>

jQuery操作属性

设置属性: attr(‘src’, ‘demoimg_5.jpeg’)
获取属性: attr(‘src’);
移除属性: removeAttr(‘src’);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    img {
      width: 300px;
      height: 300px;
    }
  </style>
</head>

<body>
  <input type="button" value="获取属性" id="btn1">
  <input type="button" value="设置属性" id="btn2">
  <input type="button" value="移除属性" id="btn3">
  <br><br>
  <img src="demoimg_6.jpeg" alt="不洗头" title="hair" aaa="aaa">
</body>

<script>
  $(function () {
    // 设置属性
    $('#btn2').click(function () {
      // 设置单属性
      // 以前有src属性，现在相当于更改src属性
      // $('img').attr('src', 'demoimg_5.jpeg');
      // // 修改自定义属性
      // $('img').attr('aaa', 'bbb');
      // // 如果元素原本没有这个属性，那就是添加这个属性
      // $('img').attr('ccc', 'ccc');

      // 设置多属性
      $('img').attr({
        'src': 'demoimg_4.jpeg',
        'aaa': 'bbb',
        'ccc': 'ccc'
      })
    })

    // 获取属性
    $('#btn1').click(function () {
      // 自带的属性和自定义的属性都可以获取
      // 如果没有这个属性，那获取到的值为undefined

      var getSrc = $('img').attr('src');
      console.log(getSrc); // demoimg_6.jpeg
    })

    // 移除属性
    $('#btn3').click(function () {
      // 移除单属性
      $('img').removeAttr('alt');
      $('img').removeAttr('aaa');

      // 移除多属性
      $('img').removeAttr('alt aaa');
    })
  })
</script>

</html>

prop 操作布尔类型的属性

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
  <input type="button" value="按钮" id="btn1">
  <br><br>
  <input type="checkbox" id="ckb1">
</body>

<script>
  $(function () {
    // 布尔类型的属性，就是类似checked属性一样，写在元素的身上就代表选中，没有写的话就表示没有选中

    // 用原生js如何操作这类属性
    // 可以给他设置true/false,取值也是得到true/false
    // document.getElementById("btn1").onclick = function () {
    //   // 设置操作
    //   document.getElementById("ckb1").checked = false;
    //   // 获取操作
    //   document.getElementById("ckb1").checked
    // }

    // jQuery
    $('#btn1').click(function () {
      // $('#ckb1').attr('checked'); // 无论是选中还是没选中，都返回一个undefined
      // 👆在jQuery1.6之后，对于checked / selected / disabled 这类boolean类型的属性来说，不能用attr方法，只能用prop方法

      // 如果多选框是选中状态，就返回一个true;false
      $('#ckb1').prop('checked');
    })
  })
</script>

</html>

prop操作布尔类型的属性-表格全选反选demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    table,
    th,
    td {
      border: 1px solid lightcoral;
    }
  </style>
</head>

<body>
  <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>name1</td>
        <td>https://name1.xxx.com</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>name2</td>
        <td>https://name2.xxx.com</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>name3</td>
        <td>https://name3.xxx.com</td>
      </tr>
    </tbody>
  </table>
</body>

<script>
  $(function () {
    // 1. 点击多选
    $('#j_cbAll').click(function () {
      // 获取该多选框的checked值
      var checkedValue = $(this).prop('checked');
      // 让下面的多选框们的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; // 获取到选中的多选框的个数

      // 判断
      // if(numOfSelect === numOfAll){
      //   // 全部选中
      //   $('#j_cbAll').prop('checked', true);
      // }else{
      //   // 有未选中
      //   $('#j_cbAll').prop('checked', false);
      // }

      // 上面这个判断写法的优化
      $('#j_cbAll').prop('checked', numOfSelect === numOfAll);
    })
  })
</script>

</html>

jQuery的尺寸和位置操作

width() / height()
innerWidth() / innerHeight()
outerWidth() / outerHeight()
outerWidth(true) / outerHeight(true)
$(window).width() / $(window).height()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>
    .one {
      width: 200px;
      border: 10px solid salmon;
      padding: 20px;
      margin: 20px;
    }
  </style>
</head>

<body>
  <input type="button" value="按钮" id="btn">
  <div class="one" id="one" style="height: 200px"></div>
</body>

<script>
  $(function () {
    $('#btn').click(function () {
      // 获取div的宽高
      // $('#one').css('width'); // 200px
      // $('#one').css('height');  // 200px

      // width()/height()
      // 获取/设置宽高, 不 包括 padding/border/margin
      $('#one').width(); // 200
      $('#one').height(); // 200

      // innerWidth()/innerHeight()
      // 返回宽高，包括 padding
      $('#one').innerWidth();
      $('#one').innerHeight();

      // outerWidth() / outerHeight()
      // 返回宽高，包括 padding/border
      $('#one').outerWidth();
      $('#one').outerHeight();

      // outerWidth(true) / outerHeight(true)
      // 返回宽高，包括 padding/border/margin
      $('#one').outerWidth(true);
      $('#one').outerHeight(true);

      // 获取页面可视区域的宽高
      $(window).width();
      $(window).height();
    })
  })
</script>

</html>