首页 > 编程语言> 文章详细

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

2021-07-29 16:01:01 阅读：172 来源： 互联网

标签：JQuery DOM li ul test 选择器

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()

在这里插入图片描述

标签：JQuery,DOM,li,ul,test,选择器
来源： https://blog.csdn.net/qq_52606908/article/details/119206518

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

5.2 JQuery 选择器

5.3 JQuery 事件

5.4 JQuery 操作 DOM