jQuery入门

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前80%多的网站都在使用jQuery，可见它是很值得我们学习的，它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

jQuery是一个JS库，提供了方便的DOM操作系统，降低了DOM代码操作量，提高了DOM操作代码的可维护性，优化了对DOM节点的操作。

1.如何引入jQuery

方法一：

在官网https://jquery.com/下载后引入script标签使用

方法二：

在BootCDN上面https://www.bootcdn.cn/jquery/上面引入标签

方法三：使用yarn 下载

$ yran add jquery

2.开始使用jQuery

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <a href="https://jquery.com/">jQuery</a>
    <script src="jquery.js"></script> <!-- 这里引入了 -->
    <script>
 
        // Your code goes here.
 
    </script>
</body>
</html>

启动文档就续代码

这步的目的是确保在操作文档之前所有的文档已经加载好了

jQuery(document).ready(function(){
    })
    // jQuery对象可以简写成$
    $(document).ready(function(){
        //  操作代码
    })
 // 还可以简写成
$(function(){
    // 这里就可以开始写代码了
});

接下来就可以根据jQuery文档https://api.jquery.com/进行写代码了

3.快速入门常用jQuery操作

选择网页中的元素

jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。选择表达式可以是CSS选择器：

$(document);   //  选择文档对象
$('#IDname');   // 选择ID为IDname的网页元素
$('div.Class'); // 选择class为Class的div元素
$('input[name=first]'); // 选择name属性等于first的input元素

我们也可以使用jQuery特有的表达式

$('a:first'); //选择网页中第一个a元素
$('tr:odd'); //选择表格的奇数行
$('#myForm :input'); // 选择表单中的input元素
$('div:visible'); //选择可见的div元素
$('div:gt(2)'); // 选择所有的div元素，除了前三个
$('div:animated'); // 选择当前处于动画状态的div元素

使用过滤器

jQuery设计思想之二，就是提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。

$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素

在结果集上面实现DOM树的移动方法

$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素

jQuery的链式操作

所谓的链式操作就是，选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：

　$('div').find('h3').eq(2).html('Hello');

这一点堪称jQuery中最方便的一个特点之一，他的原理就是获得一个结果集后，返回值并不是结果集本身，而是包含了很多可以操作这个结果集的一些方法构成的api对象，并包含了上一个结果集的某些状态，因此可以继续使用点操作符调用相应的方法。有兴趣的同学可以参考这个手写jQuery小功能代码https://github.com/Coder-XO/jQuery_dom/blob/main/src/jquery.js

并且提供了回退到上一个结果集的方法.end()

　$('div')
　　　.find('h3')  // 找到div中的所有h3标签
　　　.eq(2)      //   找到第三个(因为是下标)h3标签
　　　.html('Hello')   //  把这个h3标签的html内容写为Hello
　　　.end() //退回到选中所有的h3元素的那一步
　　　.eq(0) //选中第一个h3元素
　　　.html('World'); //将它的内容改为World

对元素进行操作，取值和赋值

jQuery中可以使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。这里用到了函数的重载

$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

常用的取值赋值函数：

.html(); // 取出或设置html内容
.text(); // 取出或设置text内容
.attr(); // 取出或设置某个属性的值
.width(); // 取出或设置某个元素的宽度
.height(); // 取出或设置某个元素的高度
.val(); // 取出某个表单元素的值

注意：当结果集包含多个元素时，将对所有元素赋值，取值的时候取第一个元素的值，(.text()方法除外)

5.元素的操作：移动

选中了一个div元素，需要把它移动到p元素后面。

　$('div').insertAfter($('p'));   //  两种方法都可以只是返回值不同
　$('p').after($('div'));

类似的还有

.insertAfter()和.after() // 在现存元素的外部，从后面插入元素
.insertBefore()和.before() // 在现存元素的外部，从前面插入元素
.appendTo()和.append() // 在现存元素的内部，从后面插入元素
.prependTo()和.prepend() // 在现存元素的内部，从前面插入元素

元素的操作，复制，删除，和创建

复制元素

$('div').clone();

创建元素只要把新元素直接传入jQuery的构造函数就行

$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');

到这里基本就入门Jquery了，当然还有很多内容没有列举，详细情况可以参考jQuery文档https://api.jquery.com/

jQuery快速入门

jQuery入门

1.如何引入jQuery

2.开始使用jQuery

启动文档就续代码

3.快速入门常用jQuery操作

选择网页中的元素

使用过滤器

jQuery的链式操作

对元素进行操作，取值和赋值

5.元素的操作：移动

元素的操作，复制，删除，和创建