jQuery学习笔记

引入 jQuery

• 通过 MDN 引入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>

• 通过官网下载

https://jquery.com/

jQuery 获取元素

向 jQuery 或者 $ 传入一个 CSS 选择器，可以得到一个 jQuery 对象，jQuery 的 API 可以操作这个对象达到 DOM 的目的

let $abc = jQuery('#abc');
// 或者
let $bcd = $('#bcd');

jQuery 的链式操作是怎样的

我们可以通过 return this 来返回当前对象，我们在一个函数执行后再用点去操作，其实操作的就是这个函数的返回值；

function abc(){
	this.bcd = function(){
		console.log('bcd');
	}
	return this;
}

let aaa = abc.call(abc);  
// 因为 abc 是在 window 下调用的，所以 this 指向 window ，而我们需要让他指向他自己，call 的第一个参数可以解决这个问题

aaa().bcd();   // 打印 bcd

jQuery 如何创建元素

向 jQuery 的选择器中传入 html 形式的字符串，就可以得到一个含有标签的伪数组，这个标签还在 JS 线程中，我们需要手动插入到页面中

// 创建一个空标签
$('<div></div>');

// 创建一个含有内容的标签
$('<span>Hello World!</span>');

// 创建一个标签套标签的集合
let $abc = $(`
	<div>
		<span>Hello World!</span>
	</div>
`);

// 将我们创建的标签插入到页面中
$('body').append($abc);

jQuery 如何移动元素

和把大象放入冰箱的问题是一样的；

1. 使用 jQuery 选择器将需要移动的元素选中
2. 找到需要移动到的位置
3. 将选中的元素插入到指定位置上

<div>
	<div class='one'></div>
	<div class='two'></div>
	<div class='three'></div>
	<span class='text'>Hello World!!!</span>
</div>


// 第一步，选中需要移动的元素
let $text = $('.text');

// 第二步，选择需要插入的位置
let $two = $('.two');

// 第三步，将元素插入到指定位置
$two.append($text);

jQuery 如何修改元素的属性

原生 JS 中，修改属性可以通过 setAttribute 方法，jQuery 将他封装成 attr 方法

<div id="Hello">Hello World!!!</div>

$('#Hello').attr('color','red');

// 单个参数，会返回这个元素的属性值（如果元素身上有这个属性的话）
$('#Hello').attr('color');