前端5JQ

news/2024/3/29 0:18:32/文章来源:https://www.cnblogs.com/zongliang-ya/p/16633411.html
  • js获取用户输入
  • JS类属性操作
  • JS样式操作
  • 事件
  • JS事件案例
  • JQuery类库
  • JQuery基本使用
  • 基本筛选器(了解)
  • 表单筛选器

Js获取用户输入

普通数据(输入,选择)
​ 标签对象.value

获取文件数据的时候:

标签对象.value只能获取到文件路径,而标签对象.files结果是一个数组,可以通过索引获取具体文件对象。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" name="" id="d1">
<input type="radio" name="gender" value="female" id="d2">女
<input type="radio" name="gender" value="male" id="d3">男<select name = "" id = "d4"><option value="111">1</option><option value="222">2</option><option value="333">3</option></select><input type = "file" name="file" id="d5">
</body>
</html>

1661500834387

1661500885284

Js类属性操作

标签对象.classList					查看所有的类属性
标签对象.classList.contains()			存在返回True,不存在返回False
标签对象.classList.add(cls)				添加类
标签对象.classList.remove(cls)			删除指定类
标签对象.classList.toggle()				存在即删除,不存在就添加

image

image

image

image

JS样式操作[简单了解]

简单了解,css样式修改,应该由css来操作。

语法:标签对象.style.属性名
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p>我困我就要睡,今天不rap</p></body>
</html>

image

image

事件

事件就是给html标签绑定了一些额外的功能(能够触发js代码的运行),

就是用户点击某个html元素,会起动一段Js。

onclick 当用户点击某个对象调用的事件句柄 
ondbclick 当用户双击某个对象时调用的事件句柄 
onfocus 元素获得焦点    //练习输入框 
onblur 元素失去焦点 	//应用场景:通常用于表单元素,当元素内容被改变时触发.(select 联动)
onchange 域的内容被改变	应用场景:通常用于表单元素,当元素内容被改变时触发(select 联动)
onkeydown 某个键盘按键被按下
onkeyup		某个键盘按键被松开
onkeypress 某个键盘按键按下并松开
onmousedown 鼠标按钮被按下
onmousemove 鼠标被移动
onmouseout  鼠标从某元素移开
onmouseover 鼠标移到某元素之上
onselect 	在文本框中的文本被选中时发生
onsubmit	在确认按钮被点击,使用的对象是form

模拟练习

绑定事件的两种方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><button id ="d1" onclick="func1()">按我</button>    <!--#绑定方式1    写一个功能函数,在标签属性里添加onclick--><script>function  func1(){alert('你按到我了,八嘎雅鹿')}</script><!--绑定方式2 #:在特定的标签属性上创建功能函数--><input id ="d2" type="button" value="点我" ><script>let buttonEle = document.getElementById('d2')buttonEle.onclick = function (){alert('你点我干嘛')}</script>
</body>
</html>

JS事件案例

image

image

JS事件案例

