只因小黑子的jquery入土过程

jquery系列教程

1. 初识jquery

jQuery 是一个 JavaScript 前端方法库。

=>插件 厍和框架的区别
=>插件:实现某一个单一类功能
=>库:封装了各种的功能和你需要的工具

jQuery 极大地简化了 JavaScript 编程，主要内容是封装了各种dom操作。

优点:

1. 选择器
2. 链式编程
3. 隐式迭代

特点:

• =>号称全兼容
• =>2.0以前的版本
• => 2.0 以后逐步的不再兼容IE

当你引入一个jquery.js 或者jquery.min.js 以后

• =>会向全局暴露两个变量名

1. jQuery
2. $

1.2 jquery选择器

jQuery的选择器
–包含两个部分
1.选择器

• 对元素的获取
• 基本选择器
• 特殊选择器

2.筛选器
=>对已经获取到的元素集合进行二次筛选

1.2.1 基本选择器

语法:$(选择器)

返回值:满足条件的所有元素(id选择器除外)

• 放在一个数组里面返回给你
• 都是一个集合的形式
• 我们管这个集合叫做jquery 元素集合

你的css如何捕获标签，这里就可以怎么填写参数

1.2.2 选择器-特殊选择器

语法:$(选择器)

对你已经存在的选择器进行修饰
1.:first
2.: last
3. :eq(索引)

=>按照索引排列的第几个
=>注意:从0开始

4. :odd
   =>按照索引排列的奇数个

5.: even
=>
按照索引排列的偶数个

1.3 筛选器

+对jquery的元素集合进行二次筛选
+直接进行链式编程就可以了

注意:只有jQuery 的元素集合才可以使用，原生DOM对象不能使用

语法:$(选择器).筛选值()

用法：
前三个与基本选择器类似

1. first()
   =>元素集合里面的第个

2. last()
   =>元素集合里面的最后一个

3. eq(索引)
   =>元素集合里面指定索引的那一个

4. next()
   =>获取当前元素的下一个元素

5. nextAll()
   =>语法：
   1.元素集合.nextAll()
   获取到当前元素后面的所有兄弟元素
   2.元素集合.nextAll(选择器)获取到当前元素后面所有元素中指定选择器的那个

6. nextUntil()
   =>语法:
   1.元素集合.nextUntil()
   获取到当前元素后面所有的兄弟元素
   2.元素结合. nextUntil(选择器) 获取到当前元素后面所有兄弟元素，直到选择器元素为止(不包含选择器元素)

7. prev()
   =>获取当前元素的上一个元素

8. prevAll()
   =>语法：
   1.元素集合.prevAll()
   获取到当前元素上面的所有兄弟元素
   2.元素集合.nextAll(选择器)获取到当前元素上面所有元素中指定选择器的那个

9. prevUntil()
   =>语法:
   1.元素集合.nextUntil()
   获取到当前元素上面所有的兄弟元素
   2.元素结合. nextUntil(选择器) 获取到当前元素上面所有兄弟元素，直到选择器元素为止(不包含选择器元素)

10. parent()
    =>获取到当前元系的父元索

11. parents( )
    语法：
    1.元素集合. parents() 拿到结构父级的所有父元素
    2.元素集合. parents(选择器) 拿到结构父级里面所有父元素中符合选择器的那一个元素

12. children( )
    语法
    1.元素集合. children() 拿到该元素的所有子元素
    2.儿素集合.children(选择器) 拿到该元素的所有子元素中符合选择器的那一个元素

13. sinblings()
    =>拿到该元素的所有兄弟元素，自己除外

14. find()
    =>找到该元素中所有后代元素里面符合选择器条件的元素

15. index( )
    =>获取到的就是该元素在其父元素里面的索引位置

2. jquery操作文本内容

+操作元素内的文本和超文本

注意:属于jQuery 的方法只能jquery元素集合调用，原生DOM不能调用

1. html( )
   =>语法:
   1.元素集合.html()
   +获取该元素的超文本内容，以字符串的形式返回
   +获取的时候为了保证html结构只能获取第一个的元素的超文本内容
   2.元素集合.html("内容’)
   +设置元素集合内元素的超文本内容
   +完全覆盖式的写入
   +隐式迭代: 元素集合内有多少元素， 就写入多少元素

2. text()
   语法:
   1.元素集合.text()
   获取该元素的文本内容，以字符串的形式返回
   +因为是文本内容，不涉及html 结构，所以拿到的是所有元素的文本内容
   +以一个字符串的形式返回
   2.元素集合.text(“内容”)
   +设置元素集合内元素的文本内容
   +完全覆盖式的写入
   +隐式迭代:元素集合内有多少元素，就写入多少元素

3. val( )
   =>语法:
   1.元素集合.val()
   +获取元素集合内元素的value值
   2.元素集合.val("内容’)
   设置元素集合内元素的value值
   +完全覆盖式的写入
   +隐式迭代:元素集合内有多少元素，就写入多少元素

3. jque操作类名

1. addClass( )
   +添加元素类名
2. removeClass( )
   +删除元素类名
3. hasClass()
   +判断有没有类名
4. toggleClass()
   +切换类名
   +如果原先有，就是删除
   +如果原先没有,就是添加

4. jquery操作元素样式

1.css( )
1-1. 语法:元素集合.css(‘width’)
=>获取元素的某一个样式的值，不管是行内还是非行内都能获取到

1-2. 语法:元素集合.css(‘样式名’，‘样式值’)
=>设置元素的行内样式
=>隐式迭代:元素集合内有多少元素设置多少元素
=>设置的时候，如果你需要设置的单位是px可以不写

1-3.语法:元素集合.css({ 样式名1;样式值1,样式名2:样式值2, … })
=>批量给元素设置行内样式
=>隐式迭代:元素集合内有多少元素设置多少元素
=>设置的时候，如果你需要设置的单位是px可以不写

例子：

5. jquery基础绑定事件

1. on()
   =>语法:元素集合.on(事件类型，事件处理函数)
   =>隐式迭代:元素集合内有多少元素，就会给多少元素绑定事件

jQuery书写选项卡案例：
思路

1. 给所有的ul里面的li绑定事件
2. 自己有类名，所有兄弟没有类名
3. 所有的元素没有类名，指定索引

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        .box {
            width: 600px;
            height: 400px;
            border: 10px solid pink;
            margin: 50px auto;
        }

        ul {
            width: 100%;
            height: 60px;
            overflow: hidden;
        }

        ul>li {
            width: 200px;
            height: 100%;
            text-align: center;
            line-height: 60px;
            font-size: 40px;
            color: aliceblue;
            background-color: skyblue;
            cursor: pointer;
            float: left;
        }

        ul>li.active {
            background-color: orange;
        }

        ol {
            width: 100%;
            height: 340px;
            position: relative;
        }

        ol>li {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: brown;
            font-size: 100px;
            line-height: 340px;
            color: aliceblue;
            text-align: center;
            display: none;
        }

        ol>li.active {
            display: block;
        }
    </style>
    <div class="box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        $('ul>li').on('click', function () {
            $(this).addClass('active').siblings().removeClass('active')
            $('ol>li').removeClass('active').eq($(this).index()).addClass('active')
        })
    </script>

