jquery是js函数库吗

171 阅读 0 评论 113 点赞

我是靠谱客的博主鳗鱼纸鹤，这篇文章主要介绍jquery是js函数库吗，现在分享给大家，希望可以做个参考。

本文操作环境：windows10系统、jquery3.6.0版、Dell G3电脑。

jquery是js函数库

jQuery是一个快速、简洁的JavaScript库，极大地简化了 JavaScript 编程。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

语法和选择器

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery

选择符（selector）“查询"和"查找” HTML 元素

jQuery 的 action() 执行对元素的操作

jquery入口函数：

复制代码$(document).ready(function(){
     // 执行代码
});1
2
3
$(document).ready(function(){
     // 执行代码
});
登录后复制

或者

复制代码$(function(){
    // 执行代码
});1
2
3
$(function(){
    // 执行代码
});
登录后复制

选择器

#id 选择器

点击按钮对id为test的选择器进行隐藏

复制代码$(document).ready(function(){ 
$("button").click(function(){ 
$("#test").hide(); 
}); 
});1
2
3
4
5
$(document).ready(function(){ 
$("button").click(function(){ 
$("#test").hide(); 
}); 
});
登录后复制

.class 选择器

点击按钮对class为test的选择器进行隐藏

复制代码$(document).ready(function(){ 
$("button").click(function(){ 
$(".test").hide(); 
}); 
});1
2
3
4
5
$(document).ready(function(){ 
$("button").click(function(){ 
$(".test").hide(); 
}); 
});
登录后复制

事件

复制代码$().click(function(){
….
})1
2
3
$().click(function(){
….
})
登录后复制

其他事件可参考文末API

获取并设置css类

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

例子：

复制代码$(document).ready(function(){
$("button").click(function(){
$("body div:first").addClass("important blue");
});
});
.important {
font-weight:bold;
font-size:xx-large;
}
.blue {
color:blue;
}1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
$("button").click(function(){
$("body div:first").addClass("important blue");
});
});
.important {
font-weight:bold;
font-size:xx-large;
}
.blue {
color:blue;
}
登录后复制