-
jQuery基础教程
文章目录
1.如何使用jQuery
1-1.下载jQuery文件
1-2.引入jQuery文件
<script src="./js/jquery-3.6.1.min.js"></script>- 1
2.jQuery的入口函数
2-1.jQuery入口函数的第一种写法
// 第一种 $(document).ready(function(){ })- 1
- 2
- 3
- 4
2-2.jQuery入口函数的第二种写法
// 第二种 $(function(){ })- 1
- 2
- 3
- 4
2-3.window.onload入口函数与jquery入口函数的区别
- window.onload入口函数不能写多个，jquery可以写多个
- jquery入口函数快于window.onload入口函数
3.$是什么
3-1.$是一个函数
3-2.传递的参数不同，效果也不同
- 如果传递的是一个匿名函数 ----- 入口函数
$(function(){ })- 1
- 2
- 3
- 如果参数是一个dom对象，就会把dom对象转换成jquery对象
$('#app')这样的话可以把dom对象转换成jquery对象，从而使用jquery对象的方法- 1
3-3.jquery对象长什么样
4.dom对象和jQuery对象
4-1.dom对象
- 使用js原生方法获取的dom就是dom对象，只能用原生提供的方法
4-2.jQuery对象
- 使用$()方法获取的dom就是jQuery对象，不能使用原生的方法，只能使用jQuery提供的方法
- jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)。
4-3.dom对象和jQuery对象相互转换
4-3-1.dom对象转换为jQuery对象
1. $(dom对象)- 1
4-3-2.jQuery对象转换为dom对象
1. $('div')[index]，index是索引 2. $('div').get(index)，index是索引- 1
- 2
5.jQuery常用API
5-1.$(‘div’).css(属性，属性值)
<script src="./js/jquery-3.6.1.min.js"></script> $(function(){ $('div').css('background','red') })- 1
- 2
- 3
- 4
效果展示：
5-2.隐式迭代
- 意思就是说$(‘div’),获取过来的元素要进行操作的时候，只要不是选中特定的一个元素，那么就会自定把这个jquery对象中的元素遍历一遍
$(function(){ $('div').css('background','red') })- 1
- 2
- 3
5-3.jQuery常用筛选选择器
- :first ----获取第一个元素
- :last ----获取最后一个元素
- :eq(index) ----获取第index个元素
- :odd ----获取索引为奇数的元素
- :even ----获取索引为偶数元素
$(function(){ $('ul li:first').css('background','red') $('ul li:last').css('background','pink') $('ul li:eq(2)').css('background','#ccc') $('ol li:odd').css('background','blue') $('ol li:even').css('background','green') })- 1
- 2
- 3
- 4
- 5
- 6
- 7
结果展示：
5-4.jQuery筛选方法（重点）
- 语法：parent() ---- 用法$(‘li’).parent() ---- 查找父级
- 语法：children(selector) ---- 用法$(‘ul’).children(‘li’) ---- 查找子级
- 语法：find(selector) ---- 用法$(‘ul’).find(‘li’) ---- 后代选择器
- 语法：siblings(selector) ---- 用法$(‘div’).siblings(‘li’) ---- 查找兄弟节点，不包括本身
- 语法：nextAll(expr) ---- 用法$(‘div’).nextAll() ---- 查找当前元素之后的所有同辈元素
- 语法：prevtAll(expr) ---- 用法$(‘.last’).prevAll() ---- 查找当前元素之前的所有同辈元素
- 语法：hasClass(class) ---- 用法$(‘div’).hasClass(protected) ---- 检查当前的元素是否含有某个特定的类，如果有返回true
- 语法：eq(index) ---- 用法$(‘li’).eq(2) ---- 相当于 $(‘ul li:eq(2)’)，index从零开始
5-5.下拉菜单
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>Documenttitle> head> <style> *{ padding: 0%; margin: 0%; } .nav{ width: 700px; height: 30px; background-color: antiquewhite; } .nav>li{ float: left; list-style: none; margin-left: 30px; line-height: 30px; text-align: center; } ul li{ list-style: none; } .hid > li{ margin-right: 40px; } .hid{ display: none; } style> <body> <ul class="nav"> <li> <a href="#">经过显示离开隐藏a> <ul class="hid"> <li>显示隐藏li> <li>显示隐藏li> <li>显示隐藏li> ul> li> <li> <a href="#">经过显示离开隐藏a> <ul class="hid"> <li>显示隐藏li> <li>显示隐藏li> <li>显示隐藏li> ul> li> <li> <a href="#">经过显示离开隐藏a> <ul class="hid"> <li>显示隐藏li> <li>显示隐藏li> <li>显示隐藏li> ul> li> <li> <a href="#">经过显示离开隐藏a> <ul class="hid"> <li>显示隐藏li> <li>显示隐藏li> <li>显示隐藏li> ul> li> ul> <script src="./js/jquery-3.6.1.min.js">script> <script> $(function(){ $('.nav>li').mouseover(function(){ $(this).children('ul').show() }) $('.nav>li').mouseout(function(){ $(this).children('ul').hide() }) }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
6.jQuery中的排他思想
- 给所有按钮去掉颜色
- 点击当前按钮变颜色
$(function(){ $('button').click(function(){ // 给所有按钮去掉颜色 $('button').siblings('button').css('background','') // 点击当前按钮变颜色 $(this).css('background','pink') }) })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
6-1.tab栏切换
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>Documenttitle> head> <style> *{ padding: 0%; margin: 0%; box-sizing: border-box; } .container{ width: 400px; height: 300px; background-color: antiquewhite; } #left li{ height: 30px; width: 30px; text-align: center; line-height: 30px; list-style: none; cursor: pointer; } #right{ width: 370px; height: 300px; background-color: aqua; position: relative; margin-left: 30px; margin-top: -300px; } #right li{ text-align: center; line-height: 300px; list-style: none; position: absolute; width: 370px; height: 300px; display: none; } style> <body> <div class="container"> <ul id="left"> <li>0li> <li>1li> <li>2li> <li>3li> <li>4li> <li>5li> <li>6li> <li>7li> <li>8li> <li>9li> ul> <div id="right"> <li>0li> <li>1li> <li>2li> <li>3li> <li>4li> <li>5li> <li>6li> <li>7li> <li>8li> <li>9li> div> div> <script src="./js/jquery-3.6.1.min.js">script> <script> $(function(){ $('#left > li').mouseover(function(){ $(this).siblings('li').css('background','') $(this).css('background','pink') var index = $(this).index() $('#right>li').siblings('li').hide() $('#right>li').eq(index).show() }) }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
7.jQuery样式操作
7-1.操作css方法
- 参数只写属性名,则是返回属性值
$(this).css('color')- 1
- 参数是属性名,属性值,逗号分隔,是设置-组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css('color','red')- 1
- 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({'color':'red','fontsize':'12px' })- 1
7-2.添加类，删除类，切换类
- 添加类 ---- addClass(‘类’)
$('div').addClass('active')- 1
- 删除类 ---- removeClass(‘类’)
$('div').removeClass('active')- 1
- 添加类 ---- toggleClass(‘类’),一会儿加上一会儿去掉
$('div').toggleClass('active')- 1
8.jQuery效果
8-1.显示隐藏
8-1-1. show([speed,[easing]，[fn]])
- speed表示要设置的时间
- easing表示指定切换效果，默认是swing，可用参数linear
- fn动画执行时的函数，每个元素可以执行一次
8-1-2. hide([speed,[easing]，[fn]])
8-1-3. toggle([speed,[easing]，[fn]])
8-2.滑动
8-2-1. slideDown([speed,[easing]，[fn]])
- speed表示要设置的时间
- easing表示指定切换效果，默认是swing，可用参数linear
- fn动画执行时的函数，每个元素可以执行一次
8-2-2. slideUp([speed,[easing]，[fn]])
8-2-3. slideToggle([speed,[easing]，[fn]])
8-3.淡入淡出
8-3-1. fadeIn([speed,[easing]，[fn]])
- speed表示要设置的时间
- easing表示指定切换效果，默认是swing，可用参数linear
- fn动画执行时的函数，每个元素可以执行一次
8-3-2. fadeOut([speed,[easing]，[fn]])
8-3-3. fadeToggle([speed,[easing]，[fn]])
8-3-4. fadeTo([speed,透明度) 修改透明度
8-4.自定义动画
8-4-1. animate(params，[speed,[easing]，[fn]])
- params，是自定义要设置的值，案例如下
<!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> </head> <style> div{ width: 200px; height: 200px; position: absolute; background-color: antiquewhite; } </style> <body> <button>动起来</button> <div></div> <script src="./js/jquery-3.6.1.min.js"></script> <script> $(function(){ $('button').click(function(){ $('div').animate({ left:300, top:300 },1000) }) }) </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
8-5.stop()停止动画解决bug
- 触发多个动画的情况下的bug，要在动画之前使用stop（）
9.jQuery属性操作
9-1.prop() ---- 设置或者获取元素固有的属性值
9-1-1.获取属性的语法
prop('属性')- 1
9-1-2.设置属性的语法
prop('属性','属性值')- 1
9-2.attr() ---- 设置或者获取元素自定义数值型
9-2-1.获取属性的语法
attr('属性')//类似于getAttribute- 1
9-2-2.设置属性的语法
attr('属性','属性值')//类似于setAttribute- 1
9-3.data（）数据缓存
- data0方法可以在指定的元素上存取数据,并不会修改DOM元素结构。- 旦页面刷新,之前存放的数据都将被移除。
10.jQuery内容文本值
10-1.html() ---- 普通元素内容
//获取元素内容 $('div').html() //设置元素内容 $('div').html('被设置了')- 1
- 2
- 3
- 4
10-2.text() ---- 获取设置元素文本内容
//获取文本内容 $('div').text() //设置文本内容 $('div').text('文本被修改了')- 1
- 2
- 3
- 4
10-3.val() ---- 获取设置表单内容
//获取表单内容 $('input').val() //设置表单内容 $('div').val('val被设置了')- 1
- 2
- 3
- 4
11.jQuery元素操作
11-1.each()方法遍历元素
- $(‘div’).each(function(index,domEle){ })
- index是遍历的索引
- domEle是索引对应的dom元素
$('div').each(function(index,domEle){ })- 1
11-2.$.each(obj，function(index,element){ })
- obj是遍历的对象
- index是遍历的索引
- element是遍历的内容
11-3.$.创建添加删除元素
11-3-1.创建元素
var li = $('- 我被创建了
')- 1
11-3-2.添加元素append(‘li’)和prepend(‘li’)after(‘ol’)before(‘ol’)
- 内部添加是父子关系
//把li元素添加到ul中的最后面 $('ul').append('li') //把li元素添加到ul中的最前面 $('ul').prepend('li')- 1
- 2
- 3
- 4
- 外部添加是兄弟关系
//把ol元素添加到ul中的后面 $('ul').after('ol') //把ol元素添加到ul中的前面 $('ul').before('ol')- 1
- 2
- 3
- 4
11-3-3.删除元素
- element.remove() ---- 删除匹配的元素本身
//删除ul $('ul').remove()- 1
- 2
- element.empty() ---- 删除匹配的元素集合中的所有子节点
//删除ul下面的所有li $('ul').empty()- 1
- 2
- element.html(’ ') ---- 清空匹配元素内容
//删除ul下面的文字 $('ul').html('')- 1
- 2
12.jQuery尺寸、位置操作
12-1.jQuery尺寸
用法请看中文手册：https://jquery.cuishifeng.cn/
12-2.jQuery位置
用法请看中文手册：https://jquery.cuishifeng.cn/
13.jQuery事件
13-1.jQuery事件注册
13-1-1. 单个事件注册(只能一个一个的注册事件)
$('div').click(function(){ }) $('div').mouseover(function(){ })- 1
- 2
13-1-2. 事件处理on() ----
- element.on(evevts,[selector],fn)
$('div').on({ click:function(){ $(this).css('background','red') }, mouseover:function(){ $(this).css('width','200') } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
13-1-3. 事件委派(给ul添加事件，委派给li，点击li的时候触发事件)
//给ul添加事件，委派给li，点击li的时候触发事件 $('ul').on('click','li'function(){ console.log('委派成功') })- 1
- 2
- 3
- 4
13-1-4. on()可以动态创建的元素绑定事件
想给ul下面的li绑定事件，但是ul下面没有li，那就动态创建一个 $(function(){ $('ul').on('click','li'function(){ console.log('动态绑定成功') }) var li = $('- 我是后来创建的
') $('ul').append('li') })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
13-1-5. off()事件解绑
//解绑ul中的click事件 $('ul').off('click')- 1
- 2
13-1-6. trigger()自动触发事件
$(function(){ $('ul').on('click','li'function(){ console.log('动态绑定成功') }) $('ul').trigger('click') })- 1
- 2
- 3
- 4
- 5
- 6
- 7
13-3.jQuery事件对象
13-3-1.事件对象
- 参数里面的e或者event就是事件对象
$(function(){ $('ul').on('click','li'function(e){ console.log(e) }) })- 1
- 2
- 3
- 4
- 5
14.jQuery的其他方法
省略
-
相关阅读:
优雅地记录http请求和响应的数据
猿创征文 | 国产数据库TiDB架构特性
Unity - 导出的FBX模型，无法将 vector4 保存在 uv 中（使用 Unity Mesh 保存即可）
FineReport制作任务日历
Idea 工作插件总结
制造企业数字化转型缺少的是什么？
LeetCode 1876. 长度为三且各字符不同的子字符串
AIGC重塑金融：AI大模型驱动的金融变革与实践
Feign实战-Springboot集成OpenFeign Demo以及参数详解
SD-WAN NFV uCPE VNF
- 原文地址：https://blog.csdn.net/LQlove1/article/details/126677740
