javascript的装备库——jquery(上)🚗

安装

安装两步走

1. 下载jquery
   下载jquery传送门
2. 引入

<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更加简便，额外还提供了一些方法

1. 获取/设置

• text()  设置或返回所选元素的文本内容
• html()  设置或返回所选元素的html
• val()   设置或返回表单的字段
• attr()  设置或返回元素的属性值

<p class="title"></p>
复制代码

$(".title").text("EDGnb!") //设置
    $(".title").text() //EDGnb!
    $(".title").html()  //<p class="title"></p>
复制代码

1. 删除

• remove()  删除被选元素及其子元素
• empty()  删除被选元素的子元素

$(".title").remove()
    $(".title").text() //报错
复制代码

1. 操作 CSS

• addClass()  向被选元素添加一个或多个类
• removeClass()  从被选元素删除一个或多个类
• toggleClass()  对被选元素进行添加/删除类的切换操作
• css()  设置或返回样式属性

$(".title").css('color','red') //设置段落字体颜色为红色
复制代码

1. 宽高调节

• 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() 方法之间进行切换