【千锋前端】day12 JavaScript jQuery_千锋前端JavaScript全套教程_JS零基础完美入门到项目实战

视频地址：【千锋前端JavaScript全套教程_JS零基础完美入门到项目实战】 https://www.bilibili.com/video/BV1W54y1J7Ed/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155

11 jQuery

11.1 引入jQuery

11.2 jQuery的选择器

11.3 jQuery的筛选器

11.4 操作文本内容

11.4.1 html()

11.4.2 text()

11.4.3 val()

11.5 操作元素类名

11.5.1 addClass()

11.5.2 removeClass()

11.5.3 toggleClass()

11.6 操作元素样式

11.7 操作元素属性

11.7.1 attr()和removeAttr()

11.7.2 prop()和removeProp()

11.8 获取元素尺寸

11.8.1 width() 和height()

11.8.2 innerWidth() 和 innerHeight()

11.8.3 outerWidtrh() 和 outerHeight()

11.8.4 outerWidth() 和 outerHeight()

11.8.5 注意事项

11.9 获取元素偏移量

11.9.1 offset() 绝对位置

11.9.2 position() 相对位置

11.10 事件绑定

11.10.1 on()

11.10.2 one()

11.10.3 hover()

11.10.4 常用事件函数

11.11事件解绑和触发

11.11.1 off() 事件解绑

11.11.2 trigger() 事件触发

11.12 jQuery的基本动画函数

11.12.1 show()

11.12.2 hide()

11.12.3 toggle()

11.13 jQuery的折叠动画

11.13.1 slideDown()

11.13.2 slideUp()

11.13.3 slideToggle()

11.14 jQuery的渐隐渐现动画

11.14.1 fadeIn()

11.14.2 fadeOut()

11.14.3 fadeToggle()

11.14.4 fadeTo()

11.15 jQuery的综合动画 animate()

11.16 jQuery的运动结束函数

11.16.1 stop()

11.16.2 finish()

11.17 jQuery的ajax请求

11 jQuery

一个大型的，简单的，第三方类库
类库：将常用的操作封装到一起，需要用的时候直接使用。
jQuery，对DOM操作进行完善的封装，把最常用的DOM操作封装到了一起，包括各种元素操作以及ajax操作。
对DOM操作进行封装
- 获取DOM节点
- 操作节点文本
- 操作节点样式
- 操作节点类名
- 操作节点属性
- 获取节点尺寸
- 获取节点偏移量
- 操作节点事件
- 节点动画操作
- ajax封装
- ...

11.1 引入jQuery

当引入jQuery文件以后，会在全局暴露两个变量名
- $
- jQuery

代码实现（在body标签内部）

    <!-- 引入jquery文件 -->
    <script src="./jquery/jquery.js"></script>
    <script>
        // 当引入jQuery文件以后，
        // 会在全局暴露两个变量
        // $
        // jQuery
        console.log($)
        console.log(jQuery)
    </script>

结果

可见，$和jQuery是一模一样的，能用jQuery写的就能用$写。然后就可以利用jQuery进行DOM操作了。

11.2 jQuery的选择器

语法： $('选择器')

代码实现

html

    <ul>
        <li class="a">1</li>
        <li>2</li>
        <li class="b">3</li>
        <li>4</li>
        <li>5</li>
        <li class="a">6</li>
        <li>7</li>
        <li id="box">8</li>
        <li>9</li>
        <li>10</li>
    </ul>

jQuery

    <!-- 先引入jQuery文件 -->
    <script src="./jquery/jquery.js"></script>
    <script>
        //  不管使用任何选择器，获取到的元素都是一个元素集合

        // id选择器
        console.log($('#box'))

        // 类名选择器
        console.log($('.a'))

        // 标签名选择器
        console.log($('li'))

        // 结构选择器
        console.log($('li:nth-child(odd)'))  // 所有奇数个li
        console.log($('li:nth-child(even)'))  // 所有偶数个li

    </script>

11.3 jQuery的筛选器

jQuery的筛选器：jQuery选择器获取到的元素进行筛选
语法：$('选择器').筛选器名称()
常用筛选器
- first()
- last()
- eq(索引)
- next()
  - nextAll()
