初识jQuery-选择器，事件，操作DOM元素

jQuery

jQuery库，里面存在大量的JavaScript函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/core.js"></script>-->
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<!--
公式： $(selector).action()
-->
<a href="#" id="test-jqery">点我</a>
<script>
    //选择器就是css的选择器
    $('#test-jqery').click(function (){
        alert('hello,jqery');
    })
</script>

</body>
</html>

选择器

<script>
    //css的选择器jqery都能用
    $('p').click() //标签选择器
    $('#id1').click() //id选择器
    $('.class1').click() //class选择器
</script>

事件

鼠标事件，键盘事件，其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"></script>
    <style>
        #divMove{
            width: 200px;
            height: 200px;
            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>

操作DOM元素

节点文本操作

    $('test-ul li[name=python]').text();  //获得值
    $('test-ul li[name=python]').text('设置值');
    $('test-ul').html();
    $('test-ul').html('<strong>123</strong>>');

css操作

    $('test-ul li[name=python]').css({"color","red"})   //key,value
posted @ 2020-09-05 19:06  LaughTale  阅读(127)  评论(0)    收藏  举报