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

共计 11130 个字符，预计需要花费 28 分钟才能阅读完成。

视频地址：【千锋前端 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 文件以后，会在全局暴露两个变量名

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

结果

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

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

11.2 jQuery 的选择器

代码实现

html

jQuery

11.3 jQuery 的筛选器

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

代码实现

html

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

11.4 操作文本内容

jQuery 提供了 3 个方法操作文本内容

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('最新内容
')

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

        // 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()
- 2 设置
  - 语法：元素.attr(属性名，属性值)
  - 可以设置原生属性，也可以设置元素没有的属性（给元素新增属性）
  - 注意：原生属性：元素本身就有的属性。自定义属性不是原生属性。
  - 注意：attr 一般不用来设置原生属性
2 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()

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

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

11.8.2 innerWidth() 和 innerHeight()

返回值是原本大小 +padding

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

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

11.8.3 outerWidtrh() 和 outerHeight()

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

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

380*380

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

11.8.4 outerWidth() 和 outerHeight()

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

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

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

11.8.5 注意事项

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

11.9 获取元素偏移量

正常显示

css

html

正常显示

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

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

显示

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

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

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

top 也是 170

因此，top 和 left 均为 170.

11.10 事件绑定

案例的结构

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

代码

    


    我是 div 标签
        我是 div 内的 p 标签

11.10.1 on()

1 基础绑定事件
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()

11.10.4 常用事件函数

11.11 事件解绑和触发

案例

html

    
        我是 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 全部解绑
2 解绑指定的事件处理函数

11.11.2 trigger() 事件触发

11.12 jQuery 的基本动画函数

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

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

案例

css

html

代码

        // 基本动画
        $('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() 切换

代码

效果

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

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

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

搜嘎

代码

        $('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()
- 会立即结束当前的所有运动，直接去到动画的结束位置。
- 利用完成动画书写动画函数

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)
            }
        })

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

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

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

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 请求

WordPress3 和 jQuery（二）

RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）

CSS3新增属性(15个案例 代码 效果图 素材)

fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现

一文彻底搞定MySQL中的JSON类型，效率飞起。

CSS3新增属性(15个案例代码效果图素材)