Write less, do more.

这便是jQuery的宗旨!jQuery,一个高效、精简并且功能丰富的 JavaScript 工具库。


想必,对于每一个前端开发者,一定用过jQuery吧!俗话说,学会jQuery,打哪儿都不怕!(瞎说的。。)   jQuery也是我接触过的第一个JavaScript工具库。说句心里话,jQuery用起来确实很爽!下面分析几点:

1.原生JavaScript中获取元素(document.getElementById,document.getElementsByClassName,document.getElementByName...),一写一大串,写起来很烦。再看看jQuery中获取元素($('id或className或HTML标签名称'))。真是方便!

2.jQuery中对ajax进行了封装,用起来非常顺手。

原生ajax:

 function success(res) {
//do something
} function fail(res) {
//do something
} var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象 request.onreadystatechange = function () { // 状态发生变化时,函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功,通过responseText拿到响应的文本:
return success(request.responseText);
} else {
// 失败,根据响应码判断失败原因:
return fail(request.status);
}
} else {
// HTTP请求还在继续...
}
} // 发送请求:
request.open('GET', '/xxx');
request.send(); alert('请求已发送,请等待响应...');

jQuery ajax:

 $.ajax({
url: "", //后台服务地址
type: "POST" 或 "GET", //还可以是PUT、DELETE
success: function(){
//do something
},
error: function() {
//do something
}
}); //jQuery ajax还提供了很多可选的属性,有兴趣可以去查看下相关文档!

3.jQuery提供很多便捷的事件方法。

jQuery事件方法:浏览器事件文档加载绑定事件处理器事件对象表单事件键盘事件鼠标事件。这里的话,有兴趣的话可以查看相关文档链接。

4.jQuery提供了快速实现动画效果的方法。

只需使用jQuery的一个方法就可以让你的页面更加生动!比如:.fadeIn() 、.animate()


jQuery的版本,最新版本jQuery3.2.1 。目前,jQuery共有3代版本,分别是:jQuery1.x.x、jQuery2.x.x、jQuery3.x.x。

这里注意的是,从jQuery2.x.x开始级以后的版本不再对ie9以下等浏览器的支持。官方原话:If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or Safari 5.1+, use jQuery 1.12.


jQuery统一了不同浏览器之间的DOM操作,使用它,你便可以轻松的对页面进行DOM操作!

后续,我将深入jQuery,学习了解这个JavaScript库是如何实现的,并着手打造一个jQuery插件。    c⌒っ*゚∀゚)メ装完就跑

闲聊jQuery(一)的更多相关文章

  1. 网页插件学javascript还是jquery好啊?

    文章的起因,也是在群内交流是回答一个小伙的问题,一扯就停不下来,但由于个人知识面覆盖有限,自身基础又不够扎实,仅供参考: 问这个问题之前,我个人建议先搞清什么是jquery,什么是js?     jq ...

  2. 堆糖瀑布流完整解决方案(jQuery)

    2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...

  3. 解析jQuery中extend方法--源码解析以及递归的过程《二》

    源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...

  4. jquery实现同时展示多个tab标签+左右箭头实现来回滚动(美化版增加删除按钮)

    闲聊 前段时间小颖分享了:jquery实现同时展示多个tab标签+左右箭头实现来回滚动文章,引入项目后,我们的组长说样子太丑了,小颖觉得还好啊,要不大家评评理,看下丑不丑?无图无真相,来上图: 看吧其 ...

  5. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  6. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  7. Jquery的点击事件,三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  8. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  9. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

随机推荐

  1. tensorflow进阶篇-5(反向传播1)

    这里将讲解tensorflow是如何通过计算图来更新变量和最小化损失函数来反向传播误差的:这步将通过声明优化函数来实现.一旦声明好优化函数,tensorflow将通过它在所有的计算图中解决反向传播的项 ...

  2. Collection articles on stackoverflow

    What does “WHERE 1” mean in SQL? http://stackoverflow.com/questions/3720735/what-does-where-1-mean-i ...

  3. 为什么要设置Java环境变量(windows)

    在学习JAVA的过程中,涉及到多个环境变量(environment variable)的概念,如PATH.正确地配置这些环境变量,是能够顺利学习.开发的前提.而经常出现的问题是:有的学习者能够按照提示 ...

  4. JAVA与DOM解析器提高(DOM/SAX/JDOM/DOM4j/XPath) 学习笔记二

    要求 必备知识 JAVA基础知识.XML基础知识. 开发环境 MyEclipse10 资料下载 源码下载   sax.dom是两种对xml文档进行解析的方法(没有具体实现,只是接口),所以只有它们是无 ...

  5. Vue笔记:使用 VS Code 断点调试

    直接在 Chrome 的调试窗口中调试 Vue 代码有诸多不便, 好在 Visual Studio Code 中提供了 Debugger for Chrome 插件,能够通过配置直接在 VS Code ...

  6. MySQL Cluster 日常维护

    在前面几篇文章已经详细介绍了MySQL Cluster的搭建,配置讲解.而且相信大家都掌握了基本用法.现在我们来看看Cluster的日常维护.熟悉日常维护,将有助于工作中更好的管理和使用Cluster ...

  7. Solidity的自定义结构体深入详解

    一.结构体定义 结构体,Solidity中的自定义类型.我们可以使用Solidity的关键字struct来进行自定义.结构体内可以包含字符串,整型等基本数据类型,以及数组,映射,结构体等复杂类型.数组 ...

  8. Lambda 遍历

    遍历列表元素 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  9. es6学习笔记4--数组

    数组的扩展 Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据 ...

  10. [转]微信小程序、微信公众号、H5之间相互跳转

    本文转自:https://www.cnblogs.com/colorful-paopao1/p/8608609.html 转自慕课网 一.小程序和公众号 答案是:可以相互关联. 在微信公众号里可以添加 ...