jQuery从小白开始---初始jQuery
jQuery是什么？
- jQuery是一款优秀的JavaScript库，从命名可以看出jQuery最主要的用途就是用来做查询（jQuery=js+Query），正如jQuery官方Logo副标题所说（write less，do more）使用jQuery能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单。
jQuery的版本
通过jQuery官网我们可以看到，目前jQuery有三个版本：
- jQuery 1x
- jQuery 2x
- jQuery 3x
那么我们在使用时，到底该选哪一个版本呢？说到这就该看一下这三个版本的区别：
- jQuery 1x ：兼容IE678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本为：1.12.4。
- jQuery 2x ：不兼容IE678，相对1x文件较小，官方只做BUG维护，功能不再新增，最终版本为：2.2.4。
- jQuery 3x ：不兼容IE678，只支持最新浏览器，很多老的jQuery插件不支持这个版本，相对1x文件较小，提供不包含Ajax/动画API版本。
我们可以从他的性能和查看百度、淘宝等网站去判断，现在多用的是jQuery1x版。
（注：可根据自身需求去下载jQuery版本）
jQuery类型
我们在下载时可以看到jQuery不论哪个版本，它都有两种类型：
- 带min 这个是压缩过后的版本，它是去掉了我们的代码中的空格和换行，并且自行变更了参数
- 不带min 这个是生产版，利于开发人员去审查和更改
引入jQuery文件
<script src="js/jquery-1.11.3.min.js"></script>
或者在线引用
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> 微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script> 官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
jQuery的核心函数就是：$（）
编写jQuery代码
<script>
$(document).ready(function(){
//内容
})
</script>
jQuery和原生JS的区别
话不多说，上代码：
现在body里面写一个img
<body>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=904985312,1131631846&fm=26&gp=0.jpg"/>
</body>
然后我们用原生JS来看看
window.onload = function (event){
var img = document.getElementsByTagName("img")[0];
console.log(img);
}
通过原生JS入口函数可以拿到DOM元素
同样用jQuery来试试
$().ready(function(){
var $img = $("img")[0];
console.log($img);
}）
通过jQuery入口函数可以拿到DOM元素
那我们在试试分别获取DOM元素的宽高
JS
var width = window.getComputedStyle(img).width;
var height = window.getComputedStyle(img).height;
console.log("onload",width,height);
通过原生JS可以得到DOM元素的宽高
jQuery
var $width = $img.width;
var $height = $img.height;
console.log("ready",$width,$height);
（注意，在运行这一个代码时需要清除浏览器的历史记录）
从这些可以看出
- 原生JS和jQuery入口函数的加载模式不同
- 原生JS会等到DOM元素加载完毕，并且也会等图片加载完毕才执行
- jQuery会等到DOM元素加载完毕，但不会等图片加载完毕就执行
如果编写多个入口函数呢？
window.onload = function(event){
alert("这是第一个");
}
window.onload = function(event){
alert("这是第二个");
}
$().ready(function(){
alert("这是第一个")
})
$().ready(function(){
alert("这是第二个")
})
- 原生JS编写多个入口函数，后面的会覆盖前面的
- jQuery编写多个入口函数，后面的不会覆盖前面的
jQuery入口函数的其它几种写法（了解一下就好了）
//第一种
$(document).ready(function(){
alert("one");
})
//第二种
jQuery(document).ready(function(){
alert("tow");
})
//第三种
$(function(){
alert("three");
})
//第四种
jQuery(function(){
alert("four");
})
在使用中，我们通常使用第三种，因为write less嘛
静态方法和实例方法
什么是静态方法和实例方法？
<script type="text/javascript">
//1、定义一个类
function AClass(){
}
//2、给这个类添加一个静态方法
//直接添加给类的就是静态方法
AClass.staticMethod = function(){
alert("hello")
}
//静态方法通过类名调用
AClass.staticMethod(); //3、给这个类添加一个实例方法
AClass.prototype.instanceMethod = function(){
alert("world");
}
//实例方法通过类的实例调用
//创建一个实例（创建一个对象）
var a = new AClass();
//通过实例调用实例方法
a.instanceMethod();
</script>
jQuery-each方法与原生JS的forEach方法
用数组和伪数组举例
<script type="text/javascript">
var arr = [1,3,5,7,9];
var obj = {0:2,1:4,2:6,3:8,4:10,5:12,length:6}
arr.forEach(function(value , index){
console.log(index,value)
})
obj.forEach(function(value , index){
console.log(index,value)
})
</script>
用原生JS的forEach静态方法遍历数组
- 第一个参数：遍历到的元素
- 第二个参数：当前遍历到的索引
- 注意：原生JS的forEach方法只能遍历数组，不能遍历伪数组
<script type="text/javascript">
var arr = [1,3,5,7,9];
var obj = {0:2,1:4,2:6,3:8,4:10,5:12,length:6}
$.each(arr,function(index,value){
console.log(index,value);
})
$.each(obj,function(index,value){
console.log(index,value);
})
</script>
用jQuery的each方法遍历伪数组
- 第一个参数：当前遍历到的索引
- 第二个参数：遍历到的元素
- 注意：jQuery的each方法可以遍历数组和伪数组
jQuery-each方法与原生JS的map方法
<script>
var arr = [1,3,5,7,9];
var obj = {0:2,1:4,2:6,3:8,4:10,5:12,length:6};
arr.map(function(value,index,array){
console.log(index,value,array);
})
obj.map(function(value,index,array){
console.log(index,value,array);
})
</script>
用原生JS的map方法遍历
- 第一个参数：当前遍历到的元素
- 第二个参数：当前遍历到的索引
- 第三个参数：当前被遍历的数组
- 注意：原生JS的map方法跟它的forEach一样，不能遍历伪数组
<script>
var arr = [1,3,5,7,9];
var obj = {0:2,1:4,2:6,3:8,4:10,5:12,length:6};
$.map(arr, function(value,index) {
console.log(index,value);
});
$.map(obj, function(value,index) {
console.log(index,value);
});
</script>
用jQuery的map方法遍历
- 第一个参数：要遍历的数组
- 第二个参数：每遍历一个元素之后执行的回调函数
- 回调函数
- 第一个参数：遍历到的元素
- 第二个参数：遍历到的索引
- 注意：jQuery的map方法和它的each方法一样，数组跟伪数组都可以遍历
既然jQuery的map方法和each方法都可以遍历数组和伪数组，那么它们有什么区别呢？
<script>
var arr = [1,3,5,7,9];
var obj = {0:2,1:4,2:6,3:8,4:10,5:12,length:6};
var res = $.map(obj, function(value,index) {
console.log(index,value);
});
var res1 = $.each(obj, function(value,index) {
console.log(index,value);
});
console.log(res);
console.log(res1);
</script>
区别：
- each静态方法默认的返回值就是，遍历谁就返回谁
- map静态方法默认的返回值是一个空数组
- each静态方法不支持在回调函数中对遍历的数组进行处理
- map静态方法支持在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回
jQuery从小白开始---初始jQuery的更多相关文章
- 初始jQuery
JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera ...
- 初始jquery(5)
一.什么是JQuery: JQuery是对JavaScript的封装,简化了JS代码,是主流框架的基础(VUE,EasyUI,Bootstrap) 它是2006年推出的 二.JQuery的优势: 1. ...
- jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
- jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍 jQuery: http://jquery.com/ write less, do more. j ...
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- jQuery入门（1）jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门（4）jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- jQuery原生框架中的jQuery.fn.extend和jQuery.extend
extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...
随机推荐
- ASP.NET Core中使用GraphQL - 最终章 Data Loader
ASP.NET Core中使用GraphQL - 目录 ASP.NET Core中使用GraphQL - 第一章 Hello World ASP.NET Core中使用GraphQL - 第二章 中间 ...
- 《前端之路》之 webpack 4.0+ 的应用构建
目录 一.版本 二.webpack 的主体概念 2-1.入口 2-1-1.单页面入口 2-1-2.多页面应用的入口 2-2.输出 2-3.loader 2-4.plugins 三.如何使用 3-1 关 ...
- [JavaScript] AMD和CMD概述
1. cmd 和 amd 在浏览器中,受网络和浏览器渲染的制约,不能采用同步加载,只能采用异步加载.于是 AMD 规范应运而生 2. AMD AMD(Asynchronous Module Defin ...
- [PHP] debug_backtrace()可以获取到代码的调用路径追踪
查看代码的时候,看到有使用这个函数,测试一下 1.debug_backtrace()可以获取到代码的调用追踪,以数组形式返回 2.debug_print_backtrace() — 打印一条回溯,直接 ...
- 全球排名第一的免费开源ERP Odoo 12产品发布会北京站开始报名
Odoo V12 产品(北京)发布会 暨企业数字化转型论坛 快速报名通道:http://odoochina.mikecrm.com/uG8nNu4 随着新版本Odoo 12的发布,开源智造(OSCG. ...
- 联发科Helio P90(mt6779),P70(mt6775),P60(MT6771),P35,P22(MT6762)芯片参数规格
Helio P90(mt6779)是一款人工智能处理平台,集成了超级强大的AI专核APU 2.0,具有超强的AI性能和一系列基于人工智能的成像升级.该芯片将重新定义消费者对智能手机AI功能的体验.He ...
- “.Net 社区大会”(dotnetConf) 2018 Day 1 主题演讲
Miguel de Icaza.Scott Hunter.Mads Torgersen三位大咖给大家带来了 .NET Core ,C# 以及 Xamarin的精彩内容: 6月份已经发布了.NET Co ...
- Linux2：Linux目录结构
Linux目录图 进入根目录,使用ll命令看一下Linux整个根目录图: 这里面所有的目录都是买完服务器之后最初始的目录,没有进过任何加工.Linux以树的结构组织所有目录,用一张图表示一下Linux ...
- Web Deploy配置及其使用VS进行Web部署
前言: 因为公司一直比较保守所以一直都使用的是window 2008 R2版本的服务器,所以今天要讲的是在Window 2008 R2下如何配置Web Deploy. Web Deploy介绍: We ...
- 你连Nginx怎么转发给你请求都说不清楚，还好意思说自己不是CRUD工程师？
目录 一.Nginx工作原理二.Nginx进程模型三.Nginx处理HTTP请求流程 Nginx 工作原理 Nginx由内核和模块组成,Nginx本身做的工作实际很少,当它接到一个HTTP请求时,它仅 ...