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>
———————————————————————————————————————
本文为博主原创文章，转载请注明出处！
- 2017.11.7解题报告
- TensorFlow从0到1 - 11 - 74行Python实现手写体数字识别
- 让priority_queue支持小根堆的几种方法
- 一招解决4道leetcode hard题，动态规划在字符串匹配问题中的应用
- 细数Python中的数据类型以及他们的方法
- 洛谷 P3807 【模板】卢卡斯定理
- 数据城堡参赛代码实战篇（六）---使用sklearn进行数据标准化及参数寻优
- 震惊！Vector两行代码求逆序对，六行代码过普通平衡树
- 数据城堡参赛代码实战篇（五）---使用sklearn解决分类问题
- 洛谷P1894 [USACO4.2]完美的牛栏The Perfect Stall
- [编程经验]Python生成器、迭代器与yield语句小结
- TensorFlow从0到1 - 12 - TensorFlow构建3层NN玩转MNIST
- 数据城堡参赛代码实战篇（四）---使用pandas合并数据表
- HDU 2586 How far away ？
- 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 数组属性和方法
- Centos8下django项目部署 nginx+uwsgi的教程
- 3分钟短文：Laravel把数据验证的手伸向“请求体”
- 「Redis」字符串
- Elasticsearch：pipeline aggregation 介绍
- Qt音视频开发32-Onvif网络设置
- 3分钟短文：说说Laravel模型关联关系最单纯的“一对一”
- Redis 缓存性能实践及总结
- 如何优雅的在react-hook中进行网络请求
- Git commit emoji 食用指南
- 编译安装 ProtoBuf 扩展
- 一键搭建 KMS 服务
- vuepress-theme-yur 使用教程
- 使用 XDebug + Webgrind 进行 PHP 程序性能分析
- 我给自己组装了一台 ITX 小台式
- PHPStorm 常用插件集合