jQuery进阶续集--通过案例(随机颜色案例、全选与反选、递归实现动画、全屏滚动、进度条...)深入知识点

你的名字 2022-01-29 04:57 136阅读 0赞

### 这篇文章是接着写的 ###

防止篇幅过长，影响浏览;所以分开写  
这是上集：[https://blog.csdn.net/weixin\_41105030/article/details/90342430][https_blog.csdn.net_weixin_41105030_article_details_90342430]

### 全选与反选 ###

全选与反选的需求其实很好理解；实际上就是一个串联电路；只要有一处断路；整个电流都是无法流动…这里不是讲物理学；只是让我们更加去理解我们要做什么（又要夸自己了：这么贴切的例子都让我想得到）

<div class="wrap">
        <table>
            <thead>
            <tr><th>通电（有没有断路的）:<input type="checkbox" id="j_cbAll" /></th></tr>
            </thead>
            <tbody id="j_tb">
            <tr><td>灯泡1开关：<input type="checkbox" /></td>
            </tr>
            <tr><td>灯泡2开关：<input type="checkbox" /></td></tr>
            <tr><td>灯泡3开关：<input type="checkbox" /></td></tr>
            <tr><td>灯泡4开关：<input type="checkbox" /></td></tr>
            </tbody>
        </table>
    </div>
    ......
    <script> $(function () { }) </script>

1.  当点击通电时；所有的开关都必须打开（这是全选与全不选）

$("#j_cbAll").click(function () { 
                    var cked=$(this).prop("checked");//保存当前复选框的选中状态
                    //获取tbody中所有的复选框
                    $("#j_tb").find(":checkbox").prop("checked",cked);
                });

1.  当只要有一处灯泡开关没有打开；那么在串联电路中，则是断路(反选)

$("#j_tb").find(":checkbox").click(function () { 
                //先获取tbody中所有的复选框的个数
                var length1=$("#j_tb").find(":checkbox").length;
                //再获取tbody中所有选中的复选框的个数
                var length2=$("#j_tb").find(":checked").length;
                //二者比较,如果相同,让最上面的复选框选中,否则不选中
                if(length1==length2){ 
                    //都选中了
                    $("#j_cbAll").prop("checked",true);
                }else{ 
                    //有没选中
                    $("#j_cbAll").prop("checked",false);
                }
            });

### 三大家族 ###

我们在js发现`scrollTop`有兼容问题；还有`offsetLeft`是只读属性等等…

##### offset(\[coordinates\])获取或设置匹配元素在当前视口的相对偏移。 #####

console.log($("#dv").offset().left);
    console.log($("#dv").offset().top);
    $("#dv").offset({ "left":200,"top":200});

##### scrollTop(\[val\])获取匹配元素相对滚动条顶部的偏移。 #####

<p>Hello</p><p>2nd Paragraph</p>

$("p:last").text( "scrollTop:" + $("p:first").scrollTop() );//获取第一段相对滚动条顶部的偏移

参数val 描述:设置相对滚动条顶部的偏移

### 获取设置宽高 ###

$(function () { 
            console.log($('div').width())//获取div的宽度
            $('div').height(400)//设置高度为400px
            console.log($('div').innerWidth())//width+padding
            console.log($('div').outerWidth(true))//width+padding+margin
        })

innerWidth/innerHeight：获取第一个匹配元素内部区域宽度/高度（包括补白、不包括边框）。  
outerWidth(\[options\])/outerHeight(\[options\]):获取第一个匹配元素外部高度（默认包括补白和边框）.options设置为true，计算边距在内。

### 事件 ###

##### 事件绑定 #####

1.  直接绑定

$("#btn").mouseover(function () { 
            $(this).css("backgroundColor","red");
        }).mouseout(function () { 
            $(this).css("backgroundColor","");
        }).click(function () { 
            alert("链式编程");
        });

1.  bind()方法:第一个参数是事件名字,第二个参数是事件处理函数-匿名函数;解绑事件是$(ele).unbind(事件名称)
2.  父级元素.delegate(“子级元素”,“事件类型”,事件处理函数)；$(ele).undelegate"子级元素",“事件类型”)
3.  上面两种就略过了，主要是我们的`on`事件；我们的案例已经多次使用on了；这里主要讲一下事件委托（利用事件的冒泡，绑定父元素去帮我们处理代理事件）;on方法:三个参数: 1,事件的名字, 2.要绑定事件的元素–p,3事件处理函数

