这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战 jquery简称jq，其为javascript的一个库，简化了一些javascript的操作
安装
安装两步走
- 下载jquery
下载jquery传送门 - 引入
<script src="jquery.js"></script>
PS：用cdn引入(bootcdn)
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
语法
$(selector).action()
- selector为选择器
- action是对选择器所选元素执行的方法
而我们经常在对jq操作的时候先对文档进行一个操作
$(document).ready(function(){
// 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码
});
当然还能为直接选择元素为其添加事件
$("").click(function(){
});
让操作DOM更简单
还记得在javascript中如何操作dom吗？
// 获取dom节点
var dom = document.get()
// 执行方法
dom.action();
换jq呢
$("").action()
jq对元素提供的方法
jq不仅使操作Dom更加简便，额外还提供了一些方法
- 获取/设置
- text() 设置或返回所选元素的文本内容
- html() 设置或返回所选元素的html
- val() 设置或返回表单的字段
- attr() 设置或返回元素的属性值
<p class="title"></p>
$(".title").text("EDGnb!") //设置
$(".title").text() //EDGnb!
$(".title").html() //<p class="title"></p>
- 删除
- remove() 删除被选元素及其子元素
- empty() 删除被选元素的子元素
$(".title").remove()
$(".title").text() //报错
- 操作 CSS
- addClass() 向被选元素添加一个或多个类
- removeClass() 从被选元素删除一个或多个类
- toggleClass() 对被选元素进行添加/删除类的切换操作
- css() 设置或返回样式属性
$(".title").css('color','red') //设置段落字体颜色为红色
- 宽高调节
- width() 设置或返回指定元素的宽度
- height() 设置或返回指定元素的高度
(以上两种返回值不包括内边距，边框，外边距) - innerWidth() 设置或者返回指定元素（包括内外边距与边框）的宽度
- innerHeight() 设置或者返回指定元素（包括内外边距与边框）的高度
让动画更简单
JQ提供了几种动画交互的api使我们开发者实现动画变得高效
显示隐藏
- jQuery hide()用于隐藏文本
- jQuery show()用于显示文本
淡入淡出
- jQuery fadeIn() 用于淡入已隐藏的元素。
- jQuery fadeOut() 方法用于淡出可见元素。
- jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
滑动
- jQuery slideDown() 方法用于向下滑动元素
- jQuery slideUp() 方法用于向上滑动元素
- jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
