jQuery基本操作

基本操作

本文章简单总结一下 jQuery 的基本操作

选择元素

使用 jQuery 首先要将元素选中，才能对其进行操作

$(document) // 选择整个文档对象
$('#one') // 选择id为one的元素
$('div.red') // 选择class为red的div元素

jQuery 提供了很多便利的过滤表达式

$(div:animated) // 选择正在执行动画的div元素
$(div:eq(2)) // 选择索引值为2的div元素
$(tr:even) // 选择表格中的偶数行
$(tr:first) // 选择表格中第一行
$(div:focus) // 选择当前获取焦点的div元素
$(div:gt(2)) // 选择除前三个外的所有div元素

jQuery 链式操作

在 jQuery 里，可以写这样的代码

$('div').find('child').addClass('red')

jQuery的操作可以像链条一样写在一起，非常方便。这被称为链式操作。

链式操作的原理在于，每一步jQuery操作都返回了一个jQuery对象，这使得每一步的操作都可以在上一步操作的基础上执行。

创建、复制、删除元素

创建元素

$('<div>hello world</div')

复制元素

let div2 = $('.div').clone()

删除元素

$('.hello').remove()
$('.hello').empty()

前者删除后不保留元素事件，后者保留

移动元素

将匹配元素插入目标元素末尾

$('.inner').append('<p>Test</p>')
$('<p>Test</p>').appendTo('.inner')

两者功能一样，内容和目标的位置不同。

有四对移动元素的方法：

.insertAfter()和.after()：将匹配元素插入目标元素末尾（外部）

.insertBefore()和.before()：将匹配元素插入目标元素前面（内部）

.appendTo()和.append()：将匹配元素插入目标元素末尾（内部）

.prependTo()和.prepend()：将匹配元素插入目标元素前面（内部）

修改元素

常用的修改元素的方法如下：

$('.box').width(300) // 设置元素宽度
$('.box').height(300) // height()同理
$('.box').css("color","red"); // 设置css
$('.box').addClass('red') // 为元素设置类名
$('#photo').attr('alt', '我是图片'); // 设置元素属性
$('.div').html('<p>hello, world</p>'); // 设置html
$("input").val('请输入'); // 设置元素值

基本特效

显示隐藏

$('.target').show(); // 显示class为target的元素
$('.target').hide() // 隐藏class为target的元素
$('.target').toggle() // 切换显示隐藏状态

其他操作

jQuery 操作远不局限于这些，这里只是一个对基本操作的概述，如果想了解更多还是需要翻阅文档。

尾声

jQuery过时了吗？当然了。在Vue、React等各大框架的流行下当然过时了。

那么在当下为什么还要学 jQuery，学 jQuery 不是说要在项目中用 jQuery，而是要学习 jQuery 中优美的设计思想。这些思想在当下依然是有价值的，它的思想继承在一个个层出不穷的库与框架中。

可以说理解了jQuery的实现，相当于打了非常好的设计模式的基础。