培训机构Day22

今天主要还是围绕着jquery讲解的,没有什么可说的。

知识点:

常用事件类型:
1.click:单击事件。鼠标,或键盘都可以触发。
2.dblclick:双击事件。
3.contextmenu:右键事件。
4.键盘相关事件:document,及表单元素上。
keyup:键弹起,释放。只会触发一次。
keydown:键按下。如果键在按下状态,则持续触发。
keypressed:按下并释放。
5.鼠标相关事件:用在任意dom元素上。
mousedown:只会触发一次。
mouseup:只会触发一次。
mouseenter:只会触发一次。
mouseleave:只会触发一次。
mousemove:持续触发。

6.window.onload事件,只能用在window对象上。
表示window已加载,页面已加载完毕。

=======================================
事件冒泡与事件委托。

========================================
BOM:浏览器对象模型Browser Object Model。DOM:文档对象模型。
window:一个窗口一个window对象。
location:地址栏对象
history:访问历史对象  back()回退到上一页,forward()前进到下一页。
go(n):n可为正,表示前进几页,为负表示后退几页。

localStorage:本地存储对象 setItem  getItem    removeItem。永久存储。
sessionStorage:会话存储对象。仅在一个会话内有效。
========================================
ecmascript + DOM + Bom
语法:
1。常量变量。let const var
2.数据类型:number string boolean null undefined
3.运算符:/不是整除,=== !==  typeof  instanceof 
4.流程控制。
5.数组。let a = []; let a = new Array(); push pop unshift shift 
6.函数:function xxx() {}    let a = function() {};
函数参数默认值。
7.对象。let a = {}; 对象即键值对的集合。数组,函数都是对象。
构造函数,new+构造函数,可以创建对象。


DOM:一套用于操作html元素的规范接口。
1。获取对象。querySelector/querySelectorAll
2。增加对象。document.createElement(),    appendChild     insertBefore
3。修改对象:
4。删除对象:remove()    removeChild()


四向遍历:
1。parentElement
2。children:多个
3。previousElementSibling:兄元素。
4。nextElementSibling:弟元素。

事件处理:
1。行内 onclick属性
2。dom.oncick = function() {}
3。dom.addEventListener("click", function(){})

事件对象:e,封装了事件的相关数据。

事件移除:
dom.onclick = null;
dom.removeEventListener("click", 函数名称);

事件的冒泡和事件委托:


常用事件:
1。click
2。键盘相关
3。鼠标相关。
4。dblclick
5。window.onload

BOM对象:
1。Window
2。location
3.history
4.localStorage对象
5。sessionStorage对象

=============================================
jquery:别人写好的函数库。
1.起手式:不是必须的,通常写在head中,表示页面就绪之后的操作。
$(()=>{
     //xxx。表示页面就绪之后要执行的操作
});

2。用法:$("选择器").xxx(xxx).xxx(xxx);  jquery对象.xxx();
jquery对象是一个类数组。

3。链式操作。调用xxx操作之后,仍然返回对象本身。


常用的jquery选择器:
1。:first:表示选中第一个元素。:last表示选中最后一个元素。
2。:eq(n):表示选中第几个元素。从0开始。
3。:gt(n):表示选中大于第几个元素。:lt(n):表示选中小于第几个元素。
4。:even,:odd。奇数,偶数。
5。:not(selector):表示选中selector之外的。
6。:contains(xxx):选取包含指令文本的元素。
7。:empty:选中所有空元素。:parent 选中有子元素,或者有文本的元素。
8。:has(xxx):选中包含指定选择器xxx的子元素的元素。
9。:hidden:选取所有隐藏元素。display:none,<input type="hidden" >,visibility:hidden
:visible,选取所有可见元素。
10。[key]:选取有key属性的元素。
11。[key=value]:选取有key属性且值等于value。
12。[key!=value]:选取没有key属性,或者有key属性,但值不等于value的。
13。[key^=value]:选取有key属性,且值以value开头的。
14。[key$=value]:选取有key属性,且值以value结尾的。
15。[key*=value]:选取有key属性,且值包含value的。


16。:input:选中所有类型表单元素。input textarea button 
17。:text:选中单行文本框。<input type=text >
18。:submit:选中提交按钮。<input type=submit>  button type=submit>


