Web10--jQuery进阶

2024-01-26 22:28

本文主要是介绍Web10--jQuery进阶,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、DOM操作

1.1 操作内容

方法

描述

text()

获取/设置元素的标签体纯文本内容

html()

获取/设置元素的标签体超文本内容

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作内容</title><style>div{width: 200px;height: 50px;border: 1px solid red;margin: 5px;}</style><script src="js/jquery-3.4.1.js"></script><script>$(function(){$("#d1").html("<a href='#'>链接</a>");$("#d2").text("<a href='#'>链接</a>")console.log($("#d3").html());console.log($("#d3").text());});</script></head><body><div id="d1"></div><div id="d2"></div><div id="d3"><a href="">111</a></div><div id="d4"><a href="">111</a></div></body>
</html>

1.2 操作属性

方法

描述

对比

val()

获取/设置元素的value属性值

相当于:js对象.value

attr()

获取/设置元素的属性

相当于:js对象.setAttribute() / js对象.getAttribute()

removeAttr()

删除属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作属性</title><script src="js/jquery-3.4.1.js"></script><script>$(function() {// 文本框value属性console.log($("#username").val());console.log($("#username").attr('value'));// 添加属性--获取属性$("#username").attr("class", "user");console.log($("#username").attr("class"));// 修改属性$("#username").attr("class", "u");console.log($("#username").attr("class"));// 删除属性$("#username").removeAttr("class");console.log($("#username").attr("class"));});</script></head><body><form action="#" method="get">姓名 <input type="text" name="username" id="username" value="德玛西亚" /> <br />爱好 <input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">烫头<br /><input type="reset" value="清空按钮" /><input type="submit" value="提交按钮" /><br /></form></body>
</html>

1.3 操作样式

方法

描述

css()

获取/设置样式

addClass()

添加class属性值

removeClass()

删除class属性值

toggleClass()

切换class属性,有则删除,没有则添加

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作样式</title><script src="js/jquery-3.4.1.js"></script><style>.red{color: red;}.blue{color: blue;}.pink{color: hotpink;}</style><script>$(function(){// 设置样式$("ul li").css("background-color","aqua")// 添加class属性$("li:last").addClass("blue");// 删除class属性$("li:first").removeClass();// 切换属性$("li").toggleClass("pink");});</script></head><body><ul><li class="red">1</li><li>2</li><li class="pink">3</li><li>4</li><li>5</li></ul></body>
</html>

1.4 操作元素(节点操作)

方法

描述

append()

在父标签中将子标签放在最后一个位置

prepend()

在父标签中将子标签放在第一个位置

appendTo()

例如:A.appendTo(B),将A追加到B元素后

prependTo()

例如:A.prependTo(B),将A添加到B元素前

after()

在该元素后面添加

before()

在改元素前面添加

wrap()

给该元素添加父元素

unwrap()

去掉该元素的父元素

empty()

清空子元素

remove()

删除自己

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作元素</title><script src="js/jquery-3.4.1.js"></script><script>$(function(){// append()$("ul").append("<li>666</li>");// prepend()$("ul").prepend("<li>000</li>");// appendTo()$("#li3").appendTo("#li1")// prependTo()$("#li5").prependTo("#li1")// after()$("ul").after("<div id='cls1'>777</div>")// before()$("ul").before("<div><span>-1-1-1</span></div>")// wrap()$("#cls1").wrap("<div class='cls'></div>")// unwrap()$("div span").unwrap()// empty()	$("ul").empty()// remove()$("ul").remove()});</script></head><body><ul><li id="li1">111</li><li>222</li><li id="li3">333</li><li>444</li><li id="li5">555</li></ul>	</body>
</html>

2、事件绑定

jQuery的事件与js的事件的功能和作用一样,只是在使用语法上稍微有些差异。

2.1 jQ事件绑定语法

jQ对象.事件函数(function(){})

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>jQ事件绑定</title><script src="js/jquery-3.4.1.js"></script><script>$(function(){$(".btn").click(function(){let vl = $(this).val();console.log(vl)})});</script></head><body><input type="button" value="按钮1" class="btn"> <br><input type="button" value="按钮2" class="btn"> <br></body>
</html>

2.2 常见事件

2.2.1 点击事件

事件

描述

click()

单击事件

dblclick()

双击事件

2.2.2 焦点事件

事件

描述

blur()

失去焦点

focus()

元素获得焦点

2.2.3 鼠标事件

事件

描述

mousedown()

鼠标按钮被按下

mouseup()

鼠标按键被松开

mousemove()

鼠标被移动

mouseover()

鼠标移到某元素之上

mouseout()

鼠标从某元素移开

2.2.4 键盘事件

事件

描述

keydown()

某个键盘按键被按下

keyup()

某个键盘按键被松开

keypress()

某个键盘按键被按下并松开

2.2.5 改变事件

事件

描述

change()

域的内容被改变

2.2.6 表单事件

事件

描述

submit()

提交按钮被点击

2.2.7 事件切换

事件

描述

hover([over,]out)

鼠标移入执行over函数,鼠标移出执行out函数

2.3 注册验证

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>注册验证</title><script src="js/jquery-3.4.1.js"></script><script>$(function(){let userFlag = false;let pwdFlag = false;let phoneFlag = false;$("input[name='username']").change(function(){// console.log($(this).val())let uname = $(this).val();let uReg = /^[a-zA-Z].{5,7}$/;if(uReg.test(uname)){$("#u1").html("✔").css("color","green");userFlag = true;} else{$("#u1").html("✘").css("color","red");userFlag = false;}});$("input[name='password']").change(function(){// console.log($(this).val())let pwd = $(this).val();let pwdReg = /^[a-zA-Z0-9]{6,8}$/;if(pwdReg.test(pwd)){$("#p1").html("✔").css("color","green");pwdFlag = true;} else{$("#p1").html("✘").css("color","red");pwdFlag = false;}});$("input[name='phone']").change(function(){// console.log($(this).val())let phone = $(this).val();let pReg = /^[1][3-9][0-9]{9}$/;if(pReg.test(phone)){$("#ph1").html("✔").css("color","green");phoneFlag = true;} else{$("#ph1").html("✘").css("color","red");phoneFlag = false;}});$("form").submit(function(){if(userFlag && pwdFlag && phoneFlag){return true;} else{return false;}})});</script></head><body><form action="">账号:<input type="text" name="username" /><span id="u1"></span><br />密码:<input type="password" name="password" /><span id="p1"></span><br />手机:<input type="tel" name="phone" /><span id="ph1"></span><br /><input type="submit" value="注册" /></form></body>
</html>

这篇关于Web10--jQuery进阶的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/648245

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory

[MySQL表的增删改查-进阶]

🌈个人主页:努力学编程’ ⛅个人推荐: c语言从初阶到进阶 JavaEE详解 数据结构 ⚡学好数据结构,刷题刻不容缓:点击一起刷题 🌙心灵鸡汤:总有人要赢,为什么不能是我呢 💻💻💻数据库约束 🔭🔭🔭约束类型 not null: 指示某列不能存储 NULL 值unique: 保证某列的每行必须有唯一的值default: 规定没有给列赋值时的默认值.primary key:

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具,采用无代理架构(agentless),基于 SSH 连接进行管理,具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用,旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念