jQuery笔记-事件1

一ready

ready与js中window.load一样，让函数在页面其他元素都加载记载完毕后在执行，有了这个函数，函数就可以写在html任意位置，不用担心因为不小心在页面元素前写了元素的函数，导致不执行或报错

 

二on

在选择元素上绑定一个或多个事件的事件处理函数。

例子：放在click me上面输出move，点击输出down

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div id="div1">click me</div>
<ul>
    <li class="liC">1</li>
    <li class="liC">2</li>
    <li>3</li>
    <li class="liC">4</li>
    <li>5</li>
    <li>6</li>
    <li class="liC">7</li>
    <li class="liC">8</li>
</ul>
<ul></ul>
<input type="text">
<input type="password">
</body>
</html>
<script>
    const div1=document.getElementById('div1')//js获取dom
    // $('#div1')//jquery获取dom

    // js dom和jq dom可以相互转换
    console.log($(div1))//js dom ==>jq dom
    console.log($('#div1')[0])//jq dom==>js dom

    console.log($('.liC'))
    console.log($('ul'))
    console.log($('ul>li'))
    console.log($('ul,div'))
    console.log($('#div1+ul'))
    console.log($('#div1~ul'))
    $('#div1').on('mousemove',function () {
        console.log('move')
    })
    $('#div1').on('mousedown',function () {
        console.log('down')
    })
</script>

三off()

off() 方法移除用.on()绑定的事件处理程序。

例子1：清除上个案例on的事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div id="div1">click me</div>
<ul>
    <li class="liC">1</li>
    <li class="liC">2</li>
    <li>3</li>
    <li class="liC">4</li>
    <li>5</li>
    <li>6</li>
    <li class="liC">7</li>
    <li class="liC">8</li>
</ul>
<ul></ul>
<input type="text">
<input type="password">
</body>
</html>
<script>
    const div1=document.getElementById('div1')//js获取dom
    // $('#div1')//jquery获取dom

    // js dom和jq dom可以相互转换
    console.log($(div1))//js dom ==>jq dom
    console.log($('#div1')[0])//jq dom==>js dom

    console.log($('.liC'))
    console.log($('ul'))
    console.log($('ul>li'))
    console.log($('ul,div'))
    console.log($('#div1+ul'))
    console.log($('#div1~ul'))
    $('#div1').on('mousemove',function () {
        console.log('move')
    })
    $('#div1').on('mousedown',function () {
        console.log('down')
    })
    $('#div1').off()


</script>

　　例子2：清除上个案例on的事件中的mousemove事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div id="div1">click me</div>
<ul>
    <li class="liC">1</li>
    <li class="liC">2</li>
    <li>3</li>
    <li class="liC">4</li>
    <li>5</li>
    <li>6</li>
    <li class="liC">7</li>
    <li class="liC">8</li>
</ul>
<ul></ul>
<input type="text">
<input type="password">
</body>
</html>
<script>
    const div1=document.getElementById('div1')//js获取dom
    // $('#div1')//jquery获取dom

    // js dom和jq dom可以相互转换
    console.log($(div1))//js dom ==>jq dom
    console.log($('#div1')[0])//jq dom==>js dom

    console.log($('.liC'))
    console.log($('ul'))
    console.log($('ul>li'))
    console.log($('ul,div'))
    console.log($('#div1+ul'))
    console.log($('#div1~ul'))
    $('#div1').on('mousemove',function () {
        console.log('move')
    })
    $('#div1').on('mousedown',function () {
        console.log('down')
    })
    $('#div1').off('mousemove')


</script>

 

 

 

posted @ 2021-12-09 21:33  蘑菇萌萌哒  阅读(48)  评论(0)    收藏  举报