$('ul').on('click','li',function () { 
            console.log(this)
        })

##### 事件解绑off事件 #####

因为bind和delegate这两种基本不用，所以我们这里主要讲on事件的解绑

function fn(){ 
            console.log(1111)
        }
        $('button:first').on('click',fn)
    
        $('button:last').click(function () { 
            // $('button:first').off('click',fn) 这种是有指定函数名
            $('button:first').off()//移除父级元素和子级元素的所有的事件
        })

##### 事件触发三种方式 #####

点击第二个按钮触发按钮1的点击事件

1.  调用它的click事件

$(function () { 
        $('input[type=button]').eq(0).click(function () { 
            console.log(111)
        })
        $('input[type=button]').eq(1).click(function () { 
            $('input[type=button]').eq(0).click() //1
        })
    })

1.  使用trigger()触发

$(this).prev().trigger("click")  //2

1.  triggerHandler()

$(this).siblings().triggerHandler("click")

##### 但是triggerHandler()不会触发浏览器默认事件，其它两种都一样会 #####

$('#txt').focus()
            $('#txt').trigger('focus')
            $('#txt').triggerHandler('focus') //没有任何效果

##### 事件对象 #####

$('input[type=button]').eq(0).click(function (e) { 
            console.log(e)
        })

### 多库共存问题 ###

比如我们有时使用其它库也有`$`方法；比如`zetop`和`jquery`同时使用(打比方);那么`$`符号冲突------**让jquery对$对象进行释放控制权**

##### `$`符号 #####

`$`是著名的jQuery符号。实际上，jQuery把所有功能全部封装在一个全局变量`jQuery`中，而`$`也是一个合法的变量名，它是变量`jQuery`的别名：

window.jQuery; // jQuery(selector, context)
    window.$; // jQuery(selector, context)
    $ === jQuery; // true
    typeof($); // 'function'

##### 解决一：使用jQuery #####

绝大多数时候，我们都直接用 （ 因 为 写 起 来 更 简 单 嘛 ） 。 但 是 ， 如 果 （因为写起来更简单嘛）。但是，如果 （因为写起来更简单嘛）。但是，如果这个变量不幸地被占用了，而且还不能改，那我们就只能让jQuery把$变量交出来，然后就只能使用jQuery这个变量：

jQuery('input').click(function () { 
        })

##### 解决二：让jQuery把$变量交出来 #####

var xy=$.noConflict();//释放控制权
        //从此以后xy就是曾经的$---一毛一样的
        var $=100;//$原本是对象--->变量
        xy(function () { 
            xy("#btn").click(function () { 
            });
        });

这种黑魔法的原理是jQuery在占用 之 前 ， 先 在 内 部 保 存 了 原 来 的 之前，先在内部保存了原来的 之前，先在内部保存了原来的,调用jQuery.noConflict()时会把原来保存的变量还原。

$; // jQuery(selector, context)
    jQuery.noConflict();
    $; // undefined
    jQuery; // jQuery(selector, context)

### AJAX ###

用jQuery的相关对象来处理AJAX，不但不需要考虑浏览器问题，代码也能大大简化。  
jQuery在全局对象jQuery（也就是$）绑定了ajax()函数，可以处理AJAX请求。ajax(url, settings)函数需要接收一个URL和一个可选的settings对象，常用的选项如下：

