jQuery顶级对象$

$是JQuery的别称

1
2
3
4

$(function() {
})
jQuery(function(){
}) //效果相同

jQuery对象获取

本质为JQuery对DOM对象包装后的对象（伪数组）

且JQuery对象只能使用JQuery方法，不能使用原生DOM方法

1

var jq = $('div');

DOM对象转换为JQuery对象

1
2

var dom = document.querySelector('div');
$(dom); 

jQuery对象转换DOM对象

1
2
3

var jq = $('div');
var dom = jq[0];
var dom = jq.get(0);

jQuery常用API

jQuery基础选择器

$("选择器")

隐藏与显示对象

.show()显示；.hide()隐藏。

jQuery隐式迭代

1
2
3
4
5
6
7

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script>
    $('div').css('background','blue');
</script>

会将所有div都变为蓝色

1
2
3
4

<div class="demo">1</div>
<div class="demo">2</div>
<div class="demo">3</div>
<div class="demo">4</div>

1

$('.demo').css('background-image','linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)');

1
2
3
4

.demo{
    width: 40px;
    height: 20px;
}

jQuery筛选选择器

jQuery选择器

图片来源： https://www.bilibili.com/video/BV1Sy4y1C7ha