jQuery

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节点是不同的。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页