• JavaScript


    jQuery统一了不同浏览器之间的DOM操作的差异

    1. jQuery === $ // true

    1.1 $(x) //将x转换为jQuery对象,便于调用jQuery提供的API
    1.2 方便操作DOM,支持链式写法,消除各浏览器差异性,一套代码即可

    2. $(function () {...})的形式,是document对象的ready事件处理函数。

    由于该事件在DOM初始化后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
    演变如下: 2.1 - 2.3 越来越简化

    2.1

            $(document).on('ready', function () {
                $('#testForm).on('submit', function () {
                    alert('submit!');
                });
            });
    

    2.2

    $(document).ready(function () {
        // on('submit', function)也可以简化:
        $('#testForm).submit(function () {
            alert('submit!');
        });
    });
    

    2.3

    $(function () {
        // init...
    });
    
    

    3. 事件参数

    3.1 有些事件,如mousemove和keypress,我们需要获取鼠标位置和按键的值,否则监听这些事件就没什么意义了。所有事件都会传入Event对象作为参数,可以从Event对象上获取到更多的信息
    3.2 https://github.com/janetat/Front-end-toys/tree/master/4. Coordinate-when-mouse-moves

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

    4. 取消事件绑定

    4.1 off('click')一次性移除已绑定的click事件的所有处理函数。
    4.2 无参数调用off()一次性移除已绑定的所有类型的事件处理函数。

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

    以下的代码无法达到预期,两个匿名function是两个不同的对象

    // 绑定事件:
    a.click(function () {
        alert('hello!');
    });
    
    // 解除绑定:
    a.off('click', function () {
        alert('hello!');
    });
    

    5. 事件触发条件

    5.1 事件的触发总是由用户操作引发的。例如,我们监控文本框的内容改动,当用户在文本框中输入时,就会触发change事件

    var input = $('#test-input');
    input.change(function () {
        console.log('changed...');
    });
    

    5.2 果用JavaScript代码去改动文本框的值,将不会触发change事件:

    var input = $('#test-input');
    input.val('change it!'); // 无法触发change事件
    

    5.3 有些时候,我们希望用手动触发change事件,可以直接调用无参数的change()方法来触发该事件:

    input.change()相当于input.trigger('change'),它是trigger()方法的简写。

    var input = $('#test-input');
    input.val('change it!');
    input.change(); // 触发change事件
    

    5.4 由于浏览器的限制,有些敏感的代码只能手动触发

    // 无法弹出新窗口,将被浏览器屏蔽:
    $(function () {
        window.open('/');
    });
    
    var button1 = $('#testPopupButton1');
    var button2 = $('#testPopupButton2');
    
    function popupTestWindow() {
        window.open('/');
    }
    
    button1.click(function () {
        popupTestWindow();
    });
    
    button2.click(function () {
        // 不立刻执行popupTestWindow(),100毫秒后执行:
        setTimeout(popupTestWindow, 100);
    });
    
  • 相关阅读:
    conda包手动下载 本地安装
    Effective C++这书很好
    jquery mobile 教程
    ASP.NET Core 3.1 + Swagger UI 的实际运用笔记
    textarea 里面输入的内容有换行,在页面用 js 展示时需要转义
    JS总结
    08、iframe、div、span标签
    07、表单
    06、表格
    05、列表序列
  • 原文地址:https://www.cnblogs.com/allen2333/p/8989016.html
Copyright © 2020-2023  润新知