JQuery选择器超级详细

article/2025/9/18 15:28:00

基本选择器

id选择器：$("#id的属性值")

类选择器：$(".class的属性值")

标签选择器：$("标签名")

并集选择器：$("选择器1，选择器2")

层级选择器

后代选择器：$("选择器1   选择器2")

子选择器：$("选择器1 > 选择器2")

属性选择器

属性名称选择器：$("选择器[属性名]")

属性选择器：

$("选择器[属性名='值']")

$("选择器[属性名!='值']")

$("选择器[属性名^='值']") 

$("选择器[属性名$='值']")

$("选择器[属性名*='值']")

复合属性选择器：$("选择器[属性名='值'][]...")

过滤选择器

首元素选择器：${选择器：first}

尾元素选择器：${选择器：last}

非元素选择器：${选择器1：not(选择器2)}

偶数选择器：${选择器：even}

奇数选择器：${选择器：odd}

等于索引选择器：${选择器：eq(index)}

大于索引选择器：${选择器：gt(index)}

小于索引选择器：${选择器：lt(index)}

标题选择器：${：header}

表单过滤选择器

可用元素选择器：${:enabled}

不可用元素选择器：${:disabled}

选中选择器

单复选框：${:checked}

下拉框：${:selected}

 

基本选择器

id选择器：$("#id的属性值")

 获取与指定id属性值匹配的元素

单击按钮，将id为myid的元素背景为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 50px;}span{background-color:pink ;width: 100%;height: 20px;}</style><script>$(function () {$("#id1").click(function () {$("#mydivid").css("backgroundColor","green");});});</script></head>
<body><input id="id1" type="button" value="改变id为mydivid的元素为绿色"><hr><hr><div id="mydivid">这是div,id为mydivid</div><span id="myspanid">这是span,id为myspanid</span>
</body>
</html>

单击前

单击后

类选择器：$(".class的属性值")

 获取与指定的class属性值匹配的元素

单击按钮，将类名为myClassName的元素背景变为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 50px;}span{background-color:pink ;width: 100%;height: 20px;}</style><script>$(function () {$("#id1").click(function () {$(".myClassName").css("backgroundColor","green");});});</script></head>
<body><input id="id1" type="button" value="改变class为myClassName的元素为绿色"><hr><hr><div id="mydivid" class="myClassName">这是div,id为mydivid，calss为myClassName<span >这是span</span></div><br><div  class="myClassName">这是div,calss为myClassName</div><br><span id="myspanid" class="myClassName">这是span,id为myspanid，calss为myClassName</span>
</body>
</html>

单击前

单击后

标签选择器：$("标签名")

 获取所有匹配标签名称的元素

单击按钮，将标签为div的元素背景变为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 50px;}span{background-color:pink ;width: 100%;height: 20px;}</style><script>$(function () {$("#id1").click(function () {$("div").css("backgroundColor","green");});});</script></head>
<body><input id="id1" type="button" value="改变标签为div的元素为绿色"><hr><hr><div id="mydivid" class="myClassName">这是div,id为mydivid，calss为myClassName<span >这是span</span></div><br><div  class="myClassName">这是div,calss为myClassName</div><br><span id="myspanid" class="myClassName">这是span,id为myspanid，calss为myClassName</span>
</body>
</html>

单击前

单击后

 

并集选择器：$("选择器1，选择器2")

获取多个选择器选中的所有元素 

单击按钮，将标签为span的元素，或者id为myDivId的元素背景变为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 50px;}span{background-color:pink ;width: 100%;height: 20px;}</style><script>$(function () {$("#id1").click(function () {$("span,#myDivId").css("backgroundColor","green");});});</script></head>
<body><input id="id1" type="button" value="改变标签为span的元素，或者id为myDivId的元素背景变为绿色"><hr><hr><div >这是div<span >这是span</span></div><br><div id="myDivId">这是div,id为myDivId</div><br><span id="myspanid">这是span,id为myspanid</span>
</body>
</html>

单击前

单击后

层级选择器

后代选择器：$("选择器1   选择器2")

选择选择器1内部的所有选择器2

