前端 _ jQuery 之 小白版 ( 中 )

最新推荐文章于 2022-12-09 14:42:25 发布
最新推荐文章于 2022-12-09 14:42:25 发布
阅读量663 收藏 1
点赞数
分类专栏： 前端 jQuery 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58099903/article/details/119252613
版权
前端 同时被 2 个专栏收录
160 篇文章 29 订阅
订阅专栏
jQuery
4 篇文章 0 订阅
订阅专栏

目录

1 . jQuery 操作元素内容 :

2 . jQuery 获取元素尺寸 :

3 . jQuery 获取元素偏移量 :

4 . jQuery 操作元素节点 : 

4-1.创建节点

4-2.插入节点

4-3.删除节点

4-4.替换节点  

4-5.克隆节点

5 . jQuery 的动画函数 :

5-1. jQuery 的基础动画

5-2. jQuery 的折叠动画

5-3. jQuery 的渐隐渐显动画

5-4. jQuery 的综合动画

5-5. jQuery 的停止动画

jQuery 简图 : ( 中 ) 

1 . jQuery 操作元素内容 :

<div>
  hello
  <p>你好 世界</p>
  world
</div>

<input type="text">

<script src="./jquery/jquery.min.js"></script>

1. html( )

+ 等价于原生 js 的 innerHTML

  1-1. html 获取 :

    => 语法: 元素集合.html( )

    => 返回值: 该元素内的所有 内容, 以字符串的形式返回给你

  1-2. html 设置 :

    => 语法: 元素集合.html('内容')

    => 注意: 完全覆盖式的设置元素内的所有内容

// 1-1. html() 获取
console.log($('div').html())
// 1-2. html() 设置
$('div').html('<h1>你好 世界</h1>')

2. text( )

+ 等价于原生 js 的 innerText

  2-1. text 获取 :

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

    => 返回值: 该元素内的所有 文本内容, 以字符串的形式返回给你

  2-2. text 设置 :

    => 语法: 元素集合.text('文本内容')

    => 注意: 完全覆盖式的设置元素内的所有内容

// 2-1. text 获取
console.log($('div').text())
// 2-2. text 设置
$('div').text('<h1>你好 世界</h1>')

3. val( )

+ 等价于原生 js 的 value

  3-1. val 获取 :

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

    => 返回值: 该表单元素的 value 值

  3-2. val 设置 :

    => 语法: 元素集合.val('内容')

    => 注意: 完全覆盖式的设置元素内的 value 值

// 3-1. val 获取
console.log($('input').val())
// 3-2. val 设置
$('input').val('hello world')
console.log($('input').val())

2 . jQuery 获取元素尺寸 :

+ 获取元素占地面积
+ 原生 JS 如何获取元素尺寸
  => offsetWidth 和 offsetHeight: 内容 + padding + border
  => clientWidth 和 clientHeight: 内容 + padding

<div></div>
<script src="./jquery/jquery.min.js"></script>
* {
  margin: 0;
  padding: 0;
}

div {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 20px solid pink;
  background-color: skyblue;
  background-clip: content-box;
  margin: 20px;
  /* box-sizing: border-box; */
  /* display: none; */
}

1. width( ) 和 height( )

  + 语法:

    => 元素集合.width( )

    => 元素集合.height( )

  + 作用: 获取元素 内容 区域的尺寸

2. innerWidth( ) 和 innerHeight( )

  + 语法:

    => 元素集合.innerWidth( )

    => 元素集合.innerHeight( )

  + 作用: 获取元素 内容 + padding 区域的尺寸

3. outerWidth( ) 和 outerHeight( )

  + 语法:

    => 元素集合.outerWidth( )

    => 元素集合.outerHeight( )

  + 作用: 获取元素 内容 + padding + border 区域的尺寸

4. outerWidth(true) 和 outerHeight(true)

  + 语法:

    => 元素集合.outerWidth(true)

    => 元素集合.outerHeight(true)

  + 作用: 获取元素 内容 + padding + border + margin 区域的尺寸

