前端----JQuery

一、初识 JQuery

1、什么是JQuery

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

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE、Google 、Safari 、Opera 、Firefox等。

2、JQuery 导入方式

方式一：本地文件导入

我们先去 JQuery 的官网下载对应的文件。
在这里插入图片描述

如果下载时点击下载链接直接弹出的不是下载窗口而是网页文件，按 ctrl + s 保存到本地即可。

下载完成后导入到本地项目中，在你自己的本地项目中创建一个 lib 的文件目录，将下载好的 JQuery 文件拷贝进去即可。
在这里插入图片描述

拷贝完成后我们在 html < head > 中添加导入：

<script src="lib/jquery-3.4.1.js"></script>

方式二：CDN 在线静态资源导入

在线 cdn 链接：CDN

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

3、JQuery的使用公式

 $(selector).action //$(选择器).事件

二、JQuery 选择器

我们在 CSS 中使用的选择器在 JQuery 中都可以使用。

例如：

    $('#idname').action
    $('.classname').action
    $('标签名').action

我们可以在 JQuery API 文档中查看这些选择器的用法。
在这里插入图片描述

三、JQuery 事件

案例：获取鼠标在页面上的坐标的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
    <style>
        #divMouse {
            height: 600px;
            width: 800px;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
<!--获取鼠标在页面的坐标-->
mouse: <span id="moveMouse"></span>
<div id="divMouse">
    点击这里查看当前鼠标的坐标
</div>
<script>
    $(function () {
        $('#divMouse').mousemove(function (e) {
            $('#moveMouse').text('x:'+e.pageX + 'y:'+e.pageY);
        });
    });
</script>
</body>
</html>

运行效果：
在这里插入图片描述

四、JQuery 操作 DOM

操作节点文本

<script>
    $('#test li[name=python]').text();//获取文本的值
    $('#test li[name=python]').text('张三');//设置文本的值
    $('#test').html();//获取HTML的值
    $('#test').html('<strong>zhaohang</strong>');//设置HTML的值
</script>

操作CSS

    $('#test li[name=python]').css('color','blue');//设置文本的CSS样式

设置网页元素的display显示和隐藏

    $('#test').hide();//设置元素的display隐藏
    $('#test').show();//设置元素的display显示

以上就是JQuery的基础知识。

ZHBlog_

发布了58 篇原创文章 · 获赞 7 · 访问量 2269

私信关注