05 JQuery基础入门

文章目录

  • 一、jQuery介绍
    • 1. 简介
    • 2. 版本介绍
    • 3. 相关网站
    • 4. HTML引入方式
  • 二、基础语法
    • 1. 顶级对象$
    • 2. 与DOM对象转化
    • 3. 选择器
    • 4. 事件
    • 5. 动画
    • 6. 修改样式
    • 7. 修改属性


一、jQuery介绍

1. 简介

jQuery是JavaScript编程语言底层库,它是一个快速,简洁的JavaScript库
可以简化HTML文档遍历,事件处理,动画设计和Ajax交互

  • 简化HTML文档的遍历和操作。
  • 提供了丰富的事件处理功能。
  • 提供了强大的动画支持,可以轻松创建各种动画效果。
  • 提供了方便的Ajax交互接口,可以使用简单的代码实现异步数据交互。
  • 良好的跨浏览器兼容性,可以在各种浏览器上保持一致的运行效果。
  • 大量的插件支持,可以扩展jQuery的功能。

2. 版本介绍

1.x版本:能够兼容IE6、IE7、IE8浏览器
2.x版本:不再支持IE8及之前的浏览器
3.x版本:进行了一些重构,优化了性能
jquery-xxx.min.js:压缩版本,适用于生产环境
jquery-xxx.js:未压缩版本,适用于学习与开发环境,源码清晰

3. 相关网站

jQuery 官网
jQuery 教程
jQuery CDN

4. HTML引入方式

  • 本地引入
<script src="jquery-3.7.1.min.js"></script>
  • CDN引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

二、基础语法

1. 顶级对象$

  • $是jQuery的顶级对象,通过$把元素封装成jQuery对象,从而直接调用jQuery方法
  • $(expresion):通过表达式匹配目标元素
<p>文字1<p>
<div id="div2"><p>文字2<p></div>
<script>alert($('div>p').html())		// 输出:文字2
</script>
  • $(function):网页中DOM结构加载完毕后执行
<script>$(function() {alert('test')})
</script>

2. 与DOM对象转化

  • jQuery对象属于数组对象,其内部将DOM对象作为数组元素
  • DOM对象与jQuery对象的方法不能混用
  • DOM对象可以和jQuery对象相互转化
<div id="div1">文字1</div>
<div id="div2">文字2</div>
<script>var divs = $('div')			// jQuery对象var div1 = divs[0]			// jQuery对象转化为DOM对象var div2 = $(div1)			// DOM对象转化为jQuery对象alert(div1.innerHTML)		// 输出:文字1alert(div2[0]===div1)		// 输出:true
</script>

3. 选择器

<div id="div1" class="divc"><p>文字1</p></div>
<div id="div2"><p>文字2</p></div>
<script>console.log($('div')[0].innerHTML);			// 标签选择器console.log($('#div2')[0].innerHTML);		// ID选择器console.log($('.divc')[0].innerHTML);		// Class选择器$('div>p').css('color', 'red');				// 层级选择器$('p:contains("文字2")').html('test');		// 内容选择器
</script>
  • HTML页面效果
    在这里插入图片描述
  • 控制台日志
    在这里插入图片描述

4. 事件

  • 鼠标事件
<div id="div1" class="divc"><p>文字1</p></div>
<div id="div2"><p>文字2</p></div>
<script>$("#div1").mouseout(function(){alert("div1中鼠标移出");})$("#div2").click(function(){alert("div2中单击鼠标");})
</script>
  • 表单提交事件
