JavaWeb——JQuery之五种选择器的应用及实践案例总结(基本选择器、层级选择器、属性选择器、过滤选择器、表单过滤选择器)
时间:2022-07-25
本文章向大家介绍JavaWeb——JQuery之五种选择器的应用及实践案例总结(基本选择器、层级选择器、属性选择器、过滤选择器、表单过滤选择器),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
选择器,就是用来筛选具有相似特征的元素(标签)。
1 JQuery基本语法入门
1)事件绑定:$("#元素id").click(function () {});
2)入口函数:(function () {}); 注意:window.onload 和(function () 的区别, 前者只能定义一次,定义多次,后面的会将前面的覆盖,后者可以定义多次
3)样式控制:(function () { ("#元素id").css("backgroundColor","green"); });
【举例】:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//JQuery的入口函数(dom文档加载完成后执行该函数中的代码)
$(function () {
//1、获取b1按钮
$("#b1").click(function () {
alert("点我了");
})
});
//CSS样式
$(function () {
// $("#div1").css("background-color","red");
$("#div1").css("backgroundColor","green");
});
</script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<input type="button" id="b1" value="点我">
</body>
</html>
2 JQuery选择器分类
2.1 基本选择器
基本选择器包括三类:
- 1)标签选择器:$("html标签名"),获得所有匹配标签名称的元素;
- 2)id选择器:$("#id的属性值"),获得与指定id属性值匹配的元素;
- 3)类选择器:$(".class的属性值"),获得与指定的class属性值匹配的元素;
- 4)并集选择器:$("选择器1,选择器2"),获取多个选择器选中的所有元素。
【练习案例】:根据不同按键,控制选择器选中的元素背景色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<script type="text/javascript">
$(function () {
$("#b1").click(function () {
$("#one").css("backgroundColor","pink");
});
$("#b2").click(function () {
$("div").css("backgroundColor","pink");
});
$("#b3").click(function () {
$(".mini").css("backgroundColor","pink");
});
$("#b4").click(function () {
$("span,#two").css("backgroundColor","pink");
});
});
</script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok"/>
<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
<div id="one">
id为one
</div>
<div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
<span class="spanone">class为spanone的span元素</span>
<span class="mini">class为mini的span元素</span>
<input type="text" value="zhang" id="username" name="username">
</body>
</html>
2.2 层级选择器
层级选择器包括两类:
- 1)后代选择器:$("A B "),选择A元素内部的所有B元素;
- 2)子选择器:$("A>B"),选择A元素内部的所有B子元素;
【练习案例】:在2.1程序基础上,添加两个button;
$("#b5").click(function () {
$("body div").css("backgroundColor","pink");
});
$("#b6").click(function () {
$("body > div").css("backgroundColor","pink");
});
2.3 属性选择器
属性选择器包括三类:
- 1)属性名称选择器:$("A[属性名]"),包含指定属性的选择器
- 2)属性选择器:$("A[属性名= ‘值’]"),包含指定属性等于指定值的选择器
- 3)复合属性选择器:$("A[属性名= ‘值’][]..."),包含多个属性条件的选择器
【练习案例】:主要看<script>标签中的内容,注意各种条件的写法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>属性过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<script type="text/javascript">
$(function () {
// <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
$("#b1").click(function () {
$("div[title]").css("backgroundColor","pink");
});
// <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
$("#b2").click(function () {
$("div[title='test']").css("backgroundColor","pink");
});
// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
$("#b3").click(function () {
$("div[title!='test']").css("backgroundColor","pink");
});
// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
$("#b4").click(function () {
$("div[title^='te']").css("backgroundColor","pink");
});
// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
$("#b5").click(function () {
$("div[title$='est']").css("backgroundColor","pink");
});
// <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
$("#b6").click(function () {
$("div[title*='es']").css("backgroundColor","pink");
});
// <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
$("#b7").click(function () {
$("div[id][title*='es']").css("backgroundColor","pink");
});
});
</script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok"/>
<input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
<input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
<input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
<input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
<input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
<input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
<div id="one">
id为one div
</div>
<div id="two" class="mini" title="test">
id为two class是 mini div title="test"
<div class="mini" >class是 mini</div>
</div>
<div class="visible" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" title="test02">
class是 one title="test02"
<div class="mini01" >class是 mini01</div>
<div class="mini" style="margin-top:0px;">class是 mini</div>
</div>
<div class="visible" >
这是隐藏的
</div>
<div class="one">
</div>
<div id="mover" >
动画
</div>
<input type="text" value="zhang" id="username" name="username">
</body>
</html>
2.4 过滤选择器
过滤选择器包含9类:
- 1)首元素选择器: :first ,获得选择的元素中的第一个元素
- 2)尾元素选择器: :last ,获得选择的元素中的最后一个元素
- 3)非元素选择器: :not(selector) ,不包括指定内容的元素
- 4)偶数选择器: :even 偶数,从 0 开始计数
- 5)奇数选择器 : :odd 奇数,从 0 开始计数
- 6)等于索引选择器 :eq(index) 指定索引元素
- 7)大于索引选择器 :gt(index) 大于指定索引元素
- 8)小于索引选择器 :lt(index) 小于指定索引元素
- 9)标题选择器 :header 获得标题(h1~h6)元素,固定写法
【练习案例】:主要看<script>标签中的内容,注意各种条件的写法
2.5 表单过滤选择器
表单过滤选择器包括4类:
1)可用元素选择器::enabled,获得可用元素;
2)不可用元素选择器::disabled,获得不可用元素;
3)选中选择器::checked,获得单选/复选框选中的元素;
4)选中选择器::selected获得下拉框选中的元素;
【练习案例】:主要看<script>标签中的内容,注意各种条件的写法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单属性过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
#job{
margin: 20px;
}
#edu{
margin-top:-70px;
}
</style>
<script type="text/javascript">
$(function () {
// 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值
$("#b1").click(function () {
$("input[type='text']:enabled").val("aaa");
});
// 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值
$("#b2").click(function () {
$("input[type='text']:disabled").val("aaa");
});
//利用 jQuery 对象的 length 属性获取复选框选中的个数
$("#b3").click(function () {
alert($("input[type='checkbox']:checked").length);
});
//利用 jQuery 对象的 length 属性获取下拉框选中的个数
$("#b4").click(function () {
alert($("#job > option:selected").length);
});
});
</script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
<br><br>
<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1" >
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2" >
<br><br>
<input type="checkbox" name="items" value="美容" >美容
<input type="checkbox" name="items" value="IT" >IT
<input type="checkbox" name="items" value="金融" >金融
<input type="checkbox" name="items" value="管理" >管理
<br><br>
<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" >女
<br><br>
<select name="job" id="job" multiple="multiple" size=4>
<option>程序员</option>
<option>中级程序员</option>
<option>高级程序员</option>
<option>系统分析师</option>
</select>
<select name="edu" id="edu">
<option>本科</option>
<option>博士</option>
<option>硕士</option>
<option>大专</option>
</select>
<br/>
<div id="two" class="mini" >
id为two class是 mini div
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
</body>
</html>
———————————————————————————————————————
本文为博主原创文章,转载请注明出处!
- LINQ to SQL(3):增删改查
- LINQ to SQL(4):OR设计器
- 在不同浏览器都实用的各窗口大小获取方法
- JavaScript获得对象属性个数的方法
- 设计模式专题(十一)——抽象工厂模式
- Canvas 图形组合方式
- HTML5 FileReader接口学习笔记
- 如何用BBED使Offline的数据文件Online
- Entity Framework4.3 Code-First基于代码的数据迁移讲解1.建立一个最初的模型和数据库 2.启动Migration(数据迁移)3.第一个数据迁移4.订制的数据迁移4.动态
- 轻松初探Python(六)—函数
- css3实现圆角边框渐变
- 设计模式专题(十二)——状态模式
- HTML5新增属性学习笔记
- HTML5标签学习笔记
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 你所不知道的printf函数
- c语言之——整型的隐式转换与溢出检测
- Istio 的配置分析
- (C99)复合字面量
- 排障集锦:九九八十一难之第十三难!-------------史上最全MySQL 单实例故障排查
- c语言数组越界的避免方法
- 单片机的存储区范例
- 大点干!早点散----------Nginx+Tomcat动静分离
- 大点干!早点散----------深入剖析缓存加速--squid传统代理和透明代理
- stm32 HardFault_Handler调试及问题查找方法——飞思卡尔
- 堆栈的分布
- memset()函数的使用
- 质量保障的方法和实践
- Selenium4 IDE,它终于来了
- strtol函数的用法——字符串转长整形