jQuery是一个JavaScript库

一 jQuery准备工作：

一：jQuery下载

1.从https://jquery.com/download/网站中下载自己所需的jQuery文件

jquery手册下载 jquery教程下载_jquery


2.从 CDN 中载入 jQuery

3.使用npm安装jQuery

npm install jquery

jquery手册下载 jquery教程下载_HTML_02

二：jQuery项目引入

我使用的是npm进行安装，所以项目引入：

jquery手册下载 jquery教程下载_选择器_03


二：jQuery语法

1.在script标签中输入：

$(function(){
//防止文档在完全加载（就绪）之前运行jQuery代码，即在DOM加载完成后才可以对DOM进行操作。


});

2…选取HTML元素，并对选取的元素执行某些操作。

基础语法：$（"选择符"）.方法 $ 定义jQuery，jQuery中所有选择器都以美元符号开头： $()
选择符：选择器基于元素的id，类，类型，属性，属性值等选择HTML元素.

常用的选择符：元素选择器，id选择器，类选择器
方法：执行对选取的元素的操作

例如：$(“p”).hide() - 隐藏所有p元素

三：jQuery事件

事件的定义：页面对不同访问者的响应叫做事件。
事件处理程序的定义：当HTML中发生某些事件时所调用的方法。

常见DOM事件：

1.鼠标事件

鼠标点击事件： click dblclick
鼠标移动事件： mouseenter mouseleave
鼠标悬停事件： hover

2.键盘事件

键按下过程事件： keydown
键被按下事件 ： keypress
键被松开： keyup

3.表单事件

提交表单事件： submit

注解： 该事件只适用于 元素。

元素的值改变事件：change

4.文档窗口事件

用户滚动指定的元素事件：scroll
调整浏览器窗口大小时发生事件： resize

显示与隐藏，淡入与淡出，互动等效果在需要时查询使用即可。
通过jQuery，可以把动作、方法链接在一起，这样的话，我们可以在一条语句中运行多个jQuery方法.

jQuery操作DOM
DOM：文档对象模型

常用操作方法：
text（） 设置或返回所选元素的文本内容
html（） 设置或返回所选元素的内容（包括HTML标记）
val（） 设置或返回表单字段的值
attr() 设置或获取属性值
以上三个方法都有回调函数，回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../node_modules/jquery/dist/jquery.js"></script>
  <script>
    $(function () {
       $("#btn1").click(function () {
          alert($("#test").val())
       })
    })
  </script>
</head>
<body>
   <p>名称： <input type="text" id="test"></p>
   <button id="btn1">获取内容</button>
</body>
</html>

对DOM元素的追加
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。