jQuery筆記-事件2
阿新 • • 發佈：2021-12-10
一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> <divid="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>