6. jqueny的事件绑定

6.1 on( )

+事件绑定，根据传递不同的参数做不同的事情

1-1. on(事件类型， 事件处理函数)

也是基本事件绑定。
=>直接绑定事件，有隐式迭代

1-2. 元素结合.on(事件类型，选择器，事件处理函数)

=>事件委托的绑定
=>把选择器元素委托给元素集合里面的元素
=>注意:选择器元素要是元素集合内元素的后代元素

    <style>
        ul {
            width: 500px;
            height: 800px;
            background-color: skyblue;
        }

        li {
            width: 50px;
            height: 50px;
            background-color: orange;
            margin-bottom: 10px;
        }
    </style>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        $('ul').on('click', 'li', function () {
            console.log("执行了")
            //this 就是点击的元素
            console.log(this)            
        })
        // 相当于document.querySelector('ul').onclick = function (e) {
        //     if (e.target.nodeName === 'LI') {
        //         console.log("执行了")
        //         //原生JS里面，this 指向事件源
        //         //这个事件的事件源是谁? ul
        //         console.log(this)
        //     }
        // }
    </script>

1-3. 元素集合.on(事件类型，复杂数据类型，事件处理函数)

=>给元素集合内的所有元素绑定事件
=>这个复杂数据类型是事件触发的时候，传递给事件里面的参数
=>在事件对象里面有一个叫做data 的成员，就是你传递进来的参数

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        $('li').on('click', {name:'jack'}, function (e) {
            console.log("执行了")
            console.log(e)            
        })
        
    </script>

1-4. 元素集合.on(事件类型，选择器，数据，事件处理函数)

=>事件委托的形式，带上传递参数
=>把选择器所属的事件，委托给了元素集合内的事件
=>数据位置，就是在事件触发的时候传递给事件处理函数的参数

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        $('ul').on('click', 'li','hello world', function (e) {
            console.log("执行了")
            console.log(e)            
        })
        
    </script>

1-5. 元素集合.on({事件类型1: 事件处理函数，事件类型2:事件处理函数…})

=>次性给元素绑定多种事件
=>没法传递参数和事件委托了

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        $('li').on({
            click:function() {console.log('点击事件')},
            mouseover:function() {console.log('移入事件')}
        })
        
    </script>

6.2 one()

+用来绑定事件的方法
+和on() 方法的参数和使用形式一模一 样
+只不过绑定的事件只能执行一次

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        $('li').one({
            click:function() {console.log('点击事件')},
            mouseover:function() {console.log('移入事件')}
        })
        
    </script>

6.3 off()

+用来解除事件绑定的
+语法:
1.元素集合.off(事件类型)
=>解除元素身上该事件类型的所有事件处理函数
2.元素集合.off(事件类型，事件处理函数)
=>解除元素身上该事件类型的某一个事件处理函数

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        function handlerA() {console.log('handerA')}
        function handlerB() {console.log('handerB')}
        $('li').on('click',handlerA)
        $('li').on('click',handlerB)
        // $('li').off('click')
    </script>

6.4 trigger( )

+用JS代码的方式来触发事件
+语法:元素集合.trigger(事件类型)

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        function handlerA() { console.log('handerA') }
        function handlerB() { console.log('handerB') }

        $('li').on('click', handlerA)
        $('li').on('click', handlerB)
        $('li').trigger('click')
    </script>

7. jquery 的事件函数

jQuery的事件函数

• +jQuery给我们提供了-些简洁的绑定事件的方式
• +把一些常用事件直接封装成了函数
• click() mouseover ( )
• +这些方法可以直接使用，带有隐式迭代
• =>快捷绑定事件
• =>语法:
  1.元素集合.事件类型(事件处理函数)
  2.元素集合。事件类型(传入事件处理函数的参数，事件处理函数)

1. 绑定点击事件

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
    <div></div>

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        $('div').click(function() {
            console.log('点击事件触发')
        })
        $('div').click({name:'jack'}, function(e) {
            console.log('点击事件触发',e)
        })
    </script>

2. jquery唯一的特殊事件 hover()

+一个结合了移入移出的事件
+语法:元素集合.hover(移入的事件处理函数，移出的事件处理函数)
->如果你只传递一个参数,
那么移入移出都触发

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
    <div></div>

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        $('div').hover(
            function() {console.log('移入')},
            function() {console.log('移出')}
        )
    </script>

8. jQuery的节点操作

原生JS的节点操作
=>创建节点，插入节点，删除节点，替换节点，克隆节点

• jQuery 的节点操作
  =>创建节点，插入节点，删除节点，替换节点，克隆节点

8.1 创建节点

• $(htm1结构字符串)=>当$()里面传递一个选择器的时候，就是获取元素
  =>当$()里面传递一个html结构字符串的时候，就是创建元素节点=>当$()里面传递一个DOM 元素节点的时候，就是转换成jQuery 元素结合

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
    <div></div>

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        const div = $('<div>我是一个创建的div</div>')
        console.log(div)

        const box = document.querySelector('div')
        console.log($(box).html('hello world'))
    </script>

8.2 插入节点

+内部插入(父子关系的插入)
+外部插入(兄弟关系的插入)
+删除节点
+克隆节点

2-1. append()

=>语法:父元素.append(子元素)
=>把子元素插入到父元素内部，放在末尾的位置

    <style>
      div{
        background-color: skyblue;
      }
    </style>
    <div>
        hello
        <p>我是div里面的p标签</p>
        world
    </div>

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        // 准备一个节点
        const p =$('<p>我是jquery创建的div</p>')

        $('div').append(p)

    </script>

2-2. appendTo( )

=>语法:子元素.appendTo(父元素)
=>把子元素插入到父元素内部，放在末尾的位置

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        // 准备一个节点
        const p =$('<p>我是jquery创建的div</p>')

        p.appendTo($('div'))

    </script>

2-3. prependTo( )

=>语法:子元素.prependTo(父元素)
=>把子元素插入到父元素内容，放在最前面的位置

    <script>
        // 准备一个节点
        const p =$('<p>我是jquery创建的div</p>')

        $('div').prepend(p)

    </script>

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        // 准备一个节点
        const p =$('<p>我是jquery创建的div</p>')

        p.prependTo($('div'))

    </script>

2-4. prependTo( )

=>语法:父元素.prependTo(子元素)
=>把子元素插入到父元素内容，放在最前面的位置

案例：

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        // 准备一个节点
        const p =$('<p>我是jquery创建的div</p>')

       $('div').append(p)
       $('div').prepend(p)
       //分析:p是一个jQuery创建的元素节点，但是是一个复杂数据类型的变量
       //     存储的是一个地址，只要我使用p,就是在使用堆里面得哪个空间      //所以会以最后一个为主来显示，不会出现前面插入，后面又插入的情况


    </script>

2-5. after()

