jQuery基础，定位标签，下拉菜单，样式操作，获取值（帐号、密码）
2024-05-10 04:25:30
JQuery的是什么？
它是JavaScript的第三方库。是比较主流的网页动态效果实现工具；相比原生JavaScript，JQuery的语法更加简洁，更容易学习。这是jQuery的学习笔记，所以我不会告诉你Vue.js正在超越jQuery。
1.0 快速的上手，下载，应用。
为了方便学习，降低门槛，我这里就直接引用一个CDN地址来引入JQuery库。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.js"></script>
1.1 JQuery的简单应用1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 id="txt"> 预留，初始文本 </h1><input type="button" value="Jquery启动" onclick="JqueryText()" ><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<!--用CDN引入jquery代码库--><script type="text/javascript">function JqueryText(){$("#txt").text("我是Jquery，这是一个HTML的H1大标题")// 用 JQuery的 $("#txt") 方法定位HTML标签。 用 text 方法修改标签中的文本信息}</script></html>
相同效果用原生JavaScript实现的代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 id="txt"> 预留，初始文本 </h1><input type="button" value="javascript启动" onclick="changeH1()" ><script type="text/javascript">function changeH1(){var tag = document.getElementById("txt"); // 1. 定位需要处理的HTML标签tag.innerText="我原生javascript，我修改了HTML的H1大标题" //2. 修改标题。}</script></html>
以上两条代码主要是想表达Jquery更简洁。
1.2 JQuery示例1
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head><body><h1>试试点击我吧。</h1><h2>点我给你表演个魔术。</h2><h3>我和他们的技能是相同的。</h3><script>// 1. 等待页面加载完成$(document).ready(function () {//2. 同时选择h1, h2, h3 三个标签，并为其创建点击事件$("h1,h2,h3").click(function () {//3. 隐藏被点击的标签$(this).hide();});});</script>
</body>
</html>
1.3 JQuery示例2
当用户点击一个按钮时，用jQuery将文本设置为“Hello World”：
// 1. 当html中的button标签被点击后$("button").click(function() {// 2. 将html中的P标签中的内容，改成"Hello World"$("p").text("Hello World");});
//执行此示例代码要先创建一个button标签和P标签。
1.4 JQuery示例3
用jQuery向文本输入框添加实时输入事件监听器：
// 1. 监听用户在input标签中输入的内容，实时获取输入框中的内容。$("input").on("input", function() {var value = $(this).val();// 2.并实时在P标签中显示$("p").text(value);});
//执行此示例代码要先创建一个input标签和P标签。
1.5 JQuery示例4
用jQuery向文本输入框添加失去焦点事件监听器：
// 通常会把jQuery函数包裹在$(document).ready(function() {......});内
// 其作用是让被包裹的代码可以尽快加载。而不需要等待整个HTML加载完成的最后才加载！
$(document).ready(function() {// 失去焦点事件$("input").blur(function() {alert("输入框失去焦点");});
});1.6 JQuery示例5
使用jQuery在HTML元素上添加或删除（已有就删除，没有就添加）类：
$(document).ready(function() {// 1. 当html中的button标签被点击后$("button").click(function() {//2. toggle = 切换，Class=类。 添加或移除，所有P标签中nav的类名$("p").toggleClass("nav");});
});
toggleClass() 方法，可以在元素上添加或者移除一个或多个类。多个类名之间用空格分隔。
示例： $("p").toggleClass("nav1 nav2");
1.7 JQuery示例6
使用jQuery将元素淡入或淡出（如果标签可见则隐藏，不可见则显示）：
$(document).ready(function() {// 1. 当html中的button标签被点击后$("button").click(function() {// 2. 隐藏（淡出）或显示（淡入）P标签。$("p").fadeToggle();});
});
1.8 JQuery示例7
使用jQuery在元素中添加新的HTML内容：
$(document).ready(function() {// 1. 当html中的button标签被点击后$("button").click(function() {// 2. 在P标签内插入一条新的HTML$("p").append("<strong>Hello World!</strong>");});
});2.0 JQuery的核心学习内容1：定位标签
<h1>一人之下<h1>
<p id="p1"> 冯宝宝 </p>
<p> 不摇碧莲 </p>
<div class="d3"> 王大师 </p>
//JQuery定位标签语法
$("#p1") //ID定位： <p id="p1"> 冯宝宝 </p>
$("p") //标签定位： <p> 不摇碧莲 </p>
$(".d3") //calss定位： <div class="d3"> 王大师 </p>
$("#p1,p,.d3") //用逗号, 分隔，同时选择多个标签层级选择
<h1>冯宝宝</h1>
<h1 class="c1"><div class="d1"><span>不摇碧莲</span><a href=#>天师府</a></div>
</h1>
//JQuery定位标签语法
$(".c1 .d1 a") //逐层定位： <a href=#>天师府</a>
属性选择器
<input type="text" name="t1" />
<input type="text" name="t2" />
<input type="text" name="t3" />
//JQuery定位标签语法
$("input[name='t1']") //属性选择器，根据标签名称和属性定位
间接定位
- 寻找指定标签附近的标签。例如查找兄弟，查找父母。
<div id="d1">一人之下<ul><li>气体源流</li><li id="l2">拘灵遣将</li><li>风后奇门</li><li class="l3">神机百炼</li><li class="l3">六库仙贼</li></ul>
</div>
//JQuery定位标签语法
$("#l2").prev() //定位上一个标签：<li>气体源流</li>
$("#l2").next() //定位下一个标签： <li>风后奇门</li>
$("#l2").next().next() //定位下下一个标签： <li>神机百炼</li>
$("#l2").siblings() //定位除#l2自身以外其他所有的<li>...</li>标签$("#l2").parent() //定位父级标签：<ul>....</ul>
$("#l2").parent().parent() //定位父亲的父亲的标签<div>一人之下...</div>$("#d1").children() //定位子标签：<ul>....</ul>$("#d1").children().children(".l3") //定位子标签的子标签中的：<li class="l3">神机百炼</li> <li class="l3">六库仙贼</li>$("#d1 ul").children(".l3") //和上一条效果相同，定位子标签的子标签中的：<li class="l3">神机百炼</li> <li class="l3">六库仙贼</li>$("#d1").find(".l3") //和上一条效果相同，在指定范围内查找标签：<li class="l3">神机百炼</li> <li class="l3">六库仙贼</li>3.0 点击展开菜单演示
点击展开下拉菜单，再次点击隐藏下拉菜单。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script><style>.menus{width: 150px; /*高度*/}.item .header{background: #e38d13; /*背景色*/padding: 10px 5px; /* 上下10px，左右5px 外边距*/cursor: pointer; /* 焦点时改变指针形状 */}.item .header:hover{background: greenyellow;}.item .content{padding: 5px 5px; /*外边距*/}.item .content div{border:1px dotted darkred; /*边框线 虚线 灰色*/}.hide{display: none; /* 隐藏 */}</style></head>
<body><div class="menus"><div class="item"><div class="header" onclick="clickME(this)">八奇技</div><div class="content hide"><div>气体源流</div><div>拘灵遣将</div><div>风后奇门</div><div>神机百炼</div><div>六库仙贼</div><div>大罗洞观</div><div>双全手</div><div>通天禄</div></div></div><div class="item"><div class="header" onclick="clickME(this)">猪脚们</div><div class="content hide"><div>冯宝宝</div><div>张楚岚</div><div>王也</div><div>徐三</div><div>徐四</div><div>马仙洪</div><div>诸葛青</div><div>陆玲荣</div></div></div></div><script></script>
</body><script>function clickME(self){var hasHide = $(self).next().hasClass("hide") //hasClass 方法判断对应的class 是否存在if(hasHide){$(self).next().removeClass("hide") //如果hide存在就删除hide}else{$(self).next().addClass("hide") //如果hide不存在就添加hide}}// function clickME(self){// $(self).next().slideToggle()// }</script>
</html>
3.1 点击展开菜单升级版
让每次显示的菜单只有1个，打开新菜单时，自动关闭其他菜单。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script><style>.menus {width: 150px; /*高度*/}.item .header {background: #e38d13; /*背景色*/padding: 10px 5px; /* 上下10px，左右5px 外边距*/cursor: pointer; /* 焦点时改变指针形状 */}.item .header:hover {background: greenyellow;}.item .content {padding: 5px 5px; /*外边距*/}.item .content div {border: 1px dotted darkred; /*边框线 虚线 灰色*/}.hide {display: none; /* 隐藏 */}</style></head>
<body>
<div class="menus"><div class="item"><div class="header" onclick="clickME(this)">八奇技</div><div class="content hide"><div>气体源流</div><div>拘灵遣将</div><div>风后奇门</div><div>神机百炼</div><div>六库仙贼</div><div>大罗洞观</div><div>双全手</div><div>通天禄</div></div></div><div class="item"><div class="header" onclick="clickME(this)">猪脚们</div><div class="content hide"><div>冯宝宝</div><div>张楚岚</div><div>王也</div><div>徐三</div><div>徐四</div><div>马仙洪</div><div>诸葛青</div><div>陆玲荣</div></div></div><div class="item"><div class="header" onclick="clickME(this)">八奇技22</div><div class="content hide"><div>气体源流</div><div>拘灵遣将</div><div>风后奇门</div><div>神机百炼</div><div>六库仙贼</div><div>大罗洞观</div><div>双全手</div><div>通天禄</div></div></div><div class="item"><div class="header" onclick="clickME(this)">猪脚们22</div><div class="content hide"><div>冯宝宝</div><div>张楚岚</div><div>王也</div><div>徐三</div><div>徐四</div><div>马仙洪</div><div>诸葛青</div><div>陆玲荣</div></div></div>
</div><script></script>
</body>
<script>function clickME(self) {var hasHide = $(self).next().hasClass("hide") //hasClass 方法判断对应的class 是否存在$(self).next().removeClass("hide") //如果hide存在就删除hide//找到点击标签的所有父标签的其他兄弟标签下的所有 .content标签 为其添加 .hide 属性//效果：点开新的菜单时，关闭已有的菜单。即：只显示一个下拉菜单$(self).parent().siblings().find(".content").addClass("hide")}</script>
</html>
</script>
</html>
3.2 JQuery 样式操作
addclass("xxx")为标签添加class="xxx"属性removeclass(" ")移除class="xxx"属性hasclass(" ")检查标签是否包含class="xxx"的属性remove()删除标签
4.0 JQuery 值操作
$("#d1").text()获取标签内的文本内容$("#d1").text(”xxx“)设置标签内的文本内容为xxx$("input").val()获取input标签中用户输入的内容$("input").val(”xxx“)设置input标签中的内容
4.1 获取用户输入的账号密码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script></head>
<body>
<div><input type="text" id="account" placehoder="账号"/><input type="password" id="password" placehoder="密码"/><input type="button" value="提交" onclick="info(this)"/>
</div><h2> </h2><script>function info(self) {//1. 获得用户输入的账号密码var account= $("#account").val() // 获取账号输入框中的内容var password= $("#password").val() // 获取密码输入框中的内容$("h2").text("账号："+ account +" 密码：" + password)}
</script>
</body>
</html>
未完待续…
jQuery基础，定位标签，下拉菜单，样式操作，获取值（帐号、密码）相关推荐
- jsp 下拉列表选取触发function_Bootstrap下拉菜单样式
使用Bootstrap下拉插件用于显示切换你要展示的链接列表和更多内容的,或触发其它内容显示(覆盖). 将下拉列表的切换(按钮或链接)和下拉菜单包含在.dropdown中,或者另外声明position ...
- php菜单栏样式,最常见的多个css下拉菜单样式分享
CSS下拉菜单怎么做?在浏览网页的时候我们总会看到各式各样的下拉菜单,那么这些下拉菜单是怎么实现的呢?本篇文章就来给大家分享一下常用的多个CSS下拉菜单的实现方法. CSS下拉菜单的精选文章 随便打开 ...
- Bootstrap完美select标签下拉菜单实现
Bootstrap <select>下拉菜单实现 初级者使用bootstrap框架时,大部分对官方提供的下拉菜单dropdown组件不是很感冒! 所以,这里就提供简单原生下拉标签<s ...
- html下拉菜单隐藏属性,css修改selec下拉菜单样式
css修改selec下拉菜单样式2018-01-19 15:00 修改select下拉菜单样式其实可以使用javascript来操作,这样更方便. 但有些人并不喜欢,想用单纯的css来控制. 以下有三 ...
- WordPress程序有哪些下拉菜单样式表代码？
WordPress主题最常用的菜单体验方式就是下拉菜单,但是很多新手对菜单的使用和调整方式都不是很明白,不懂样式表的更难操作. 那么WordPress程序有哪些下拉菜单样式表代码?今天就为大家提供现成 ...
- 如何JQ将下拉列表的值传送给php,JQuery设置获取下拉菜单某个选项的值(比较全)...
JQuery获取和设置Select选项 获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:sele ...
- 无限级导航PHP,jQuery多级无限级导航下拉菜单代码
jQuery多级无限级导航下拉菜单代码 js代码 $(document).ready(function() { $("ul.nav li").hover(function(){ $ ...
- html手机下拉菜单样式,MUI下拉菜单样式
本文将要为您介绍的是MUI下拉菜单样式,教程操作方法: 1 2 性别 3 4 5 6 style="margin:auto; color:#000; 7 font-size: 14px;co ...
- css创建鼠标悬停下拉菜单样式
下拉菜单在网站中到处可见. 下面用css设置下拉菜单样式. <!DOCTYPE html> <html> <head> <title>淘宝</ti ...
- 利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
最新文章
- 记录结果再利用的动态规划
- 001@多用派发队列，少用同步锁
- 任给十进制整数，请从低位到高位……
- 操作系统--文件管理之索引
- acl在内核里的位置_Linux 进程在内核眼中是什么样子的？
- 模板：无旋treap
- SpringCloud入门（一）
- 别再这么写代码了，这几个方法不香吗？
- hdu--1077--Catching Fish
- redis 集群常用命令
- vue 生成qrCode二维码保存图片至本地
- LabVIEW串口调试助手
- dropping incoming packet
- 【Python常见 面试题】实现三位数的水仙花数，Python入门案例学习
- javascript 中Object.entries
- 记WSL下MySQL安装和使用BUG
- 【相机】(2)——WebView中打开相机、文件选择器的问题和解决方法
- 批量替换一个文件中的文件名，例如将文件夹中s**_abnormal.jpg文件修改为s**_abnor.jpg
- 谢国忠-高房价伤害老百姓，破坏社会稳定
- STC8A单片机功能和应用电路