jQuery从小白开始---初始jQuery
程序员文章站
2022-07-06 12:04:11
jQuery是什么? jQuery是一款优秀的JavaScript库,从命名可以看出jQuery最主要的用途就是用来做查询(jQuery=js+Query),正如jQuery官方Logo副标题所说(write less,do more)使用jQuery能让我们对HTML文档遍历和操作、事件处理、动画 ......
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文件
1 <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代码
1 <script> 2 $(document).ready(function(){ 3 //内容 4 }) 5 </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对遍历的数组进行处理,然后生成一个新的数组返回