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

相关文章
|
8天前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
18 7
|
11天前
|
JavaScript 前端开发
JS require 与 import 的区别
JS require 与 import 的区别
14 1
|
19天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
20 2
|
20天前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=&gt;`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
17 5
|
21天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
18 0
|
23天前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
11 0
|
9天前
|
JavaScript 前端开发
jQuery 和 Zepto 的区别? 各自的使用场景?
jQuery 和 Zepto 的区别? 各自的使用场景?
10 1
|
11天前
|
JavaScript 前端开发 流计算
JS:oninput和onchange事件的区别
JS:oninput和onchange事件的区别
15 1
|
19天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可为任意类型,有序且支持get、set、has、delete操作;Set存储唯一值,提供add、delete、has方法。两者皆可迭代。示例展示了Map和Set的基本用法,如添加、查询、删除元素。
13 2
|
20天前
|
JavaScript 前端开发 开发者
js开发:请解释什么是ES6的let和const关键字,以及它们与var关键字的区别。
ES6引入`let`和`const`替代`var`声明变量。`let`有块级作用域,存在暂时性死区,不进行变量提升,可重新赋值。`const`用于常量,值不可变但引用类型内容可变,同样有块级作用域和暂时性死区。与`var`主要区别在于作用域、变量提升和可变性。这些改进提高了代码的可预测性和安全性。
24 2