二次筛选:在使用选择器选中元素的基础上,再次进行筛选。
1。eq(x):第几个
2。first():第一个
3。last():最后一个。
4。filter(xxx):选取符合xxx的元素。
5。has(xxx):选取拥有指定后代的元素。
6。not(xxx):去除符合xxx选择器的元素。
7。slice(start,end):截取指定范围的元素。
8。add(xxx):添加符合xxx的元素。
9。addBack():将自身也添加进去。

四向遍历:
1.父方向:
1.1 .parent(xxx):找父元素。
1.2 .parents(xxx):找所有祖先元素,一直找到html为止。
1.3 .parentsUntil(xxx):找所有祖先元素,一直到指定的为止,不包含xxx。
1.4 .closest(xxx):找当前元素最近的祖先元素。

2.子方向:
2.1 children(xxx):查找子元素。
2.2 find(xxx):查找后台元素, 包含子代。必须要有参数。

3.兄元素:
3.1 prev(xxx): 查找紧邻兄元素。
3.2 prevAll(xxx): 查找所有兄元素。
3.3 prevUntil(xxx):查找所有兄元素,直到xxx为止。

4.弟元素:
4.1 next(xxx):查找紧邻弟元素。
4.2 nextAll(xxx):查找所有弟元素。
4.3 nextUntil(xxx):查找所有弟元素,直到xxx为止。

5.兄弟元素:
siblings(xxx):查找所有兄弟元素,不包括自身。


增删改查:
1. 父.append($jq|html):添加一个子元素,添加到尾部。
2. 子.appendTo(父):将子元素添加到父元素中。
3. 父.prepend($jq|html):添加一个子元素,添加到头部
4. 子.prependTo(父):添加一个子元素,添加到头部。
5. $a.after($b):在a的后面添加一个b。
6. $b.insertAfter($a):在a的后面添加一个b。
7. $a.before($b):在a的前面添加一个b。
8. $b.insertBefore($a):在a的前面添加一个b。
9. $a.remove(xxx):直接移除自身。
10.$a.empty(); 清空内容(或子元素),不移除自身。


文档操作(增删改查):很多方法:有参数则为设置,无参则为获取。
1.text(xxx):更改元素的文本内容,有参数为赋值,无参数为获取。
2.html(xxx):更改html文本。
3.css("样式名","样式值"); 设置行内样式。参数也可以是js对象。一个参数则为获取。
4.val(xxx): 设置表单元素的值。有参数则为设置,无参则为获取。
5.attr(k,v):两个参数则为设置属性,一个参数则为获取属性。
6.removeAttr(k):移除属性。
7.prop(k,v):设置布尔属性。v只能是true和false,true表示添加此布尔属性,false表示移除。
8.addClass("a"):添加类名称。一次添加多个。
9.removeClass("a"):移除类名称,可以一次移除多个。
10.hasClass("a"):判断是否拥有指定类名称。返回布尔值。
11.toggleClass("a"):切换是否拥有类名称。
12.$a.is(xxx):判断是否符合某个指定选择器。只对$a中的第一个元素进行判断。
13.width(xxx):设置或获取宽度,height(xxx)设置或获取高度。
14.offset(xxx):设置或获取元素相对于视区的偏移位置。


事件处理:
1.$jq.xxx(function(){
    xxx函数处理
});
jq.xxx();//用代码的形式来触发事件。


2.$jq.on("xxx",function(){
    xxx事件处理函数
});

第2种事件添加方式有两个好处:
1.可以给事件命名。移除事件。$jq.off("click.xxx");

2.事件实现事件委托。
$jq.on("xxx","真正触发事件的元素",function(){
    //xxxx
});


动画:
1.setTimeout(function(){}, 2000);//定时器。

2.setInterval(function(){} ,2000);  //循环定时器。

3.hide:大小,透明度。隐藏。
speed: 2000, slow normal fast
easing:缓动函数,swing linear

4.show:一对。

5.slideDown:往下出现
6.slideUp:往上消失

7.fadeIn:渐现
8.fadeOut:渐隐
9.fadeToggle:切换渐隐渐现。
10.fadeTo:控制渐隐到什么程度。
11.animate():第1个参数是动画结束时的状态。


jquery对象与dom对象的转换:
1.将dom转换成jquery对象:$(dom)。
2.从jquery对象中获取dom: jq[x]

