1.使用jquery库

这个其实就是js的函数扩展 https://jquery.com/download/

这是一个网址 网站里有一个js文件

jquery其实就是这个js文件的名字

这个js文件有什么用呢？

他里面放了九千行的代码 全部都是不同的函数

我们只需要再写html的时候引入这个js文件就可以使用它里面的所有函数了

<script src="jquery-3.4.0.min.js"></script>

2.基础语法

$(selector).action()

1. 美元符号定义 jQuery（用jQuery或者$符号都可以，两个是效果一样的。这个定义类似使用js时的documents.getElementById这种）
2. 选择符（selector）”查询”和”查找” HTML 元素
3. jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有

元素

$(“p.test”).hide() - 隐藏所有 class=”test” 的

元素

$(“#test”).hide() - 隐藏所有 id=”test” 的元素

这个和js还是有些冲突的

比如js中的onclick

在jquery库里面写就要不写on 直接是click

更多语法请去菜鸟教程查看

https://www.runoob.com/jquery/jquery-tutorial.html

3.文档就绪事件：

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

$(document).ready(function(){
  // 开始写 jQuery 代码...
});

也可以直接这样写：

$(function(){
  // 开始写 jQuery 代码...
});

4.选择器

1. 元素选择器

   $("p")   //在页面中选取所有<p>元素

2. #id 选择器

   $("#test")  //选取id为test的元素

3. .class选择器

   $(".test")   //选取class为test的元素

更多实例：

$("*")    //选取所有元素    

$(this)    //选取当前 HTML 元素    

$("p.intro")    //选取 class 为 intro 的 <p> 元素    

$("p:first")    //选取第一个 <p> 元素    

$("ul li:first")    //选取第一个 <ul> 元素的第一个 <li> 元素    

$("ul li:first-child")    //选取每个 <ul> 元素的第一个 <li> 元素    

$("[href]")    //选取带有 href 属性的元素    

$("a[target='_blank']")    //选取所有 target 属性值等于 "_blank" 的 <a> 元素    

$("a[target!='_blank']")    //选取所有 target 属性值不等于 "_blank" 的 <a> 元素    

$(":button")    //选取所有 type="button" 的 <input> 元素 和 <button> 元素

$("tr:even")    //选取偶数位置的 <tr> 元素    

$("tr:odd")    //选取奇数位置的 <tr> 元素    

5.事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click（点击）	keypress	submit	load
dblclick（双击）	keydown	change	resize
mouseenter（鼠标经过）	keyup	focus（获得焦点）	scroll
mouseleave（鼠标离开）		blur（元素失去焦点）	unload
hover（鼠标悬停，进出两个函数）

hover()

hover()方法用于模拟光标悬停事件。（包含mouseenter()和mouseleave()）

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

实例

$("#p1").hover(
  function(){
     alert("你进入了 p1!");
  },
  function(){
     alert("拜拜! 现在你离开了 p1!");
  }
);