JavaScript 16 JQuery 选择器、事件、操作DOM对象

2022-10-21 09:50:45

5.2 JQuery 选择器

JQuery 的选择器必须全都是 “” 或 ‘’ 包含起来的，也就是我们只接收字符串形式的！

标签选择器 $('标签名')
ID选择器 $('#id名')
类选择器 $('.类名')

JQuerty API 文档工具站

5.3 JQuery 事件

我们的 JQuery 是可以接收事件的！这就是它的强大之处。一旦可以接收事件，就真正实现了人与浏览器页面的实时交互。

鼠标事件 mouse* 键盘事件 key 其他事件

要求：获取鼠标当前的一个坐标！！！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.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>
    //当网页元素加载完毕之后，响应事件
    /*$(document).ready(function (){

    });*/

    $(function (){
        $('#divMove').mousemove(function (e){
          $('#mouseMove').text("X："+e.pageX+"  Y："+e.pageY);
        });
    });


</script>

</body>
</html>

5.4 JQuery 操作 DOM

JS 对于操作 DOM 相对 JQuery 来说还是比较麻烦的。JQuery 操作 DOM 就没那么繁琐。

我们可以根据选择器，玩出各种花样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<ul id="test-ul">
  <li class="js">JavaScript</li>
  <li name="python">Python</li>

  <script>
   //可以 更改 内容 为 这个 新的 text 文本
    $('#test-ul li[name="python"]').text();
    //可以 更改 内容 为 这个 新的 html 代码
    $("#test-ul").html();



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

修改 css 样式

//更改 一个 CSS 样式
    $('#test-ul li[class="js"]').css("color","red");

你直接就写一下你需要更改的样式属性是哪个，需要更改的值是什么就完事了。

元素隐藏和显示

//让元素 显示
$('#test-ul li[class="js"]').show()
//让元素 隐藏
$('#test-ul li[class="js"]').hide()

码农公寓

5.2 JQuery 选择器

5.3 JQuery 事件

5.4 JQuery 操作 DOM

相关文章