前端基础五之jQuery基础

举报
布小禅 发表于 2021/08/16 00:24:04 2021/08/16
【摘要】 前端基础五之jQuery基础

在这里插入图片描述

@[toc]

题外话

📢 博客主页:❤布小禅❤
📢 作者专栏:
❤Python❤
❤Java❤

前言

身为一个合格的后端开发人员

前端的基础知识也是需要了解的

1. jQuery是什么

jQuery是JavaScript的一个库,用来简化我们对原生js代码的编写

1.1 jQuery的下载

下载可以去官方下载,也可以去一些技术社区下载

官方:Download jQuery

在这里插入图片描述

jQuery有两个版本,一个是原生版本,是符合我们大多数人审美的,用于阅读源代码

一个是压缩版,去掉了所有空格和缩进,一般用于导入使用

在这里插入图片描述

这边建议两个版本都下载

1.2 jQuery基础语法

jQuery是由一个函数$为核心的,这个美元符号不是什么特殊符号,是一个函数名

而jQuery一般都是这样的形式:$(选择器).操作();

当然,在使用之前我们需要先下载导入这个库

先将下载好的jQuery放在方便导入的目录

我是放在了当前目录的上一级目录

<script src="../jquery-3.6.0.min.js"></script>
<!-- ..是返回上一级目录,/是进入下一级目录  注意这里的<script>需要放在<head>里面-->

需要将jQuery函数放在

<script>
    $(document).read(function (){
        代码块
    });
</script>

里面,这是为了防止js代码在页面还没有加载完全的时候就加载

1.3 jQuery选择器

jQuery就像DOM一样,或者说,就是简化了DOM的操作

有各种选择器:标签名选择器,id选择器,类选择器,属性选择器。。。

现在就简单地说一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#id1").click(function (){
                alert("我是id选择器,我选择了id为“id1”的标签");
            });
            $(".class1").click(function (){
                alert("我是类选择器,我选择了class为“class1”的标签");
            });
            $("[name]").click(function (){
                alert("我是属性选择器,我选择了含有“name”属性的选择器");
            });
            $("button").click(function (){
                alert("我是标签名选择器,你点击任何一个按钮,我都会出来");
            });
        });
    </script>
</head>
<body>
<label>
    <button id="id1">id选择器</button>
    <button class="class1">类选择器</button>
    <button>标签名选择器</button>
    <button name="name1">属性选择器</button>
</label>
</body>
</html>

1.4 jQuery事件

常用的事件

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

这和原生的事件是差不多的,只不过是换了一个形式而已

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function (){
      $("#p1").click(function (){
        $("#p1").css("color", "red");
      });
      $("#p2").dblclick(function (){
        $("#p2").css("color", "yellow");
      });
      $("#bu1").focus(function (){
        $("#bu1").css("color", "red");
      });
      $("#p3").mouseover(function (){
        $("#p3").css("color", "blue");
      });
    });
  </script>
</head>
<body>

<p id="p1">单击我,你会看到我变红</p>
<p id="p2">双击我,你会看到我变黄</p>
<button id="bu1">单击我,你会看到我变红</button>
<p id="p3">鼠标挪过来,你会看到我变蓝</p>
</body>
</html>

结语

兴趣是最好的老师,坚持是不变的真理。
学习不要急躁,一步一个脚印,踏踏实实的往前走。
每天进步一点点,日积月累之下,你就会发现自己已经变得很厉害了。

我是布小禅,一枚自学萌新,跟着我每天进步一点点吧!

在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200