// 1. width() 和 height()
console.log('宽度 : ', $('div').width())
console.log('高度 : ', $('div').height())
console.log('----------------------------')
// 2. innerWidth() 和 innerHeight()
console.log('宽度 : ', $('div').innerWidth())
console.log('高度 : ', $('div').innerHeight())
console.log('----------------------------')
// 3. outerWidth() 和 outerHeight()
console.log('宽度 : ', $('div').outerWidth())
console.log('高度 : ', $('div').outerHeight())
console.log('----------------------------')
// 4. outerWidth(true) 和 outerHeight(true)
console.log('宽度 : ', $('div').outerWidth(true))
console.log('高度 : ', $('div').outerHeight(true))

3 . jQuery 获取元素偏移量 :

1. offset( )

        => 语法: 元素集合.offset( )

        => 作用: 获取元素相对于文档流左上角的绝对坐标位置

        => 返回值: 是一个对象数据类型 { top: xxx, left: xxx }

        => 注意: 参考位置就是页面左上角

        => offset( )设置语法: 元素集合.offset({ top: xxx, left: xxx })

        => 注意: 设置元素相对于页面左上角的绝对位置

      2. position( )

        => 是一个只读的方法

        => 只能获取不能设置

        => 语法: 元素集合.position( )

        => 返回值: 就是获取元素的定位位置关系, 是一个对象数据结构 { left: xxx, top: xxx }

        => 元素的 定位位置关系, 当你的定位书写的是 right 或者 bottom 的时候, 

会自动换算成 left 和 top

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

* {
  margin: 0;
  padding: 0;
}
div {
  width: 500px;
  height: 500px;
  background-color: skyblue;
  margin: 50px;
  padding: 10px;
  position: relative;
}
p {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin: 30px;
  position: absolute;
  right: 30px;
  bottom: 30px;
}
<div>
  <p></p>
</div>
<script src="./jquery/jquery.min.js"></script>
// 1. offset()
console.log($('p').offset())
// 1-2. offset() 设置
// 不管你的 p 在什么位置, 不管是否有定位
// 绝对把 p 设置在距离页面左上角 10 10 的位置
$('p').offset({ top: 10, left: 10 })
// 小练习
// 注意: 当你需要给父子级设置 offset 的时候, 考虑先移动谁
$('p').offset({ left: 10, top: 10 })
$('div').offset({ left: 300, top: 300 })

4 . jQuery 操作元素节点 : 

<div>
  <p>我是 div 内部本身的 p 标签</p>
  <span>我是 div 内部的 span 标签</span>
</div>

<script src="./jquery/jquery.min.js"></script>

4-1.创建节点

 语法 => $('html 结构字符串')

// 1. 创建一个 div 标签
console.log($('<div></div>'))

4-2.插入节点

内部插入 - 父子级关系的插入

  1. append( )

    => 语法: 父节点.append(子节点)

    => 作用: 把该子节点插入到父节点内部, 并且排列在最后的位置

  2. appendTo( )

    => 语法: 子节点.appendTo(父节点)

    => 作用: 把该子节点插入到父节点内部, 并且排列在最后的位置

  3. prepend( )

    => 语法: 父节点.prepend(子节点)

    => 作用: 把该子节点插入到父节点内部, 并且排列在最前的位置

  4. prependTo( )

    => 语法: 子节点.prependTo(父节点)

    => 作用: 把该子节点插入到父节点内部, 并且排列在最前的位置

外部插入 - 兄弟级关系的插入

  5. insertBefore( )

    => 语法: 插入节点.insertBefore(已知节点)

    => 作用: 把 插入节点 放在 已知节点 的上一个兄弟元素的位置

  6. before( )

    => 语法: 已知节点.before(插入节点)

    => 作用: 把 插入节点 放在 已知节点 的上一个兄弟元素的位置

  7. insertAfter( )

    => 语法: 插入节点.insertAfter(已知节点)

    => 作用: 把 插入节点 放在 已知节点 的下一个兄弟元素的位置

  8. after( )

    => 语法: 已知节点.after(插入节点)

    => 作用: 把 插入节点 放在 已知节点 的下一个兄弟元素的位置

