js获取dom：const div1=document.getElementById('div1')
jquery获取dom ：$('#div1')
js dom和jq dom可以相互转换
js dom ==>jq dom ：console.log($(div1))
jq dom==>js dom：console.log($('#div1')[0])
<!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('mousedown','mousemove')
$('ul').one('mousemove',function () {
console.log('ulmove')
})
$('input[type="text"]').blur(function () {
$('#div1').css('color','yellow')//单行css样式
$('#div1').css({//多行css样式
'color':'red',
'background':'lightblue',
"width":"100px"
})
})
</script>