jQuery (二)

时间 2019-11-16

标签 jquery 栏目 JQuery 繁體版

原文原文链接

使用jQuery处理事件

事件处理

一个栗子，单击p时背景变成灰色css

因为es6的箭头函数不支持this的绑定，因此没法使用箭头函数，只能使用匿名函数

htmlhtml

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <p>hello world</p>
</body>
</html>
<script src="./style.js"></script>

jsnode

// 单击任意p时，使其背景变成灰色
$('p').click(function () { $(this).css('background-color', 'gray'); });

效果
jquery

或者使用第二个参数，添加相关的属性，完成事件的相关触发css3

// 单击任意p时，使其背景变成灰色
$('<img>', {
    src: image_url,
    alt: image_description,
    className: "translucent_image",
    click: function() {
        $(this).css('opacity', "50%");
    }
})

效果同理。git

事件处理程序的高级注册

使用bind()为添加事件es6

$('p').bind('click', f);

将p元素的click事件和函数f进行绑定，须要使用闭包github

还可使用三个值，第一值为事件，第二个值为Event对象的data属性，在调用最后一个处理函数的时候，会将第二个值做为对象的data属性,这样便可避免使用闭包操做ajax

ps jquery 中全部的处理程序都有一个函数例如 hover()

mouseenter 绑定鼠标在进入的时候
mouseleave 绑定鼠标在离开的时候npm

$('p').bind('mouseenter mouseleave', f);

还可使用英文句号，做为命名空间，这样方便对多个回调函数的管理
下方的是将函数f注册在命名空间myMond

$('p').bind('mouseover.myMod', f);

下方的是将函数f注册到命名空间yourMod和mouseout中

$('p').bind('mouseover.myMod.yourMod', f);

或者使用对象

$('p').bind({ mouseenter:f, mouseleave:g });

注销事件处理程序

$('*').unbind();    // 从全部元素中移除全部的jquery事件处理程序

$('a').unbind('mouseover mouseout');    // 移除两个属性

// 取消绑定在myMod命名空间下的全部mouseover 和mouseout处理程序
$('a').unbind('mouse.myMod mouseout.myMod');
// 取消绑定在myMod命名空间下的全部事件处理程序
$('a').unbind('.myMod');
// 取消同时绑定在ns1和ns2命名空间下的单击处理程序
$('a').unbind('click.ns1.ns2')

使用命名空间达到模块化的目的

// 使用函数名，达到注销事件处理程序
$('#mybutton').unbind('click', myClickHandler);
// 或者
$('a').unbind(
        {
            mouseover: mouseoverHandler,
            mouseout: mouseoutHandler
        }
    )

触发事件

jquery的事件处理为同步的，没有异步。

$('#my_form').submit();    // 模拟用户点击按钮进行提交

或者使用trigger

$('button').trigger('click.ns1');    // 触发命名空间.ns1下的绑定函数
$('button').trigger('click!');    // 触发没有命名空间的单击处理程序

或者以下

// 单击一将会触发二上的事件
$('#button1').click((e) => {$('#button2').trigger('button2')});
// 触发事件时，将会添加额外的属性给事件对象，若是事件之前被监听，将会被直接触发
$('#button1').trigger({ type:'click', synthetic:true });

$('#button1').trigger('click', true);   // 传入的第二个参数将会成为触发事件的参数，进行传入
$('#button1').trigger('clcik', [x, y, z]);  // 传入三个额外的参数

$('*'); // 选择全部元素进行触发
// 或者使用工具函数
jQuery.event.trigger(); // 使用工具函数完成所有的选择 https://api.jquery.com/category/events/event-object/

自定义事件

一个栗子，实现发布订阅模型，先全体元素广播一个事件,在单击一个按钮的时候

$('#logoff').click(() => {
    $.event.trigger('logoff');  // 实现一个先全体元素广播一个事件
})

若是元素要接收事件，须要绑定一个监听器便可，至此完成发布订阅模式。

实时事件

实时事件为，若是先前将全部a元素绑定了一个事件，接着在建立一个新的a的节点，若是此时触发事件，则新建立的a元素不会被触发事件，由于绑定的不是实时的事件。
因为更新，live，bind，delegate，die，undelegate 所有废弃

注意，这一部分所有废弃

动画效果

动画效果实质上是经过定时的修改css属性，达到动画的效果
一个栗子
https://api.jquery.com/fadeIn/
使用淡入效果

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="/public/js/jquery.js"></script>
    <link rel="stylesheet" href="/public/css/style.css">
</head>
<body>
    <p>
  Let it be known that the party of the first part
  and the party of the second part are henceforth
  and hereto directed to assess the allegations
  for factual correctness... (<a href="#">click!</a>)
  <div><span>CENSORED!</span></div>