// 0. 创建一个节点
const box = $('<h1>我是创建的一个 h1 标签</h1>')
// 1. append()
$('div').append(box)
// 2. appendTo()
box.appendTo($('div'))
// 3. prepend()
$('div').prepend(box)
// 4. prependTo()
box.prependTo($('div'))
// 5. insertBefore()
box.insertBefore($('div'))
// 6. before()
$('div').before(box)
// 7. insertAfter()
box.insertAfter($('div'))
// 8. after()
$('div').after(box)

4-3.删除节点

1. remove( )

  => 语法: 元素集合.remove( )

  => 作用: 把自己删除

2. empty( )

  => 语法: 元素集合.empty( )

  => 作用: 把自己变成空标签(删除所有后代元素)

// 1. remove()
$('div').remove()
// 2. empty()
$('div').empty()

4-4.替换节点  

1. replaceAll( )

  + 语法: 换上节点.replaceAll(换下节点)

  + 作用: 把所有换下节点全部替换成换上节点

2. replaceWith( )

  + 语法: 换下节点.replaceWith(换上节点)

  + 注意: 换下节点位置能获取到多少个元素就替换多少个

// 0. 准备一个节点
const box = $('<h1>我是一个创建出来的 h1 标签</h1>')
// 1. replaceAll()
box.replaceAll($('p'))
// 2. replaceWith()
$('p').replaceWith(box)

4-5.克隆节点

+ 语法: 元素集合.clone( )

+ 作用: 把该节点克隆一份一模一样的

    => 参数1: 表示是否克隆该元素自己本身的 事件, 默认是 false

    => 参数2: 表示是否克隆该元素的后代元素身上的事件, 默认是 跟随第一个 

+ 注意 : 1. 必然克隆后代节点

          2. 当你传递第二个参数的时候, 如果第一个参数是 false, 那么第二个参数没有意义

=> true true

  => false false

  => true false

            => false true 这个时候是没有意义的

<div>
  <button>按钮</button>
</div>
<hr>
<script src="./jquery/jquery.min.js"></script>
// 给 div 添加一个点击事件
$('div').click(() => console.log('div 的事件'))
// 给 button 添加一个点击事件
$('button').click(() => console.log('button 的事件'))
// 表示克隆 div 自己本身的事件
$('div').clone(true).insertAfter($('hr'))
// 表示克隆 div 和 后代元素的事件
$('div').clone(true, true).insertAfter($('hr'))
// 表示克隆 div 的事件, 不克隆 后代元素的事件
$('div').clone(true, false).insertAfter($('hr'))
// 这表示 div 和后代元素的事件都不克隆, 因为第一个参数是 false, 第二个没有意义了
$('div').clone(false, true).insertAfter($('hr'))

5 . jQuery 的动画函数 :

5-1. jQuery 的基础动画

<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<style>
* {
  margin: 0;
  padding: 0;
}
div {
  width: 300px;
  height: 300px;
  background-color: pink;
}
</style>
<div></div>
<script src="./jquery/jquery.min.js"></script>

1. show( ) - 显示

2. hide( ) - 隐藏

3. toggle( ) - 切换显示和隐藏

语法:

=> 元素集合.方法名(时间, 运动曲线, 运动结束的函数)

以上三个方法的参数

  => 参数1: 运动时间, 单位是 ms

  => 参数2: 运动曲线

  => 参数3: 运动结束的回调函数

// 1. show() - 显示
$('button:first').click(() => {
  $('div').show(500, 'linear', () => console.log('显示结束了'))
})
// 2. hide() - 隐藏
$('button').eq(1).click(() => {
  $('div').hide(500, 'linear', () => console.log('隐藏结束了'))
})
// 3. toggle() - 切换
$('button:last').click(() => {
  $('div').toggle(500, 'linear', () => console.log('切换结束了'))
})

5-2. jQuery 的折叠动画

