jQuery学习小征途

1.1 初识jQuery

库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>

1. 他是前端方法库
2. 里面主要包含了许多封装的dom 操作

优点：

1. 选择器
2. 链式编程
3. 隐式迭代
4. 全兼容 ==》2.0以前 以后就不再兼容ie

引入运用

当你引入一个 jquery.js 或者 jquery.min.js 以后=> 会向全局暴露两个变量名
1.jQuery
2.$

1.2 jQuery选择器

选择器：

1. 选择器：对元素的获取
2. 筛选器：对已经获取的元素合集进行二次筛选

1.2.1 基本选择器

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

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

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

 <div></div>
    <div id="box1"></div>
    <div class="box2"></div>
    <div class="box3">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

    <script>
        console.log($('div'));
        console.log($('#box1'));
        console.log($('.box2'));
        console.log($('.box3>ul li:nth-child(1)'));
    </script>

1.2.2 特殊选择器

1. 拿到已经选取元素集合中的第一个元素
   用法：元素:first

2. 拿到已经选取元素集合中的最后一个元素
   用法： 元素:last

3. 按照索引排列的第几个
   用法： 元素:eq(数字)

注意是从0开始的

4. 按索引的奇数选出
   用法： 元素:odd
5. 按元素的哦偶数排列
   用法： 元素:event

1.3 jQuery 筛选器

1.3.1 first()

元素集合中的第一个
console.log(${'li'}.first())
作用：
给第一个元素设置不同的样式
console.log(${li}.操作css().first().操作css())

1.3.2 last()

元素集合中的最后一个
console.log(${'li'}.last())

1.3.3 eq()

索引
console.log(${l'i'}.eq(2))

1.3.4 next()

拿到该元素的下一个元素
console.log(${'li'}.next())

1.3.5 nextAll()

两种语法：

1. 该元素下面的所有兄弟元素
   console.log(${'li'}.nextAll())
2. 该元素下面的所有指定的兄弟选择器
   console.log(${'li'}.nextAll('.box'))

1.3.6 nextUntil()

语法：

1. 该元素下面的所有兄弟元素
   console.log(${'li'}.nextUntil())
2. 该元素下面的所有到指定兄弟的选择器（不包括选中中的选择器）
   console.log(${'li'}.nextUntil('.box'))

1.3.7 perv()

该元素的上一个兄弟元素
console.log(${'li'}.perv())

1.3.8 pervAll()

语法：

1. 该元素的上面所有的兄弟元素
   console.log(${'li'}.pervAll())
2. 该元素的上面指定的所有选择器
   console.log(${'li'}.pervAll('li'))

1.3.9 pervUntil

语法：

1. 该元素的上面所有的兄弟元素
   console.log(${'li'}.pervUntil())
2. 该元素的上面到指定的选择器中间的所有兄弟选择器（不包含指定的选择器）
   console.log(${'li'}.pervUntil('li'))

1.3.10 parent()

获取到当前元素的父元素
console.log(${'li'}.parent())

1.3.11 parents()

语法：

1. 拿到结构父级的所有父元素
   console.log(${'li'}.parents())
2. 拿到结构父级里面符合选择器的父元素
   console.log(${'li'}.parents('.box'))

1.3.12.children()

语法

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

1.3.13，sinblings()

=> 拿到该元素的所有兄弟元素，自己除外

1.3.14.find()

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

1.3.15.index()

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

1.4 jQuery 操作文本内容

• 操作元素内的文本和超文本
• 注意:属于 jQuery 的方法 只能 jquery元素集合调用，原生 DOM 不能调用

1.4.1 1.html()

=> 语法:
1元素集合.html()
获取该元素的超文本内容，以字符串的形式返回

• 获取的时候为了保证 html 结构只能获取第一个的元素的超文本内容

2。元素集合.html(中内容 )
设置元素集合内元素的超文本内容

• 完全覆盖式的写入
• 隐式迭代: 元素集合内有多少元素，就写入多少元素