</p>

$('a').click(function (){
    $('div').fadeIn(3000, () => {
        $('span').fadeIn(100);
    });
    return false    // 说明动画是否放进队列，若是未false 代表动画将不会放入队列，默认为false，还能够设置名字，进行队列分类。
})

p {
    position: relative;
    width:400px;
    height:90px;
}
div {
    position: absolute;
    width:400px;
    height:65px;
    font-size:36px;
    text-align:center;
    color:yellow;
    background:red;
    padding-top:25px;
    top:0;
    left:0;
    display:none;
}
span {
    display:none;
}

当运行的时候会，自动将display设置为可见。
注意，jquery动画效果为异步的，调用fadeIn()方法的时候，会当即返回，动画则在后台执行，
以下

$('a').click(() => {
    $('div').fadeIn(3000, () => {
        $('span').fadeIn(100);
    });
    return false;
})

当发生click事件的时候，会先回调click内的事件，发生动画，在等待3000秒的时候，继续回调下一个函数，因为是异步的，先返回false，再执行动画，false的意思为通知click事件不能进入队列中，进行等待。

动画异步好坑，动画其实是经过定时器来完成的，因为定时器是一段段的执行，因此动画为异步操做，先执行返回，动画等待某个时刻进行执行。返回的结果，并不必定执行完毕。返回的结果，并非执行完毕。

若是想要执行多段动画，无需使用回调，由于动画为队列机制，直接采用链式便可。

禁用动画

若是不须要动画，直接使用

jQuery.fx.off

直接设置其值为false便可实现动画的禁用。

简单动画

fadeIn(),fadeOut(), fadeTo().

其中fadeIn须要以前该对象的display为noen或者visibility，经过动画显示出，上方有栗子，不在演示。
fadeOut()，一样相反，也有异步，也有队列。

ps 这两个效果相似于visibility 虽然消失，可是依旧对流具备影响

show(), hide(), toggle()

hide相似于使用display，将其值设置为none相似。

$( "button" ).click(function() {
  $( "p" ).hide( "slow" );
});

上方，设置button，触发事件，回调p，设置动画，
解释一下最后的参数，若是没有参数，将会直接设置display的值为none，若是有任意一个参数，将会设置高度和不透明度，将其变为0，而且display也将会变为none，确保不会影响页面的布局。

能够设置缓动函数为字符串

toggle，一样若是有字符串，也将会实现如此。

$( "button" ).click(function() {
  $( "p" ).toggle( "" );
});

上方代码，实现了切换p标签，两种状态的切换。

slideDown(), slideUp(), slideToggle()

slideUp() 是将高度动态变化到0，而后社会display属性为none，为向下
slideDown()正好相反。为向上
slideToggle() 使用向上滑动和向下滑动，切换元素的可见性。

调用

$( "button" ).click(function() {
  $( "p" ).fadeOut().show(30000).slideToggle();
});

将会先隐藏，在显示出，接着进行切换。

ps 因为动画为队列，能够这样使用

自定义动画

使用animate()