1.校验用户输入,点击onclick,提示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p><input type="text" id="username"><span class="errors" style="color: chartreuse"></span>
</p><p><input type="password" id ="password">
<span class="errors" style="color:red"> </span></p><button id = "btn">提交</button><script>let btnEle = document.getElementById('btn');btnEle.onclick = function(){let usernameVal = document.getElementById('username').value;let passwordVal = document.getElementById('password').value;//4.判断用户名喝密码是否合法if(usernameVal==='lzl'){let span1Ele =document.getElementsByClassName('errors')[0];span1Ele.innerText= '用户名不能是lzl'}if(passwordVal.length === 0){let span2Ele = document.getElementsByClassName('errors')[1];span2Ele.innerText = '用户名密码不为空'}}</script>
</body>
</html>

image

JQuery类库

什么是JQuery

JQuery是一个高效,精简并且功能丰富的javaScript工具库
JQuery极大的简化了JavaScripts编程

JQuery的优势

开源,免费便捷的选择器,方便DOM操作。方便的动画特效易用的ajax操作丰富的插件扩展解决浏览器兼容性效果

JQuery选择器

通过选择器,可以获取到页面元素,可以获取到页面元素,JQuery具有强大的选择器,跟css3选择器类似

1.基本选择器

id 				根据给定的id匹配一个元素
element 		根据给定的元素标签名匹配所有元素
.class			根据给定的css类名匹配元素
*				匹配所有元素
prev-sbilings	匹配prev 元素之后的所有 siblings 元素

2.层级选择器

1.ancestor descendant 	在给定的祖先元素下匹配所有的后代元素
2.parent>child 			在给定的父元素下匹配所有的子元素
3.prev+next		        匹配所有紧接在prev 元素后的next 元素
4.prev-siblings			匹配prev元素之后的所有siblings元素----------------------------------------------------层级选择器:x和y可以为任意选择器$("x y");// x的所有后代y(子子孙孙)$("x > y");// x的所有儿子y(儿子)$("x + y")// 找到所有紧挨在x后面的y$("x ~ y")// x之后所有的兄弟y

3.过滤选择器【了解】

:first  获取第一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even	匹配所有索引值为偶数元素,从0开始计数
:odd 	匹配所有索引值为奇数的元素,从0的开始计数
:eq(index)   匹配一个给定索引值的元素
:gt(index)   匹配所有大于给定索引值的元素
:lang	 选择指定语言的所有元素,1.9+
:last 获取最后个元素
:lt(index) 匹配所有小于给定索引值的元素
:header    匹配如h1,h2,h3之类的标题元素
:animated  匹配当前获取焦点的元素
:focus	   匹配当前获取焦点的元素
:root      选择该文档的根元素   1.9+
:target	   选择由文档URI的格式化识别码表示的目标元素

4.可见性选择器

:hidden	   匹配所有不可见元素或者type为hidden的元素
:visible 	匹配所有的可见元素

5.属性选择器

[attribute]  匹配包含给定属性的元素
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含指定的属性,或者属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是某些值开始的元素
[attribute$=value]	匹配给定的属性是某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件使用

6.子元素选择器

:first-child	匹配所有选择器:(之前的选择器)的第一个子元素
:firest-of-type 结构化伪类,匹配E的父元素的第一个E类型的孩子
:last-child    匹配最后一个子元素
:last-of-type    结构化伪类,匹配E的父元素的最后一个E类型的孩子
:nth-child()	 匹配其父元素下的第N个子或者奇元素或者偶元素
:nth-last-child() 选择所有他们父元素的第N个子元素,计数从最后一个元素开始到第一个 1.9+
nth-last-of-type() 选择的所有他们的父级元素的第N个子元素,计数从最后一个元素到第一个
:nth-of-type()  选择同属于一个父元素之下,并且标签签名相同的子元素的第N个
:only-child 	如果某个元素是父类元素中唯一的子元素,那么将会被匹配
:only-of-type   选择所有没有兄弟元素,且具有相同元素名称的元素

7.表单选择器

​ 可以看成是属性选择器优化而来

注意:$(':checked')  $('input:checked') 
:input	匹配所有的input ,textrarea,select和button元素
:text    匹配所有的单行文本框
:password 匹配所有的密码框
:radio    匹配所有的单选按钮
:checkbox    匹配所有复选框
:submit	   匹配所有提交按钮,匹配type="submit"的input或者button
:image     匹配所有图像域
:reset    匹配所有重置按钮
:button   匹配所有按钮
:file		匹配所有的文件域

8.表单对象选择器

:enabled    匹配所有可用元素
:disabled   匹配所有不可用元素
:checked    匹配所有选中的被选中元素(复选框,单选框等,select 中option)

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

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

相关文章

前端Day10

视口(viewport):浏览器显示页面内容的屏幕区域。分为布局视口、视觉视口、理想视口。 布局视口: 视觉视口: 理想视口: meta视口标签: width=device-width:布局视口宽度为当前设备宽度* user-scalable=no:不允许用户缩放 二倍图: 1.物理像素比: ①物理像素:即分辨…

分布式系统的session共享问题

目前大多数大型网站的服务器都采用了分布式服务集群的部署方式。所谓集群,就是让一组计算机服务器协同工作,解决大并发,大数据量瓶颈问题。但是在服务集群中,session共享往往是一个比较头疼的问题。因为session是在服务器端保存的,如果用户跳转到其他服务器的话,session就…

网络network

网络network 基础network模型 OSI七层模型,一层一层封装数据帧(添加报文头),传过去之后再一层一层解封装(解封装掉报文头) 应用层:应用软件层面业务端口,例如http/https,ftp,sftp,smtp(25),除了在四层TCP IP+端口号的方式进行外,还需要检查http/https的url,cook…

python中的多线程与多进程

线程概念: 线程也叫轻量级进程,是操作系统能够进行运算调度的最小单位,它被包涵在进程之中,是进程中的实际运作单位。 线程自己不拥有系统资源,只拥有一点儿在运行中必不可少的资源,但它可与同属一个进程的其他线程共享进程所拥有的全部资源。一个线程可以创建和撤销另一…

从设计到代码(第 3 天)

从设计到代码(第 3 天) 我最近正在开发一门课程,名为 三周内完成三个网页设计 .最初它是一个为期 3 周的研讨会材料,旨在成为一个包含许多实践的动手密集型研讨会。主要目标是教没有太多开发经验的人使用 HTML 和 CSS 来重现专业的设计模型——这就是为什么它被称为从设计到…

力扣507(java)-完美数(简单)

题目: 对于一个 正整数,如果它和除了它自身以外的所有 正因子 之和相等,我们称它为 「完美数」。 给定一个 整数 n, 如果是完美数,返回 true;否则返回 false。示例 1: 输入:num = 28输出:true解释:28 = 1 + 2 + 4 + 7 + 141, 2, 4, 7和 14 是 28 的所有正因子。示例 …

仅Intel电脑可用:设计2D/3D文档绘图Autodesk AutoCAD 2021

Autodesk AutoCAD 2021是Mac上的二维和三维CAD设计软件,用于产品衍生式设计,创建设计方案,三维模型参数化,建模部件组织,创建制作清晰工程图,设计自动化配置等,AutoCAD 2021增强了针对草图的命令设计,简化流程,改进各种性能,转化探索更强大的设计。​编辑切换为居中 …

Echarts与ajax数据的动态交互

初学Echarts,Echarts的官网示例中配置项的数据需要用到js数组来传递数据,所以当我们从后端查询到数据后,往往需要通过ajax来进行数据交互。 这是官方示例的配置项。<script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = ech…

Openwrt 纯ipv6环境管理和上网

防火墙打开远程管理端口 添加端口如22或者使用ipv6端口转发到ipv4 使用socat opkg install socat图形化界面: drophair / luci-app-socatg wget -P /tmp https://github.com/big-tooth/luci-app-socatg/releases/download/v1.1/luci-app-socatg_1.1-1_all.ipk opkg install /tm…

c++ :虚拟机centos7+vscode

c++ :虚拟机centos7+vscodegcc、g++、make查看是否安装成功 $ gcc --version $ g++ --version $ make --version哪个没有,就yum install gcc-c++/yum install gcc/yum install make yum报错 "Failed to connect to 2001:da8:8000:6023::230: 网络不可达":参考链接…

最大正方形

问题:在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积。 输入:matrix = [["1","0","1","0","0"],["1","0","1","1","1"],["1"…

图解AspNetCore和Furion(1):应用启动

一、和AspNetCore5相比,从6开始,将Program和Startup类合并,直接在入口类中启动服务和中间件。同时,项目可以启动miniApi,直接在Program中设置路由和控制器。实际项目中,还是推荐使用控制器的方式。 二、Furion定义了静态类Serve,对AspNetCore的启动类进行了封装,同时支…

leetcode-172. 阶乘后的零

172. 阶乘后的零 图床:blogimg/刷题记录/leetcode/172/ 刷题代码汇总:https://www.cnblogs.com/geaming/p/16428234.html 题目思路 n!中有几个0与[1,n]中出现多少个5的因数有关。例如7! = 1234567出现了1次5,故最后末尾会出现1个0。26!中出现了5,10,15,20,25其中5的个数为1+…

java内部类

一、基本介绍 一个类的内部又完整的嵌套了另一个类结构。被嵌套的类称为内部类(inner class),嵌套其他类的类称为外部类(outer class)。是我们类的第五大成员 类的五大成员:属性、方法、构造器、代码块、内部类 内部类最大的特点就是可以直接访问私有属性,并且可以体现类…

redis主从数据同步原理

what:redis高可用:1、数据尽量不丢失;2、尽可能的提供服务;栗子:AOF 和 RDB 保证了数据持久化尽量不丢失;主从复制就是增加副本,一份数据保存到多个实例上。即使有一个实例宕机,其他实例依然可以持续服务;主从:复制——为单向的,即:只能从主复制到从;读写指责——…

Linux驱动开发十六.input系统——2.input_event

我们上一章完成了input子系统的设备构成,并且在用户空间通过hexdump命令拿到了一堆不知道是什么的信息。今天我们就要借助input_event这个结构体来了解内核怎么通过那个结构体了解输入事件。 可能有心人已经发现了,上一章我们在加载完模块以后在/dev/input路径下生成了一个新…

(0828)【vivado版本-对仿真工具版本要求】

(1)https://blog.csdn.net/Alonger1988/article/details/120506385 vivado,vsim版本兼容问题 (2)版本匹配:http://dengkanwen.com/567.html

Ingress

为什么需要Ingress Service是基于四层TCP和UDP协议转发的,而Ingress可以基于七层的HTTP和HTTPS协议转发,可以通过域名和路径做到更细粒度的划分,如下图所示。 图1 Ingress-ServiceIngress工作机制 要想使用Ingress功能,必须在Kubernetes集群上安装Ingress Controller。Ingr…

Rayman Mini for Mac(雷曼迷你跑酷游戏)中文

Rayman Mini for Mac是一款运行在MacOS平台上的经典跑酷类游戏,玩家在Rayman Mini可以看到经典的传统角色,与玩家一起在世界中探险,还有超多全新的角色出现。游戏包含动作横向跑酷和剧情解谜探索为一体,呈现了一个别样的世界。 详情:Rayman Mini for Mac(雷曼迷你游戏) 游…

Java09-继承,抽象类

继承:就是子类继承父类的属性和行为,使得子类对象具有与父类相同的属性、相同的行为。子类可以直接 访问父类中的非私有的属性和行为。父类中的方法,被它的子类们重写,子类各自的实现都不尽相同。那么父类的方法声明和方法主体,只有声明还有意义,而方法主体则没有存在的意…