==============================================================


 

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

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

相关文章

虚拟电厂搭建指南:绿虫仿真设计软件的助力

在虚拟电厂的搭建中&#xff0c;绿虫仿真设计软件起着重要作用。 绿虫光伏仿真软件是一款综合性辅助工具&#xff0c;能为虚拟电厂中的光伏项目提供精准数据支持。它所提供的项目选址地气象数据&#xff0c;涵盖海拔、辐照、风速、温度等&#xff0c;数据源为 Meteonorm &…

PHP框架+gatewayworker实现在线1对1聊天--聊天界面布局+创建websocket连接(5)

文章目录 聊天界面布局html代码 创建websocket连接为什么要绑定&#xff1f; 聊天界面布局 在View/Index目录下创建index.html html代码 <div id"chat"><div id"nbar"><div class"pull-left">与牛德胜正在聊天...</div…

机器学习基础-卷积的计算

1 掌握卷积计算的基本过程 1.1 单通道单卷积核 如图3所示&#xff0c;现在有一张形状为[5,5,1]的灰度图&#xff0c;我们需要用图3右边的卷积核对其进行卷积处理&#xff0c;同时再考虑到偏置的作用。计算过程如下&#xff1a; 1.2 单通道多卷积核 如下图所示&#xff0c;左…

利用python将图片转换为pdf格式的多种方法,实现批量转换,内置模板代码,全网最全,超详细!!!

文章目录 前言1、img2pdf库的使用1.1 安装img2pdf库1.2 案例演示&#xff08;模板代码&#xff09; 2、Pillow库的使用2.1 pillow库的安装2.2 案例演示&#xff08;模板代码&#xff09; 3、PyMuPDF库的使用3.1 安装pymupdf库3.2 案例演示&#xff08;模板代码&#xff09;3.3 …

Redis--高可用(主从复制、哨兵模式、分片集群)

高可用&#xff08;主从复制、哨兵模式、分片集群&#xff09; 高可用性Redis如何实现高可用架构&#xff1f;主从复制原理1. 全量同步2. 命令传播3. 增量同步 Redis Sentinel&#xff08;哨兵模式&#xff09;为什么要有哨兵模式&#xff1f;哨兵机制是如何工作的&#xff1f;…

Vue el-data-picker选中开始时间,结束时间自动加半小时

效果 思路 查阅elemnet plus官网&#xff0c;日期时间选择器type"datetimerange"这个选中开始时间并没有对应事件会被触发&#xff0c;因此思路更换成type"datetime"的两个组成一起可以通过监听开始时间v-model的值变化更新结束时间的值。 代码 日期时间…

二维码文件在线管理系统-收费版

需求背景 如果大家想要在网上管理自己的文件&#xff0c;而且需要生成二维码&#xff0c;下面推荐【草料二维码】&#xff0c;这个系统很好。特别适合那些制造业&#xff0c;实体业的使用手册&#xff0c;你可以生成一个二维码&#xff0c;贴在设备上&#xff0c;然后这个二维码…

【ArcGISPro/GeoScenePro】裁剪和打包栅格数据

检查并处理扫描地图 数据 https://arcgis.com/sharing/rest/content/items/535efce0e3a04c8790ed7cc7ea96d02d/data 使用标准相机或扫描仪创建的数字影像通常存储在 RGB 颜色模型中,这意味着这些影像将由红色、绿色和蓝色三个栅格组成。 此扫描地图在提供给您之前已在坐标系…

嵌入式入门Day35

网络编程 Day2 套接字socket基于TCP通信的流程服务器端客户端TCP通信API 基于UDP通信的流程服务器端客户端 作业 套接字socket socket套接字本质是一个特殊的文件&#xff0c;在原始的Linux中&#xff0c;它和管道&#xff0c;消息队列&#xff0c;共享内存&#xff0c;信号等…

爬虫后的数据处理与使用(处理篇)

紧接上文爬虫&#xff0c;我们获取到了一些数据&#xff0c;接下来就是使用和分析了~爬虫阶段式教学——从数据获取到格式化存储&#xff08;附代码与效果图&#xff09;_爬虫网页数据格式化-CSDN博客 为保证数据的正确性和有效性需要对数据进行筛选&#xff0c;保存有效信息&a…

