jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业

简介: jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
一、jquery是什么
  1. 它是一个工具库
    jQuery是一个库的名字,里面有很多方法,可以理解为没有学过的对象,只是该对象不是内置,而是一个团队开发出来的,都放在了这个库里面的。
  2. 它是一个JS文件
    该团队将代码写在一个JS文件中,供我们导入到页面中使用(插件)
    jQuery也是原生JS写的,好比自己写了很多好用的功能给别人用。
  3. 它是一个很大的函数
    该函数提供了很多现成的功能给我们用。
  4. jquery大大的简化了JS的开发难度,不用理会JS的复杂程度,让JS网页开发变得如此简单高效。所以在企业中做网页特效轻而易举
二、能做什么

jQ库封装了很多预定义的对象和实用函数来提高开发效率与降低开发难度,并且能兼容各大浏览器。

口号:写得更少,做得更多!

主要用来做网页特效,比如轮播图、手风琴效果、tab切换页等。

三、学些什么

学它的API(方法),相对于是学jQ这个大对象下的方法和属性。

jq不难学,相反大大的降低了简化了JS的开发难度,不用理会JS的复杂程度,让JS网页开发变得如此简单高效。

四、jQuery和JS的关系
  1. jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发
  2. jQuery能做的javascipt都能做到,而javascript能做的事情,jQuery不一定能做到。
五、JQ文件和版本

09年诞生以来,到现在有十多年了,版本从1到目前的最新版3.6

jQuery是全球的很多开发者都在用。之前最高峰70%的网站都在使用。

现在大概50%的PC端网站在使用,移动端则没有。

jQuery有压缩版(jquery-3.5.1.min.js)和未压缩版(jquery-3.5.1.js)

在功能上没有任何区别,区别只是把正常的JS变成了压缩的了,用的是工具来压缩。其实任何JS代码都可以借助工具来压缩,压缩的目的:

  1. 减轻容量
  2. 保密代码
六、使用jquery
  1. 在html的<head></body>结束前导入
//本地
   <script src="JS/jquery-3.6.0.min.js"></script>
   //在线
   <script src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
  1. 入口函数(可省略)window.onload
//当JQ代码要放在HTML之前时,需要使用入口函数包裹
//作用同window.onload
JS:
window.onload=function(){
}
JQ:  DOM就绪函数
1. 完整版
$(document).read(function(){
    //写你的JQ代码
})
2. 简写版-推荐
$(function(){
    //写你的JQ代码
})
  1. 写JQ代码
    接下来要学的
七、JQ的语法

学JS没有捷径可走,但是学JQ有捷径。

基础语法是:$(selector).action()

表示选择什么标签,并对他们进行操作,是不是非常的熟悉,也就是JQ主要是对DOM进行操作。

  1. $(‘css选择器’).方法();
//比如:
$("div").css('color','red');//给所有的div添加样式
$("#box").addClass('on');// 给#box添加class="on"
$(".p1").click();//给p1添加点击事件
  1. $(‘css选择器’).方法().方法().方法().方法();
//比如:
$("div").css('color','red').removeClass('on');
//等价于:
$("div").css('color','red')
$("div").removeClass('on');
  1. $()中主要是放三类:字符串、对象、函数
//比如:
字符串:$("div"),$(".box"),$("<span>内容</span>")
对象:$(document),$(this)
函数:$("div").click(function(){});
八、实例:
  1. 基础选择器改变元素字体颜色
$(this).css("color","red") - 改变当前元素字体颜色
$("p").css("color","green")) - 改变所有p元素字体颜色
$("p.test").css("color","blue") - 改变所有class="test"元素字体颜色 
$("#test").css("color","yellow") -  改变所有id="test"元素字体颜色
  1. 链式操作
$("h2").css("color","red").next().css("backgroundColor","green");
九、最后,目前是否还有必要学

其实可以用vue乞丐版来代替jquery,虽然jquery越来越没落了,但是在旧项目依然在使用它,而且它非常容易学,非常合适做网页特效。所以如果你是在做一个一次性页面,比如那种生命周期较短的宣传页等还是可以继续使用jquery的。

案例作业链接:https://www.imqd.cn/?p=191

相关文章
|
3天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
17 3
|
22天前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
20 7
|
25天前
|
JavaScript 前端开发
JS require 与 import 的区别
JS require 与 import 的区别
16 1
|
2天前
|
JavaScript 前端开发 Oracle
java和JavaScript的区别
java和JavaScript的区别
6 3
|
3天前
android-agent-web中js-bridge案例
android-agent-web中js-bridge案例
10 2
|
4天前
|
JavaScript 前端开发
js开发:请解释同步和异步编程的区别。
同步编程按顺序执行,易阻塞;异步编程不阻塞,提高效率。同步适合简单操作,异步适合并发场景。示例展示了JavaScript中同步和异步函数的使用。
14 0
|
4天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
11 1
|
8天前
|
算法
Swiper库和Glide.js库的性能有何区别
Swiper和Glide.js是两个流行的响应式轮播图库。Swiper功能强大且灵活,支持多方向滑动,拥有丰富的配置和切换效果,适合复杂需求,其高性能得益于优化的算法和惰性加载。Glide.js则轻量级、快速,专注于基础功能,适合简洁需求。两者各有侧重,选择应基于项目具体需求和性能考虑。
|
12天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
12天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习