如何使用jQuery

如何使用jQuery

搜索框输入 cdn jquery
链接cdn jquery
点击自己需要的jquery版本，复制script标签即可
我一般是选择jquery.min.js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

虽然已经是2021年了，但是jquery仍然是JavaScript应用非常广泛的库，学习jquery可以让我们学习一些封装的技巧。
window.jQuery()是我们提供的全局函数，jQuery的设计思想就是接受一个选择器，然后得到这些元素，然后返回一个对象可以操作这些元素。
核心思想：选择某个网页元素，然后对其进行某种操作。
构造函数jQuery()简写为$.

jQuery 如何获取元素

　　$(document) //选择整个文档对象

　　$('#myId') //选择ID为myId的网页元素

　　$('div.myClass') // 选择class为myClass的div元素

　　$('input[name=first]') // 选择name属性等于first的input元素

jQuery 的链式操作是怎样的

因为jquery的方法每次return this ，就是返回一个对象，所以可以持续操作。

　　$('div') //找到div元素

　　　.find('h3') //选择其中的h3元素

　　　.eq(2) //选择第3个h3元素

　　　.html('Hello'); //将它的内容改为Hello

jQuery 如何创建元素

 $('fatherDiv').append('<p>hi</p>'); //利用append在父元素fatherDiv中加入p元素

jQuery 如何移动元素

第一种方法是使用.insertAfter()，把div元素移动p元素后面：

$('div').insertAfter($('p'));

第二种方法是使用.after()，把p元素加到div元素前面：

$('p').after($('div'));

jQuery 如何修改元素的属性

.html() 取出或设置html内容

　　.text() 取出或设置text内容

　　.attr() 取出或设置某个属性的值

　　.width() 取出或设置某个元素的宽度

　　.height() 取出或设置某个元素的高度

　　.val() 取出某个表单元素的值

jQuery一些方法

　　$.trim() 去除字符串两端的空格。

　　$.each() 遍历一个数组或对象。

　　$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。

　　$.grep() 返回数组中符合某种标准的元素。

　　$.extend() 将多个对象，合并到第一个对象。

　　$.makeArray() 将对象转化为数组。

　　$.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。

　　$.isArray() 判断某个参数是否为数组。

　　$.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。

　　$.isFunction() 判断某个参数是否为函数。

　　$.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。

　　$.support() 判断浏览器是否支持某个特性。

jQuery 用到的设计模式

1. jQuery()是一个函数，但是我们构造其对象时却不需要使用new。
2. 重载。$(支持多种参数)
3. 用闭包隐藏细节。
4. setter/getter。 $div.text()既可以读，又可以写。
5. $.fn 是 $.prototype的别名。
6. 适配器模式。jQuery会针对不同的浏览器使用不同的代码。

参考

1. 阮一峰的博客
2. jQuery API中文文档
3. 自己使用jQuery封装DOMgithub链接