=>语法:存在元素.after(插入元素)
=>把插入元素排在存在元素的后面，以兄弟关系出现

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        // 准备一个节点
        const p =$('<p>我是jquery创建的div</p>')

       $('div').after(p)
    </script>

2-6. insertAfter()

=>语法:插入元素.insertAfter(存在元素)
=>把插入元素排在存在元素的后面，以兄弟关系出现

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        // 准备一个节点
        const p =$('<p>我是jquery创建的div</p>')

       p.insertAfter($('div'))
    </script>

2-7 before

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        // 准备一个节点
        const p =$('<p>我是jquery创建的div</p>')
        $('div').before(p)
    </script>

2-8 insertBefore()

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        // 准备一个节点
        const p =$('<p>我是jquery创建的div</p>')

       p.insertBefore($('div'))
    </script>

3-1. remove ( )

=>语法:元素结合.remove()
=>把自己从自己的父元素里面移出

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        // 准备一个节点
        const p =$('<p>我是jquery创建的div</p>')
        $('div').remove()
    </script>

3-2 empty()

=>语法:元素集合. empty()
=>把自己变成空标签，把所有后代节点全部移除

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        // 准备一个节点
        const p =$('<p>我是jquery创建的div</p>')
        $('div').empty()
    </script>

4-1. replaceWith()

=>语法:换下节点.replace(换上节点)

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        // 准备一个节点
        const p =$('<p>我是jquery创建的div</p>')
        $('div>p').replaceWith(p)
    </script>

4-2. replaceAll)

=>语法:换上节点.replace(换上下点)

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
        // 准备一个节点
        const p =$('<p>我是jquery创建的div</p>')
        $p.replaceAll($('div>p'))
    </script>

5-1. clone()

=>语法:元素集合.clone( )
=>必然携带所有节点过来
=>第一个参数默认是false, 表示是否克隆元素本身的事件
=>第二个参数默认是跟随第一个，表示是否克隆元素后代节点的事件，选填
=>当第一个参数是false 的时候，第二个参数没有意义

    <style>
      div{
        background-color: skyblue;
      }
      p{
        background-color: orange;
      }
    </style>
    <div class="a">
        hello
        <p class="b">我是div里面的p标签</p>
        world
    </div>
    <hr>

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>

        $('.a').click(function(){console.log('div')})
        $('div').clone().insertAfter($('hr'))
    </script>

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>

        $('.a').click(function(){console.log('div')})
        $('div').clone(false,true).insertAfter($('hr'))
    </script>

9.jQuery操作元素属性

jQuery操作元素属性
+几种属性操作
=>原生属性，id class src
=>自定义属性，getAttribute( )
=> H5自定义属性，dataset
data -xxx

• jQuery 有三种操作属性的方法
  => attr() 和removeAttr( )
  => prop() 和removeProp( )
  => data() 和removeData ( )

9.1 attr() 获取

=>语法:元素集合.attr(属性名)

• ->获取元素的该属性，主要用来获取标签属性，包括些自定 义属性

    <div class="abc" id="box" hello="world">hello world</div>

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
      console.log($('div').attr('class'))
      console.log($('div').attr('id'))
      console.log($('div').attr('hello'))

    </script>

=>语法:元素集合,attr(属性名， 属性值)

• ->设置元素的标签属性，只是把属性设置在标签上，当作一个自定义属性使用
  ->对于原生属性有些有用，有些没有用

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
      $('div').attr('a','你好 世界')
    </script>

=>注意:
->设置的时候，需要两个参数
->设置的不管是什么数据类型，都会变成字符串类型
->有的原生属性好使，有的不好使

9.2 removeAttr( )

=>语法:元素集合。removeAttr(属性名)
->删除元素身上的自定义属性
->idclass等属性也可以删除
=>注意:
->多用于刚除attr 方法设置的属性

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
      $('div').removeAttr('class')
      $('div').removeAttr('id')
      $('div').removeAttr('hello')

    </script>

9.3 prop()

2-1. prop()
=>语法:元素集合. prop(属性名)

• ->获取元素的原生属性，也可以获取元素的自定义属性
  -> 但是attr 方法设置的自定义属性他获取不到

=>语法:元素集合.prop(属性名， 属性值)

• ->主要设置元素的原生属性，也可以设置自定义属性
  ->他设置的自定义属性不会显示在标签上，而是存储在元素身上
  ->把元素当成一个对象的时候象里面添加一些内容

    <div class="abc" id="box" hello="world">hello world</div>


    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
      $('div').prop('id','abcdefg')//拿到的是字符串类型
      $('div').prop('abc','100')
      $('div').prop('aa','200')//拿到的是number类型
       
    </script>

=>
注意:
->设置的自定义属性不会显示在标签上
->你设置的时候是什么数据类型，获取到的时候还是什么数据类型
-> attr 设置的自定义属性他拿不到

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
      $('div').attr('bcd','hello')
      console.log($('div').prop('bcd'))

    </script>

9.4 removeprop()

=>语法:元素集合. removeProp(属性名)
->删除元素的属性，但是只能删除由prop 设置的自定义属性
->原生属性id class 。。。不能删除

9.5 data()

3-1. data()
=>语法:元素集合.data(属性名)
->

获取使用data() 方法存储的数据，获取元素身上data-xxx 的属性
=>语法:元素集合.data(属性名， 属性值)
->设置的时候，只是把数据存储在元素身上的某个对象空间内
->但是不会出现在标签上，不会有data-xxx的属性出现

=>注意:
->可以获取元素标签F. data -xxx 的屈性
->但是不能设置标签上data-xxx 的属性

    <div class="abc" id="box" hello="world" data-index="10">hello world</div>


    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
      console.log($('div').data('index'))

      $('div').data('abcde',200)
      console.log($('div').data('abcde'))

    </script>

9.6 removeData ( )

->只能删除由data() 方法设置的属性
->不能删除元素身上data-xxx 的属性

    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
      console.log($('div').data('index'))

      $('div').data('abcde',200)
      
      $('div').removeData('inex')//存在
      $('div').removeData('abcde') //undefined
    </script>

10. jQuery获取元素尺寸

jQuery获取元素尺寸
+获取元素尺寸有三套方法四种使用方式
+不管在页面是不是占位，这些方法都是获取元素的尺寸

1. width() 和height( )
   =>
   语法:元素集合.width()或者元素集合. height()
   =>
   获取的是元素内容位置的尺寸
2. innerWidth() 和innerHeight( )
   =>语法:元素集合. innerWidth() 或者元素集合. innerHeight()
   =>获取的是元素内容+ padding区域的尺寸
3. outerlwidth() 和outerHeight( )
   =>语法:元素集合. outerwidth() 或者元素集合. outerHeight()
   =>
   获取的是元素内容+ padding + border 区域的尺寸
