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

最新推荐文章于 2023-04-07 22:13:37 发布

前端薛之谦...

最新推荐文章于 2023-04-07 22:13:37 发布

阅读量416

点赞数

分类专栏： jQuery插件文章标签：递归 fullPage jQuery

本文链接：https://blog.csdn.net/weixin_41105030/article/details/90399418

版权

jQuery插件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇文章是接着写的

防止篇幅过长，影响浏览;所以分开写
这是上集：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>

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

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

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

        $("#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，计算边距在内。

事件

事件绑定

直接绑定

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

bind()方法:第一个参数是事件名字,第二个参数是事件处理函数-匿名函数;解绑事件是$(ele).unbind(事件名称)
父级元素.delegate(“子级元素”,“事件类型”,事件处理函数)；$(ele).undelegate"子级元素",“事件类型”)
上面两种就略过了，主要是我们的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()//移除父级元素和子级元素的所有的事件
    })

事件触发三种方式

<input type="button" value="第一个按钮" id="btn1"/>
<input type="button" value="第二个按钮" id="btn2"/>
</body>

点击第二个按钮触发按钮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
    })
})

使用trigger()触发

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

triggerHandler()

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

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

<input type="text" id="txt">

        $('#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");
	});

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

实现某乎的进度条

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

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

	<link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
	<script src="jquery-3.4.1.js"></script>
	<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>

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

$(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)
		}
	})
})

结果如上

自己做插件

给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
Github fullPage.js
引入必须的文件

	<link rel="stylesheet" href="fullPage/fullpage.css">
	<script src="jquery-3.4.1.js"></script>
	<script src="fullPage/jquery.fullPage.min.js"></script>

html结构

<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>

初始化

<script>
	$(function(){
    	$('#dowebok').fullpage();
	});
</script>

传入背景颜色slidesColor无效问题

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

滚动鼠标

递归问题

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

<div>
    <img src="images/1.jpg"/>
    <img src="images/2.jpg"/>
    <img src="images/3.jpg"/>
    <img src="images/4.jpg"/>
</div>

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官网

前端薛之谦...

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery进阶续集--通过案例(随机颜色案例、全选与反选、递归实现动画、全屏滚动、进度条...)深入知识点

这篇文章是接着写的防止篇幅过长，影响浏览;所以分开写这是上集：https://blog.csdn.net/weixin_41105030/article/details/90342430全选与反选全选与反选的需求其实很好理解；实际上就是一个串联电路；只要有一处断路；整个电流都是无法流动…这里不是讲物理学；只是让我们更加去理解我们要做什么（又要夸自己了：这么贴切的例子都让我想得到）<...
复制链接

扫一扫