方式一：本地引入

<script src="jquery-3.3.1.min.js"></script>
<script>        //注意，一定在引入jQuery之后，再使用jQuery提供的各种操作
    code...
</script>
​

方式二：直接使用CDN
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    code...
</script>

1. 解析HTML结构。

2. 加载外部脚本和样式表文件。

3. 解析并执行脚本代码。

4. DOM树构建完成。

5. 加载图片等外部文件。

6. 页面加载完毕

id选择器：
$("#i1")
标签选择器：
$("p")
class选择器：
$(".c1")
所有元素选择器：
$("*")
交集选择器：
$("div.c1")     // 找到类为c1的div标签
并集选择器：
$("#i1,.c1,p")  // 找到所有id="i1"的标签和class="c1"的标签和p标签
层级选择器：
$("x y");       // x的所有后代y（子子孙孙）
$("x>y");       // x的所有儿子y（儿子）
$("x+y")        // 找到所有紧挨在x后面的兄弟y
$("x~y")        // x之后所有的兄弟y 
属性选择器：
$("input[type='checkbox']");    // 取到checkbox类型的input标签
$("input[type!='text']");       // 取到类型不是text的input标签

:first              // 第一个
:last               // 最后一个
:eq(index)          // 索引等于index的那个元素
:even               // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd                // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)           // 匹配所有大于给定索引值的元素
:lt(index)          // 匹配所有小于给定索引值的元素
:not(选择器)         // 过滤掉所有满足not条件的标签
:has(选择器)         // 过滤出所有后代中满足has条件的父标签
​

//例如
$("div:has(h1)")    // 找到所有后代中有h1标签的div标签
$("div:has(.c1)")   // 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")    // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例：
$(":checkbox")      // 找到所有的checkbox

:enabled
:disabled
:checked
:selected

下一个兄弟元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")  //从id="id"的标签开始往下选择兄弟标签直到id=i2的标签(不包含id=i2的标签)
上一个兄弟元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2") //从id="id"的标签开始往上选择兄弟标签直到id=i2的标签(不包含id=i2的标签)
父亲元素：

$("#id").parent()
$("#id").parents()                  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil("某个父元素")   // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素：
$("#id").children();        // 所有子标签
$("#id").siblings();        // 兄弟标签、
查找
$("div").find("p") <==> $("div p")
//搜索所有与指定表达式匹配的元素,这个函数是找出正在处理的元素的后代元素的好方法。
筛选

$("div").filter(".c1")  <==>  $("div.c1")  // 从结果集中过滤出有c1样式类的
//筛选出与指定表达式匹配的元素集合,这个方法用于缩小匹配的范围,用逗号分隔多个表达式。
.first()    // 获取匹配的第一个元素
.last()     // 获取匹配的最后一个元素
.not()      // 从匹配元素的集合中删除与指定表达式匹配的元素
.has()      // 保留包含特定后代的父元素，去掉那些不含有指定后代的元素。
.eq()       // 索引值等于指定值的元素

addClass();      // 添加指定的CSS类名。
removeClass();   // 移除指定的CSS类名。
hasClass();      // 判断样式存不存在
toggleClass();   // 切换CSS类名，如果有就移除，如果没有就添加。

css("color","red")                                    //DOM操作：Elem.style.color="red"
$("p").css("color", "red");                            //将所有p标签的字体设置为红色
$("#p1").css({"border":"1px solid black","color":"red"});//同时设置多个css样式

offset()                // 获取匹配元素在当前窗口的相对偏移或设置元素位置，可设置
$(".c3").offset({top:284,left:400})
position()              // 获取匹配元素相对父元素的偏移,不可设置
$(window).scrollTop()               // 获取匹配元素相对滚动条顶部的偏移，可设置
$(window).scrollTop(0)              //获取当前窗口相对滚动条顶部的偏移，并且可设置
$(window).scrollLeft()              // 获取匹配元素相对滚动条左侧的偏移，可设置

height()         //获取当前标签内容高度，并且可设置高度
width()         //获取当前标签内容宽度，并且可设置宽度
innerHeight()    //内容+padding
innerWidth()     //内容+padding
outerHeight()    //内容+padding+border
outerWidth()     //内容+padding+border

text()                      //只查看所有标签内的文本   
text(val)                   //先清空节点内容，再添加文本字符串:('<h1>我是h1</h1>')
注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
​

html()                      //查看所有子标签，包括文本和子标签
html(val)                   //先清空节点内容，可识别文本内的html标签('<h1>我是h1</h1>')
$('ul').html('<a href="#">百度一下</a>')   
$('ul').html(function(){     //可以使用函数来设置所有匹配元素的内容
    return '哈哈哈'
}) 
​

val
// 用途：val()用于操作input、select、textarea的value值
// 示范一：
<input type="text" name="username" >
$('input[type=text]').val()                         //查看输入框内的值或添加值
<input type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
<input type="radio" name="sex" value="none">
$('input[type=radio]').val(['male',])                //查看所选选项或选择选项，选择选项时使用列表
​

// 示范二：
<input type="checkbox" name="hobbies" value="basketball">
<input type="checkbox" name="hobbies" value="football">
<input type="checkbox" name="hobbies" value="doublecolorball">
$('input[type=checkbox]').val(['basketball','football']) //查看所选选项或选择选项(选择选项时使用列表)

<images src="1.jpg" alt="图片不见了" title="这绝对正常的图片">
attr(属性名)                                                // 返回第一个匹配元素的属性值
$('.box2 img').attr('title','美女')                         // 为所有匹配元素设置一个属性值
$('.box2 img').attr({'title': '美女', 'alt':'图片被狗吃了'})  // 为所有匹配元素设置多个属性值
$('.box2 img').removeAttr('title')                          // 从每一个匹配的元素中删除一个属性

<input type="radio" name="sex" value="male">
$(':radio[value=male]').prop('checked',true);// 设置属性
​

<input type="checkbox" name="hobbies" value="basketball">
$("input :checkbox").prop('value')          // 获取value属性的值
$("input :checkbox").prop('checked',true);   // 设置属性
$(':checkbox[value=football]').prop('checked',true);
$("table :checkbox").removeProp('value')     // 移除value属性

//内部
$(A).appendTo(B)        // 把A追加到B内部的最后面
$(A).prependTo(B)       // 把A前置到B内部的最前面
//内部
$(A).append(B)  // 把B追加到A内部的最后
$(A).prepend(B) // 把B前置到A内部的最前面
​

//外部
$(A).insertAfter(B)     // 把A放到B外部的后面