- prev()
  - prevAll()
- parent()
  - parents()
- siblings()
- find()

代码实现

html

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5
            <i>子二级</i>
        </li>
        <span>我是ul里的一个span标签</span>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <i>子一级</i>
        <li>9</li>
        <li>10</li>
    </ul>

<script src="./jquery/jquery.js"></script>
    <script>
        // 筛选器

        // 1 first 
        console.log($('li').first())

        // 2 last
        console.log($('li').last())

        // 3 eq(索引)
        // 索引从0开始，依次加1
        console.log($('li').eq(5))

        // 4 next  nextAll
        console.log($('span').next())
        console.log($('span').nextAll())

        // 5 prev  prevAll
        console.log($('span').prev())
        console.log($('span').prevAll())

        // 6 parent parents
        console.log($('span').parent())
        // 获取到的是该元素所有父级结构，逐层获取，直到 html 标签为止
        console.log($('span').parents())

        // 7 siblings
        // 拿到该元素的所有兄弟元素
        console.log($('span').siblings())

        // 8 find(选择器)
        // 找到该元素的所有后代元素中，满足选择器要求的元素
        console.log($('ul').find('i'))

    </script>

11.4 操作文本内容

jQuery提供了3个方法操作文本内容
- html()
- text()
- val()

11.4.1 html()

等价于原生JS中的innerHTML

获取选择器下的所有内容。

看注释。

        // 操作文本内容
        // 1 html()
        // 等价于原生JS中的 innerHTML()
        // 1-1 html() 获取
        console.log($('div').html())
        // div下所有内容，以字符串形式返回
        
        // 1-2 html() 设置
        // 语法：元素集合.html(你要设置的内容)
        // 注意：可以识别并解析 html 结构字符串
        $('div').html('<h2>最新内容</h2>')

11.4.2 text()

等价于原生JS中的 innerText()。

看注释。

将选择器内所有的内容都替换为text()括号内的内容。

        // 2 text()
        // 等价于原生JS中的 innerText()
        // 2-1 text() 获取
        console.log($('div').text())
        // div下所有文本内容
        
        // 2-2 text() 设置
        // 语法：元素集合.text(你要设置的内容)
        // 注意：不可以识别并解析 html 结构字符串
        $('div').text('最新内容')

11.4.3 val()

获取value属性值。

        // 3 val()
        // 等价于原生JS里的 value属性
        // 3-1 val() 获取  主要获取表单元素的内容(input)
        console.log($('input').val())

        // 3-2 val() 设置
        // 语法：元素集合.val(要设置的内容)
        // 作用：用来设置该表单元素的 value 值
        $('input').val('not world')

11.5 操作元素类名

jQuery提供了3个方法操作类名
- addClass()
- removeClass()
- toggleClass()

11.5.1 addClass()

元素本来类名为class=“a b c d”，添加类名后为class=“a b c d e”

        // 操作元素类名
        // 1 addClass()
        // 语法：元素集合.addClass(需要添加的类名)
        $('div').addClass('e')

11.5.2 removeClass()

元素本来类名为class=“a b c d”，添加类名后为class=“a c d e”

        // 2 removeClass()
        // 语法：元素集合.removeClass(要删除的类名)
        $('div').removeClass('b')

11.5.3 toggleClass()

切换的类名。

切换：如果本身有这个类名，那么就删除；如果本身没有这个类名，那么就添加。

        // 3 toggleClass()
        // 语法：元素集合.toggleClass(你要切换的类名)
        // 切换：如果本身有这个类名，那么就删除；如果本身没有这个类名，那么就添加
        $('div').toggleClass('box')

11.6 操作元素样式

css()用来操作元素样式
- 获取样式
  - 1 css() 获取样式
    注意：可以获取元素的行内样式，也可以获取元素的非行内样式
    语法：元素集合.css(要获取的样式名称)
    返回值：该样式的样式值
- 设置样式
  - 2 css() 设置样式
    语法：元素集合.css(样式名, 样式值)
    样式值是px为单位，这个px可以省略不写（在jQuery里）
