本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、JQuery的基本介绍

jQuery 是一个 JavaScript 库，也是一个JS文件。 JQ中封装实现了很多方法，让使用变得更加简单不再像js那样需要使用大量的方法调用。但JQ也只是实现了一些方法，还有些没有实现，因此能够使用JQ是实现的，JS都能做，但是能够用JS做的，JQ不一定能够实现。

二、JQuery的引入方式

下载地址：www.bootcdn.cn/
下载步骤：
1.www.bootcdn.cn/ 查找这个网址
2.找到jquery库3.5.0版本
3.选择第一个，复制script标签，引入，粘贴
4.或者新建一个js文件3.51，把jquery库第一个复制链接，在网页打开，ctrl+a复制全部内容，粘贴在新建的js文件中
5.然后通过script标签引入

注意：JQ的API只对自己开放，JQ不能用JS的API，JS也不能用JQ的API
在JQ中，$()是最重要的方法，可以传递CSS选择器，Element，Document或者Window对象、html文本字符串、函数、字符串等对象
两种引入方式：
1）直接引入Jquery库
2）将JQ从网站上下载复制到Js文件中，直接将文件引入
引入后就可以像JS一样对标签进行操作，具体使用方法如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<p class="p1">我是一个p标签</p>
<p id="p2">我是一个段落标签</p>
<ul>
  <li>4</li>
  <li>3</li>
  <li>2</li>
  <li>1</li>
</ul>

<!--jquery本身就是一个JS文件，只是把我们常用的一些方法封装起来，简化了我们的代码量-->
<!--jq的引入方式-->
<!--方法一：引入jquery库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
<!--方法二：-->
<!--<script src="3.51.js"></script>-->

<script>
  // $：表示jquery的一个选择器，判断一下js是否引入成功
  // $(function(){
  //     alert("你好")
  // })

  // 1.js修改文本.js不传下标，无法生效，一条语句不能同时修改多条标签
  // var ap = document.getElementsByTagName("p")
  // ap[0].innerText = "我是通过js修改的"

  // 1.JQ修改文本 text()方法和html()方法
  // $()表示jq选择器  $("p"):表示获取p标签元素

  // 1）jq可以同时修改多条标签
  // $("p").text("我是通过jq进行修改的")

  // 2）通过class属性修改
  // $(".p1").text("我是通过jq进行修改的")

  // 3）通过id属性进行修改
  // $("#p2").text("我是通过jq进行修改的")

  // 4）通过 eq()传下标
  // $("p").eq(1).text("我是通过jq进行修改的")
  // $("p").eq(1).html("<h1>我是通过jq进行修改的</h1>") //能够转化标签

  // 2.js转jq：通过$() 括号里面传入你接收到的元素
  var ap = document.getElementsByTagName("p")
  // $(ap).text("我是通过js转jq实现的")
  // $(ap).html("<h1>我是通过jq进行修改的</h1>")

  // 3.jq转js:通过get()或者[]  里面传入下标
  $("p").get(1).innerText = "我是通过jq转js实现的"
  $("p")[0].innerText = "我是通过jq转js实现的****"

  // 4.each()方法 js和jq都可以使用 作用：遍历
  // ul li：后代选择器
  $("ul li").each(function () {
      // this:表示当前元素,在这里表示li标签
      // console.log($(this).text());  //JQ方式
      // alert(this.innerText) //js方式
      // 获取元素下标
      console.log($(this).index());

  })

</script>

</body>
</html>

15 JQuery的使用（1）

一、JQuery的基本介绍

二、JQuery的引入方式