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

相关文章
|
1月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
46 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
1月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
41 3
|
1月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
19 2
|
1月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
17 2
|
1月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
35 1
|
1月前
|
JavaScript
js学习--抽奖
js学习--抽奖
15 1
|
1月前
|
JavaScript
js学习--隔行换色
js学习--隔行换色
30 1
|
1月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
12 0
|
1月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
35 0
|
JavaScript 前端开发
杨老师课堂之JavaScript案例全选、全不选、及反选
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/79906084      JavaScript案例之全选、全不选、及反选 效果图: 思路:     1.
1037 0