jQuery的基础知识,常用的API

什么是jQuery

  1. jQuery是一个JavaScript函数库。jQuery是一个轻量级的”写的少,做的多”的JavaScript库。
  2. jQuery库包含以下功能:
  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities
    <script src="https://cdn.jsdelivr.net/gh/Rr210/hexofixed@v0.47/js/jquery-3.5.1.min.js"></script>

jQuery对象

  1. 等待页面加载完毕 $(document).ready(function(){})或者$(function(){})
  2. $是jQuery的别称,dollar符号,顶级对象
  3. 原生jsDOM对象,jQuery对象$()里面不能使用原生属性和方法

相互转化

  1. DOM对象转化为jQuery对象,$(obj)
  2. jQuery对象转化为DOM对象 $('div')[index] 或者$('div').get(index)

jQuery API

  1. 选择器 $('') 与css获取一致
  2. 隐式迭代 $('').css('','')(伪数组形式存储)

筛选选择器

  1. 筛选元素的方法-first/last/eq(index)/odd/even

    1
    2
    3
    4
    5
    6
    7
    8
    $(function(){
    $('ul li:first').css('color','red'); //获取第一个元素
    $('ul li:last').css('fontSize','20px');//获取最后一个
    $('ul li:eq(4)').css('backgroundColor','#ccc');//获取指定元素
    $('ul li:odd').css('textShadow','1px 2px 3px #ccc'); //获取偶数元素
    $('ul li:even').css('textIndent','10px');//获取奇数元素
    $('ul').css('listStyle','none')
    })

    筛选方法

  2. parent(),最近一级的父代

  3. children()亲儿子

  4. find() 包括儿子和孙子

  5. $().mouseover/mouseout

  6. $(this)当前元素,this不要加引号

  7. 兄弟元素 $().siblings,除了自身的所有元素

  8. nextAll([]),查找元素之后所有的同辈元素,prevAll([expr])查找之前的所有同辈元素

  9. hasClass('类名'), 检查当前元素是否含有某个特定的类,如果有,返回true

  10. eq(index)或者使用选择器$(li:eq(index))

  11. partent() children()`` find()`` eq()

  12. $(this).index()得到当前元素的索引号

查看案例

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

<style>
*{
padding: 0;
margin: 0;
}
section{
width: 600px;
height: 200px;
background-color: #ccc;
margin: 100px auto;
display: flex;
overflow: hidden;
border-radius: 10px;
border: 1px solid rgb(78, 177, 202);
}
ul{
flex:1;
display: flex;
flex-direction: column;
}
ul li{
flex: 1;
border-bottom: 2px solid rgb(194, 150, 83);
text-align: center;
line-height: 50px;
}
li{
list-style: none;
}
.content{
flex:5
}
.content img {
width: 100%;
vertical-align: middle;
}
</style>
<body>
<section>
<ul>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
<li>你好世界</li>
</ul>
<div class="content">
<li><img src="https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_66413382_20171223_233200.webp" alt=""></li>
<li><img src="https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_71658260_20181119_230056.webp" alt=""></li>
<li><img src="https://tva1.sinaimg.cn/large/a15b4afely1fnt9605xzwj21hc0u07ld.jpg" alt=""></li>
<li><img src="https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_69810542_20180804_165122.webp" alt=""></li>
</div>
</section>
<script>
$(function(){
$('ul li').eq(3).css('border-bottom','none');
$('.content li').eq(0).siblings().hide();
$('ul li').mouseover(function(){
var index = $(this).index();
$('.content li').eq(index).show();
$('.content li').eq(index).siblings().hide();
})
})
</script>

jQuery获取

查看答案

  • jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$(“span”).parent()或者$(“span”).parent(“.class”)
  • jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素
  • jQuery.children(expr),返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点
  • jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个jQuery对象返回,children()则只会返回节点
  • jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点
  • jQuery.prevAll(),返回所有之前的兄弟节点
  • jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点
  • jQuery.nextAll(),返回所有之后的兄弟节点
  • jQuery.siblings(),返回兄弟姐妹节点,不分前后
  • jQuery.find(expr),跟jQuery.filter(expr)完全不一样:
  • jQuery.filter(),是从初始的jQuery对象集合中筛选出一部分,而
  • jQuery.find(),的返回结果,不会有初始集合中的内容,比如$(“p”).find(“span”),是从

    元素开始找<span>,等同于$("p span")

