学习笔记

0203-表单选择-动画-jQ拓展

Posted on 2022-02-03，9 min read
封面图

事件

鼠标事件

  • click: 鼠标单击时触发；
  • dblclick：鼠标双击时触发；
  • mouseenter：鼠标进入时触发；
  • mouseleave：鼠标移出时触发；
  • mousemove：鼠标在DOM内部移动时触发；
  • hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave.

键盘事件

仅作用在当前焦点的DOM上，通常是<input>和<textarea>

  • keydown：键盘按下时触发；
  • keyup：键盘松开时触发；
  • keypress：按一次键后触发.

其他事件

  • focus：当DOM获得焦点时触发；
  • blur：当DOM失去焦点时触发；
  • change：当<input>、<select>或<textarea>的内容改变时触发；
  • submit：当<form>提交时触发；
  • ready：当页面被载入并且DOM树完成初始化后触发.
    ready仅作用于document对象, 在DOM完成初始化后触发，且只触发一次，适合初始化代码.
    简写
    $(function () {...})的形式，牢记这是document对象的ready事件处理函数.

事件参数

如mousemove和keypress获取鼠标位置和按键的值, 所有事件都会传入Event对象作为参数, 可以从中获取更多信息:
获取鼠标位置:

$(function () {
    $('#testMouseMoveDiv').mousemove(function (e) {
        $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
    });
});

取消绑定

off('click', function) 其中function是函数名,匿名函数无法解绑, 可以试用off()解除所有绑定,off('click')解除所有的click事件绑定.

function hello() {
    alert('hello!');
}
a.click(hello); // 绑定事件
// 10秒钟后解除绑定:
setTimeout(function () {
    a.off('click', hello);
}, 10000);

安全限制

open(): 打开新窗口, 只能由用户触发的条件执行, 无法直接使用:

var button1 = $('#testPopupButton1');
var button2 = $('#testPopupButton2');
function popupTestWindow() {
    window.open('/');
}
button1.click(function () {
    popupTestWindow();
});
button2.click(function () {
    // 不立刻执行popupTestWindow()，3秒后执行:
    setTimeout(popupTestWindow, 3000);
});

事件练习

编写函数，绑定事件，实现表单项目的选择与全选操作：

<!-- HTML结构 -->
<form id="test-form" action="test">
    <legend>请选择想要学习的编程语言：</legend>
    <fieldset>
        <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
		<p><button type="submit">Submit</button></p>
    </fieldset>
</form>
<!--JS函数-->
<script>
$(function () {
let
    form = $('#test-form'),
    langs = form.find('[name=lang]'),
    selectAll = form.find('label.selectAll :checkbox'),
    selectAllLabel = form.find('label.selectAll span.selectAll'),
    deselectAllLabel = form.find('label.selectAll span.deselectAll'),
    invertSelect = form.find('a.invertSelect');
    langs.change();
    selectAll.change(function() {
        if(langs.get().every(e => e.checked)){
            langs.prop('checked', false);
        } 
        else{
            langs.prop('checked', true);
        }
        langs.change();
    });
    langs.change(function() {
        if(langs.get().every(e => e.checked)){ 
            selectAll.prop('checked', true);
            selectAllLabel.hide();
            deselectAllLabel.show();
        }
        else{
            selectAll.prop('checked', false);
            deselectAllLabel.hide();
            selectAllLabel.show();
        }
    });
    invertSelect.click(function(){
        for(let x of langs){
            console.log(x);
            x.checked = !x.checked;
        }
        langs.change();
    });
});
</script>

动画

jQuery动画的原理是逐渐改变CSS的值, 有的动画如slideUp(): height从100px逐渐变为0没有效果, 可能是因为很多不是block性质的DOM元素设置height没用.
jQuery也没有实现对background-color的动画效果, 可以使用CSS3的transition.

show/hide

toggle()根据当前状态决定是show()还是hide(): toggle('slow')

var div = $('#test-show-hide');
div.hide(3000); // 在3秒钟内逐渐消失
***可以设置'slow''fast'字符串;
var div = $('#test-show-hide');
div.show('slow'); // 在0.6秒钟内逐渐显示