*  async：是否异步执行AJAX请求，默认为true，千万不要指定为false；
 *  method：发送的Method，缺省为’GET’，可指定为’POST’、'PUT’等；
 *  contentType：发送POST请求的格式，默认值为’application/x-www-form-urlencoded; charset=UTF-8’，也可以指定为text/plain、application/json；
 *  data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；
 *  headers：发送的额外的HTTP头，必须是一个object；
 *  dataType：接收的数据格式，可以指定为’html’、‘xml’、‘json’、'text’等，缺省情况下根据响应的Content-Type猜测。
 *  type:返回内容格式，xml, html, script, json, text, \_default。

##### 先写个后台文件 #####

<?php
    if($_SERVER['REQUEST_METHOD']==='POST'){ 
    	$arr  = array('name' => 1111, 'age' => 18,'methods'=>'post');
    	echo json_encode($arr);
    }else{ 
    	$arr  = array('name' => 1111, 'age' => 18,'methods'=>'get');
    	echo json_encode($arr);

还没学PHP的可以直接复制粘贴；然后开启`wampServer`即可（记得文件要在同文件夹下）

##### jQuery.get(url, \[data\], \[callback\], \[type\]) #####

$(function(){ 
    	$.get('jq.php',function(data){ 
    		console.log(data)//{"name":1111,"age":18,"methods":"get"}
    	})
    })

##### jQuery.post(url, \[data\], \[callback\], \[type\]) #####

$(function(){ 
    	$.post('jq.php',function(data){ 
    		console.log(data)//{"name":1111,"age":18,"methods":"get"}
    	})
    })

##### jQuery.post(url, \[data\], \[callback\], \[type\]) #####

$.post('jq.php',function(data){ 
    		console.log(data)//{"name":1111,"age":18,"methods":"get"}
    	},'json')

##### jQuery.getJSON(url, \[data\], \[callback\]) #####

这是跨域请求

$.getJSON('http://127.0.0.1/jq.php', function(json, textStatus) { 
    			console.log(json)
    	});

如果报错就使用下面的

##### ajax综合应用 #####

可以到某接口平台注册一个免费的玩玩；也可以使用我下面这个天气接口

$.ajax({ 
    		url: 'http://api.jisuapi.com/weather/query',//请求地址
    		type: 'get',// 请求方式
    		dataType: 'jsonp',//设置跨域
    		data: { appkey:'eee8cacbc1e612cd',city:'汕头'},//请求参数
    		jsonp: 'callback'//jsonp属性的作用就是自定义参数名字;是参数的键;默认callback
    		//jsonpCallback:'abc',//这个属性的作用就是自定义回调函数的名字（callback=abc ，这里的名字指的是等号后面的值）
    	})
    	.done(function(data) { //成功后；也可以在ajax对象里面使用success
    		console.log(data);
    	})
    	.fail(function() { //失败后；也可以在ajax对象里面使用error
    		console.log("error");
    	})
    	.always(function() { //完成后；也可以在ajax对象里面使用complete
    		console.log("complete");
    	});

![结果][20190521170516261.png]  
jq的ajax真香…是香飘飘奶茶的味道；当然还有更香axios、fetch等等；axios使用Promise；而jQuery的jqXHR对象类似一个Promise对象，可以用链式写法来处理各种回调

##### 实现某乎的进度条 #####

[前端轻量级进度条NProgress.js][NProgress.js]  
[Github nprogress][]  
[使用方式][Link 1]  
需求：当数据没有加载完成；进度条是加载中；当数据加载完成了；进度条走完加载完成

1.  下载后将文件引入css;js文件引入（不想下载直接使用以下网络地址CDN）

1.  最好将浏览器的网速调慢点；观看效果更佳
2.  ajaxStart(callback)： AJAX 请求开始时执行函数。Ajax 事件。
3.  ajaxStop(callback)： AJAX 请求结束时执行函数。Ajax 事件。
4.  实现效果

$(function(){ 
    	$(document)
          .ajaxStart(function () { 
          	console.log('请求开始了')
    		NProgress.start();
          })
          .ajaxStop(function () { 
          	console.log('请求结束了')
    		NProgress.done();
          })
    	$.ajax({ 
    		url: 'http://api.jisuapi.com/weather/query',//请求地址
    		type: 'get',// 请求方式
    		dataType: 'jsonp',//设置跨域
    		data: { appkey:'eee8cacbc1e612cd',city:'汕头'},//请求参数
    		success:function(data){ 
    			console.log(data)
    		}
    	})
    })

![结果如上][20190521185639123.png]

### 自己做插件 ###

给jQuery对象绑定一个新方法是通过扩展`$.fn`对象实现的。让我们来编写第一个扩展

##### 随机颜色案例 #####

$.fn.ranNum = function(min,max){ 
    		return ranNum = parseInt(Math.random()*(max-min+1)+min)
    	}
    	$.fn.randomColor = function(min,max){ 
    		var bg = `rgb(${ this.ranNum(min,max)},${ this.ranNum(min,max)},${ this.ranNum(min,max)})`
    		this.css({ 'backgroundColor':bg})
    		// this.css({'backgroundColor':'red'})
    		return this
    	}
    	$('div').randomColor(0,255)

使用实例

$('div').randomColor(0,255).width(400).height(200)

##### 第三方库的使用 #####

[全屏滚动插件fullPage.js][fullPage.js]  
[Github fullPage.js][]  
引入必须的文件

html结构

初始化

传入背景颜色`slidesColor`无效问题

$(function(){ 
        	$('#dowebok').fullpage({ 
        		sectionsColor: ['#fadd67','#84a2d4','#ef674d','#fed']
        	});
    	});

![滚动鼠标][20190521200104298.gif]

### 递归问题 ###

我们都知道jq使用的很多回调函数都是匿名函数；递归是函数自己调用自己；如果起个函数名；那又把操作复杂化;多写了一些代码…又不符合链式编程，如何解决  
比如我们要依次隐藏四张图片,如果我们`hide()`方法一张张隐藏的话；需要大量代码…

arguments.callee相当于递归

$("div>img").last("img").hide(800,function () { 
          $(this).prev().hide(800,arguments.callee);
    });

### MVVM框架使用jQquery ###

下载我们的jq--------`cnpm i jquery -S`  
引入我们的jq--------`import $ from jquery`  
这样就跟平时那样使用了;比如在vue的main.js入口使用

```js
    import $ from 'jquery'
    $(function(){ 
    	$('li:odd').css('background','red')
    	$('li:even').css('background',function(){ 
    		 return '#' + 'D97634'
    	})
    })

### 最后 ###

我有一个大胆的假设；说一定哪一天原生JavaScript发展后就是jQuery的样子了，只不过API更丰富了…

> 保持求知若渴，不要试图逸豫；等待你的将会是良辰美景…–by me

### 文档 ###

[jQuery中文文档在线手册][jQuery]  
[jQuery中文网][jQuery 1]  
[jQuery官网][jQuery 2]

[https_blog.csdn.net_weixin_41105030_article_details_90342430]: https://blog.csdn.net/weixin_41105030/article/details/90342430
[20190521170516261.png]: /images/20220129/543c93d7122e45ccb2a60672362d8e2b.png
[NProgress.js]: http://ricostacruz.com/nprogress/
[Github nprogress]: https://github.com/rstacruz/nprogress
[Link 1]: https://www.cnblogs.com/y114113/p/6289629.html
[20190521185639123.png]: /images/20220129/8e27aa6e8e0f43d2b4ed88ce9502c5db.png
[fullPage.js]: http://www.dowebok.com/77.html
[Github fullPage.js]: https://github.com/alvarotrigo/fullPage.js/#fullpagejs
[20190521200104298.gif]: /images/20220129/c8ba8521a7744ccfb87a757baaae7eae.png
[jQuery]: http://jquery.cuishifeng.cn/
[jQuery 1]: https://www.jquery123.com/
[jQuery 2]: https://jquery.com/