改变id为myDivId的元素下的，所有span元素背景变为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width: 100px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$("#myDivId   span").css("backgroundColor","green");});});</script></head>
<body><input id="id1" type="button" value="改变id为myDivId的元素下的，所有span元素背景变为绿色"><hr><hr><div id="myDivId">这是div,id为myDivId<br><span >这是span</span><br><span  style="background-color: pink">这是span<br><br><span style="background-color: deeppink;height: 20px">这是span</span><br></span></div><br><div >这是div<br><span >这是span</span></div><br><span id="myspanid">这是span,id为myspanid</span>
</body>
</html>

单击前

单击后

子选择器：$("选择器1 > 选择器2")

选择选择器1内部的所有子选择器2

改变div元素下的，所有子span元素背景变为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width: 100px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$("div  > span").css("backgroundColor","green");});});</script></head>
<body><input id="id1" type="button" value="改变div元素下的，所有子span元素背景变为绿色"><hr><hr><div id="myDivId">这是div,id为myDivId<br><span >这是span</span><br><span  style="background-color: pink">这是span<br><br><span style="background-color: deeppink;height: 20px">这是span</span><br></span></div><br><div >这是div<br><span >这是span</span></div><br><span id="myspanid">这是span,id为myspanid</span>
</body>
</html>

单击前

单击后

属性选择器

属性名称选择器：$("选择器[属性名]")

包含指定属性的选择器

改变类名为myCalss并且含有id属性的元素背景变为绿色 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass[id]").css("backgroundColor","green");});});</script></head>
<body><input id="id1" type="button" value="改变类名为myCalss并且含有id属性的元素背景变为绿色"><hr><hr><div class="myClass" id="divId1">这是div,calss为myClass，id为divId1</div><br><div class="myClass">这是div,calss为myClass</div><br><span class="myClass" id="myspanid">这是span,calss为myClass,id为myspanid</span>
</body>
</html>

单击前

单击后

属性选择器：

$("选择器[属性名='值']")

包含指定属性等于指定值的选择器

改变类名为myCalss并且含id属性为myDivId1的元素背景变为绿色 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass[id='myDivId1']").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myCalss并且含id属性为myDivId1的元素背景变为绿色 ">
<hr><hr>
<div class="myClass" id="myDivId1">这是div,calss为myClass，id为myDivId1
</div>
<br>
<div class="myClass" id="myDivId2">这是div,calss为myClass，id为myDivId2
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" id="mySpanId1">这是span,calss为myClass,mySpanId1</span>
</body>
</html>

单击前

单击后

$("选择器[属性名!='值']")

包含指定属性不等于指定值的选择器

改变类名为myCalss并且含id属性不等于myDivId1的元素背景变为绿色 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass[id!='myDivId1']").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myCalss并且含id属性不等于myDivId1的元素背景变为绿色">
<hr><hr>
<div class="myClass" id="myDivId1">这是div,calss为myClass，id为myDivId1
</div>
<br>
<div class="myClass" id="myDivId2">这是div,calss为myClass，id为myDivId2
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" id="mySpanId1">这是span,calss为myClass,mySpanId1</span>
</body>
</html>

单击前

单击后

$("选择器[属性名^='值']") 

包含指定属性以指定值开头的选择器 

改变类名为myCalss并且id属性以my开头的元素背景变为绿色 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass[id^='my']").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myCalss并且id属性以my开头的元素背景变为绿色">
<hr><hr>
<div class="myClass" id="myDivId1">这是div,calss为myClass，id为myDivId1
</div>
<br>
<div class="myClass" id="myDivId2">这是div,calss为myClass，id为myDivId2
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" id="mySpanId1">这是span,calss为myClass,mySpanId1</span>
</body>
</html>

单击前

单击后

$("选择器[属性名$='值']")

包含指定属性以指定值结尾的选择器 

改变类名为myCalss并且id属性以Id1的元素背景变为绿色 

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass[id$='Id1']").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myCalss并且id属性以Id1的元素背景变为绿色">
<hr><hr>
<div class="myClass" id="myDivId1">这是div,calss为myClass，id为myDivId1
</div>
<br>
<div class="myClass" id="myDivId2">这是div,calss为myClass，id为myDivId2
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" id="mySpanId1">这是span,calss为myClass,mySpanId1</span>
</body>
</html>

单击前

单击后

$("选择器[属性名*='值']")

包含指定属性含有指定值的选择器 

