jQuery筆記-事件1
阿新 • • 發佈：2021-12-09
二
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <scriptsrc="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>
三
<!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>