ps css3中，有相似的动画，是经过定义关键帧达到的。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <style>
  p {
    background: #dad;
    font-weight: bold;
    font-size: 16px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
 
<script>
$( "button" ).click(function() {
  $( "p" ).animate({
      width: "90%"
    }, {
      queue: false,    // 将动画不放入效果队列中
      duration: 3000    // 持续时间为3000毫秒
    })
    .animate({ fontSize: "24px" }, 1500 )    // 继续发生如下动画
    .animate({ borderRightWidth: "15px" }, 1500 );
});
</script>

效果，

动画属性对象

animate()方法的第一个参数必须为对象，该对象必须为css的属性名（使用驼峰命名法）
动画只支持数值属性，不支持颜色，字体，或者display的枚举属性。

$('p').animate({
    marginLeft: "+=.5in",    // 增长段落缩进
    opacity: '-=.1'    // 同时减小不透明度
})

hide会保存当前属性的值，而后将值变化到0，show值，进行还原，

动画在使用hide的时候，会在完成的时候调用，若是动画使用show，将会在完成时，调用show

动画选项对象

缓动函数，jquery中有默认的缓动函数，为正弦函数，即swing，还有一个线性的缓动函数为linear 全部的缓动函数都在jQuery.easing中，
上方的缓动函数，还能够自定义，即添加一个数组便可，如

jQuery.easing['squareroot'] = Math.sqrt;

若是想要使用线性变化即

$('p').animate({
    'width': '+=100'
}, {
    duration: 500,
    easing: "linear"
})

或者使用传入参数的方式

$('img').animate({
    "width": "+=100"
}, 500, "linear");

或者为不一样的css动画属性定义不一样的缓动函数

// 用hide()方法，隐藏图片，图片大小用线性的动画
// 不透明度采用swing缓动函数
$('img').animate({
    width: "hide",
    height: "hide",
    opacity: "hide"
}, {
    spacialEasing: {
        width: "linear",
        height: "linear"
    }
})
// 或者
$('img').animate({
    width: ['hide', 'linear'],
    height: ['hide', 'linear'],
    opacity: 'hide'
})

动画取消，延迟和队列

stop() 将会中止当前选中元素上的任何动画，top接受两个可选的参数，若是第一个为true将会清楚当前队列，不然队列将不会被清除，第二个为是否保留当前值，若是未true将会变化到终值，若是为false将会保持当前值，而后开始执行动画

// 当属性悬浮在图片上时，图片将会不透明
$('img').bind({
    mouseover: function () {
        $(this).stop().fadeTo(300, 1.0);
    },
    mouseout: function () {
        $(this).stop().fadeTo(300, 1.0);
    },
})

注 bind已不推荐使用

还有一个为delay() 这会直接添加一个时间延迟到动画队列中。

//快速淡出为半透明，等一等，而后向上滑动
$('img').fadeTo(100, 0.5).delay(200).slideUp();

每个队列都和文档元素相关联，每个元素的队列都与其余元素的队列彼此独立，即，使用queque()方法，给队列添加一个新函数

// 淡入的显示一个元素，稍等片刻，设置一些文字，而后变化边框,为对队列的操做，添加到队列的最后
$('#message').fadeIn().delay(200).queue(function(next) {
    $(this).text('hello world');    //显示一些文字
    next();    // 方便下一个继续调用
}).animate({
    borderWidth: "+=100px;"
});

clearQueue()方法将会清楚队列，给queue()方法，传入一个函数组成的数组，而不是单一函数时，将会传入函数数组来替换当前队列。

$(e).queue(f);  // 建立一个持有e的jquery对象，并调用queue方法
jQuery.queue(e, f); // 直接调用jQuery.queue工具函数,进行替换队列

jQuery中默认的队列名为fx，这是没有指定队列名时默认使用的队列。

Ajax

Ajax实现了不须要刷新，便可动态的加载一部分页面，

load

是滴，load若是传入的参数为字符串，而是函数，load为事件的处理程序的注册，而不是ajax方法。
若是传入的是url，则将会进行替换

load为异步操做，不会发生阻塞，发送完成之后，将会直接执行下一步操做

!()[https://melovemingming-125387...]

$('p').load('./1.html')

固然也能够加载一部分

// 加载并显示天气报告的温度部分
$('temp').load('wheather_report.html #temperature')

ps 同源

load还会接受可选参数，第一个可选参数表示的数据，能够追加到url后面，若是传入为对象，将会直接用&分隔的名值对请求发送。而且将会以post请求发送。

// 加载特定区号的天气预报
$('#tmp').load('us_weather_report.html', 'zipcode=02134');
// 使用对象作数据,加载区号，而且请求华氏温度，将会发送post请求
$('#tmp').load('us_weather_report.html', { zipcode=02114, units: 'f' });

load最后为回调函数，当Ajax请求成功，或未成功，将会调用该函数

Ajax工具函数

jQuery.getScript()

将会异步的加载一段脚本

一样受到同源的限制

第一个参数为url，第二个参数为运行完成之后将要执行的回调函数

jQuery.getScript('js/js_jquery.js', () => {
    $('div').js_jquery();   // 直接使用加载的类库
})

底层是使用XMLHttmpRequest对象来获取将要执行的脚本内容，而后将内容添加到script元素内部。

getJSON()

获取到之后，将会解析为JSON

// 假设data.json 包含文本，{'x':33, 'y':44}
jQuery.getJSON('data.json', (data) => {
    // data将会是解析后的对象{x:1, y:2}
})

jQuery.get jQuery.post

jQuery.get('./debug.txt', alert);   // 请求get请求，而后弹出警告

jQuery的ajax的数据类型

text 为纯文本
html 为html文件
xml 为xml数据
script 为js文件请求
json 为请求json数据的文件
jsonp 为请求jsonp的

jQuery的ajax函数

须要传入一个对象

一些选项

type

指定http的请求方法
get或者post或者delete或者push

url

获取的url

data

添加到url或者请求体的数据，

dataType

预期的类型，即html，script，json，jsonp，xml

contentType

指定的请求头

timeout

指定的超时时间，若是超过期间，直接取消请求，返回false

cache

添加时间戳，防止浏览器缓存

回调

context

指定回调函数时的上下文对象，即this

beforeSend

指定发送ajax请求指定激活的函数

success

指定ajax请求成功后的回调函数

error

指定ajax请求失败后的回调函数

complete

指定请求完成后的函数

钩子

async

指定同步

dataFileter

过滤或者预处理服务器返回的数据

ajax事件

ajax还会在请求的时候，触发相应的事件
这个用于在请求某些图片的时候，在图片仍旧继续下载的时候，使用相应的时间，提示出图片正在加载中
例如

$('#loading_animation').bind({
    ajaxStart: function() {$(this).show()},
    ajaxStop: function() { $(this).hide() }
})

jQuery 选择器

简单选择器

例如* 或者p
一个栗子选取元素在其父节点的子元素中排行第1或第4,第7等元素，含有js单词，不包含a的元素

p:nth-child(3n+1):text(js):not(:has(a));

组合选择器

blockquote i // 匹配blockquote里的i元素
ol > li // 选择ol元素下的li元素

选择器组

h1, h2, h3 // 匹配h1 h2 h3的元素

选取方法

var paras = $('p');
paras.first();  // 选取第一个p元素
paras.eq(1);    // 选取第二个p
paras.slice(2, 5);  // 选取3， 4， 5的元素
paras.filter('.note');  // 选取div.note

将选中的元素集用作上下文

即交并补

$('div').find('p'); // 在div中查找p元素
$('#header, #footer').find('p');    // 寻找id为header和footer子元素节点中的p元素
$('h1').next('p');  // 选择h1的兄弟元素p
$('h1').prev(); // 选择h1元素前的兄弟元素
$('#footer').nextAll('p');  // 选择footer元素后的全部p元素
$('#footer').prevAll(); // 选择footer元素前面的全部兄弟元素
$('li').parent();   // 列表元素的父元素
$('a[href]').parents('p');  // 选择含有连接的p元素
$('a[href]').closest('div');    // 选择包含连接的最里层的div元素

恢复到以前的选中的元素

end()弹出栈

// 寻找全部div元素，而后在其中寻找p元素，高亮显示p元素，而后给div加边框
$('div').find('p').addClass('highlight').end().css('border', 'solid black 1px');

addSelf 返回一个新的jQuery对象，包含当前选中的全部元素，加上以前选中的。

$('div').find('p').andSelf().addClass('highlight').end().end().css('border', 'solid black 1px');

jQuery 插件扩展

插件地址 https://plugins.jquery.com/

ps 这个插件已经中止了，新的插件，使用npm方式安装。无奈。插件目录处于只读状态，若是下载，使用node.js的npm即包管理器，而且里面的内容已经至关老了。5年的内容，无奈,因此，若是要使用扩展，必须使用npm，无奈，毕竟如今已经8102年了。

jQuery.fn是全部jQuery对象的原型对象。若是给该对象添加一个函数，则该函数会成为一个jQuery的方法。
栗子

jQuery.fn.println = function () {
        // 将全部的参数合并成空格分隔的字符串
        var msg = array.prototype.join.call(arguments, '');
        // 遍历jQuery对象中的每个元素
        this.each(function() {
            // 将参数的字符串做为文本添加到每个元素的后面，并添加一个br
            jQuery(this).append(document.createTextNode(msg).append('<br/>'));
        });
        // 返回这个未加修改过的jQuery对象，方便链式调用
        return this;
    }

ps 这个灰常简单，原型链那一套内容，须要注意的是要进行返回该对象，不然没法进行链式调用

使用一下下

$('#debug').println('x =', 'x', 'y');

即完成了一个jquery的插件的封装
使用jQuery.fx.speeds完成对缓动函数的封装
扩展css选择，使用jQuery.expr[';']完成对css选择的封装

jQuery.expr[':'].draggable = function(e) {
    return e.draggable === true;
}

使用

$('img:draggable');

等价于

$('img[draggable=true]')

上方封装的一个选择器为可拖动的元素

当draggable为true的时候，能够对元素进行拖动，这是h5的内容

一些注意事项

不要依赖$
插件要返回this
插件有两个或者两个以上的选项，使用对象直接传入
不能污染命名空间，请在jquery上定义一个方法便可，若是有多个方法，请直接使用前缀
若是有事件须要绑定，使用插件名做为命名空间，而后放在插件名中，即，不能使用全局的
若是插件须要使用data()方法关联数据数据值要在一个对象中。
文件命名须要使用jquery.plugin.js

jQuery的UI库

https://jqueryui.com/

ps 该库已经两年未更新了，不过lssues 依旧在回复中，对于库的检查 https://travis-ci.org/jquery/...，已经彻底测试经过

一个栗子，日期选择

$('input.date').datepicker();

将class为data中的input元素通通替换为日期选择组件