4. outerwidth(true) 和outerHeight(true)
   =>语法:元素集合. outerWidth(true) 或者元素集合。outerHeight(true)
   =>获取的是元素内容+ padding + border + margin 区域的尺寸

    <style>
      div{
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 20px solid #333;
        margin: 20px;
      }
      
    </style>
    <div></div>
    
    <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
    <script>
      console.log('width:',$('div').width())
      console.log('height:',$('div').height())

      console.log('innerWidth:',$('div').innerWidth())
      console.log('innerHeight:',$('div').innerHeight())

      console.log('outerWidth:',$('div').outerWidth())
      console.log('outerHeight:',$('div').outerHeight())

      console.log('outerWidth:',$('div').outerWidth(true))
      console.log('outerHeight:',$('div').outerHeight(true))
      
    </script>

11. jQuery操作位置关系

11.1 offset()

+是一个读写的方法
+读取

• =>语法:元素集合. offset()
  =>返回值:一个对象，里面包含个一个x信息，一个y信息
  =>相对谁:相对页面左上角的绝对坐标
  =>注意:读取出来是一个对象，你需要值得时候，要继续 .
  不能继续链式编程

+设置
=>语法:元素集合.offset({ top: XXX, left: XXX})
=>设置的:设置的是相对于页面左上角的绝对位置
=>例子: $(‘div’).offset({ top: 30, left: 30 })

->一定会把这个div放在距离页面左，上角30 30的位置

=>注意:你设置的时候，如果父了元素都要动
考虑先后顺序

  <style>
    * {
      margin: 0;
      height: 0;
    }

    body {
      width: 2000px;
      height: 2000px;
    }

    div {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 60px;
    }

    p {
      width: 100px;
      height: 100px;
      background-color: orange;
      margin: 30px;
    }
  </style>
  <div>
    <p></p>
  </div>

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    console.log('offset:', $('div').offset())
    
        console.log('offset:',$('div').offset().top)
    console.log('offset:',$('div').offset().left)
  </script>

2.

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>

    
    $('div').offset({ top: 100, left: 100 })
    $('p').offset({ top: 300, left: 300 })

  </script>

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>

    $('p').offset({ top: 300, left: 300 })
    $('div').offset({ top: 100, left: 100 })

  </script>

11.2 position( )

是一个只读的方法，不能设置。
+读取:

• =>语法:元素集合. position()
  =>返回值:一个对象，里面包含一个x信息一个y信息
  =>就是元素的定位关系
  =>如果你定位的是right 和bottom, 那么会自动计算成left 和top

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>

    console.log($('div').position())
    console.log($('p').position())

  </script>

12. jQuery的基础动画

jQuery里面有三个基础动画

1. show( )
   显示
2. hide( )
   +隐藏
3. toggle()
   切换，本身显示就隐藏，本身隐藏就显示
   +上面三个方法操作的display: none和block
   +三个的语法是一样的
   =>方法名(运动时间，运动曲线，回调函数)
   =>运动时间:多长时间运动结束
   =>运动曲线:什么方式运动
   =>回调函数:运动结束后触发
   =》linear属性-——匀速运动

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }
  </style>

  <button class="show">显示</button>
  <button class="hide">隐藏</button>
  <button class="toggle">切换</button>
  <div></div>

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    $('.show').click(()=>(
      $('div').show(1000)
    ))

    $('.hide').click(()=>(
      $('div').hide(1000)
    ))

    $('.toggle').click(()=>(
      $('div').toggle(1000)
    ))
    
    
  </script>

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    $('.show').click(()=>(
      $('div').show(1000 ,'linear',()=>console.log('显示结束'))
    ))

    $('.hide').click(()=>(
      $('div').hide(1000,'linear',()=>console.log('隐藏结束'))
    ))

    $('.toggle').click(()=>(
      $('div').toggle(1000,'linear',()=>console.log('切换结束'))
    ))
    
    
  </script>

13. jQueny的折叠动画

1.向上收动画

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }
  </style>

  <button class="show">显示</button>
  <button class="hide">隐藏</button>
  <button class="toggle">切换</button>
  <div></div>

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    $('.show').click(()=>(
      $('div').slideDown(1000,'linear',()=>console.log('显示结束'))
    ))

    $('.hide').click(()=>(
    $('div').slideUp(1000,'linear',()=>console.log('隐藏结束'))
    ))

    $('.toggle').click(()=>(
      $('div').slideToggle(1000,'linear',()=>console.log('切换结束'))
    ))
  </script>

2.向下收动画

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div.outer{
      width: 300px;
      height: 300px;
      overflow: hidden;
      position: relative;
    }
    div.inner{
      width: 300px;
      height: 300px;
      background-color: skyblue;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  </style>
    <button class="show">显示</button>
    <button class="hide">隐藏</button>
    <button class="toggle">切换</button>
  <div class="outer">
    <div class="inner"></div>
  </div>

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    $('.show').click(()=>(
      $('.inner').slideDown(1000,'linear',()=>console.log('显示结束'))
    ))

    $('.hide').click(()=>(
    $('.inner').slideUp(1000,'linear',()=>console.log('隐藏结束'))
    ))

    $('.toggle').click(()=>(
      $('.inner').slideToggle(1000,'linear',()=>console.log('切换结束'))
    ))    
  </script>

14. jQuery的渐隐渐显动画

jQuery的渐隐渐显动画
+通过操作元素的opacity达到效果

1. fadeIn()

• opacity 0~1

2. fade0ut( )

• opacity 1~0

3. fadeToggle()
   +切换
   以上一个万法的语法是-样的
   +方法名(时向，运动血线，问调函数)

4. fadeTo()
   +运动到指定透明度
   +语法: fadeTo(时间， 指定透明度，运动曲线，回调函数)

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div.outer{
      width: 300px;
      height: 300px;
      overflow: hidden;
      position: relative;
    }
    div.inner{
      width: 300px;
      height: 300px;
      background-color: skyblue;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  </style>
    <button class="show">显示</button>
    <button class="hide">隐藏</button>
    <button class="toggle">切换</button>
    <button class="to">指定透明度</button>
  <div class="outer">
    <div class="inner"></div>
  </div>

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    $('.show').click(()=>(
      $('.inner').fadeIn(1000,'linear',()=>console.log('显示结束'))
    ))

    $('.hide').click(()=>(
    $('.inner').fadeOut(1000,'linear',()=>console.log('隐藏结束'))
    ))

    $('.toggle').click(()=>(
      $('.inner').fadeToggle(1000,'linear',()=>console.log('切换结束'))
    ))

    $('.to').click(()=>(
      $('.inner').fadeTo(1000,0.5,'linear',()=>console.log('运动结束'))
    ))
  </script>

15. jQuery的综合动画

jQuery的综合动画
+可以按照你的设定去进行运动

1. animate()
   =>语法: animate({}, 时间，运动曲线，回调函数)
   =>{}: 书写你要运动的属性
   =>注意:
   -> 颜色相关的属性，运动不了
   ->CSS3的2d和3d动画效果运动不了

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 100px;
      height: 100px;
      background-color: skyblue;
      position: absolute;
    }
  </style>
    <button>开始</button>
    <div></div>

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    $('button').click(()=>(
      $('div').animate({
        width:300,
        height:'400',
        borderRadius: '50%',
        left:150,
        top:200
      },1000,'linear',()=>console.log('运动结束'))
    ))
    
  </script>

16. jQuery停止动画

jQuery的停止动画
+因为当你给一个元素设置动画以后
+如果快速触发，会停不下来，直到你所有的触发都执行完毕为止

16.1 stop()

+语法:元素集合.stop()
+当代码执行到这句的时候，不管运动到什么程度，立刻停下来
+运动到什么位置就停止在什么位置

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }
  </style>
  <button class="start">开始</button>
  <button class="stop">结束</button>
  <div></div>

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>

    $('button.start').click(() => {
      $('div').slideToggle(1000, 'linear')
    })

    $('.stop').click(()=>{
      $('div').stop()
    })

  </script>

