JQuery详解

最新推荐文章于 2024-04-02 13:53:10 发布

全栈小李

最新推荐文章于 2024-04-02 13:53:10 发布

阅读量278

点赞数 1

分类专栏： Js 文章标签： jquery js html

本文链接：https://blog.csdn.net/qq_45162683/article/details/114595219

版权

Js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
</head>
<style>
      #divMove{
          width: 500px;
          height: 500px;
          border: 1px solid black;
      }
</style>

<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>Title</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
</head>
<body>

<ul id="father">
    <li id="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    // 获得值
    $('#father li[id=js]').text();
    //设置值
    $('#father li[id=js]').text('123');

    // 获得值
    $('#father li[id=js]').html();
    //设置值
    $('#father li[id=js]').html('<strong>123</strong>>');
    


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

操作css

 $('#father li[id=js]').css("color","red");

元素的显示和隐藏

$('#father li[id=js]').show();  //显示
$('#father li[id=js]').hiden(); //隐藏

全栈小李

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery详解

事件鼠标事件键盘事件其他事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script></hea.
复制链接

扫一扫