<form action="http://127.0.0.1" method="post">test: <input type="text" name="test"><input type="submit" value="提交">
</form>
<script>$("form").on("submit",function(){alert("提交成功!");	// 提交表单时触发})
</script>

5. 动画

<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><link rel="icon" href="data:;base64,="><meta charset="UTF-8"><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><style>.box {width: 300px;height: 300px;background-color: blue;margin-bottom: 10px;}</style>
</head>
<body><div class="box"></div><button id="btn1">显示</button><button id="btn2">隐藏</button><script>$(function(){$('#btn1').click(function(){$('.box').show(1000);})$('#btn2').click(function(){$('.box').hide(1000)})})</script>
</body>
</html>
  • HTML页面效果
    在这里插入图片描述

6. 修改样式

<div id="div1"><p>文字1</p></div>
<script>$('#div1').css({'color': 'red', 'backgroundColor': '#ADD8E6'})
</script>

7. 修改属性

<button id="btn">点击</button>
<script>$('#btn').click(function() {$(this).attr('disabled',true)})
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/206062.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ERPNext SQL 注入漏洞复现

0x01 产品简介 ERPNext 是一套开源的企业资源计划系统。 0x02 漏洞概述 ERPNext 系统frappe.model.db_query.get_list 文件 filters 参数存在 SQL 注入漏洞,攻击者除了可以利用 SQL 注入漏洞获取数据库中的信息(例如,管理员后台密码、站点的用户个人信息)之外,甚至在高权…

基于springboot实现的仿天猫商城项目

一、系统架构 前端&#xff1a;jsp | js | css | jquery 后端&#xff1a;springboot | mybatis-plus 环境&#xff1a;jdk1.7 | mysql | maven 二、代码及数据库 三、功能介绍 01. web端-首页 02. web端-商品查询 03. web端-商品详情 04. web端-购物车 05. web端-订单…

集合的几个遍历方法

1. 集合的遍历 1.0 创建集合代码 List<String> strList new ArrayList<>(); strList.add("huawei"); strList.add("xiaomi"); strList.add("tencent"); strList.add("google"); strList.add("baidu");1.1 fo…

复杂gRPC之go调用go

1. 复杂的gRPC调用 我们使用了一个较为复杂的proto文件&#xff0c;这个文件的功能主要是用来定位的&#xff0c;详细内容可以看代码中的注解 syntax "proto3"; //指定生成的所属的package&#xff0c;方便调用 option go_package "./"; package route…

Redis和MySQL双写一致性实用解析

1、背景 先阐明一下Mysql和Redis的关系&#xff1a;Mysql是数据库&#xff0c;用来持久化数据&#xff0c;一定程度上保证数据的可靠性&#xff1b;Redis是用来当缓存&#xff0c;用来提升数据访问的性能。 关于如何保证Mysql和Redis中的数据一致&#xff08;即缓存一致性问题…

labelme等标注工具/数据增强工具输出JSON文件格式检查脚本

标注的文件太多了&#xff0c;还有用数据增强工具生成了一票的新数据。在转换或使用训练时候会报错&#xff0c;错误原因是json中语法有问题&#xff0c;这样会中断程序运行&#xff0c;调试造成很大困扰。 检查确实最后有问题&#xff0c;多写了一次 写一个脚本&#xff0c;用…

Python-滑雪大冒险【附源码】

滑雪大冒险 《滑雪大冒险》是一款充满趣味性和挑战性的休闲竞技游戏&#xff0c;在游戏中&#xff0c;玩家将扮演一位勇敢的滑雪者&#xff0c;在雪山上展示他们的滑雪技巧&#xff0c;游戏采用2D图形界面&#xff0c;以第三人称视角呈现 运行效果&#xff1a;用方向键及方向键…

flask 数据库迁移可能出现的六大问题,生成requirements文件夹方式,flask项目复写,

今日任务 项目分级显示 — app — — admin 代表 — — auth 代表用户的点赞 评论 登录等等 — — blog 代表blog的网页 首先单独把auth运行出来 第一步 1. 生成requirements文件夹 2.在一个新的虚拟环境里面完成requirements依赖下载 3.完成项目的复写 1. 生成requ…

算术运算(这么简单?进来坐坐?)

先热热身 算术运算&#xff0c;也称为四则运算&#xff0c;包括加法、减法、乘法和除法。此外&#xff0c;算术运算还包括乘方和开方。 在算术中&#xff0c;加减被视为一级运算&#xff0c;乘除被视为二级运算&#xff0c;乘方和开方被视为三级运算。在一道算式中&#xff0c;…

网站导航栏下滑隐藏,上滑显示,效果杠杆,兼容性强

前言 导航栏是网站必不可少的一部分&#xff0c;那么&#xff0c;导航栏应该怎么样子实现&#xff0c;可以高效自定义兼容开发呢&#xff1f;当然&#xff0c;不仅要实现&#xff0c;而且还要实现导航栏顶部固定位置&#xff0c;下拉隐藏&#xff0c;稍微往上滑动就会出现&…

Python中的并发编程(2)线程的实现

Python中线程的实现 1. 线程 在Python中&#xff0c;threading 库提供了线程的接口。我们通过threading 中提供的接口创建、启动、同步线程。 例1. 使用线程旋转指针 想象一个场景&#xff1a;程序执行了一个耗时较长的操作&#xff0c;如复制一个大文件&#xff0c;我们希…

2022年第十一届数学建模国际赛小美赛D题野生动物贸易是否应长期禁止解题全过程文档及程序

2022年第十一届数学建模国际赛小美赛 D题 野生动物贸易是否应长期禁止 原题再现&#xff1a; 野生动物市场被怀疑是此次疫情和2002年SARS疫情的源头&#xff0c;食用野生肉类被认为是非洲埃博拉病毒的一个来源。在冠状病毒爆发后&#xff0c;中国最高立法机构永久性地加强了野…

【git教程】

目录 git与SVN的区别&#xff1a;集中式与分布式的区别Windows上安装Git创建版本库/仓库&#xff08;repository&#xff09;将文件添加到repository报错处理 查看仓库的状态版本回退工作区和暂存区管理和修改撤销修改删除文件远程仓库添加远程仓库警告解除本地和远程的绑定关系…

一文3000字从0到1用Python进行gRPC接口测试!

gRPC 是一个高性能、通用的开源RPC框架&#xff0c;其由 Google 主要面向移动应用开发并基于HTTP/2 协议标准而设计&#xff0c;基于 ProtoBuf(Protocol Buffers) 序列化协议开发&#xff0c;且支持众多开发语言。 自gRPC推出以来&#xff0c;已经广泛应用于各种服务之中。在测…

AI助力智慧农业,基于SSD模型开发构建田间作物场景下庄稼作物、杂草检测识别系统

智慧农业随着数字化信息化浪潮的演变有了新的定义&#xff0c;在前面的系列博文中&#xff0c;我们从一些现实世界里面的所见所想所感进行了很多对应的实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a;《自建数据集&#xff0c;基于YOLOv7开发构建农田场景下杂草检…

【C语言快速学习基础篇】之二控制语句、循环语句、隐式转换

文章目录 一、控制语句1.1、for循环1.2、while循环1.3、注意&#xff1a;for循环和while循环使用上面等同1.4、do while循环1.4.1while条件成立时1.4.2、while条件不成立时 C语言介绍 C语言是一门面向过程的计算机编程语言&#xff0c;与C、C#、Java等面向对象编程语言有所不同…

“分割“安卓用户,对标iOS,鸿蒙崛起~

近期关于**“华为于明年推出不兼容安卓的鸿蒙版本”**的消息传出&#xff0c;引起了业界的热议关注。自从2019年8月&#xff0c;美国制裁下&#xff0c;华为不再能够获得谷歌安卓操作系统相关付费服务&#xff0c;如此情况下&#xff0c;华为“备胎”鸿蒙操作系统一夜转正。 华…

有效解决wordpress的502 Bad Gateway错误提示

摘要&#xff1a;最近有客户反映使用阿里云虚拟云主机&#xff0c;wordpress常提示502 Bad Gateway错误&#xff0c;网关错误是网站上遇到的常... wordpress的502 Bad Gateway错误如何修复&#xff1f; 第1步&#xff1a;偶发错误可尝试重新加载网站 偶尔出现流量突发爆增或是服…

Sql Server关于表的建立、修改、删除

表的创建&#xff1a; &#xff08;1&#xff09;在“对象资源管理器”面板中展开“数据库”节点&#xff0c;可以看到自己创建的数据库&#xff0c;比如Product。展开Product节点&#xff0c;右击“表”节点&#xff0c;在弹出的快捷菜单中选择“新建表”项&#xff0c;进入“…

打工人副业变现秘籍,某多/某手变现底层引擎-Stable Diffusion简介

Stable Diffusion是2022年发布的深度学习文本到图像生成模型,它主要用于根据文本的描述产生详细图像,尽管它也可以应用于其他任务,如