16.2.finish()

+语法:元素集合。finish()
+当代码执行到这句的时候，不管运动到什么程度，直接去到运动结束位置
+直接完成本次动画

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }
  </style>
  <button class="start">开始</button>
  <button class="stop">结束</button>
  <button class="finish">完成</button>
  <div></div>

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>

    $('button.start').click(() => {
          //让div之前的动画停止在原地，按照最新的动画进行执行
      $('div').slideToggle(1000, 'linear')
    })

    $('.stop').click(()=>{
      $('div').stop()
    })

    $('.finish').click(()=>{
      $('div').finish()
    })

  </script>

17. animatecss动画插件

animatecss动画插件

18. 回调顶部和滑动选项卡

18.1回到顶部

1.获取元素，绑定点击事件
=>在点击事件里面使用动画让他上去
=>
页面回到顶部，一定要运动html 元素
2.但走起来停不下来了

  <style>
    *{
      margin: 0;
      padding: 0;
    }

    body{
      height: 3000px;
    }

    .gotop{
      width: 50px;
      height: 50px;
      background-color: skyblue;
      position: fixed;
      bottom: 50px;
      right: 50px;
    }
  </style>
  <div class="gotop"></div>

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    $('.gotop').click(()=>{
      $('html').animate({
        scrollTop:0
      },3000)
    })
  </script>

18.2 滑动选项卡

