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

简介: jquery简称jq,其为javascript的一个库,简化了一些javascript的操作

安装

安装两步走

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



相关文章
|
2月前
|
移动开发 JavaScript 前端开发
一些处理浏览器兼容性问题的JavaScript库
这些库在处理浏览器兼容性问题方面都有着各自的特点和优势,可以根据具体的需求和项目情况选择合适的库来使用,从而提高代码的兼容性和稳定性,为用户提供更好的体验。同时,随着浏览器技术的不断发展,还需要持续关注和学习新的兼容性解决方案。
119 48
|
2月前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
75 14
|
2月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
2月前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
2月前
|
JavaScript 前端开发
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
|
2月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
59 1
|
2月前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
2月前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
3月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
82 3
|
3月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
44 0