13.jQuery

jQuery库里面存在大量JavaScript函数

获取jQuery¶

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>

<a href="" id="test-jquery">点我</a>

<script>

    //选择器就是css的选则器
    $('#test-jquery').click(function () {
        alert('hello,jQuery');
    })

</script>

</body>
</html>

公式

$(selector).action()

操作DOM元素¶

Text Only

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    //document.getElementById('')

    $('#test-ul li[name=python]').css("color","red")


</script>



</body>
</html>

选择器¶

Text Only

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //原生js，选择器少，麻烦不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //jQuery  css 中的选择器它全部都能用！
    $('p').click(); //标签选择器
    $('#id1').click(); //id选择器
    $('.class1').click() //class选择器


    $('.class1').mou


</script>

</body>
</html>

事件¶

Text Only

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!--要求：获取鼠标当前的一个坐标-->
mouse ：<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>

<script>
    //当网页元素加载完毕之后，响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
        })
    });
</script>


</body>
</html>