console.log(${'li'}.html()
${'li'}.html('<sapn>我是新来的</span>')

1.4.2.text()

=> 语法:
1。元素集合.text()

• 获取该元素的文本内容，以字符串的形式返回
• 因为是文本内容，不涉及 html 结构，所以拿到的息所有元素的文本内容
• 以一个字符串的形式返回

2。元素集合.text(‘内容’)

• 设置元素集合内元素的文本内容
• 完全覆盖式的写入
• 隐式迭代: 元素集合内有多少元素，就写入多少元素

console.log(${'li'}.text()
${'li'}.text('<sapn>我是新来的</span>')

1.4.3.val()

=> 语法:
1。元素集合.val()

• 获取元素集合内元素的 value 值
  2。元素集合.val( 内容 )
• 设置元素集合内元素的 value 值
• 完全覆盖式的写入
• 隐式迭代: 元素集合内有多少元素，就写入多少元素

console.log(${'li'}.val()
${'li'}.val('你好 世界')

1.5 jQuery 操作元素类名

1. addclass()

• 添加元素类名
  ${'div'}.addClass('.box')

2. removeClass()

• 删除元素类名
  ${'div'}.removeClass('.box')

3. hasClass()

• 判断有没有类名

4.toggleClass()+ 切换类名

• 如果原先有，就是删除+ 如果原先没有，就是添加
  cohnsole.log(${'div'}).hasClass('.box')

1.6 操作元素样式jQuery

1. css()

语法: 元素集合,css(‘width’)

• 获取元素的某一个样式的值，不管是行内还是非行内都能获取到

2. 设置元素的行内样式

语法:元素集合.css("样式名’，样式值’)

• 隐式迭代:元素集合内有多少元素设置多少元素设置的时候，如果你需要设置的单位是 px 可以不写

3. 批量给元素设置行内样式

语法:元素集合.css([ 样式名1:样式值1，样式名2:样式值

• 隐式迭代:元素集合内有多少元素设置多少元素
• 设置的时候，如果你需要设置的单位是 px 可以不写

1.7 基础绑定事件jQuery

1.7.1.on()

语法:1. 元素集合.on(事件类型，事件处理函数)

• 隐式迭代:元素集合内有多少元素，就会给多少元素绑定事件l>
  $('li').on('click',function(){ console.log('我被电击了'); })

2. 元素结合.on(事件类型，选择器，事件处理函数)
   =>事件委托的绑定
   把选择器元素委托给元素集合里面的元素
   注意:选择器元素要是 元素集合 内元素的后代元素

$('ul').on('click','li',function(){
        console.log('gsai');
     })

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

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

$('li').on('click',{name:"eqwd",age:98},function(e){
	console.log(e)
})
//传进去的参数就为里面的data ==》e

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

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

$('li').on('click','a',"hello world", function(e){
	console.log(e)
})
//传进去的参数就为里面的data ==》e

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

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

1.7.2 one()

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

1.7.3.off()

• 用来解除事件绑定的

语法:

1。元素集合.off(事件类型)

• 解除元素身上该事件类型的所有事件处理函数
• 元素集合.off(事件类型，事件处理函数)
• 解除元素身上该事件类型的某一个事件处理函数

function actionA(){
	console.log('A')
}
function actionB(){
	console.log('B')
}
$('li').on('click',actionA)
$('li').on('click',actionB)
$('li').off('click',actionA)

1.7.4.trigger()

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

1.8 事件函数

jQuery
给我们提供了些简洁的绑定事件的方式把一些常用事件直接封装成了函数 click()，mouseover() 这些方法可以直接使用，带有隐式迭代=>快捷绑定事件

语法:

1。元素集合.事件类型(事件处理函数) 2。元素集合。事件类型(传入事件处理函数的参数，事件处理函数

$('li').click(function(){
	console.log("asdsad")
})
$('li').click({name:'asdsa'},function(){
	console.log("asdsad")
	console.log(e.data)
})

1.9 jquery 唯一的特殊事件

• hover()
  一个结合了移入移出的事件
  语法:

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

$('li').hover(
	function(){console.log("sadasd")}
	function(){console.log("asd")}
)

2.1 jQuery 的节点操作

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

2.1.1 创建节点

$(htm1结构字符串)

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

const p = $('<p>这是创建的p标签</p>')

2.1.2 插入节点

内部插入(父子关系的插入)

1.append()

语法: 父元素.append(子元素 )

• 把子元素插入到父元素内部，放在末尾的位置

2。appendTo()

语法:子元素.appendTo(父元素)

• 把子元素插入到父元素内部，放在末尾的位置

3。prepend()

语法: 父元素.prepend(子元素)

• 把子元素插入到父元素内容，放在最前面的位置

4.prependTo()

语法:子元素.prependTo(父元素)

• 把子元素插入到父元素内容，放在最前面的位置

const p = $('<p>这是创建的p标签</p>')

//append（）
$('li').append(p)
//appendTo（）
appendTo(p).$('ul')
//prepend（）
$('li').prepend(p)
//prependTo（）
prependTo(p).$('ul')

这个p最后插入到ul的最后一个 , 因为这属于一个覆盖的效果

外部插入
5.after()

语法: 存在元素.after(插入元素)

• 把插入元素排在存在元素的后面，以兄弟关系出现

6.insertAfter()

语法: 插入元素insertAfter(存在元素)

• 把插入元素排在存在元素的后面，以兄弟关系出现

7，before()

语法:存在元素.before(插入元素)

• 把插入元素排在存在元素的前面，以兄弟关系出现

8.insertBefore()

语法: 插入元素.insertBefore(存在元素)

• 把插入元素排在存在元素的前面，以兄弟关系出现

const p = $('<p>这是创建的p标签</p>')

//after（）
$('li').after(p)
//insertAfter（）
insertAfter(p).$('ul')
//before()
$('li').before(p)
//insertBefore（）
insertBefore(p).$('ul')

2.1.3 删除节点

1. remove()

语法: 元素集合remove()

• 把自己从自己的父元素里面移出

2.empty()

语法: 元素集合。empty()

• 把自己变成空标签，把所有后代节点全部移除

//after（）
$('li').remove(p)
//insertAfter（）
empty(p).$('ul')

2.1.4 替换节点

1. replacewith()

语法:换下节点.replacewith(换上节点)

2. replaceAl1()

语法: 换上节点.replaceA11(换下节点)

2.1.5 克隆节点

1. clone()

语法: 元素集合.clone()

• 必然携带所有节点过来第一个参数默认是 false，表示是否克隆元素本身的事件，选填 true
• 第二个参数默认是 跟随第一个，表示是否克隆元素后代节点的事件，选填
• 注意: 当第一个参数是 false的 时候，第二个参数没有意义

3.1 节点属性

jQuery 有三种操作属性的方法

=> attr() 和 removeAttr()
=> prop() 和 removeProp()
=> data() 和 removeData()

3.1.1attr() 与removeAttr()

1. .attr()

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

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

语法: 元素集合.attr(属性名，属性值)

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

注意:

• 设置的时候，需要两个参数 设置的不管是什么数据类型，都会变成字符串类型
• 有的原生属性好使，有的不好使比如说button 里面的checked属性，设置只是看的

$('li').attr('id',"sabhi")
$('li').attr('a',"ashdhowiasklhj")
$('li').removeAttr('id')

2. removeAttr()

语法: 元素集合。removeAttr(属性名)

• 删除元素身上的自定义属性
• id class 等属性也可以删除

注意:

多用于删除 attr 方法设置的属性

3.1.2prop() 和 removeProp()

1.prop()

语法: 元素集合。prop(属性名)

• 获取元素的原生属性，也可以获取元素的自定义属性
• 但是 attr 方法设置的自定义属性他获取不到
  语法: 元素集合.prop(属性名，属性值)
• 主要设置元素的原生属性，也可以设置自定义属性
• 他设置的自定义属性不会显示在标签上，而是存储在元素身上
  注意:
• 设置的自定义属性不会显示在标签上 你设置的时候是什么数据类型，获取到的时候还是什么数据类型
• attr 设置的自定义属性他拿不到

2. removeProp()

语法: 元素集合。removeProp(属性名)

• 删除元素的属性，但是只能删除由 prop设置的自定义属性1
• 原生属性 id class…。 不能删除

$('li').prop('id',"sabhi")
$('li').prop('a',"ashdhowiasklhj")
$('li').removeProp('id')

3.1.3. data() 和 removeData()

1. data()

语法: 元素集合.data(属性名)

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

注意:

• 可以获取元素标签上 data-xxx 的属性
• 但是不能设置标签上 data-xxx 的属性

2. removeData()

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

$('li').data('id',"sabhi")
$('li').data('a',"ashdhowiasklhj")
$('li').removeData('id')

3.2 jQuery 获取元素尺寸获取元素尺寸

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

3.2.1.width() 和 height()

语法: 元素集合.width() 或者 元素集合.height()

• 获取的是元素内容位置的尺寸

3.2.2.innerwidth() 和 innerHeight()

语法: 元素集合.innerwidth() 或者 元素集合.innerHeight()

• 获取的是元素 内容 + padding 区域的尺寸

3.2.3.outerWidth() 和 outerHeight()

语法: 元素集合.outerwidth() 或者 元素集合.outerHeight()

• 获取的是元素 内容 + padding +border 区域的尺寸

3.2.4.outerWidth(true) 和 outerHeight(true)

语法: 元素集合.outerwidth(true) 或者元素集合.outerHeight(true)

• 获取的是元素 内容 + padding + border + margin 区域的尺寸

 $('.box').width()
     $('.box').height()
     $('.box').outerWidth(true)
     $('.box').outerHeight(true)
     $('.box').innerwidth()
     $('.box').innerHeight()

3.3 jQuery 操作元素位置

1. offset()

• 是一个读写的方法

语法: 元素集合.offset()

• 返回值:一个对象，里面包含一个 x 信息一个 y 信息
• 相对谁: 相对页面左上角的绝对坐标

注意:读取出来是一个对象，你需要值得时候，要继续 不能继续链式编程

console.log('offset:',$('div').offset().top)

语法: 元素集合,offset({ top: xxx，left: xxx })设置的

• :设置的是相对于页面左上角的绝对位置l
• 例子: $(div’).offset({ top: 30，left: 30 })
• 一定会把这个 div 放在距离页面左上角 3 3的位置
• 注意:你设置的时候，如果父子元素都要动 考虑先后顺序

2.position()

• 是一个只读的方法 读取:
• 语法:元素集合.position()

• 返回值:一个对象，里面包含一个 x 信息一个 y 信息
• 就是元素的定位关系7 如果你定位的是 right 和 bottom，那么会自动计算成 left 和 top

4.1jQuery 里面有三个基础动画

1.show() 显示
2.hide() 隐藏
3.toggle()
切换，本身显示就隐藏，本身隐藏就显示

• 上面三个方法操作的 display: node 和 block
  上面三个方法操作的 display: none 和 block
  三个的语法是一样的

 方法名(运动时间，运动曲线，回调函数)

运动时间:多长时间运动结束
运动曲线:什么方式运动
回调函数:运动结束后触发

  $('.start').click(() => {
            $('div').show(1000, "linear", function () {
                console.log("asdsa");
            })
        })
        $('.change').click(() => {
            $('div').hide(1000, "linear", function () {
                console.log("asaasddsa");
            })
        })
        $('.hiden').click(() => {
            $('div').toggle(1000, "linear", function () {
                console.log("asdsaasdasdasdsad");
            })
        })

4.2jQuery 的折叠动画

• jQuery 提供了三种折叠动画

1.slideDown()+ 下拉显示
2.slideUp()+ 上拉隐藏
3.slideToggle()+ 切换显示和隐藏

4.3 jQuery 的渐隐渐显动画

• 通过操作 元素的 opacity 达到效果

1. faseIn()

opacity 0~1

2. fadeOut（）

opacity 1~0

3. fadeToggle()

切换

4.fadeTo()

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

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0%;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <button class="start">显示</button>
    <button class="hiden">隐藏</button>
    <button class="change">切换</button>
    <button class="to">aaa</button>
    <div class="box"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <script>
        $('.start').click(() => {
            $('div').fadeIn(1000, "linear", function () {
                console.log("asdsa");
            })
        })
        $('.change').click(() => {
            $('div').fadeOut(1000, "linear", function () {
                console.log("asaasddsa");
            })
        })
        $('.hiden').click(() => {
            $('div').fadeToggle(1000, "linear", function () {
                console.log("asdsaasdasdasdsad");
            })
        })
        $('.to').click(() => {
            $('div').fadeTo(1000, 0.5, function () {
                console.log("asdsaasdasdasdsad");
            })
        })


    </script>

4.4jQuery 的综合动画

• 可以按照你的设定去进行运动

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            position: relative;
            left: 45%;
            width: 100px;
            height: 100px;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
            border: 2px solid black;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <button class="action">运动</button>
    <div class="box">

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <script>
       $('button').click(()=>{
        $('div').animate({
            width:500,
            height: 600,
        },1000,"linear" , ()=>{
            console.log('asd');
        })
       })
    </script>
</body>
</html>

4.5 jQuery 的停止动画

• 因为当你给一个元素设置动画以后
• 如果快速触发，会停不下来，直到你所有的触发都执行完毕为止jquery 给我们提供两个临时停下动画的方法

1. stop()

• 语法:元素集合。stop()
• 当代码执行到这句的时候，不管运动到什么程度，立刻停下来

• 运动到什么位置就停止在什么位置

2. finish()

• 语法: 元素集合.finish()

• 当代码执行到这句的时候，不管运动到什么程度，直接去到运动结束位置

$('.start').click(()=>{
            $('div').slideToggle(1000 ,'linear')
        })
        
        $('.hiden').click(()=>{
            $('div').stop()
        })
        
        $('.change').click(()=>{
            $('div').finish()
        })

案例：滑动导航栏

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./animate.min.css">
    <style>
        *{
            padding: 0%;
            margin: 0;
        }
        ul,li{
            list-style: none;
        }
        ul{
            width: 650px;
            height: 40px;
            margin: 50px auto;
            border-bottom: 3px solid skyblue;
            position: relative;
        }
        ul>li{
            float: left;
            width: 70px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        ul>span{
            height: 40px;
            width: 70px;
            line-height: 40px;
            text-align: center;
            background-color: aqua;
            border-bottom: 3px solid red;
            display: inline-block;
            position: absolute;
            left: 0px;
            bottom: -3px;
            /* 不作为事件 */
            pointer-events: none;
        }
    </style>
</head>
<body>
    
        <ul>
            <li>text1</li>
            <li>text2</li>
            <li>text3</li>
            <li>text4</li>
            <li>text5</li>
            <li>text6</li>
            <li>text7</li>
            <li>text8</li>
            <li>text9</li>
            <span>text1</span>
        </ul>
    

    <script src="./jquery.min.js"></script>
    <script>
        $('li').mouseover(function(){
            const index = $(this).index()   
            $('span').stop().animate({
                left: index * 70
            },100).text($(this).text()) 
        })

        $('ul').on('click','li',()=>{
            console.log("我可以点击了");
        })
    </script>
</body>
</html>

案例：树状菜单

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./animate.min.css">
    <style>
        *{
            padding: 0%;
            margin: 0 ;
        }
        ul,li,ol{
            list-style: none;
        }
        ul{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            border: 5px solid black;
            padding: 30px;
        }
        ul>li>span{
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        ul>li:before{
            content: '+';
        }
        ul>li.active::before{
            content: '-';
        }
        ul>li>ol{
            padding-left: 30px;
            display: none;
        }
    </style>
</head>
<body>
    
    <ul>
        <li>
            <span>第1级菜单</span>
            <ol>
                <li>+ text1</li>
                <li>+ text2</li>
            </ol>
        </li>
        <li>
            <span>第2级菜单</span>
            <ol>
                <li>+ text1</li>
                <li>+ text2</li>
                <li>+ text3</li>
            </ol>
        </li>
        <li>
            <span>第3级菜单</span>
            <ol>
                <li>+ text1</li>
                <li>+ text2</li>
                <li>+ text3</li>
                <li>+ text4</li>
            </ol>
        </li>
    </ul>

    <script src="./jquery.min.js"></script>
    <script>
        $('ul > li ').click(function(){
            $(this).toggleClass('active').siblings().removeClass('active')
            $(this).find('ol').slideToggle().parent().siblings().find('ol').slideUp()
        })
    </script>
</body>
</html>

案例：鼠标跟随

1. 给每一个 li 绑定移入移出事件

• 移入的时候显示 div
• 移出的时候隐藏 div
• 移入的时候替换 img 标签的 src

2. 给每一个 li 绑定移动事件

• 再移动事件里面获取坐标随时赋值
• 哪一组坐标 ?
• offset 目标元素的左上角
• client 可视窗口 page 文档流因为 offset()设置的坐标是按照文档流左上角设置的->我拿到的坐标也应该是相对于文档流左上角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0%;
            margin: 0%;
        }
        ul,li{
            list-style: none;
        }
        ul{
            width: 720px;
            height: 450px;
            border: 10px solid black;
            padding: 20px;
            margin: 50px auto;
        }
        ul>li{
            width: 230px;
            height: 400px;
            float: left;
            margin-left: 10px;
        }
        li>img{
            width: 100%;
            height: 100%;
        }
        div>img{
            width: 240px;
            height: 400px;
        }
        div{
            display: none;
            /* pointer-events: none; */
        }
    </style>
</head>
<body>

    <ul>
        <li><img src="微信图片.1.jpg" alt=""></li>
        <li><img src="微信图片.2.jpg" alt=""></li>
        <li><img src="微信图片.3.jpg" alt=""></li>
    </ul>
        <div><img src="./微信图片.1.jpg" alt=""></div>

    <script src="./jquery.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').offset({
                left: x,
                top: y
            })
        })
    </script>
</body>
</html>

5.1jQuery 的多库并存

使用
1。要求你把 jQuery 引入再最后面

• 先暂时把变量民的所有权交给 jQuery

2。执行一个方法，jQuery 把变量名的所有权交出去

• 表示我不再占用这个名字了

2-1.noConflict()

• 交出 $ 的控制权

2-2. noConflict(true)

• 交出 $ 和 jQuery 的控制权
  2-3 const 变量 = $.noConflict(true）
  你的变量是什么自己定义一个控制权

5.2 深浅拷贝

• 三个词(描述对象和对象之间的关系)

1.赋值

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

		o2 =o1
        console.log(o2);

2。浅拷贝

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

    var o1 = {
            name:'bus',
            age:12,
            class:{
                classmate:7,
                takebus:"table",
                fruit:{
                    vatage:"apple",
                    sport:'basketball'
                }
            }
        }
        var o2= {}

        // o2 =o1
        // console.log(o2);

        for(i in o1){
            o2[i] = o1[i]
        }
        o2.name = 'gaibianl'
        console.log(o2,o1);

3。深拷贝

• 对象空间里面不管多少层，都是相对独立，没有关系
• for in 遍历赋值 只要碰到某一个是复杂数据类型 对象 或者数组 再次进入到这个数据类型里面进行.二次遍历
• 利用递归思想实现深拷贝
• 把第一遍遍历放在一个函数里面 如果遍历的时候，发现有一个数据是 数组 或者 对象
• 重新调用函数
  => 方案2: json
  ->不管多复杂的数据类型，转换成 json 以后就是字符串->字符串的赋值时基本数据类型
  -> 赋值以后再转换回来

 function deep(o2,o1){
            for(var i in o1){
                if(o1[i].consyructor == Array){
                    o2[i] = []
                    deep[o2[i],o1[i]]
                }
                else if(o1[i].constructor == Object){
                    o2[i] = {}
                    deep[o2[i],o1[i]]    
                }else{
                    o2[i]= o1[i]
                }
            }
        }
        deep(o2,o1);
        console.log(o2);

方案二：

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

5.2.2jQuery 里面的深浅拷贝

• jQuery 里面提供了一个进行深浅拷贝的方法
• $.extend()
  => 语法:
  1.$.extend(对象1，对象2，对象3，

• 把从第二个参数开始的每一个对象的数据拷贝到第一个对象中
• 是一个浅拷贝

2。$.extend(true，对象1，对象2，对象3，...)

• 把从第三个参数开始的每一个对象的数据拷贝到第二个对象中
• 是一个深拷贝

注意:

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

6.1 jQuery 的插件扩展

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

1。扩展到 jQuery 本身，作为全局方法调用

• 语法: $.extend([ 你扩展的方法 )
• 使用: $.extend({ a: function () {}})
• 相当于扩展了一个 a 方法再 jQuery 本身->如果你向调用，就书写 $.a()

2。扩展到 jQuery 的原型上，就是给 jQuery 的元素集合使用

语法: $.fn.extend([ 你扩展的方法 )

• 使用: $.fn.extend({a: function () { }})
• 相当于扩展了一个 a 方法给 jQuery 的元素集合
• 如果你想调用，就书写 $(选择器)

• 第二种书写的语法-> $.extend($.fn，[ 你扩展的方法 J)

6.2 jQuery入口函数

其实就是
window.onload 这个函数语法 :
$().ready(function ()
入口函数有一个简写的语法

$(function () {}）

区别

• window.onload: 所有资源加载完毕后执行
• $().ready(): DOM 结构加载完毕就执行