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

相关文章
|
17天前
|
JavaScript 前端开发 容器
this、self、window、top 在 JavaScript 中的区别深入研究
在 JavaScript 开发中,`this`、`self`、`window` 和 `top` 是四个常用的概念。`this` 指向当前执行上下文的对象,其值取决于函数调用方式;`self` 在全局作用域中等同于 `window`,常用于 Web Workers;`window` 代表浏览器窗口,是全局变量的容器;`top` 指向最顶层窗口,用于判断是否在框架中。理解这些概念有助于编写健壮的代码。
23 1
this、self、window、top 在 JavaScript 中的区别深入研究
|
3月前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
87 14
|
3月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
61 5
|
3月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
67 5
|
3月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
43 2
|
3月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
43 1
|
3月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
67 1
|
3月前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
4月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
170 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
3月前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
47 0

热门文章

最新文章