【JQuery】write less,do more

简介: <span style="font-family:楷体; font-family:楷体; font-size:19px; line-height:27px; widows:auto">    JQuery,又是一个熟悉的单词,很多次听到它,都是和JavaScript一起,心里便画上了一个问号,这是为什么。通过JQuery阶段的学习,得到了真正的答案。</span> <div style=
    JQuery,又是一个熟悉的单词,很多次听到它,都是和JavaScript一起,心里便画上了一个问号,这是为什么。通过JQuery阶段的学习,得到了真正的答案。
    一.JQuery是什么
    JQuery,顾名思义,是JavaScript和查询(Query),是辅助JavaScript开发的库。
                                                                                            ——来自百度百科
    JQuery is a fast, small,and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handing animation and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
                                                                                            ——来自JQuery官网
    二.JQuery与JavaScript
    既然,我们都知道了JQuery和JavaScript有着不可分割的关系,那下面就让一点点来看,它们之间有着怎样的联系和区别。
    它们的联系
     没有JavaScript就没有JQuery。所以,我们可以说它们之间是父子关系或是前后关系。
     其实,这一个答案,用我们第一个问题中的话来说,便是 JQuery是一个JavaScript库。再 换句话说,JQuery是对JavaScript的封装。
     封装的好处,我们也是越来越深有体会,最明显的好处便是提高了复用性,减少了代码量。因此,使用JQuery,我们可能用简单的几行代码就可以完成JavaScript中大段代码实现的功能。
    它们的区别:
    JQuery是一种JavaScript框架,而JavaScript是一种脚本语言。
    从这里,我们便可以更加体会到JQuery的核心理念:write less,do more.
    三.JQuery编程的基本步骤
    1.加入JQuery.js的引用     
     JQuery是一个库,所以我们使用它需要提前下载好,然后在我们的HTML文件中引用即可。
    2.使用选择器查找要操作的节点
    在CSS的学习中,我们知道共有三种类型的选择器:标签、id、class.所以,我们便可以通过它们去找到我们想要操作的节点。
    3.调用JQuery对象的属性或方法来操作相应的节点。
    找到要操作的节点后,想要实现什么效果,调用其相应的属性和方法即可。
    四.JQuery小试身手
    上面接触到的都是各种理论,那么下面的实践也是不能少的。究竟,我们应该怎样去应用JQuery,那么我们就通过一个小小的实例,看看JQuery是应该如何加以应用的。
    实例:改变HTML元素的内容
    1.编写HTML的内容,并加入js引用
    
    2.编写js
    
    3.效果实现
    
    

    通过一个小小的例子,确实感受到了JQuery与JavaScript的不同,加上JQuery,让我们的代码实现变得更加简单。可能,这个例子太小,我们的体会还没有那么深。等到后面真正在项目中开始使用的时候,很多想要实现的效果是必须通过JQuery才能做到的,或者,使用JQuery可以让我们更加便捷的实现那样的效果。
    JQuery,write less,do more,这就是它的核心理念,相信后面的会有更强大的领悟。
    
目录
相关文章
|
前端开发 JavaScript
在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery、bootstrap的时候颇费了一番功夫,所以本文的步骤会尽量详细一点。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 引入bootstrap 1. 下载所需要的bootstrap文件。 将要使用的bootstrap文件放入src目录下的assets文件夹中。 2. 在入口文件src/main.js中引入bootstrap import './assets/bootstrap-3.3.7
308 0
在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
|
JavaScript 前端开发 API
|
25天前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
36 14
|
2月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
66 21
|
2月前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
60 16
|
2月前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
51 9
|
2月前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
2月前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
2月前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
2月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
33 2