这篇文章是接着写的
防止篇幅过长,影响浏览;所以分开写
这是上集: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