改变类名为myCalss并且id属性值含有Div的元素背景变为绿色 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass[id*='Div']").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myCalss并且id属性值含有Div的元素背景变为绿色">
<hr><hr>
<div class="myClass" id="myDivId1">这是div,calss为myClass，id为myDivId1
</div>
<br>
<div class="myClass" id="myDivId2">这是div,calss为myClass，id为myDivId2
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" id="mySpanId1">这是span,calss为myClass,mySpanId1</span>
</body>
</html>

单击前

单击后

复合属性选择器：$("选择器[属性名='值'][]...")

包含多个属性条件的选择器

改变calss为myClas并且存在属性id的div元素背景变为绿色 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$("div[class='myClass'][id]").css("backgroundColor","green");});});</script></head>
<body><input id="id1" type="button" value="改变calss为myClas并且存在属性id的div元素背景变为绿色"><hr><hr><div class="myClass" id="divId1">这是div,calss为myClass，id为divId1</div><br><div class="myClass" id="divId2">这是div,calss为myClass，id为divId2</div><br><span class="myClass" id="myspanid">这是span,calss为myClass,id为myspanid</span>
</body>
</html>

单击前

单击后

过滤选择器

首元素选择器：${选择器：first}

获得指定选择器的元素中的第一个元素

改变类名为myClass的第一个元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass:first").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myClass的第一个元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" >这是span,calss为myClass</span>
</body>
</html>

单击前

单击后

尾元素选择器：${选择器：last}

获得指定选择器的元素中的最后一个元素

改变类名为myClass的最后一个元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass:last").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myClass的最后一个元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" >这是span,calss为myClass</span>
</body>
</html>

单击前

单击后

非元素选择器：${选择器1：not(选择器2)}

获得指定选择器1的元素中不包含选择器2的元素

改变类名为myClass的元素中不包含span元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass:not(span)").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素中不包含span元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" >这是span,calss为myClass</span>
</body>
</html>

单击前

单击后

偶数选择器：${选择器：even}

获得指定选择器的元素中索引为偶数的元素，索引从0开始计数

改变类名为myClass的元素中索引为偶数的元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass:even").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素中索引为偶数的元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" >这是span,calss为myClass</span>
</body>
</html>

单击前

单击后

奇数选择器：${选择器：odd}

获得指定选择器的元素中索引为奇数的元素，索引从0开始计数

改变类名为myClass的元素中索引为奇数的元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass:odd").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素中索引为奇数的元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" >这是span,calss为myClass</span>
</body>
</html>

单击前

单击后

等于索引选择器：${选择器：eq(index)}

获得指定选择器的元素中等于指定索引的元素，索引从0开始计数

改变类名为myClass的元素中索引为2的元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass:eq(2)").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素中索引为2的元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" >这是span,calss为myClass</span>
</body>
</html>

单击前

单击后

大于索引选择器：${选择器：gt(index)}

获得指定选择器的元素中大于指定索引的元素，索引从0开始计数

改变类名为myClass的元素中索引大于2的元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass:gt(2)").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素中索引大于2的元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" >这是span,calss为myClass</span>
</body>
</html>

单击前

单击后

小于索引选择器：${选择器：lt(index)}

获得指定选择器的元素中小于指定索引的元素，索引从0开始计数

改变类名为myClass的元素中索引小于2的元素的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass:lt(2)").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素中索引小于2的元素的背景颜色为绿色">
<hr><hr>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" >这是span,calss为myClass</span>
</body>
</html>

单击前

单击后

标题选择器：${：header}

获得标题元素，固定写法

改变所有标题的背景颜色为绿色

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(":header").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变所有标题的背景颜色为绿色">
<hr><hr>
<h1>标题1</h1>
<h3>标题3</h3>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass" ><h2>标题2</h2>这是div,calss为myClass<h4>标题4</h4>
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" ><h6>标题6</h6>这是span,calss为myClass
</span>
</body>
</html>

单击前

单击后