- 批量设置样式
  - 3 css()批量设置样式
    语法：元素集合.css({你所有需要设置的样式})
    - 在元素集合里传一个对象。

代码实现

html

    <style>
        div {
            height: 200px;
            background-color: skyblue;
        }

    </style>
</head>
<body>
    <div style="width:100px;"></div>

        // css()
        // 1 css() 获取样式
        // 注意：可以获取元素的行内样式，也可以获取元素的非行内样式
        // 语法：元素集合.css(要获取的样式名称)
        // 返回值：该样式的样式值
        console.log($('div').css('width'))  // width是行内样式  不在style里
        console.log($('div').css('height'))  // height是非行内样式  在style里

        // 2 css() 设置样式
        // 语法：元素集合.css(样式名, 样式值)
        // 样式值是px为单位，这个px可以省略不写（在jQuery里）
        $('div').css('width', '300px')
        $('div').css('height', '500')

        // 3 css()批量设置样式
        // 语法：元素集合.css({你所有需要设置的样式})
        $('div').css({
            width: 200,
            height: 300
        })

11.7 操作元素属性

attr()
removeAttr()
prop()
removeProp()

11.7.1 attr()和removeAttr()

1 attr()
- 进行设置和获取元素的属性
- 注意：一般用于操作元素的自定义属性
- attr操作的所有属性都会直接出现在元素的标签上（区别与prop()）
- 1 获取 attr()
  - 语法：元素.attr(你要获取的属性名)
  - 返回值：该属性名对应的属性值
- 2 设置
  - 语法：元素.attr(属性名，属性值)
  - 可以设置原生属性，也可以设置元素没有的属性（给元素新增属性）
  - 注意：原生属性：元素本身就有的属性。自定义属性不是原生属性。
  - 注意：attr一般不用来设置原生属性
2 removeAttr()
- 作用：对元素的属性进行删除操作
- 语法：元素集合.removeAttr(你要删除的属性名)

        // 1-1 attr()
        console.log($('div').attr('hello'))
        // 当然也可以获取id属性值
        console.log($('div').attr('id'))

        // 1-2 设置
        $('div').attr('hello', 'JavaScript')

        // 1-3 
        $('div').removeAttr('hello')
        $('div').removeAttr('id')  //也可以删除原生属性'id'

11.7.2 prop()和removeProp()

1 prop()
- 可以获取和设置元素的元素属性
- 注意：
  - 当prop设置元素的原生属性，会直接响应在元素标签的身上；
  - 当prop设置元素的自定义属性，不会响应在元素标签身上，会响应在元素对象身上；
  - prop方法不能获取元素标签身上的自定义属性，只能获取到prop方法自己设置的自定义属性。
  - 总结：可以设置原生属性，原本的自定义属性，自己的自定义属性。
- 1 prop设置
  - 语法：元素集合.prop(属性名，属性值)
```
        // 1-1 prop()
        console.log($('div').prop('id','contaniner'))
        console.log($('div').prop('a','100'))
        // 发现，标签身上没有属性值为100的a属性，
        // 但是打印可以打印出来a属性，即在div对象自己身上存储了a属性
```
- 2 prop获取
  - 语法：元素集合.prop(你要获取的属性名)
  - 返回值：该属性对应的值。
  - 注意：prop只能获取自己设置的自定义属性，因此不能获取原本自定义属性hello的属性值
```
        // 1-2 prop()
        console.log($('div').prop('id'))  
        console.log($('div').prop('hello'))  // 返回 underfined，
```
  - 总结：只能获取原生属性和自己的自定义属性
2 removeProp()
- 用来删除元素属性的方法
- 注意：（不试了，应该没啥问题p74 9:57）
  - 不能删除原生属性
  - 只能删除由prop方法设置的自定义属性。

11.8 获取元素尺寸

width()
innerwidth()
outerwidth()
height()
innerHeight()
outerHeight()

获取元素尺寸

11.8.1 width() 和height()

获取到的就是元素内容区域的尺寸

返回值就是原本的大小。

        // 1 width()和height()
        console.log($('div').width())  // 300
        console.log($('div').height())  //300

11.8.2 innerWidth() 和 innerHeight()

