01jquery.md
goer ... 2022-01-05 大约 5 分钟
[toc]
# JQUERY 介绍
js的一个对象，一个js的库，简化了js编程
写js的时候，一定要分号(;)结尾，不然压缩就不可以用了
# 1.开始
写jquery代码必须先引入jq库
注： jquery-3.6.0.min.js 这样的时压缩文件，占用内存小，加载快
jquery-3.6.0.js 源码文件，可以看看人家怎么写的
# 2.选中dom对象
jq拿对象的方式，直接在（）写css选择符
$('#ul li').css('color','red');
// 选中id位ul下的li 设置字体样式红色
1
2
3
2
3
# 1. even 偶数
jq中可以直接选中偶数
$('#ul li:even').css('background-color','yellow');
//设置偶数li背景位黄色
1
2
3
2
3
# 2. odd 奇数
$('#ul li:odd').css('background-color','yellow');
//设置奇数li背景位黄色
1
2
3
2
3
# 3. css选择符
:first ---- 第一个孩子
:last ---- 最后一个孩子
:nth-child(2n+1) --- 奇数的设置样式
以上都是获取到他们的个数，你我们想要获取到索引怎么办？
# 4. eq
$('#ul li:eq(2)').css('color','red')
// 这里时索引2，不是第二个
var a = 5
$('#ul li').eq(a).css('color','blue');
1
2
3
4
2
3
4
# 5.获取当前索引
index()获取当前索引
// 三个p标签
$('p').click(fucntion(){
console.log($(this).index()) //获取到点击的p索引
})
1
2
3
4
2
3
4
# 3. 获取元素内容
js innerHTML value
jq html() val()
<div value="33">我是coder</div>
//查询内容
$('div').html();
//添加
$('div').html('abc'+$('div').html()+'bcd');
//编辑
$('div').html('abcd');
//删除
$('div').html('');
// 删除整个标签 remove()
$('div').remove();
//jq获取到value
$('div').val(); //33
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 4.找关系
各个节点之间的关系
// 1.children() 找儿子
var son = $('div').children()
console.log(son.length) // 正常了，自动删除了空节点
//也可以通过find找到儿子
$('div').find('.son').css('color','blue');
// 2.parent() 父对象
$('.son').parent().css(...) //设置父亲对象
// 3.siblings() 找到所有的兄弟
$('.son').siblings().css(...)
$('.son').siblings('.two').css(...) //所用兄弟中找clss=two的兄弟
//4.next() 找弟弟，找到紧贴在其后的弟弟元素
$('.son').next().css(...) //nextAll() 找所有的弟弟
$('.son').nextAll().css(...)
// 5.prev() 找哥哥， 找到紧贴在前面的哥哥元素
$('.son').prev().css(...)
//prevAll() 找到所有的哥哥
$('.son').prevAll.css(...)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 5.设置和读取属性
js setAttribute getAttribute
jq attr
<div class='aa' xxx="x"></div>
// 设置属性
$('.aa').attr('abc','123') //设置属性abc=123
// 同时设置多个属性
$('.aa').attr({
'aa':'11',
'bb':'22', //逗号分开
'cc': '33',
})
// 获取属性
$('.aa').attr('abc') //获取当前对象的abc属性的值
// 删除属性
$('.aa').reomveAttr('xxx'); //删除xxx属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class名的增删
//添加class名
$('.aa').addClass('bbb') //添加一个bbb的class名
//删除class名
$('.aa').removeClass('bbb'); //删除bbb值
1
2
3
4
5
2
3
4
5
# 6.对象的转换
js对象和jq对象不能配合使用
jq对象只能使用jq方法，js对象只能使用js方法
<div class='bb'>对象</div>
// jq对象转dom对象
//1.种
$('.bb').get(0).innerHTML();
//2.种
$('.bb')[0].innerHTML(); //索引值
//dom对象转换为jq对象
var bb = document.getElementByClassName('bb');
bb.innerHTML; //js
console.log($(bb).html()) //转换
// this --> $(this);
//同时加多个样式，不常用
$('.bb').css({
border:'1px solid blue',
backgroundColor:'yellow', //逗号
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 7.给对象添加内容
包含html标签
<div class='go'>对象内容</div>
// 四种情况
// 1.标签内部前面添加 prepend
$('.go').prepend('<span>我在标签内部前面</span>');
// 2.标签内部后面添加 append
$('.go').append('<span>我在标签内部后面</span>');
// 3.标签外部的前面添加 before
$('.go').before('<span>外部前面</span>');
// 4.标签外部的后面添加 after
$('.go').after('<span>外部后面</span>');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 8.jq事件
js onclick onmouseover onmouseout
jq 去掉on click
<button id=“bt”></button>
$('#bt').click(function(){
$(this).css('border','10px solid skyblue');
//$(this) -- this(js)
})
1
2
3
4
5
6
2
3
4
5
6
// 点击添加tr
<botton id="add">+</botton>
<botton id="reduce">-</botton>
<table border='0' cellspacing='0' cellpadding='20' whdith="80%" align="center" class="table">
<tr>
<td>手机号码</td>
<td><input type="number"/></td>
</tr>
</table>
<script>
//引入jq代码
$('#add').onclick(function(){
var str = `<tr>
<td>手机号码</td>
<td><input type="number"/></td>
</tr>`;
$('.table').append(str);
})
$('#reduce').click(function(){
var length=$('.table tr').length;
if(length>1){
$('.table tr:last').remove(); //最后一个开始删除
}
})
</script>
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
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
移入移出 hover:移入移出综合
//很多图片
$('img').mouseover(function(){
$(this).css('opacity','.5');
})
$('img').mouseout(function(){
$(this).css('opacity','1');
})
$('img').hover(function(){
// 移入样式
},function(){
//移出样式
})
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
// 很多图片，设置一个class为big{旋转180deg}; 点击图片旋转
var flag = true;
$('img').click(function(){
if(flag){
$(this).addClass('big') //添加属性
flag = false;
}else{
$(this).removeClass('big') //添加属性
flag = true;
}
})
// 这样带有一个bug ，因为点击一次后，后面的要点击两次。 获取对象的原因
// toggleClass
$('img').click(function(){
$(this).toggleClass('big'); //有就删除，没有就添加
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
toggleClass切换class名 jq特有的
# 9.jq特效
# (1)动画
animate({样式},执行时间)动画的执行
// 一张图片
$('img').animate({
// 直接写执行的样式 逗号分开
width:400,
height:600,
borderWidth:10,
},3000) // 后面参数写时间
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
用上鼠标的移入移出事件， 事件只要执行都会一直执行
·
stop()立刻停止当前时间继续执行，开始执行下一个事件
$('img').hover(funciton(){
$(this).stop().animate({
width:400,
height:600,
borderWidth:10,
},3000)
},function(){
$(this).stop().animate({
width:100,
height:100,
borderWidth:5,
},1000)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# (2)模拟下拉框
下拉框的特效
slideUp():收起 最后变为display:none
slideDown():下拉展开 设置默认值 display: none;
// ul li*10
$('ul').slidUp(1000); // 时间参数
$('ul').slideDown(400);
1
2
3
4
2
3
4
# (3)渐隐渐显
fadeOut() 渐隐： 透明度从1到0 后设置display:none.
fadeIn() 渐显: 设置默认值display:none -- 透明度从一到零，回复默认display
// 一张图片
$('img').fadeOut(3000) //时间参数 1s=1000
$('img').fadeIn(4000) //设置默认display:none;不然没效果
1
2
3
4
2
3
4
# 10.jq加动画
animate.css 下载css文件
animate中文网 (opens new window)
WOW.js 些元素会产生细小的动画效果。
WOW.js 依赖 animate (opens new window)，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。
wow.jswow官网 (opens new window)
// 引入css文件和wow.js文件
new WOW().init(); //实例化。初始化
//给html加class名，就会带有动画了 class名看animate网站
1
2
3
4
2
3
4