slideUp / slideDown

show()和hide()是从左上角逐渐展开或收缩, slideUp()和slideDown()是在垂直方向拉上或拉下；

var div = $('#test-slide');
div.slideUp(3000); // 在3秒钟内逐渐向上消失

fadeIn / fadeOut

通过不断设置DOM元素的opacity属性实现, fadeToggle()根据元素当前状态决定;

var div = $('#test-fade');
div.fadeOut('slow'); // 在0.6秒内淡出

自定义动画animate()

var div = $('#test-animate');
div.animate({
    opacity: 0.25,
    width: '256px',
    height: '256px'
}, 3000); // 在3秒钟内CSS过渡到设定值

animate()传入一个函数，动画结束时，调用函数：
ps: 回调函数参数对于基本动画也是适用的

var div = $('#test-animate');
div.animate({
    opacity: 0.25,
    width: '256px',
    height: '256px'
}, 3000, function () {
    console.log('动画已结束');
    // 恢复至初始状态:
    $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

串行动画

delay()用来暂停动画;

var div = $('#test-animates');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
div.slideDown(2000)
   .delay(1000)
   .animate({
       width: '256px',
       height: '256px'
   }, 2000)
   .delay(1000)
   .animate({
       width: '128px',
       height: '128px'
   }, 2000);
}

练习

制作remove()动画的渐隐效果:

function deleteFirstTR() {
    var tr = $('#test-table>tbody>tr:visible').first();
    tr.fadeOut(1000,function(){tr.remove();});
}
deleteFirstTR();

AJAX

**jQuery利用jsonp实现AJAX跨域访问简单示例:

  • 1.创建HTML文件
<html>
<head>
    <title>JSONP测试</title>
</head>
<body>
    <input type="button" value="刷新" onclick="refreshPrice()" />
    <p>当前价格:</p>
    <p id="current_price"></p>
</body>
</html>
  • 2.引用jQuery
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  • 3.js代码
"use strict"
function refreshPrice() {
    let jqxhr = $.ajax('http://api.money.126.net/data/feed/0000001,1399001', {
        method: 'GET',
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'callbackFunction'
    }).done((data) => {
        let str = data['0000001'].name + ': ' +
            data['0000001'].price + '；' +
            data['1399001'].name + ': ' +
            data['1399001'].price;
        $('#current_price').slideUp('slow').text(str).slideDown('slow');
    }).fail((xhr, status) => {
        alert('失败: ' + xhr.status + ', 原因: ' + status);
    });
}

$(() => {
    refreshPrice();
});

jQuery拓展

编写jQuery插件

利用$.fn对象实现:

$.fn.highlight1 = function () {
    // this已绑定为当前jQuery对象:
    this.css('backgroundColor', '#fffceb').css('color', '#d85030');
    return this; //实现链式调用
}

简单加参数:

$.fn.highlight2 = function (options) {
    // 要考虑到各种情况:
    // options为undefined
    // options只有部分key
    var bgcolor = options && options.backgroundColor || '#fffceb';
    var color = options && options.color || '#d85030';
    this.css('backgroundColor', bgcolor).css('color', color);
    return this;
}

另一种用jQuery提供的辅助方法$.extend(target, obj1, obj2, ...)，把多个object对象的属性合并到第一个target对象中，遇到同名属性，总是使用靠后的对象的值，也就是越往后优先级越高：

// 把默认值和用户传入的options合并到对象{}中并返回:
var opts = $.extend({}, {
    backgroundColor: '#00a8e6',
    color: '#ffffff'
}, options);
//最终版本的highlight
$.fn.highlight = function (options) {
    // 合并默认值和用户设定值:
    var opts = $.extend({}, $.fn.highlight.defaults, options);
    this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
    return this;
}
    // 设定默认值:
$.fn.highlight.defaults = {
    color: '#d85030',
    backgroundColor: '#fff8de'
}
    //用户设定默认值
$.fn.highlight.defaults.color = '#fff';
$.fn.highlight.defaults.backgroundColor = '#000';

下一篇： 0202-jQuery事件→

阅读量 loading...
▲