jQuery学习day01

最新推荐文章于 2024-04-23 15:19:32 发布

易只锦小年

最新推荐文章于 2024-04-23 15:19:32 发布

阅读量73

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_45924868/article/details/115874676

版权

JQuery库，里面存在大量的js函数

获取jquery

方式一：搜索jQuery.com,——>downloading jQuery,——>下载需要的版本
方式二：搜索cdn jquery，——>https://www.bootcdn.cn/jquery/，——>复制script标签

公式:$(selector).action()

查文档

搜索https://jquery.cuishifeng.cn/

事件

鼠标，键盘，其他

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

    </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

节点文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作Dom元素</title>
    <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>

</head>
<body>

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

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

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

</script>
</body>
</html>

css的操作

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

元素的显示和隐藏：本质 display=none;

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

测试娱乐

$('#test-ul li[name=python]').show()
S.fn.init [li, prevObject: S.fn.init(1)]
$('#test-ul li[name=python]').hide()
S.fn.init [li, prevObject: S.fn.init(1)]
$('#test-ul li[name=python]').toggle()
S.fn.init [li, prevObject: S.fn.init(1)]
$('#test-ul li[name=python]').toggle()
S.fn.init [li, prevObject: S.fn.init(1)]
$('#test-ul li[name=python]').toggle()
S.fn.init [li, prevObject: S.fn.init(1)]
$(window).height()
722
$(window).width()
282

易只锦小年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习day01

JQuery库，里面存在大量的js函数获取jquery方式一：搜索jQuery.com,——>downloading jQuery,——>下载需要的版本方式二：搜索cdn jquery，——>https://www.bootcdn.cn/jquery/，——>复制script标签公式:$(selector).action()查文档搜索https://jquery.cuishifeng.cn/事件鼠标，键盘，其他<!DOCTYPE html>&l
复制链接

扫一扫