人工智能之基于阿里云图像人脸融合部署

人工智能之基于阿里云图像人脸融合部署 需求描述 基于阿里云搭建图像人脸融合模型&#xff0c;模型名称&#xff1a;iic/cv_unet-image-face-fusion_damo使用上述模型输出人脸融合照片 模型路径&#xff1a;人脸融合 业务实现 阿里云配置 阿里云配置如下&#xff1a; SD…

【TextIn—智能文档解析与DocFlow票据AI自动化处理:赋能企业文档数字化管理与数据治理的双重利器】

TextIn—智能文档解析与票据AI自动化处理&#xff1a;赋能企业文档数字化管理与数据治理的双重利器 ​ 在数据驱动的时代&#xff0c;企业面临的挑战不仅在于海量数据的整理和响应速度的提高&#xff0c;更在于如何有效管理和利用这些日益增长的海量信息。尤其是在信息日趋多样…

AI大模型系列之七:Transformer架构讲解

目录 Transformer网络是什么&#xff1f; 输入模块结构&#xff1a; 编码器模块结构&#xff1a; 解码器模块: 输出模块结构&#xff1a; Transformer 具体是如何工作的&#xff1f; Transformer核心思想是什么&#xff1f; Transformer的代码架构 自注意力机制是什么…

uni-ui样式修改

因为之前官网uni-ui有些组件的样式不好看&#xff0c;所以要做一些调整&#xff0c;做个记录。用分段器举例~ 官网原生样式 调整后的 首先找到我们的static文件夹&#xff0c;里面一般存着项目的全局样式文件&#xff0c;没有的话自己创一个 uniui.scss /deep/ .segmented-con…

【SqlSugar雪花ID常见问题】.NET开源ORM框架 SqlSugar 系列

系列文章目录 &#x1f380;&#x1f380;&#x1f380; .NET开源 ORM 框架 SqlSugar 系列 &#x1f380;&#x1f380;&#x1f380; 文章目录 系列文章目录一、前言 &#x1f343;二、ORM中使用雪花ID ❄️2.1 普通插入2.2 导航插入2.3 手动调用雪花ID 三、雪花ID重复 问题 …

详细教程:SQL2008数据库备份与还原全流程!

数据的安全性至关重要&#xff0c;无论是操作系统、重要文件、磁盘存储&#xff0c;还是企业数据库&#xff0c;备份都是保障其安全和完整性的关键手段。拥有备份意味着即使发生误删、系统崩溃或病毒攻击等问题&#xff0c;也能迅速通过恢复功能解决&#xff0c;避免数据丢失带…

低代码开发:开启企业数智化转型“快捷键”

一、低代码开发浪潮来袭&#xff0c;企业转型正当时 在当今数字化飞速发展的时代&#xff0c;低代码开发已如汹涌浪潮&#xff0c;席卷全球。从国际市场来看&#xff0c;诸多企业巨头纷纷布局低代码领域&#xff0c;像微软的 PowerApps、OutSystems 等平台&#xff0c;凭借强大…

MySQL数据库——常见慢查询优化方式

本文详细介绍MySQL的慢查询相关概念&#xff0c;分析步骤及其优化方案等。 文章目录 什么是慢查询日志&#xff1f;慢查询日志的相关参数如何启用慢查询日志&#xff1f;方式一&#xff1a;修改配置文件方式二&#xff1a;通过命令动态启用 分析慢查询日志方式一&#xff1a;直…

javaEE初阶————计算机是如何工作的

今天给大家带来javaEE初阶的知识&#xff0c;相信大家已经学完javaSE了吧&#xff0c;我们从本期博客开始为大家一一讲解&#xff0c;我们现在开始吧 我们作为程序员&#xff0c;大概了解这部分即可嗷 1&#xff0c;计算机的组成 祖师爷提出的&#xff1a; 冯诺依曼体系结构…

基于AI大模型的医院SOP优化:架构、实践与展望

一、引言 1.1 研究背景与意义 近年来,人工智能(AI)技术取得了迅猛发展,尤其是大模型的出现,为各个领域带来了革命性的变化。在医疗领域,AI 医疗大模型正逐渐崭露头角,展现出巨大的应用潜力。随着医疗数据的海量积累以及计算能力的大幅提升,AI 医疗大模型能够对复杂的…