操作方法

  1. 属性名一定要加引号,数值不需要加引号
  2. 符合属性,用,隔开,并用驼峰名法.css({,})
  3. 设置类样式
  • 添加类addClass('不需要加.')
  • 删除类`removeClass(‘类名’)
  • 切换类toggleClass('类名')
  1. 链式操作

jQuery效果

显示隐藏

  1. show() hide() toggle() 显示 隐藏 切换
  2. show([speed,[easeing],[fn]])

滑动

  1. slideDown() 向下滑动
  2. slideUp() 向上滑动
  3. slideToggle()
  4. hover(over,out) 事件切换
  5. 包括鼠标经过离开的符合写法
  6. 只写一个参数 使用sildeToggle(), 使用stop() 结束上一次动画

淡入淡出

  1. fadeIn() 淡入效果
  2. fadeOut() 淡出效果
  3. fadeToggle() 淡入淡出切换
  4. fadeTo('[speed],opacity,[easeing],[fn]')

自定义动画

  1. animate(params,[speed])
  2. params 以对象形式传递{ },属性名可以不带引号,复合属性使用驼峰命名法

手风琴案例

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
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
width: 950px;
margin: 100px auto;
height: 100px;
background-color: rgb(213, 233, 125);
}
ul {
width: 1000px;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
}
li{
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0;
margin-right: 20px;
border-radius: 10px;
overflow: hidden;
}
li .small{
position: absolute;
width: 100px;
height: 100px;
top:0;
z-index: 100;
}
li .big{
display: none;
width: 224px;
height: 100%;
}
ul li:nth-child(1){
width: 224px;
}
ul li:nth-child(1) .small{
display: none;
}
ul li:nth-child(1) .big{
display: block;
}
</style>

<body>
<div class="box">
<ul>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
<li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
</ul>
</div>
<script>
$(function(){
$('.box').css('borderRadius',10)
$('.box ul li').mouseenter(function(){
$(this).stop().animate({
width:224
},200).children('.small').stop().fadeOut().siblings('.big').stop().fadeIn();
$(this).siblings('li').stop().animate({
width: 100
},200).children('.big').stop().fadeOut().siblings().stop().fadeIn();
})
})
</script>

查看案例

prop() 属性值

  1. element.prop('属性名') 获得固有属性值
  2. prop('属性名','属性值')

attr()

  1. attr('属性名')元素的自定义属性
  2. 设置和prop方法一致

数据缓存

  1. data('key','value')存放在元素的内存里面
  2. 获取的时候(data('key'))
  3. 或者H5自定义属性,不需要加data-,而且返回的是数字型

全选prop()案例

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
90
91
92
93
94
95
96
<body>
<style>
* {
margin: 0;
padding: 0;
}
body{
font-size: 13px;
}
table{
text-align: center;
margin: 100px auto;
border-radius: 10px;
overflow: hidden;
}
thead{
background-color: #008dd0;
}
</style>

<body>
<table width="300px" border="1" cellspacing="0">
<thead>
<tr>
<th><label for="all">全选<input type="checkbox" id="all"></label></th>
<th>hello</th>
<th>world</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>你好世界</td>
<td>你好世界</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>你好世界</td>
<td>你好世界</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>你好世界</td>
<td>你好世界</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>你好世界</td>
<td>你好世界</td>
</tr>
</tbody>

</table>
<script>
$(function(){
$('#all').change(function(){
$('td input').prop('checked',$(this).prop('checked'))
console.log($(this).prop('checked'));
})
$('td input').attr('data-index',1);
console.log($('td input').attr('data-index'));
$('td input').change(function(){
console.log($(this).prop('checked'));
if($('td input:checked').length == $('td input').length){
$('#all').prop('checked',true);
}else{
$('#all').prop('checked',false);
}
})

})

// var main = document.getElementById('all');
// var input = document.querySelector('tbody').getElementsByTagName('input');
// // 当点击全选按钮时,下方的选框同步
// main.onclick = function () {
// console.log(this.checked);
// for (var i = 0; i < input.length; i++) {
// input[i].checked = this.checked;
// }
// }
// // 当去除下方选框,或者全部将input选框点击或取消时,全选按钮同步发生改变
// for (var i = 0; i <= input.length - 1; i++) {
// input[i].onclick = function () {
// var flag = true;
// for (var i = 0; i <= input.length - 1; i++) {
// if (!input[i].checked) {
// flag = false;
// }
// }
// main.checked = flag;
// }
// }

</script>
</body>

获取内容

  1. html() 带有标签
  2. text() 只获取文本
  3. 表单中的值 val()
  4. 获取指定的祖先元素 $(this).partents('类名')
  5. (n*n).toFixed(2)保留两位小数

元素操作

  1. 遍历元素 $('类').each(回调函数function(index,domEle))可以自己命名
  2. $.each($('类')function(index,domELe)),遍历数组

购物车经典案例

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
$(function () {
$('#all').change(function () {
$('td .da').prop('checked', $(this).prop('checked'))
// console.log($(this).prop('checked'));
})
$('td .da').attr('data-index', 1);
// console.log($('td .da').attr('data-index'));
$('td .da').change(function () {
// console.log($(this).prop('checked'));
console.log($('td .da').length / 2);
if ($('td .da:checked').length == $('td .da').length) {
$('#all').prop('checked', true);
} else {
$('#all').prop('checked', false);
}
})
// 购物车🚗增加案例
$('.box .adds').click(function () {
var n = $(this).siblings('#nums').val();
n++;
// console.log($(this).siblings('#nums').val(n));
$(this).siblings('#nums').val(n);
// 计算小计金额
var p = $(this).parents('td').next('.tup').text().substr(1);
// console.log($(this).parents('td').eq(2).text('¥' + (p * n).toFixed(2)));
$(this).parents('td').next('.tup').next('.xj').text('¥' + (p * n).toFixed(2));
getSum();
})
$('.box .subs').click(function () {
var n = $(this).siblings('#nums').val();
if (n <= 1) {
return false;
}
n--;
// console.log($(this).siblings('#nums').val(n));
$(this).siblings('#nums').val(n);
// 计算小计金额
var p = $(this).parents('td').next('.tup').text().substr(1);
$(this).parents('td').next('.tup').next('.xj').text('¥' + (p * n).toFixed(2));
getSum();
})
// 当文本框中的数量发生变化时,小计同步变化
$('#nums').change(function () {
console.log($(this).parents('td').next().text().substr(1));
var con = $(this).val();
console.log($(this).val());
var p = $(this).parents('td').next().text().substr(1);
$(this).parents('td').next().next().html('¥' + (p * con).toFixed(2));
if ($(this).val() == 1) {
$(this).parents('td').next().next().html() = $(this).parents('td').next().text()
}
getSum();
})
// 计算总计数量
getSum();
function getSum() {
var count = 0;
var money = 0;
$('td #nums').each(function(n,ele){
count += parseInt($(ele).val());
})
$('.xj').each(function(n,ele){
money += parseFloat($(ele).text().substr(1));
})
$('.count').text(count);
$('.money').text(money.toFixed(2));
}
})

查看效果