<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<style>
* {
  margin: 0;
  padding: 0;
}
div.inner {
  width: 300px;
  height: 300px;
  background-color: pink;
  position: absolute;
  left: 0;
  bottom: 0;
}
div.outer {
  width: 300px;
  height: 300px;
  position: relative;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
<script src="./jquery/jquery.min.js"></script>

1. slideDown( ) - 下拉显示

      2. slideUp( ) - 上拉隐藏

      3. slideToggle( ) - 切换显示和隐藏

语法:

        => 元素集合.方法名(时间, 运动曲线, 运动结束的函数)

      以上三个方法的参数

        => 参数1: 运动时间, 单位是 ms

        => 参数2: 运动曲线

        => 参数3: 运动结束的回调函数

// 1. show() - 显示
$('button:first').click(() => {
  $('div.inner').slideDown(500, 'linear', () => { console.log('显示结束') })
})
// 2. hide() - 隐藏
$('button:eq(1)').click(() => {
  $('div.inner').slideUp(500, 'linear', () => { console.log('隐藏结束') })
})
// 3. toggle() - 切换
$('button:last').click(() => {
  $('div.inner').slideToggle(500, 'linear', () => { console.log('切换结束') })
})

5-3. jQuery 的渐隐渐显动画

<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<button>指定</button>
<style>
* {
  margin: 0;
  padding: 0;
}
div {
  width: 300px;
  height: 300px;
  background-color: pink;
}
</style>
<div></div>
<script src="./jquery/jquery.min.js"></script>

1. fadeIn( ) - 渐显

2. fadeOut( ) - 渐隐

3. fadeToggle( ) - 渐渐的切换

语法:

  => 元素集合.方法名(时间, 运动曲线, 运动结束的函数)

以上三个方法的参数

  => 参数1: 运动时间, 单位是 ms

  => 参数2: 运动曲线

  => 参数3: 运动结束的回调函数

4. fadeTo( )

=> 去到指定的透明度

    => 语法: fadeTo(时间, 指定透明度, 运动曲线, 运动结束的函数)

  => 参数1: 运动时间, 单位是 ms

  => 参数2: 指定 透明度

  => 参数3: 运动曲线

  => 参数4: 运动结束的回调函数

// 1. show() - 渐显
$('button:first').click(() => {
  $('div').fadeIn(1000, 'linear',() => console.log('显示结束'))
})
// 2. hide() - 渐隐
$('button:eq(1)').click(() => {
  $('div').fadeOut(1000, 'linear',() => console.log('隐藏结束'))
})
// 3. toggle() - 切换
$('button:eq(2)').click(() => {
  $('div').fadeToggle(1000, 'linear',() => console.log('切换结束'))
})
// 4. fadeTo() - 透明
$('button:last').click(() => {
  $('div').fadeTo(1000, 0.5, 'linear',() => console.log('运动结束'))
})

5-4. jQuery 的综合动画

animate( )

          => 语法: 元素集合.animate(对象, 时间, 运动曲线, 运动结束的函数)

          => 对象: 你需要运动的所有的样式

+ 什么样式都能运动

        + 但是 颜色不行, 2D和3D 变化不行, transform 相关的样式不行

=> 参数1: 对象数据类型, 你要运动的样式

          => 参数2: 运动时间, 单位是 ms

          => 参数3: 运动曲线

          => 参数4: 运动结束的回调函数

<button>切换</button>
<button>停止</button>
<button>完成</button>
<style>
div {
  width: 200px;
  height: 200px;
  background-color: pink;
  position: fixed;
}
</style>
<div></div>
<script src="./jquery/jquery.min.js"></script>

$('button').click(() => {
  // 使用 animate 函数来运动 div
  $('div').animate({
	width: 500,
	height: 300,
	opacity: 0.7,
	borderRadius: '50%',
	left: 100,
	top: 100
  }, 1000)
})

5-5. jQuery 的停止动画

jQuery 提供运动结束的函数

+ stop( )
  => 语法: 元素集合.stop( )
  => 作用: 当这句代码执行的时候,马上停止元素集合内所有元素的当前动画
  => 不管动画运动到什么阶段 , 运动到什么位置就停止在什么位置
+ finish( )
  => 语法: 元素集合.finish( )
  => 作用: 当这句代码执行的时候,马上停止元素集合内所有元素的当前动画
  => 不管动画运动到什么位置, 直接去到动画结束位置

用法:

        + 当你需要给一个元素添加动画的时候

        + 都会在前面先书写一次 stop 或者 finish

$('button:first').click(() => {
  // 让 div 切换显示和隐藏
  $('div').stop().slideToggle(1000)
  // $('div').finish().slideToggle(1000)
})
// stop()
$('button:eq(1)').click(() => {
  // 这个代码一旦执行, div 的运动马上停止
  $('div').stop()
})
// finish()
$('button:eq(2)').click(() => {
  // 这个代码一旦执行, div 的运动马上完成
  $('div').finish()
})

jQuery 简图 : ( 中 ) 

总结一下 : $( ) 的作用
        + $('选择器') : 获取页面元素
        + $(DOM 元素) : 把 DOM 元素转换成  jquery 元素集合
        + $('html格式字符串') : 创建节点

前端 _ jQuery 之 小白版 ( 上 ) : https://blog.csdn.net/weixin_58099903/article/details/119208398

前端 _ jQuery 之 小白版 ( 下 ) : https://blog.csdn.net/weixin_58099903/article/details/119272571

雨季mo浅忆
关注
专栏目录
【基本概念】clientHeight / offsetHeight / scrollHeight / window.screen.height / window.screen.availHeight
weixin_41604040的博客
12-02 801
【基本概念】clientHeight / offsetHeight / scrollHeight / window.screen.height / window.screen.availHeight测试结果讨论 参考博客： https://blog.csdn.net/qq_35430000/article/details/80277587 https://www.cnblogs.com/chuaWeb/p/html_css_1.html 以下测试和结论均基于Chrome浏览器 86.0.4240.198 (
2024年jQuery入门到精通学习教程，收藏我这篇就够了_jquery教程
最新发布
2401_84562210的博客
04-30 615
});});});
详解DOM对象中clientWidth、offsetWidth等属性
葉無聞
04-17 1万+
我们有时需要获得鼠标在某盒子中的位置，或者是随意移动某盒子的位置，在这些场景中我们可能经常需要用到clientWidth、offsetWidth、offsetTop啊等等。但是对于初学者来说（包括我），看到这些就头疼，因为感觉意思都相近，但作用却不同，所以今天天我就来捋一捋，搞清楚，后面好干活。好吧，废话不多说，开始吧。 先上一下示例代码，下面要用到。 HTML: ...
使用HTML5 Canvas，WebSocket，JQuery和ASP.NET的乐趣。 最终结果：网页上的实时白板！
04-05
使用一些最前沿的工具在网页上开发一个实时绘图白板，多个人可以协作，每个人同时具有相同的视图而无需刷新页面。
前端 _ jQuery 之 小白版( 上 )
Mr.小灰狼_随笔
07-29 820
目录 认识 jQuery 1. jQuery获取元素 : 1 )jQuery的基本选择器 : 2 )jQuery的特殊选择器: 3) jQuery的筛选器: 2. jQuery 操作元素 CSS 样式 : 3. jQuery操作元素类名 : 4. jQuery操作元素属性 : 5. jQuery 绑定事件 : 1. on( ) 方法 2. one( ) 方法 3.off( )方法 4.trigger( )方法 5.常用的事...
JQuery入门
qq_48785803的博客
04-05 583
JQuery概述 是一个快速的,简洁的JavaScript库主要作用是操作dom,能够写更少的代码,做更多的事情 JQuery优点 1.轻量级,核心文件比较小.加载速度会比较快 2.免费的,开源的 3.兼容性较强,基本兼容了主流浏览器 4.链式编程,隐式迭代 5.对事件动画支持,简化了dom操作 6.支持插件扩展 // jquery的基本使用: // 1.等着页面dom加载完毕再去执行js代码 $('div').hide(); // 2. $(document
关卡一： jQuery编程
qq_64133626的博客
09-08 292
完成JavaScript基础的学习 jQuery 一个优秀的 Javascrīpt 框架，jQuery 中包含了JavaScript 函数库，它可以通过一行简单的标记被添加到网页中。jQuery 库中包含了以下特性：通过本关卡的学习，必须掌握前6者的知识语法及使用。 学习永远都不是记忆，记忆的东西迟早会被遗忘。真正要学习一门技术，最基本的原则就是要理解它。在学习 JQuery 的知识点时，你首先要理解一些概念来辅助你理解这些知识点。JQuery 中的概念主要有这三个： JQuer
后台管理系统项目
shi15926lei的博客
11-07 758
自己写的项目,也是为了方便自己查看
前端小白入门系列之jQuery（含源码）
02-27
这个“前端小白入门系列之jQuery”资料包为初学者提供了一个全面的学习路径，帮助理解并掌握jQuery的核心概念和实用技巧。 首先，jQuery库的基本使用包括引入jQuery库到HTML页面中。这通常通过在`<head>`标签内添加...
前端jquery练习网页
10-12
这个“前端jQuery练习网页”项目是您在学习阶段完成的一个作品，虽然存在一些bug，但它仍然是一个很好的学习和回顾jQuery核心概念的起点。** 在项目中，`js` 文件夹可能包含你编写的所有 JavaScript 代码，这些代码...
前端小白入门系列课程完整版
02-22
在这个"前端小白入门系列课程完整版"中，你将逐步学习到这些基础知识，并通过实例深入理解。课程可能涵盖HTML基础、CSS布局、JavaScript基本语法、jQuery的使用，以及一个或多个项目实践。图标"icon.jpg"可能是课程...
前端jQuery学习：新浪下拉菜单
04-04
前端jQuery学习，适合前端小白，跟着pink老师一起学前端，jQuery虽然不是最新的技术，应用还是很广泛的，前端学习不可缺少的内容，学完jQuery，学习node，然后学习webpack，再学习Vue，这是我制定的前端学习路径，...
JS笔记(前端小灰狼)
tby_pr的博客
09-08 3497
目录 JavaScript基础语法 序言 JavaScript发展历史（JS） JavaScript能干什么 JavaScript的组成 JavaScript代码的书写位置 行内式 JS 代码（不推荐） 内嵌式 JS 代码 外链式 JS 代码（推荐） JS 中的注释 单行注释 多行注释 变量（重点） 定义变量及赋值 变量的命名规则和命名规范 数据类型（重点） 基本数据类型 复杂数据类型（暂时先不讲） 判断数据类型 判断一个变量是不是数字 数据类型转换 其他数据
Web前端JQuery基础
SUZHOU_9257的博客
04-15 144
JQuery知识汇总 一、关于Jquery简介 ...
Vue3+TS+移动端-购物车实现详细步骤+项目优化
shi15926lei的博客
12-09 5245
vue3购物车详情思路,再加项目优化
Web前端开发规范手册
u014484715的专栏
01-11 482
一、规范目的1.1 二、文件规范2.1 文件命名规则 2.2 文件存放位置 2.3 css 书写规 2.4 html书写规范 2.5 JavaScript书写规范 2.6 图片规范 2.7 注释规范 2.8 css 浏览器兼容 一、规范目的 1.1         概述 　　为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订
小程序的发布并发布为Android App流程
qq_56989560的博客
04-16 3804
微信小程序的发布，并发布为Android App详细步骤 图文
animate实现与slideToggle()相似效果的左右方向折叠
HDaveC的博客
02-24 5954
实现元素左右方向折叠 与slideToggle()效果类似： $(selector).animate({width:'toggle'},500);
Switch case 使用及嵌套语法
热门推荐
Mr.小灰狼_随笔
07-28 5万+
Switch case 使用及嵌套语法 目录 switch case 语句讲解 Switch 也可以嵌套 ​ 代码中 虽然没有 限制if else 能够处理的 分支 数量 ，但当分支过多时 ， 用 if else 处理会不太方便 ，而且容易出现 if else 配对出错的情况 。 所以 对于这种情况 ，实际开发中一般使用 switch 语句代替...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值