jQuery笔记-事件2

一one

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。只会触发一次

例子：第一次放在click me上面输出move

<!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').one('mousemove',function () {
        console.log('move')
    })


</script>

二hover

hover语法，以此为例，p悬停时，触发第一个事件，移走触发事件2

$("p").hover(
function(){
    $("p").css("background-color","yellow");
},function(){
    $("p").css("background-color","pink");
});

例子：当鼠标悬停在按钮上时，div背景颜色变黄，移走时恢复

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<button>click me</button>
<div id="div1">
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
    两个黄鹂鸣翠柳，一行白鹭上青天 <br>
</div>
</body>
</html>
<script>
    const div1=document.getElementById('div1')
    $("button").hover(
        function () {
            $(div1).css("background-color","yellow",);

        },
        function () {
            $(div1).css("background-color","");
        },
    )
</script>

 

posted @ 2021-12-10 09:46  蘑菇萌萌哒  阅读(35)  评论(0)    收藏  举报