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

jQuery目前在企业开发中已经不是首选,也就是会用vue来代替它。
现在学习的理由主要是学习它的思想和在一些老旧项目、外包企业、以及迭代较快的页面特效开发

一、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> 
  2. 入口函数(可省略)window.onload

    //当JQ代码要放在HTML之前时,需要使用入口函数包裹
    //作用同window.onload
    JS:
    window.onload=function(){
    
    }
    JQ:  DOM就绪函数
    1. 完整版
    $(document).read(function(){
       //写你的JQ代码
    })
    
    2. 简写版-推荐
    $(function(){
       //写你的JQ代码
    })
  3. 写JQ代码

    接下来要学的

七、JQ的语法

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

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

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

  1. $(‘css选择器’).方法();

    //比如:
    $("div").css('color','red');//给所有的div添加样式
    $("#box").addClass('on');// 给#box添加class="on"
    $(".p1").click();//给p1添加点击事件
  2. $(‘css选择器’).方法().方法().方法().方法();

    //比如:
    $("div").css('color','red').removeClass('on');
    //等价于:
    $("div").css('color','red')
    $("div").removeClass('on');
  3. $()中主要是放三类:字符串、对象、函数

    //比如:
    字符串:$("div"),$(".box"),$("内容")
    对象:$(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"元素字体颜色 
  2. 链式操作

    $("h2").css("color","red").next().css("backgroundColor","green");
此资源下载链接已被无情的隐藏,请输入验证码解锁:
验证码

请关注本站公众号回复“验证码”,获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号

WEB前端全栈圈
除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 948
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top