1. jQuery获取元素的方法
jQuery实质上是一个通用函数库，其基本思想是基本设计思想和主要用法，就是 "选择某个网页元素，然后对其进行某种操作"[1][2]。
我们可以从jQuery官方网站下载源码文件。然后将其在html文件中引入即可。以当前官方版本3.6.0为例，引入方式如下（来源于某国内CDN加速服务）：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
然后我们就可以开始愉快地使用jQuery。获取元素的方法有如下两种：
- 推荐！简单一些，使用
$（Dollar符号）引入，参数可以是CSS选择器，也可以是jQuery特有的表达式。第二种方式复杂一些，直接去阮一峰老师的博客看就可以。只推荐使用CSS选择器。
<div id="test"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let jq = $('#test');
</script>
- （不推荐）复杂一些的，使用
jQuery函数：
<div id="test"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let jq = jQuery('#test');
</script>
2. jQuery链式操作
什么叫“链式编程”呢？“在jQuery中，如果一直对同一个元素或元素的其他关系元素（兄弟元素，父子元素）进行操作，那么可以使用.语法(点语法)，一直写下去”[4]。
示例：
$("#box").css("background", "pink").css("font-size":"29px");
$("#box").siblings().css("background", "");
使用链式编程思想，可以改为：
$('#box').css("background", "pink").css("font-size":"29px").siblings().css("background", "");
仔细观察两边代码，可以发现是将两行相同的部分拼接为一行，然后拼接在一起。
3. jQuery 如何创建元素
在jQuery中可以通过字符串创建节点，然后通过append()、before()等方法将节点插入页面[5]。
例：
//方式1
var str = "string";
$().append(str);
//方式2
$().append("string")
4. jQuery 如何移动元素
jQuery中具有移动元素的方法。常用的有：
insertAfter()insert()
等等。
示例：
// 将div元素移动的后面
$('div').insertAfter('p');
// 将p添加到div的前面
$('p').after('div');
5. jQuery 如何修改元素的属性
有三种方式[2]：
- 获取固有属性：
prop() - 获取自定义属性：
attr() - 获取
data属性及H5属性：data()
实际工作中，前两个使用较多。
示例：
<!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">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<a href="https://www.tsinghua.edu.cn/">世界超一流大学</a>
<span>WYP</span>
<script>
let $a = $('a');
$a.prop('href', 'https://www.pku.edu.cn');
console.log($a.prop('href')); // 获取属性值
$a.attr('title', '北京大学'); // 设置自定义属性title
console.log(document.querySelector('a')); // 使用DOM操作查看一番折腾后的结果
// 上面一行代码输出是：
// <a href="https://www.pku.edu.cn" title="北京大学">世界超一流大学</a>
let $span = $('span');
$span.data('uname', 'd');
console.log($span.data('uname')); // 输出d
</script>
</body>
</html>
