jQuery_$('test-ul li[name=python]').html();-CSDN博客

本文链接：https://blog.csdn.net/qq_45503643/article/details/110196576

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

什么是jQuery？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。（百度百科）

jQuery只是一个 jquery-xxx.js 文件，但你会看到有compressed（已压缩）和uncompressed（未压缩）两种版本，使用时完全一样，但如果你想深入研究jQuery源码，那就用uncompressed版本。

使用jQuery只需要在页面的 head 引入jQuery文件即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/core.js"></script>-->
    <!--导入jquery-->
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>

<!--
公式: $(selector).action()
-->

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

<script>

        $('#test-jquery').click(function () {
            alert('hello,jQuery');
        })

</script>

</body>
</html>

公式： $(selector).action()

美元符号定义 jQuery

选择符（selector）“查询"和"查找” HTML 元素

jQuery 的 action() 执行对元素的操作

选择器

选择器是jQuery的核心。

为什么jQuery要发明选择器？回顾一下DOM操作经常使用的代码：

<script>
    //原生js, 选择器少，麻烦，不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();


    //jQuery css中的选择器他全部能用
    $('p').click();//标签选择器
    $('#id1').click();//id选择器
    $('.class1').click();//class选择器


</script>

jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点。

事件

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

鼠标事件
click: 鼠标单击时触发； dblclick：鼠标双击时触发； mouseenter：鼠标进入时触发； mouseleave：鼠标移出时触发； mousemove：鼠标在DOM内部移动时触发； hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是和。 keydown：键盘按下时触发； keyup：键盘松开时触发； keypress：按一次键后触发。

其他事件
focus：当DOM获得焦点时触发； blur：当DOM失去焦点时触发； change：当、或的内容改变时触发； submit：当提交时触发； ready：当页面被载入并且DOM树完成初始化后触发。

鼠标事件

在这里插入图片描述
鼠标移动事件案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid yellowgreen;
        }
    </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

修改Text和HTML
jQuery对象的 text() 和 html() 方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

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

    $('#test-ul li[name=python]').text();
    $('#test-ul').html();
</script>

</body>
</html>

分别获取文本和HTML：

$('#test-ul li[name=python]').text();
$('#test-ul').html();

设置文本或HTML:

 $('#test-ul li[name=python]').text('hello,jQuery');
 $('#test-ul').html('<strong>123</strong>');

文本操作（获取和设置）效果图：

在这里插入图片描述
HTML操作（获取和设置）效果图：

在这里插入图片描述
修改CSS

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

在这里插入图片描述 显示和隐藏DOM

要隐藏一个DOM，我们可以设置CSS的 display 属性为 none ，利用 css() 方法就可以实现。不过，要显示这个DOM就需要恢复原有的 display 属性，这就得先记下来原有的 display 属性到底是 block 还是 inline 还是别的值。

显示和隐藏DOM元素使用非常普遍，jQuery直接提供 show() 和 hide() 方法，我们不用关心它是如何修改 display 属性的，总之它能正常工作：

$('#test-ul li[name=python]').show();//显示
$('#test-ul li[name=python]').hide();//隐藏

在这里插入图片描述
隐藏DOM节点并未改变DOM树的结构，它只影响DOM节点的显示。这和删除DOM节点是不同的。