jQuery

jQuery

suaxi

2020-12-10 / 0 评论 / 123 阅读 / 正在检测是否收录...

12/10

引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jQuery-->
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>-->
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
-->

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

<script>
    $('#test').click(function () {
        alert("Hello World");
    })
</script>
</body>
</html>

选择器

//css中的选择器在jQuery中全都能用
$('p').click(); //标签选择器
$('#id').click(); //id选择器
$('.class').click(); //class（类）选择器

文档工具站：https://jquery.cuishifeng.cn/

事件

事件（鼠标）.png

获取鼠标当前坐标Demo：

<!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: 800px;
            height: 800px;
            border: 1px solid black;
        }
    </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>

获取鼠标的当前坐标.png

操作DOM

节点文本操作

$('ul li[id=test02]').text(); //获取值（解析为文本）
$('ul li[id=test02]').text('abc'); //设置值
$('ul li[id=test01]').html(); //同理（解析为html）
$('ul li[id=test01]').html('<strong>abc</strong>');

CSS操作

$('ul li[id=test02]').css({"color","red"});

元素的显示和隐藏：

本质：更改display属性

$('ul li[id=test02]').show(); //显示
$('ul li[id=test02]').hide(); //隐藏

评论 (0)