1.每一个li有一个鼠标移入事件
=>获取到移入的这个li的索引
=>span的left就是索引*100的位置
2.一旦挨个触发动画，小横线跟不上了?
=> stop( )
3.文字改变
=>获取到当前li里面的文件设置上
4.点击事件没有了

  <style>
    *{
      margin: 0;
      padding: 0;
    }

    ul{
      width: 900px;
      height: 40px;
      margin: 50px auto;
      border-bottom: 3px solid skyblue;
      position: relative;
    }

    ul,li{
      list-style: none;
    }

    li{
      float: left;
      width: 100px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
    
    ul>span{
      width: 100px;
      height: 40px;
      background-color: skyblue;
      border-bottom: 3px solid red;
      text-align: center;
      line-height: 40px;
      position: absolute;
      left: 0;
      bottom: -3px;
      color: whitesmoke;
      pointer-events: none;
    }
    
  </style>
  <ul>
    <li>选项菜单1</li>
    <li>选项菜单2</li>
    <li>选项菜单3</li>
    <li>选项菜单4</li>
    <li>选项菜单5</li>
    <li>选项菜单6</li>
    <li>选项菜单7</li>
    <li>选项菜单8</li>
    <li>选项菜单9</li>
    <span>选项菜单1</span>
  </ul>
  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    $('li').mouseover(function(){
      const index =$(this).index()
      $('span').stop().animate({
        left:index*100
      },100).text($(this).text())
    })
    
    $('ul').on('click','li',function(){
      console.log(this)
    })
  </script>

19. 树状菜单

1.给一级菜单的每一个li绑定事件
=>ul>li
=>自己添加active, 所有的兄弟没有active
=>自己下面的ol展开
=>自己所有兄弟元素下面的ol都闭合

  <style>
    *{
      margin: 0;
      padding: 0;
    }

    ul,ol,li{
      list-style: none;
    }

    ul{
      width: 300px;
      border: 3px solid pink;
      margin: 30px auto;
      padding: 30px;
    }

    
    ul>li>ol{
      padding-left: 30px;
      display: none;
    }

    ul>li>ol>li{
      height: 20px;
      line-height: 20px;
    }

    ul>li::before{
      content: '+';
    }
    ul>li.active::before{
      content: '-';
    }
   
  </style>

  <ul>
    <li>
      <span>菜单1</span>
      <ol>
        <li> + 第二级菜单1</li>
        <li> + 第二级菜单2</li>
        <li> + 第二级菜单3</li>
      </ol>
    </li>
    <li>
      <span>菜单2</span>
      <ol>
        <li> + 第二级菜单1</li>
        <li> + 第二级菜单2</li>
        <li> + 第二级菜单3</li>
      </ol>
    </li>
    <li>
      <span>菜单3</span>
      <ol>
        <li> + 第二级菜单1</li>
        <li> + 第二级菜单2</li>
        <li> + 第二级菜单3</li>
      </ol>
    </li>
    <li>
      <span>菜单4</span>
      <ol>
        <li> + 第二级菜单1</li>
        <li> + 第二级菜单2</li>
        <li> + 第二级菜单3</li>
      </ol>
    </li>
  </ul>
  
  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    $('ul>li').click(function(){
      $(this).toggleClass('active').siblings().removeClass('active')
      $(this).find('ol').slideToggle().parent().siblings().find().slideUp()
    })
  </script>

20. 手风琴

1.给li绑定一个鼠标移入事件
=>自己变大，其他的变小
=>为什么会下来

• ->布局是浮动布局
  ->一行放不下就会下来
  ->先让自己变大，让兄弟元素变小
  ->运动的原理就是定时器，每次动一点点
  ->在运动的时候，第一 瞬间，先自己变大一 点点，此时兄弟元素还没有变呢
  ->就在这个瞬间，一行放不下了

=>怎么解决

• ->先动兄弟元素，在动自己
  ->在第一个瞬间，是在变小

2.给ul绑定一个mouseleave 事件

• =>因为事件不会传播，你移出第一个li的时候
  =>就不会触发ul的mouseleave 事件

最右边的问题
=>移出的时候，每一个li还原到160
=>我自己目前是520, 其他的都是40
=>隐式迭代也是从第一个li开始一个一个改变
=>前三个在第一瞬间变成了41,我自己还是160 一行放不下
=>移出的是先让自己变小，让后再让兄弟元素改变

• 解决问题
  =>定义一个全局变景
  =>在每次移入的时候，给他赋值为当前这个li

分析问题:
方案1:
=>每次移入第二个li的时候会触发第一个li的移出事件
方案2:
=> 每次移入第二个li的时候会触发ul的移出事件

解决问题：
方案2:
=>之所以会触发ul的移出事件，因为移出li的时候事件冒泡
=>只要不冒泡，不传播事件，你移出li的时候，就不触发ul的移出事件
=>给每一个li绑定移出事件，在里面阻止事件传播
=>给ul绑定mouseleave 事件，这个事件天生不带传播

给ul绑定mouseout 事件(不好使)
=>当你移出第一个li进入第二个li的时候
=>会触发第一个li的移出行为，冒泡
=>因为冒泡就会触发ul的mouseover 事件
=>就会有一个还原到160的过程

给每一个li绑定给一个移出事件(不好使)
=>复原:每一个li变成160
=>当我从第一个li移入第二个li的时候
=>触发第二个li的移入事件，触发第一个li的移出事件

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    li {
      list-style: none;
    }

    ul {
      width: 640px;
      height: 280px;
      border: 10px solid pink;
      margin: 50px auto;
    }

    li {
      width: 160px;
      height: 100%;
      overflow: hidden;
      float: left;
    }

    li>img {
      width: 520px;
      height: 100%;
      display: block;
    }
  </style>
  <ul>
    <li><img src="./img/1.jpg" alt=""></li>
    <li><img src="./img/2.jpg" alt=""></li>
    <li><img src="./img/3.jpg" alt=""></li>
    <li><img src="./img/4.jpg" alt=""></li>
  </ul>

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    // $('li').mouseover(function(){
    //   $(this).stop.animate({width:520}).silbings().animate({width:40})
    // })
    

    let current = null
    // //1.给li绑定鼠标移入事件
    $('li').mouseover(function () {
      //先动兄弟元素
      $(this).siblings().stop().animate({ width: 40 })
      //再动自己
      $(this).stop().animate({ width: 520 })

      current = $(this)//$(this)就是当前的li
    })

    //2.给ul绑定移出事件
    $('ul').mouseleave(function () {
      console.log('移出')
      // $(li).animate({ width: 160 })
      //current 就是最后一个移入的li
      //让current先变小，然后再让其他兄弟元素变大
      current
      .stop()
      .animate({width:160})
      .siblings()
      .stop()
      .animate({width:160})
    })
  </script>

21. 鼠标跟随

1.给每个li绑定移入移出事件
=>移入的时候显示div
移出的时候隐藏div
=>移入的时候替换img 标签的src

2.给每一个li绑定移动事件
=>再移动中件型而获取华标随时赋值
=>哪一组坐标?
-> offset 日标元素的左上角 不好使
-> client 可视窗口
-> page文档流
->因为offset() 设置的坐标是按照文档流左，上角设置的
-> 我拿到的坐标也应该是相对于文档流左上角

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    li {
      list-style: none;
    }

    ul {
      width: 800px;
      height: 200px;
      border: 10px solid pink;
      margin: 50px auto;
      overflow: hidden;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    li {
      width: 150px;
      height: 180px;   
    }

    li img{
      width: 150px;
      height: 180px;
    }


    /*
      使用什么定位
        不定位行不行?
          offset( )
          绝对设置你的位置关系
          你没有定位的时候他会给你加上定位
          如果你又定位他就修改left 和top
   */

    div {
      width: 288px;
      height: 180px;
      display: none;
    }

    div img {
      width: 250px;
      height: 180px;
    }
  </style>
  <ul>
    <li><img src="./img/1.jpg" alt=""></li>
    <li><img src="./img/2.jpg" alt=""></li>
    <li><img src="./img/3.jpg" alt=""></li>
  </ul>
  <div>
    <img src="./img/QQ图片20221004111817.png" alt="">
  </div>

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    $('li')
      .hover(
        function () {
          $('div').fadeIn(100)
          const src = $(this).find('img').prop('src')
          $('div').find('img').prop('src', src)
        },
        function () {
          $('div').fadeOut(100)
        }
      )
      .mousemove(function (e) {
        const x = e.pageX + 10
        const y = e.pageY + 10
        //随时给div赋值
        $('div').offset({ left: x, top: y })
      })

  </script>

22. jquery发送ajax请求

22.1 jQuery发送一个 get请求

• jQuery 提供了一个函数，叫做$.get()
  +引入jQuery 以后，会提供两个变量

1. $
2. jQuery
   =>这两个都是函数数据类型
   +把这个函数当作一个对象，向他的身上添加了一些成员
   =>我们管这种方法叫做jQuery 的全局方法
   =>不需要依赖选择器，不需要元素集合
   =>直接调用就行

专门用来发送get请求
+语法: $.get(地址，传递给后端的数据，回调函数，期望返回的数据类型)

• =>地址:请求地址(你可以自主拼接参数，不推荐)
  =>数据:给后端的数据，可以写’ key=value&key=value’, 可以写{ … }
  =>回调:请求成功的回调，请求成功以后会触发
  =>期望返回的数据类型:是不是执行解析响应体的操作
  ->string’ 不解析
  -> ‘json’ 会执行 JSON.parse( )

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    $.get('./get.php?a=100&b=200',function(res) {
      // res 就是后端返回的响应体
      //如果你的最后一个参数写了'json', 会自动执行JSON. parse()
      conosle.log(res)
    },'json')
    $.get('./get.php','c=300&d=400',function(res) {
      // res 就是后端返回的响应体
      //如果你的最后一个参数写了'json', 会自动执行JSON. parse()
      conosle.log(res)
    },'json')
    $.get('./get.php',{e:500,f:600},function(res) {
      // res 就是后端返回的响应体
      //如果你的最后一个参数写了'json', 会自动执行JSON. parse()
      conosle.log(res)
    },'json')
  </script>

<?php

$arr = array(
    "message"=>"接受get请求成功，参数原样带回",
    "data"=>$_GET
);

//以json形式返回结果
echo json_encode($arr);
?>

22.2 jQuery 发送一个 post 请求

jQuery，提供了一个全局方法叫做. post （）专门用来发送 p o s t 请求发送 p o s t 请求
= > 语法： .post（） 专门用来发送 post 请求 发送 post 请求
=>语法：.post（地址，携带给后端的数据，回调函数，期望后端返回的数据类型）
=>四个参数的意义和. g e t（）一模一样
= > 语法： .get（）一模一样 使用

22.3 jQuery发送ajax请求的综合方法

+可以由你来配置，决定发送get还是post请求
+叫做$.ajax()
=>我们所有的请求都可以使用他来发送

=>语法：.ajax(options)
=>options：就是本次请求的配置信息，是一个对象数据类型
配置信息里面可以填写的内容

• 1.url：请求地址，必填

• 2.async：是否异步，默认是异步(true)，可以选填非异步(false)

• 3.type / method：表示请求方式，默认是GET，可以选填其他请求方式
  ->大小写无所谓

• 4.data：传递给后端的参数
  ->可以是查询字符串的形式
  ->可以是对象的形式

• 5.dataType：期望后端返回的数据类型，是否进行JSON.parse(）解析

• 6.success:接收一个函数数据类型，表示成功的回调

• 7.error：接收一个函数数据类型，表示失败的回调

• 8.timeout：设置一个超时时间
  ->从发送请求开始计时，到达超时时间还没有接收到响应
  ->会直接取消本次请求

• 9.cache：是否缓存
  ->对于ajax请求默认缓存的（true)，可以选填（false) 缓存：
  =>如果你选择缓存，那么不会有最后一个时间戳参数
  =>如果你选择不缓存，那么jQuery会在本次请求的末尾添加个时间戳作为参数
  ->对于jsonp 请求默认不缓存(false), 可以选填(true)
  ->当你发送jsonp 请求的时候，会默认带有一个时间戳参数

• 10.context: 上下文
  ->指定回调函数的this指向
  -> jQuery 默认回调函数的this 指向jQuery封装的xhr对象
  -> context 传递的是谁，回调函数的this就指向谁

缓存:
=> GET请求会自主缓存，为什么会缓存?
=>因为你两次发送同一个请求，浏览器就有可能会缓存下来
->怎么证明两次是一个请求
->请求地址一模一 样，就表示是同一个请求
=>不想你进行缓存
->让每次的请求地址不一 样
->每次请求的时候，再最后携带一个没有用的参数，值设置成时间戳
->每次请求的地址就不一样

23. jquery发送ajax的promise

jQuery 发送 ajax 请求
+jQuery 对于ajax 的封装
+除了回调函数的形式接收结果
+还封装了promise的形式接收结果
+一个$.ajax(）方法

• =>你可以选择书写回调函数的形式
  =>也可以选择promise的形式
  +注意:选择一种方式使用，不要都使用

24. ajax发送跨域请求

+非同源地址
+解决方案

1.Jsonp
+前端利用script 标签和src 属性绕开同源策略
+和 ajax 没有关系，实际上不是在发送 ajax 请求
+实际上是在请求一个js文件

2．代理
+由一个同源的代理服务端转发请求
+对于前端来说，依旧是正常发送请求
+只不过把地址书写成代理地址
+依旧是直接使用. a j a x ( ）方法来发送
+只不过 u r l 位置书写代理标识符

3.cors
+服务端允许指定客户端发送请求
+和前端没有关系
+前端正常发送请求
+使用.ajax（）

24.1 jQuery 发送 jsonp 请求

+使用一个叫做$.ajax(）的方法
+因为jQuery 封装 ajax 函数的时候做了一个判断

• =>根据你 dataType 传递的值来判断
  => if (dataType ===‘jsonp’){
  //走一套动态创建 script 标签
  //动态添加src属性
  //动态插入到body
  //动他的删除 script
  } else {
  //按照ajax的一套流程封装
  }
  +只要把dataType 书写成’ jsonp’
  =>就会发送jsonp 请求

jQuery发送jsonp 请求专用的配置项

1. jsonp: 表示携带函数名的那个key
2. jsonpCallback: 表示你自主定义的函数名
   =>默认值是jquery 自己组装的jQuery_ 版木号随机数_时间戳

25. ajax的全局钩子函数

jQuery 的全局钩子函数
+也叫做全局 ajax函数
+出现在 ajax的不同阶段
+再一个ajax的整个周期中，会在不同的位置执行的函数
我们管这种再一个事情的生命周期上各个不同时期触发的函数叫做钩子函数
=>不是自主触发的函数，而是钩挂再其他的事情上
=>由其他的事情发生过程中来触发自己

• ajaxstart()
  =>表再同一个作用域下多个ajax请求的时候
  =>第一个ajax 请求之前
• ajaxSend()
  =>表示再每一个请求发送之前触发
  =>只要有一个请求要执行send方法了，就会先出发钩子函数
• ajaxSuccess()
  =>表示再每一个请求成功之后触发
  =>只要有一个请求成功了，就会触发一次
• ajaxError()
  =>表示再每一个请求失败之后触发
  =>只要有一个请求失败了，就会触发一次
  =>根据jQuery判定的失败
• ajaxComplete $(window).ajaxComplete(function (){ 有一个请求完成了
  console.log( }）

26. jquery多库并存

jQuery的多库并存

• jquery 自己是个库
  +还有很多其他的库
  +当你出现第二个库起使用的时候
  =>如果两个库都向外暴露了$或者jQuery 的变量名
  =>
  就会出现变量名冲突
  +两个库只有一个能正常使用
  =>谁写在后面就是谁
  +jQuery给我们提供了一个多库并存的机制

使用
1.要求你把jQuery引入再最后面
=>先暂时把变量民的所有权交给jQuery
2.执行一个方法，jQuery把变量名的所有权交出去
=>表示我不再占用这个名字了

2-1. noConflict()
->交出$的控制权

2-2. noConflict(true)
->交出 $和jQuery 的控制权

2-3. const 变量= $ . noConflict(true )
->你的变量是什么
->自己定义一个控制权

27. 深浅拷贝

三个词（描述对象和对象之间的关系）

1．赋值
=>把一个对象的地址赋值给另一个变量
=>两个变量操作同一个空间

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    var o1 = {
      name:'Jack'
    }
    //从此开始o2和o1操作一个空间
    var o2 = o1
    o2.name = 'Rose'
    console.log(o1,o2)
  </script>

2.浅拷贝
=>把对象里面的每一个成员，复制一份一模一样的内容
=>放到另一个对象里面
=>当你有某一个对象成员是复杂数据类型的时候
=>这个成员依旧是一样的
=>只是操作对象里面一层可以没有关系，如果再深层次就会出现问题

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    var o1 = {
      name:'Jack',
      age: 18,
      info:{
        class:'gp20',
        score:100
      }
    }
    //o2和o1 是两个对象空间
    //但是里面的内容一模一样
    var o2 = {}
    for(var key in o1) {
      //复制过去的时候，把o1.info存储的地址复制给了o2. info
      o2[key] = o1[key]
    }
    //从此以后，操作o1和o2没有关系
    o2.name = 'Rose'
    console.log(o1,o2)
    //从此以后，o1.info 和o2.info 操作的是一 个对象空间
    o2.info.score = '90'
    console.log(o1,o2)
  </script>

3.深拷贝
=>对象空间里面不管多少层，都是相对独立，没有关系
=>for in 遍历赋值
=>只要碰到某一个是复杂数据类型对象或者数组
=>再次进入到这个数据类型里面进行二次遍历

=>方案1：利用递归思想实现深拷贝
->把第一遍遍历放在一个函数里面
->如果遍历的时候，发现有一个数据是数组或者对象
->从新调用函数

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    var o1 = {
      name:'Jack',
      age: 18,
      info:{
        class:'gp20',
        score:100,
        time:{
          createTime:100,
          updateTime:200,
          times:[1,2,3,4,5]
        }
      }
    }

    var o2 = {}
    //第一遍遍历
    // for(var key in o1) {
    //   if(typeof o1[key] === 'object'){
    //     if(o1[key].constructor===Array) {
    //       o2[key] = []
    //     }else{
    //       o2[key]={}
    //     }
    //     for(var key2 in o1[key]){
    //       o2[key][key2] = o1[key][key2]
    //     }
    //   }else{
    //     o2[key]=o1[key]
    //   }
    // }
    // o2.name = 'Rose'

    // o2.info.score = '90'
    // o2.info.time
    // console.log(o1,o2)
    function deep(o2,o1) {

      for(var key in o1) {
        if(o1[key].constructor ===Array){
          o2[key] = []
          deep(o2[key],o1[key])
        }else if (o1[key].constructor === Object){
          o2[key] = {}
          deep(o2[key],o1[key])
        }else{
          o2[key] = o1[key]
        }
      }
    }
    deep(o2,o1)
    o2.name = 'Rose'
    o2.info.score = 90
    o2.info.time.createTime=  300
    o2.info.time.times[100] = 99
    console.log(o1,o2)
  </script>

=>方案2:json
->不管多复杂的数据类型，转换成json以后就是字符串
->字符串的赋值时基本数据类型
->赋值以后再转换回来

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    var o1 = {
      name: 'Jack',
      age: 18,
      info: {
        class: 'gp20',
        score: 100,
        time: {
          createTime: 100,
          updateTime: 200,
          times: [1, 2, 3, 4, 5]
        }
      }
    }

    var tmp =JSON.stringify(o1)
    o2 = JSON.parse(tmp)

    o2.name = 'Rose'
    o2.info.score = 90
    o2.info.time.createTime = 300
    o2.info.time.times[100] = 99
    console.log(o1, o2)
  </script>

28.jQuery的深浅拷贝

jQuery 里面提供了一个进行深浅拷贝的方法
$ .extend()
=>语法：

1.$ .extend(对象1，对象2，对象3，…)
->把从第二个参数开始的每一个对象的数据拷贝到第一个对象中
->是一个浅拷贝

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    var o1 = {
      name: '我是o1'
    }
    var o2 = {
      age:18,
      info:{
        class:'gp20'
      }
    }
    var o3 = {
      gender:'man',
      list:[1,2,3,4,5]
  
    }

    $.extend(o1,o2)
    o1.info.class = 'hello world'
    console.log(o1,o2,o3)
  </script>

2.$.extend(true，对象1，对象2，对象3，…) 一>把从第个参数开始的每一个对象的数据拷贝到第二个对象中 一>是一个深拷贝

=>注意:
如果你要进行拷贝，不管是深拷贝还是浅拷贝
->至少传递两个参数
->传递一个参数的时候，不是进行拷贝

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    var o1 = {
      name: '我是o1'
    }
    var o2 = {
      age:18,
      info:{
        class:'gp20'
      }
    }
    var o3 = {
      gender:'man',
      list:[1,2,3,4,5]
  
    }

    $.extend(true,o1,o2)
    o1.age = 20
    o1.info.class = '你好'
    console.log(o1,o2)


  </script>

29. jQuery的插件扩展机制

jQuery的插件扩展
+jQuery 再设计的时候，封装了好多的方法
+但是怕你不够用，提供了插件扩展机制
+你可以向jQuery里面扩展一些内容
+插件扩展机制提供了两个方法

29.1 扩展给本身jQuery.extend

1.扩展到jQuery本身，作为全局方法调用
=> 语法：$ .extend({你扩展的方法 }
=>使用：$ .extend({a:function(){}})
->相当于扩展了一个a方法再 jQuery 本身
->如果你想调用，就书写$ .a()

  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script>
    // jQuery.extend 接受一个参数，是一个对象，对象里面是我们扩展的方法
    jQuery.extend({
      max: function (...n) { return Math.max.apply(null, n) },
      min: function (...n) { return Math.min.apply(null, n) }
    })

  </script>

29.2 扩展给元素集 jQuery.fn.extend()

2.扩展到jQuery的原型上，就是给jQuery的元素集合使用
=>语法：$ .fn.extend({你扩展的方法})
=>使用：$ .fn.extend({a：function（）{}}）
->相当于扩展了一个a方法给jQuery，的元素集合
->如果你想调用，就书写$（选择器）.a（）

30. jQuery插件扩展全选

使用插件扩展
+扩展己写方法来操作全选
+先准备一些扩展的内容

30.1 selectAll

+判断元素集合内是不是所有的元素的 checked 都是 true
+将来使用的时候：$（元素）.selectA11（）
=>返回一个结果，true 或者false
=>true表示元素集合内所有的元素checked都是trueI
=>false表示元素集合内至少有一个元素checked是false

• 1-1. 为了 $(元素).selectA1l() 调用方式
  =>扩展在原型上 $.fn.extend({ })
• 1-2。 循环遍历元素集合
  =>怎么拿到元素集合?
  ->这个方法肯定是jQuery 的元素集合才能调用
  -> this 定是jQuery 的元素集合
  ->使用this
  =>判断是不是全都选中
  ->遍历，个个的去访问checked 属性
  ->提前定义一个flag变量为true
  ->只要有一个的checked 是false
  ->就结束遍历

30.2 .setchecked（）

=>将来你调用的时候 $（元素）.setchecked（）
=>你如果不传递，默认是true,全都设置checked为true
=>如果你传递了一个false,全都设置 checked 为 false
需要遍历元素集合
=>为了达到隐式迭代
我们封装的方法可以使用
=>但是使用完毕，到这里就结束了，不能继续链式编程了
=>因为要达到链式编程，每一个方法都要依靠元素集合调用
=>我这个方法执行完毕以后，返回值是 undefined
=>不能继续链式编程了
=>在方法里面this就是元素集合
-> return this
->就能向外返回一个元素集合
->就可以继续链式编程了

30.3 getChecked()

+这个方法拿到元素集合内第一个元素的checked 属性
判断 this 内有没有数据
=>如果有，那么就返回第一个checked 属性
=>如果没有，那么就返回false

31. jquery表单验证

插件
jquery-validate:主要是用来做表单验证的插件

1.下载插件
2.导入文件
2-1.先导入jquery.js
2-2.导入jquery.validate.js
3.正式使用
3-1. 获取form标签
3-2.调用validate()方法，传递参数为一个对象|
3-3. 再validate 的参数对象中书写rules
    =>表示校验规则
    => rules是一个对象{}

  <form class="cmxform" id="login" method=" get" action="">
    <p>
      <label for="username">用户 名</label>
      <input id=”username” name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id=" password" name=" password" type=" password">
    </p>
    <button>提交</button>
  </form>


  <script src="E:\jquery\jquery-3.5.1.min.js"> </script>
  <script src="E:\jquery\jquey Validate\jquey validate\jquery.validate.min.js"></script>
  <script src="E:\jquery\jquey Validate\jquey validate\localization\messages_zh.js"></script>
  <script>
    $(' #login').validate({
      //规则:成员表示的意义就是校验规则
      rules: {
        // key是匹配form 标签中的name 属性
        username: 'required',
        // vaLue 也可以是对象的形式，用来书写多个规则
        password: {
          required: true,
          maxlength: 10,
          minlength: 5
        }
      },
      //消息:表示自定义的提示消息
      messages: {
        // key是匹配form标签中的name属性
        //value就是验证不通过的时候的提示文本
        username: '请填写该字段',
        password: {
          required: '这个字段还没有填写',
          maxlength: '别超过10个',
          minlength: '还不到5个'
        }
      }
    })

  </script>

32.jquery入口函数

jQuery 的入口函数
+其实就是 window.onload 这个函数
+语法：$（）.ready（function（）{}）
区别

window.onload:所有资源加载完毕后执行
+$（）.ready（）：DOM结构加载完毕就执行