jQuery常用函数汇总

jQuery是一个流行的JavaScript库，它简化了在网页开发中对DOM操作、事件处理、动画效果和AJAX等功能的实现。作为一个轻量级的库，它提供了跨浏览器兼容性，使得开发者能够更快速、高效地操作和操控网页元素。

主要特点包括：

1. 简化的DOM操作： jQuery通过提供简洁的API，简化了对DOM元素的选择、遍历和操作，使得开发者能够更轻松地操作网页元素。
2. 事件处理： 它简化了事件绑定和解绑的过程，使得开发者能够更容易地管理和响应用户的交互行为。
3. 动画和效果： jQuery提供了丰富的动画和效果方法，可以轻松地创建页面元素的动态效果，如淡入淡出、滑动、动画效果等。
4. AJAX支持： 简化了使用AJAX进行数据交互的过程，使得向服务器请求数据和处理响应变得更加容易。
5. 跨浏览器兼容性： jQuery的设计考虑了不同浏览器之间的兼容性，让开发者能够更好地处理不同浏览器的差异。
6. 插件生态系统： jQuery拥有丰富的插件生态系统，开发者可以利用这些插件来扩展和增强其功能。

虽然jQuery在过去是前端开发中的主流选择，但随着现代浏览器对原生JavaScript功能的增强以及其他现代框架和库的出现，一些开发者已经逐渐转向使用原生JavaScript或者其他更现代的工具来满足需求。尽管如此，jQuery仍然被广泛使用，并且对于一些特定场景和项目仍然是一个有价值的工具。

获取元素

//$(选择器)
$('div')//获取页面中的所有div元素,返回的是jQuery对象

get()

参数为索引，返回值是原生对象

eq()

参数为索引，返回值为jQuery对象

操作类名

hasClass()

检测某个元素是否有某个类名，返回值为true或false

addClass()

给某个元素添加类名，返回值为jQuery对象

removeClass()

移除类名

toggleClass()

切换类名，有就删除，没有就增加

查找元素

parent()

找到该元素的父级元素

next()

找到该元素紧挨的下一个兄弟节点

prev()

找到该元素紧挨的上一个兄弟节点

nextAll()

找到该元素下面所有兄弟节点

传入选择器，找下面符合选择器的兄弟节点

prevAll()

找到该元素上面所有兄弟节点

传入选择器，找上面符合选择器的兄弟节点

siblings()

找到该元素的所有兄弟元素

children()

找到该元素的所有子元素

find()

通过参数类名找该元素下面的元素

效果

show()

让该元素显示

hide()

让该元素隐藏

fadeIn()

淡入

fadeOut()

淡出

操作元素

html()

操作元素的标签内容，用法与原生innerHTML相似

text()

操作元素的文本内容，用法与原生innerText相似

attr()操作行内属性

一个参数的时候 是获取对应属性名的属性值

两个参数的时候 是设置对应属性

若需要设置多个属性的时候 我们可以传递一个对象

console.log($inp.attr('type'))
console.log($inp.attr('class','qqq'))
console.log($inp.attr({
  q:123,
  w:123,
  e:345
}))
$inp.attr('style','color:red');
// $inp.removeAttr('class');// 移除对应的行内属性；

css()操作css

$inp.css('color');// 一个参数的时候 是用来获取属性名对应的属性值的
$inp.css('width',200);// 两个参数是设置；
$inp.css({
  height:50,
  fontSize:20,
  paddingLeft:10
})// 若传一个对象 就是批量设置

remove()

删除该元素及其子元素

empty()

删除该元素的子元素

插入元素

append()

作为元素的最后一个子节点插入

prepend()

作为元素的第一个子节点插入

before()

作为元素的上一个兄弟节点插入

after()

作为元素的下一个兄弟节点插入

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！