改变类名为myClass的元素下所有标题的背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>div{background-color:dodgerblue ;width: 100%;height: 200px;}span{background-color:pink ;width:400px;height: 70px;display: block;}</style><script>$(function () {$("#id1").click(function () {$(".myClass :header").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="改变类名为myClass的元素下所有标题的背景颜色为绿色">
<hr><hr>
<h1>标题1</h1>
<h3>标题3</h3>
<div class="myClass" >这是div,calss为myClass
</div>
<br>
<div class="myClass" ><h2>标题2</h2>这是div,calss为myClass<h4>标题4</h4>
</div>
<br>
<div class="myClass">这是div,calss为myClass
</div>
<br>
<span class="myClass" ><h6>标题6</h6>这是span,calss为myClass
</span>
</body>
</html>

单击前

单击后

表单过滤选择器

可用元素选择器：${:enabled}

获得满足选择器中可用的元素

单击改变from表单内可用的input背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>input{background-color:dodgerblue ;width: 700px;height: 50px;font-size: 30px;}</style><script>$(function () {$("#id1").click(function () {$("form input:enabled").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="单击改变from表单内可用的input背景颜色为绿色" style="background-color: burlywood"><br><br><br>
<input value="这是表单外的input，disabled=disabled" type="text" name="oName1" disabled="disabled" width="100px"><br>
<form><input value="这是表单内的input，disabled=disabled" type="text" name="iName1" disabled="disabled"><br><input value="这是表单内的input" type="text" name="iName2" ><br><input value="这是表单内的input，disabled=disabled" type="text" name="iName3" disabled="disabled"><br><input value="这是表单内的input" type="text" name="iName4" ><br>
</form>
</body>
</html>

单击前

 单击后

不可用元素选择器：${:disabled}

获得满足选择器不可用的元素

单击改变from表单内不可用的input背景颜色为绿色

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>input{background-color:dodgerblue ;width: 700px;height: 50px;font-size: 30px;}</style><script>$(function () {$("#id1").click(function () {$("form input:disabled").css("backgroundColor","green");});});</script></head>
<body>
<input id="id1" type="button" value="单击改变from表单不可用的input背景颜色为绿色" style="background-color: burlywood"><br><br><br>
<input value="这是表单外的input，disabled=disabled" type="text" name="oName1" disabled="disabled" width="100px"><br>
<form><input value="这是表单内的input，disabled=disabled" type="text" name="iName1" disabled="disabled"><br><input value="这是表单内的input" type="text" name="iName2" ><br><input value="这是表单内的input，disabled=disabled" type="text" name="iName3" disabled="disabled"><br><input value="这是表单内的input" type="text" name="iName4" ><br>
</form>
</body>
</html>

单击前

单击后

选中选择器

单复选框：${:checked}

获得单选/复选框选中的元素

单击选中复选框选中的值

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>#id1{background-color:dodgerblue ;width: 700px;height: 50px;font-size: 30px;}</style><script>$(function () {$("#id1").click(function () {var $input = $("input[type='checkbox']:checked");;for(i=0;i<$input.length;i++){console.log($input[i].value)}});});</script></head>
<body>
<input id="id1" type="button" value="单击输出复选框选中的值" style="background-color: burlywood"><br><br><br><form>选择性质，单选<br><input type="radio" name="nature" value="渣男">渣男<br><input type="radio" name="nature" value="极品">极品<br><br><br>选择爱好，多选<br><input type="checkbox" name="like" value="编程">编程<br><input type="checkbox" name="like" value="打游戏">打游戏<br><input type="checkbox" name="like" value="学习">学习<br><input type="checkbox" name="like" value="游泳">游泳<br></form>
</body>
</html>

单击前

 勾选

单击后，打印了复选框勾选的值

 

下拉框：${:selected}

获得下拉框选中的元素

单击输出复选选择框的选中的值

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>JQuery选择器</title><script src="js/jquery-3.3.1.min.js"></script><style>#id1{width: 700px;height: 50px;font-size: 30px;}select{width: 300px;height: 500px;font-size: 30px;}</style><script>$(function () {$("#id1").click(function () {var $select = $("select > option:selected");for(i=0;i<$select.length;i++){console.log($select[i].value)}});});</script></head>
<body>
<input id="id1" type="button" value="单击输出复选选择框的选中的值" style="background-color: burlywood"><br><br><br><form><select name="like" multiple="multiple"><option >编程</option><option >打游戏</option><option >学习</option><option >游泳</option></select></form>
</body>
</html>

单击前

复选选择框选中值

 单击后


http://chatgpt.dhexx.cn/article/8k4mEpQa.shtml

相关文章

JavaScript选择器

JavaScript选择器

JavaScript选择器 通过 id 来查找 HTML 元素 比如 <p id"#a1">huanmin</p> <script type"text/javascript">var namedocument.getElementById("a1")console.log(name) </script>同过name选择器查找所有name属性的元素…
阅读更多...
JQuery 选择器

JQuery 选择器

JQuery 选择器 花(0) jQuery 的选择器可谓之强大无比&#xff0c;这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素&#xff0c;id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") …
阅读更多...
CSS选择器

CSS选择器

在 CSS 中&#xff0c;选择器是选取需设置样式的元素的模式。 下面我们介绍几种常用选择器: 1.元素选择器:通过选择html标签设置css样式 如果设置 html的样式&#xff0c;选择器通常将是某个 html元素&#xff0c;比如 p、h1、em、a&#xff0c;甚至可以是 html 本身&#x…
阅读更多...
Verilog入门——Quartus2基础使用

Verilog入门——Quartus2基础使用

一、新建工程 1、打开Quartus2 2、点击菜单栏中的“file”&#xff0c;选择“New Project Wizard" 3、点击Next 4、选择工程存储路径 5、输入工程名字 6、点击Next 7、选择fpga类型和型号&#xff0c;根据自己的板子型号选择 8、一路Next&#xff0c;直到finish 9、到…
阅读更多...
Quartus II 13.1入门级使用方法 -仿真篇，适用于小白

Quartus II 13.1入门级使用方法 -仿真篇，适用于小白

上次的文章&#xff0c;小白介绍了如何在Quartus上面创建编译一个工程&#xff0c;以一个计数器为例&#xff01;但是在实际的工程中&#xff0c;仿真往往更加的重要。小白呢&#xff0c;喜欢用Quartus调用Modelsim来进行仿真。下面就介绍如何在Quartus中生成仿真测试文件的模板…
阅读更多...
Quartus-II 13 安装

Quartus-II 13 安装

Quartus-II 13 安装 前言一、Quartus II的安装二、Quartus II的注册总结参考文章 前言 安装Quartus前请先完成Modelsim的安装&#xff0c;详情点击此处 Quartus-II 13文件百度网盘连接&#xff1a; https://pan.baidu.com/s/1a9d-bq9RZmWrRV542X4IEA 提取码&#xff1a;ifte …
阅读更多...
QUARTUS 2 基本操作使用（quartus13.0）

QUARTUS 2 基本操作使用（quartus13.0）

本文从建立完工程开始&#xff0c;到下载结束 编写设计文件 点击Files&#xff0c;可以添加设计文件 设置工程顶层 ​编辑 再此介绍下工具栏&#xff0c;只介绍用的多的 绑定引脚&#xff1a;fpga大部分引脚都是GPIO&#xff0c;因此给他编辑代码后&#xff08;赋予他功能&am…
阅读更多...
quartus II【如何进行顶层设计】

quartus II【如何进行顶层设计】

1.使用原理图进行顶层设计 1).首先设计好两个模块文件&#xff0c;在导航窗口Files下显示了已经设计好的文件 2).分别选中每个文件&#xff0c;右键创建为元件 3).创建块设计文件 4).空白处右键insert或者单击箭头所指图标&#xff0c;也可以直接在空白处双击左键&#xff…
阅读更多...
Quartus II 的入门级使用

Quartus II 的入门级使用

好久没有用VHDL写东西了&#xff0c;今天需要完成一个项目&#xff0c;重新复习一下 新建工程 新建工程 file-->New Project Wizard, next, 选择存放的路径名字&#xff08;projecttop-level 名字要相同&#xff09;&#xff0c; next&#xff0c;File name名字同上&#x…
阅读更多...
Quartus II 之常见问题（一）

Quartus II 之常见问题（一）

1. 问题描述&#xff1a; 设计16位加法器遇到的问题&#xff1a; Error: Can’t synthesize current design – Top partition does not contain any logic问题分析&#xff1a; 在程序中使用电路图为顶层文件&#xff0c;但是没有接上管脚&#xff0c;所以弹出以上错误如果使…
阅读更多...
Quartus ii 13.1 数字时钟

Quartus ii 13.1 数字时钟

内容摘要&#xff1a; 使用计数器和数据选择器等器件实现数字时钟电路。电路最终在开发板上显示的是时钟的秒和分&#xff08;开发板所限&#xff0c;当然如果开发板支持8位显示的话也可以自己加到小时位的显示&#xff09;。电路包四个部分&#xff1a;时钟信号分频电路&#…
阅读更多...
安装Quartus-II

安装Quartus-II

一、Quartus II的下载 百度网盘下载链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;ifte 说明&#xff1a; 本链接来自于正点原子官方资料下载 二、Quartus II的安装 1.解压压缩包 2.运行可执行程序 3.安装导向过程 ①进入welcom界面 ②勾选“I accept the agre…
阅读更多...
Quartus II - 软件安装教程

Quartus II - 软件安装教程

博主福利&#xff1a;100G电子设计学习资源包&#xff01; http://mp.weixin.qq.com/mp/homepage?__bizMzU3OTczMzk5Mg&hid7&snad5d5d0f15df84f4a92ebf72f88d4ee8&scene18#wechat_redirect -------------------------------------------------------------------…
阅读更多...
Quartus II 的下载及安装

Quartus II 的下载及安装

一、下载Quartus II 百度网盘下载链接&#xff1a; https://pan.baidu.com/s/1a9d-bq9RZmWrRV542X4IEA 提取码&#xff1a;ifte 说明&#xff1a; 本链接来自于正点原子官方资料下载 二、Quartus II 安装 解压压缩包 运行可执行程序 安装 三、Quartus II 的注册 下载破解器文…
阅读更多...
Quartus II 入门案例(VHDL)

Quartus II 入门案例(VHDL)

前言 本文介绍Quartus II的使用方法&#xff0c;通过VHDL硬件描述语言编程来实现简单的电路功能。 一、使用步骤 首先打开Quartus II 新建vhdl文件 右侧就是代码编辑界面 本例通过VHDL实现一个简单的非门案例&#xff0c;有利于新手快速入门 相关量解释 nottest&#xff1a…
阅读更多...
quartus II使用

quartus II使用

1、解决警告信息 FPGA在写Verilog时编译警告&#xff0c;具体警告信息如下&#xff1a; Warning (18236): Number of processors has not been specified which may cause overloading on shared machines. Set the global assignment NUM_PARALLEL_PROCESSORS in your QSF to…
阅读更多...
Quartus II 操作入门

Quartus II 操作入门

使用Quartus设计FPGA&#xff0c;简单包括以下流程&#xff1a; 新建工程&#xff0c;写代码编译工程&#xff0c;找错误分配引脚&#xff0c;重编译下载配置&#xff0c;到硬件 为保证设计的正确性&#xff0c;在编译后&#xff0c;一般还需要做仿真验证&#xff0c;然后下载…
阅读更多...
Quartus II 13.0波形仿真

Quartus II 13.0波形仿真

先放结论&#xff1a;Quartus II 13.0有自带的仿真工具&#xff0c;能实现波形仿真。 之前一直找不到关于Quartus II 13.0的波形仿真&#xff0c;然后百度的都是说quartus ii 9.0之后的版本就没有这个功能了&#xff0c;只能再下一个modelsim之类的仿真软件进行波形仿真。但是…
阅读更多...
图文解说Quartus II使用入门

图文解说Quartus II使用入门

本文以31以内的奇数倍分频为例总结一下Quartus II建立工程、编译、仿真的详细过程。 建立工程。 &#xff08;1&#xff09;选择File—>New Project Wizard&#xff0c;弹出新建工程对话框&#xff0c;输入工程路径和工程名称&#xff0c;然后点击next进入下一步。在这里要…
阅读更多...
Quartus-II的安装教程

Quartus-II的安装教程

Quartus-II的安装教程 文章目录 Quartus-II的安装教程一、Quartus-II的下载二、Quartus-II的安装1.解压压缩包2.进行安装 三、注册Quartus II 一、Quartus-II的下载 ​ 百度网盘下载链接&#xff1a; ​ 百度网盘 请输入提取码 ​ 提取码&#xff1a;CWGG 二、Quartus-II的安…
阅读更多...
推荐文章

Copyright @ 2022~2023