jQuery-选择器

2021-12-19 15:03:37 作者：互联网

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>

标签：jQuery,console,log,dom,jq,js,选择器,div1
来源： https://www.cnblogs.com/tanghuijun/p/15707447.html