-
Javascript知识【jQuery选择器】
目录
- 💂 个人主页: 爱吃豆的土豆
- 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
- 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
-
🏆人必有所执，方能有所成！
-
🐋希望大家多多支持😘一起进步呀！
1，jQuery选择器
1.1：层级选择器
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../../js/jquery-3.3.1.min.js">script>
<script>
$(function(){
//1、获取id为main的span标签 内 所有的div标签
var arr1 = $("#main div");
//alert(arr1.length);
//2、获取id为main的span标签 内 子元素div标签
var arr2 = $("#main>div");
//alert(arr2.length);
//3、获取id为main的span标签 后 第一个div兄弟标签
var x3 = $("#main+div");
//alert(x3[0].innerHTML);
//4、获取id为main的span标签 后 所有的div兄弟标签
var arr4 = $("#main~div");
alert(arr4.length);
});
script>
head>
<body>
<span id="main">
<div>111111div>
<div>222222div>
<div>333333div>
<span>
<div>44444div>
span>
span>
<div>55555div>
<span>
<div>66666div>
span>
<div>77777div>
body>
html>目标：熟练掌握其他选择器
课堂练习题：
//5、获取内容体为44444的div标签
var div = $("#main>span>div");
//alert(div[0].innerHTML);
//6、获取class值为hehe标签，及标签下的所有span标签
//$(".hehe span");
//7、获取所有font标签， 以及font标签中的子标签span
//$("font>span");
//8、获取id为xixi标签，及该标签下 所有 class值为hehe的标签
//$("#xixi .hehe");
//9、仅想获取666666
//$("#main+span>div");1.2：属性选择器、通配符选择器
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../../js/jquery-3.3.1.min.js">script>
<script>
$(function(){
//1、获取所有存在type属性的标签
var arr = $("[type]");
//alert(arr.length);//6
//2、获取所有type属性为radio的标签
var arr2= $("[type='radio']");
//alert(arr2.length);
//3、获取所有type属性含有o的标签
var arr3 = $("[type*='o']");
//alert(arr3.length);
//4、获取所有input标签中的单选框，且name为sex的标签
var arr4 = $("input[type='radio'][name='sex']");
//alert(arr4.length);
//5、获取所有input标签中，type不为text的标签
var arr5= $("input[type!='text']");
alert(arr5.length);
});
script>
head>
<body>
用户名：<input type="text" name="uname" value="小刘"/><br />
密码：<input type="password" name="pwd" value="123"/><br />
性别：<input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="woman" />女<br />
是否VIP：<input type="radio" name="vip" value="no" />不是
<input type="radio" name="vip" value="yes" />是<br />
body>
html>课堂练习题：
//课堂练习题
//1、获取 所有的复选框，name属性包含 a
//$("[type='checkbox'][name*='a']");
//2、获取 所有的按钮，按钮名字 包含'提交'
//$("[type='button'][value*='提交']");
//3、获取id=hehe标签 下所有的 选择框
//$("#hehe select[name='city']");1.3：基本过滤选择器
目标：熟练使用基本过滤选择器进行筛选操作
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../../js/jquery-3.3.1.min.js">script>
<script>
$(function(){
//1、在所有DIV标签中，获取第一个div
var d1 = $("div:first");
//alert(d1[0].innerHTML);
//2、在所有DIV标签中，获取最后一个div
var d2 = $("div:last");
//alert(d2[0].innerHTML);
//3、在所有DIV标签中，获取所有偶数位的div
var arr3 = $("div:even");
/*arr3.each(function () {
alert(this.innerHTML);
});*/
//4、在所有DIV标签中，获取所有奇数位的div
var arr4 = $("div:odd");
/*arr4.each(function () {
alert(this.innerHTML);
});*/
//5、在所有DIV标签中，获取除了第一位以外所有的div
var arr5 = $("div:not(div:first)");
/*arr5.each(function () {
alert(this.innerHTML);
});*/
//6、在所有DIV标签中，获取索引等于1的div
var d6 = $("div:eq(1)");
//alert(d6[0].innerHTML);
//7、在所有DIV标签中，获取索引大于1的div
var arr7 = $("div:gt(1)");
/*arr7.each(function () {
alert(this.innerHTML);
});*/
//8、在所有DIV标签中，获取索引小于1的div
var arr8 = $("div:lt(1)");
/*arr8.each(function () {
alert(this.innerHTML);
});*/
});
script>
head>
<body>
<div>11111111，索引是0div>
<div>22222222，索引是1div>
<div>33333333，索引是2div>
<div>44444444，索引是3div>
<div>55555555，索引是4div>
<div>66666666，索引是5div>
<div>77777777，索引是6div>
<div>88888888，索引是7div>
body>
html>课堂练习题：
//课堂练习
//1、获取所有font标签中，除了最后一个font标签外，所有的font标签
//$("font:not(font:last)");
//2、获取所有class=hehe的标签，并将这些标签中的第一个拿到
//$(".hehe:first");
//3、获取id=x的标签，拿到这个标签下所有name=hobby的复选框，
// 将这些复选框中的偶数位拿到【综合】
//$("#x input[type='checkbox'][name='hobby']:even");1.4：表单属性选择器
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../../js/jquery-3.3.1.min.js">script>
<script>
$(function(){
//获取选中的复选框
var arr1 = $("input[type='checkbox']:checked");
/*arr1.each(function () {
alert(this.value);
});*/
//获取国家下拉框中，被选中的option
var arr2 = $("#country>option:selected");
/*arr2.each(function () {
alert(this.innerHTML);
});*/
//获取可用的表单输入项
var arr3 = $("input:enabled");
/*arr3.each(function () {
alert(this.value);
});*/
//获取不可用的表单输入项
var arr4 = $("input:disabled");
alert(arr4.length);
});
script>
head>
<body>
<h1>不可用的表单输入项h1>
<input type="text" disabled="disabled" />
<input type="button" value="不可用按钮" disabled="disabled" />
<h1>复选框h1>
<input type="checkbox" name="hobby" value="code"/>编程
<input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳
<input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读
<hr />
<h1>下拉选择框h1>
城市：<select id="city">
<option value="">请选择option>
<option value="bj">北京option>
<option value="sh">上海option>
select>
<hr />
国家：<select id="country" multiple="multiple">
<option value="China" selected="selected">中国option>
<option value="America" selected="selected">美国option>
<option value="Russia">俄罗斯option>
<option value="England">英国option>
select>
body>
html>课堂练习题：
//课堂练习题：
//1、获取id为x标签下，所有没有被选中的复选框【进阶】
//思路：先获取被选中复选框，进行not排除
$("#x input[type='checkbox']:not(#x input[type='checkbox']:checked)");
//2、获取form标签下，所有禁用的按钮【进阶】
//思路：先form 再按钮 最后筛选 :disabled
$("form input[type='button']:disabled");
//3、获取city下拉框内，所有没有被选中的选项【进阶】
//思路：先下拉框，然后在获取选项 进行not排除（被选中选项）
$("#city option:not(#city option:selected)");
//4、获取class=hehe的标签下，所有 未被选中 的 禁用 复选框【困难】
//思路：先.hehe标签，所有复选框 排除被选中的，筛选被禁用的
$(".hehe input[type='checkbox']:not(.hehe input[type='checkbox']:checked):disabled"); -
相关阅读:
【JVM笔记】堆的核心概述与堆空间大小的设置与查看
nginx的使用
我从小公司跳槽到字节，居然拿到了offer
28 WEB漏洞-XSS跨站之WAF绕过及安全修复
【Git】Gitbash使用ssh 上传本地项目到github
【Shell 脚本速成】01、编程语言与 Shell 脚本介绍
微信小程序开发SSM投票系统+后台管理系统|前后分离VUE
蓝桥杯 第 1 场算法双周赛 第2题 数树数【算法赛】c++ 位运算巧解
【视觉SLAM】Bags of Binary Words for Fast Place Recognition in Image Sequences
【纯干货】医疗视觉大模型2023年进展简述｜Medical Vision-language Models (VLM)
- 原文地址：https://blog.csdn.net/m0_64550837/article/details/126231445