前端基础五之jQuery基础

简介: 前端基础五之jQuery基础


image.png

文章目录


题外话

📢:❤布小禅❤

📢 作者专栏:

❤Python❤

❤Java❤


前言

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

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


1. jQuery是什么

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

1.1 jQuery的下载

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

官方:Download jQuery

image.png

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

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

image.png

这边建议两个版本都下载


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>


结语

兴趣是最好的老师,坚持是不变的真理。

学习不要急躁,一步一个脚印,踏踏实实的往前走。

每天进步一点点,日积月累之下,你就会发现自己已经变得很厉害了。

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

image.png


目录
相关文章
|
3月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
54 3
|
5月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
41 2
|
4月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
232 0
|
6月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
74 13
|
7月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
53 0
|
8月前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
45 0
|
9月前
|
JavaScript 前端开发 算法
JQuery 基本使用,2024BAT大厂Web前端社招面试题
JQuery 基本使用,2024BAT大厂Web前端社招面试题
JQuery 基本使用,2024BAT大厂Web前端社招面试题
|
9月前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
9月前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
9月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?

热门文章

最新文章

  • 1
    jquery实现文字点选验证码
  • 2
    jQuery实现的卡片式翻转时钟HTML源码
  • 3
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 4
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 6
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 7
    详解智能编码在前端研发的创新应用
  • 8
    巧用通义灵码,提升前端研发效率
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    23
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    43
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    24
  • 4
    巧用通义灵码,提升前端研发效率
    83
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    137
  • 6
    详解智能编码在前端研发的创新应用
    91
  • 7
    智能编码在前端研发的创新应用
    75
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    35
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    108
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    73