返回值是原本大小+padding

        // 2 innerWidth 和 innerHeight
        console.log('-------------------------------------')
        console.log($('div').innerWidth())  // 340
        console.log($('div').innerHeight())  // 340

11.8.3 outerWidtrh() 和 outerHeight()

        console.log($('div').outerWidth())  //  380
        console.log($('div').outerHeight())  // 380

返回值是原本大小+padding+border

380*380

11.8.4 outerWidth() 和 outerHeight()

outerXxxx(true)返回值是包含你设置的margin的大小

       // outerXxxx(true)返回值是包含你设置的margin的大小
        console.log($('div').outerWidth(true))  
        console.log($('div').outerHeight(true))

11.8.5 注意事项

不管元素是否隐藏，都能获取到该元素的值
- 1、display: none，即不显示，也是会返回相应的值
- 2、visibility: hidden，也是不显示，也会返回相应的值
不管盒子模型是什么状态，拿到的尺寸区域不变
- 如果box-sizing（css样式）由content-box改为border-box（内嵌式），相应的函数返回值会变化，因为尺寸变小了。

11.9 获取元素偏移量

正常显示

css

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

        }
        div {
            width: 500px;
            height: 500px;
            margin: 30px;
            background-color: skyblue;
            overflow: hidden;
        }
        p {
            width: 300px;
            height: 500px;
            margin: 30px;
            background-color: orange;
        }
        span {
            /* 为了设置width和height */
            display: block;  
            width: 100px;
            height: 100px;
            margin: 30px;
            background-color: pink;

        }
    </style>

html

    <div>
        <p><span></span></p>
    </div>

正常显示

11.9.1 offset() 绝对位置

offset
- 获取元素相对于页面左上角的坐标位置
- 注意：返回值是一个对象数据类型，{top: xxxx, left: xxxxx}

案例

        // 1 offset
        console.log($('div').offset())    // 返回 top：30 left：30
        console.log($('p').offset())      // 返回 top：60 left：60
        console.log($('span').offset())   // 返回 top：90 left：90

11.9.2 position() 相对位置

修改上面的例子

        p {
            width: 300px;
            height: 500px;
            margin: 30px;
            background-color: orange;
            overflow: hidden;
            /* 新增 */
            position: relative;  
        }
        span {
            /* 为了设置width和height */
            display: block;  
            width: 100px;
            height: 100px;
            /* margin: 30px; */
            background-color: pink;
            /* 新增 */
            position: absolute;
            left: 30px;
            top: 30px;

        }

position()
- 获取的就是元素的定位位置
- position()返回的是相对于被定位的父元素的坐标

案例

给span去掉了margin，添加了position：absolute，和left top（分别为30px）的位置。

给p添加了position：relative

显示效果还是跟上面一样

        // 2 position
        console.log($('span').position())    // 返回 top：30 left：30

如果span的位置变化了，改为right 和bottom都为30px

显示

注意：会自动换算为top和left返回

因为是定位位置，所以就是pink相对于orange的和位置，left：orange的width-右边的30=170

top也是170

因此，top和left均为170.

11.10 事件绑定

案例的结构

代码

    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: skyblue;

        }
        p {
            width: 300px;
            height: 300px;
            background-color: orange;
        }

    </style>
</head>
<body>
    <div>我是div标签
        <p>我是div内的p标签</p>
    </div>

11.10.1 on()

1 基础绑定事件
- 语法：元素集合.on( ’事件类型’ ，事件处理函数)
- 使用：
```
$('div').on('click', function() {console.log('我是div的点击事件')})
```
2 事件委托绑定事件
- 语法：元素集合.on( ‘事件类型’, 选择器，事件处理函数)
- 把事件绑定给div元素，当在div内的p元素触发事件的时候，执行事件处理函数
- 事件委托，将p元素的事件委托给div元素来绑定
- 使用：
```
// 事件委托绑定事件
$('div').on('click', 'p', function() {console.log('我是事件委托形式的事件')})
```

3 批量绑定事件

语法：元素集合.on( { 事件类型1：处理函数，事件类型2：处理函数} )
注意：批量绑定事件就不可进行事件委托

使用：

// 批量绑定事件
$('div').on({click: function() {console.log('我是div的点击事件')}, 
mouseover: function() {console.log('我是div的鼠标移入事件')},
mouseout: function() {console.log('我是div的鼠标移出事件')},

移入移出事件很有意思

11.10.2 one()

用来绑定事件，与on()绑定事件的方式是一样的。

区别：one方法绑定的事件，只能执行一次。

比如，1 点击事件，只能触发一次，再次点击，就不能触发点击事件了；2 事件委托，也是只能触发一次事件委托；3 批量绑定事件，批量绑定的事件都只能执行一次。

（这里就不给例子了，无非就是将11.10.1代码的on替换为one）

11.10.3 hover()

hover
注意：jQuery里面一个特殊的事件。
语法：元素集合.hover(移入时触发的函数，移出时触发的函数)
当只传递一个函数时，会在移入移出都触发

使用：

// hover
$('div').hover(function() {console.log('我是div的移出事件')},function() {console.log('我是div的移入事件')})
$('div').hover(function() {console.log('我是div的移出事件')})

11.10.4 常用事件函数

常用事件函数
- jQuery 把最常用到的一些事件，单独做成了事件函数
- 通过调用这些事件函数，来达到绑定事件的效果
- 语法：$('div').click(事件处理函数)
- click()，mouseover()，mouseout(), change(), ...
- 使用：
```
// 事件绑定函数
$('div').click(function() {console.log('我是div的移出事件')})
```

11.11事件解绑和触发

案例

html

    <div>
        我是div标签
    </div>

        // 准备事件处理函数
        function handlerA() { console.log('我是handlerA事件处理函数')}
        function handlerB() { console.log('我是handlerB事件处理函数')}
        function handlerC() { console.log('我是handlerC事件处理函数')}

        // 给div元素绑定事件
        $('div').click(handlerA)
        $('div').click(handlerB)
        $('div').click(handlerC)

11.11.1 off() 事件解绑

1 全部解绑
- 语法：元素集合.off( 事件类型 )
- 作用：将div的click事件对应的所有事件处理函数全部移除
- 使用：
```
        // 1 off() 事件解绑
        $('div').off('click')
```
2 解绑指定的事件处理函数
- 语法：元素集合.off( 事件类型，要解绑的事件处理函数)
- 使用：
```
        // 1-2 
        $('div').off('click',handlerA)
```

11.11.2 trigger() 事件触发

trigger()
- 使用代码的方式来触发事件
- 语法：元素集合.trigger( 事件类型 )
- 注意：调用一次触发一次
- 使用：
```
        $('div').trigger('click')
```

11.12 jQuery的基本动画函数

将基本的DOM元素运动封装起来了，可以便捷写出基本的动画效果。

jQuery的基本动画函数
- show() 显示
- hide() 隐藏
- toggle() 切换
- 对于以上三个函数，都有共同的参数
  - 第一个参数：运动时间
  - 第二个参数：运动曲线
  - 第三个参数：运动结束的回调函数
    - 回调函数应该也就是结束时要调用的函数了，感觉名字起得太大了，我还以为是递归函数之类的。

案例

css

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

html

    <button> show </button>
    <button> hidden </button>
    <button> toggle </button>

    <div>
        
    </div>

代码

        // 基本动画
        $('button:nth-child(1)').click( function () {
            // 执行show动画函数
            $('div').show(1000, 'linear', function () {
                console.log('show 结束')
            })
        })
        $('button:nth-child(2)').click( function () {
            // 执行hide动画函数
            $('div').hide(1000, 'linear', function () {
                console.log('hide 结束')
            })
        })
        $('button:nth-child(3)').click( function () {
            // 执行toggle动画函数
            $('div').toggle(1000, 'linear', function () {
                console.log('toggle 结束')
            })
        })

11.12.1 show()

11.12.2 hide()

11.12.3 toggle()

11.13 jQuery的折叠动画

jQuery的折叠动画函数
- slideDown() 显示
- slideUp() 隐藏
- slideToggle() 切换

代码

    <script>
        // 基本动画
        $('button:nth-child(1)').click( function () {
            // 执行slideDown动画函数
            $('div').slideDown(1000, 'linear', function () {
                console.log('slideDown 结束')
            })
        })
        $('button:nth-child(2)').click( function () {
            // 执行slideUp动画函数
            $('div').slideUp(1000, 'linear', function () {
                console.log('slideUp 结束')
            })
        })
        $('button:nth-child(3)').click( function () {
            // 执行slideToggle动画函数
            $('div').slideToggle(1000, 'linear', function () {
                console.log('slideToggle 结束')
            })
        })

    </script>

效果

本质是在改变元素的高，显示就是高变大，隐藏就是高变小，切换也是同理。

11.13.1 slideDown()

11.13.2 slideUp()

11.13.3 slideToggle()

11.14 jQuery的渐隐渐现动画

jQuery的渐隐渐现动画函数
- fadeIn() 显示
- fadeOut() 隐藏
- fadeToggle() 切换
  - 以上三个函数的参数与11.13的函数一致，有三个参数，效果如其名，类似ppt的淡入淡出功能。
- fadeTo()
  - 参数1：运动时间，参数2：指定的透明度，参数3：运动曲线，参数4：回调函数

代码不写了

11.14.1 fadeIn()

11.14.2 fadeOut()

11.14.3 fadeToggle()

11.14.4 fadeTo()

11.15 jQuery的综合动画 animate()

animate()
- 参数1：要运动的样式，以一个对象数据类型传递
- 参数2：运动时间
- 参数3：运动曲线
- 参数4：回调函数
- 注意：关于颜色和 transform 相关的样式是不能运动的，其他都可以，比如left， top，border-radius

搜嘎

代码

        $('button').click(function () {
            // animate
            $('div').animate({
                width: 500,
                height: 600
            }, 1000, 'linear', function () {
                console.log('animate 结束')
            })
        })

效果

原来的div的宽高一起长到指定的width和height

11.16 jQuery的运动结束函数

需要用到运动结束的函数：多次点击toggle切换，导致div盒子一直在此消彼长，点击多少次就实现多少次。当点击事件已经结束，但是div盒子还在放缩。（类似手机卡了但是用户一直点点点，等手机恢复正常后，一直在执行用户点点点的操作）。

11.16.1 stop()

stop()
- 当任何函数执行了stop()以后，会立即结束当前所有的运动。
- 停在此刻

代码

        $('button:nth-child(1)').click(function () {
            $('div').toggle(2000)

        })

        $('button:nth-child(2)').click(function () {
            $('div').stop()

        })

效果：点击一次toggle按钮，然后立刻点击stop按钮就会停止动画效果

代码2

stop
- 利用结束动画书写动画函数
- 每次触发，都会把之前的动画停止，只执行本次最新的动画

        $('button:nth-child(1)').click(function () {
            // 利用结束动画书写动画函数
            $('div').stop().toggle(2000)

        })

效果：每次从上次结束的地方开始变化。

11.16.2 finish()

finish()
- 会立即结束当前的所有运动，直接去到动画的结束位置。
- 利用完成动画书写动画函数
  - 每次触发的时候，都会将之前的动画瞬间完成，只执行本次最新的动画，这里就是toggle
  - 实现
```
        $('button:nth-child(1)').click(function () {
            // 利用结束动画书写动画函数
            $('div').finish().toggle(2000)

        })
```

11.17 jQuery的ajax请求

jQuery的ajax请求
- 注意：因为发送ajax请求不是操作DOM，因此不需要依赖选择器去获取到元素
- 使用：直接依赖jQuery变量，或者$变量
- 语法：$.ajax({ 本次发送ajax的配置项 })
  - 配置项
    - 1 url：必填，表示请求地址
    - 2 method：选填，默认是get，表示请求方式
    - 3 data：选填，默认是''(空字符串)，表示携带给后端的参数
    - 4 async：选填，默认是true，表示是否异步
    - 5 success：选填，表示请求成功的回调函数
    - 6 error：选填，表示请求失败的回调函数

代码

        $.ajax({
            url: 'http://localhost:8888/test/first',
            success: function() {
                // res接收的是后端给回的响应结果
                console.log(res)
            }
        })

之前前后端交互没有搞好，就这样吧。