2、jQuery操作Dom(过滤器与选择器)
1、属性选择器
<script language="JavaScript">
/**
* <input type="button" value=" 含有属性title 的div元素" id="b1"/>
*/
("#b1").click(function(){ $("div[title]").css("background","red"); }); /** * <input type="button" value=" 属性title值等于test的div元素" id="b2"/> */ ("#b2").click(function(){
("div[title='test']").css("background","red"); }); /** * <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/> */ ("#b3").click(function(){
("div[title!='test']").css("background","red"); }); /** * <input type="button" value=" 属性title值 以te开始 的div元素." id="b4"/> */ ("#b4").click(function(){
("div[title^='test']").css("background","red"); }); /** * <input type="button" value=" 属性title值 以est结束 的div元素.." id="b5"/> */ ("#b5").click(function(){
("div[title='est']").css("background","red");
});
/**
* <input type="button" value="属性title值 含有es的div元素." id="b6"/>
*/
("#b6").click(function(){ $("div[title*='est']").css("background","red"); }); /** * <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/> */ ("#b7").click(function(){
("div[id][title*='es']").css("background","red"); }); /** * <input type="button" value="选择隐藏域,含有title的属性的div,id为one,class为one的元素" id="b8"/> */ ("#b8").click(function(){
$("input[type='hidden'],div[title],#one,.one").css("background","red");
});
</script>
2、jQuery过滤器
<script language="JavaScript">
/**
* <input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
*/
("#b1").click(function(){ //$("div:first").css("background","red"); /** * $("div")是一个jQuery对象所以能调用first方法 * 调用first方法的返回值还是一个jQuery对象，所以还能调用jquery中的api的任意一个方法 */ $("div").first().css("background","red"); }); /** * <input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF" id="b2"/> */ ("#b2").click(function(){
("div:last").css("background","red"); }); /** * <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/> */ ("#b3").click(function(){
("div:not(.one)").css("background","red"); }); /** * <input type="button" value=" 改变class不为one,有title属性，并且title属性的值为aa的div元素的背景色为红色" id="b3_1"/> */ ("#b3_1").click(function(){
("div:not(.one)[title='aa']").css("background","red"); }); /** * <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/> */ ("#b4").click(function(){
("div:even").css("background","red"); }); /** * <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/> */ ("#b5").click(function(){
("div:odd").css("background","red"); }); /** * <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/> */ ("#b6").click(function(){
("div:gt(3)").css("background","red"); }); /** * <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/> */ ("#b7").click(function(){
("div:eq(3)").css("background","red"); }); /** * <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/> */ ("#b8").click(function(){
("div:lt(3)").css("background","red"); }); /** * <input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/> */ ("#b9").click(function(){
(":header").css("background","red"); }); /** * <input type="button" value=" 改变索引值大于1小于6的div元素的背景色为 #0000FF" id="b10"/> */ ("#b10").click(function(){
$("div:lt(6):gt(1)").css("background","red");
});
</script>
3、设置table隔行变色
<script type="text/javascript">
/**
* (document)=()
*/
$(document).ready(function(){
("#t1 tr:even").css("background","red"); ("#t1 tr:odd").css("background","green");
/**
* ("#t2 tr td:first").css("background","red"); * 首先找到id为t2的元素，再查找下面的子元素tr,从第一个tr元素开始查找子元素:第一个td,找到以后停止 */ //会去每一个tr下查找子元素第一个td ("#t2 tr td:first-child").css("background","red");
//each方法就是遍历每一个tr
$("#t3 tr").each(function(){
//查找每一个tr对象中的子元素：奇数行或者偶数行的子元素
(this).children(":even").css("background","red"); (this).children(":odd").css("background","green");
});
});
</script>
<body>
This is my HTML page. <br>
<table id="t1">
<tr>
<td>afds</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>afds</td>
</tr>
<tr>
<td>afds</td>
<td>asfd</td>
</tr>
<tr>
<td>asfd</td>
<td>afds</td>
</tr>
</table>
<br>
<br>
<br>
<table id="t2">
<tr>
<td>id</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
</tr>
<tr>
<td>2</td>
<td>bbb</td>
</tr>
<tr>
<td>3</td>
<td>ccc</td>
</tr>
</table>
<table id="t3">
<tr>
<td>id</td>
<td>name</td>
<td>sex</td>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>2</td>
<td>bbb</td>
<td>aaa</td>
</tr>
<tr>
<td>3</td>
<td>ccc</td>
<td>aaa</td>
</tr>
</table>
</body>
4、基本的选择器
<script language="JavaScript">
/**
* <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
* @param {Object} "#one"
*/
//给id为b1的按钮添加一个click事件
("#b1").click(function(){ //改变id为one的元素的背景色 $("#one").css("background","red"); }); /** * <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b2"/> */ ("#b2").click(function(){
("div").css("background","red");//该操作是一个数组操作 }); /** * <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/> */ ("#b3").click(function(){
(".mini").css("background","red"); }); /** * <input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/> */ ("#b4").click(function(){
("*").css("background","red"); }); /** * <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/> */ ("#b5").click(function(){
("span,#two").css("background","red"); }); /** * <input type="button" value=" 改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #3399FF" id="b6"/> */ ("#b6").click(function(){
$("span,#two,#one,.mini").css("background","red");
});
</script>
5、子元素选择器
<script language="JavaScript">
/**
* 子元素选择器的一个特点：在每一个特定的元素下寻找子元素
* @param {Object} "div.one :nth-child(2)"
*/
/**
* <input type="button" value=" 每个class为one的div父元素下的第2个子元素" id="b1"/>
* 必须有空格
*/
("#b1").click(function(){ $("div.one :nth-child(2)").css("background","red"); }); /** * <input type="button" value=" 每个class为one的div父元素下的第一个子元素" id="b2"/> */ ("#b2").click(function(){
("div.one :nth-child(1)").css("background","red"); }); /** * <input type="button" value=" 每个class为one的div父元素下的最后一个子元素" id="b3"/> */ ("#b3").click(function(){
("div.one :last-child").css("background","red"); }); /** * <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/> */ ("#b4").click(function(){
$("div.one :only-child").css("background","red");
});
</script>
6、内容过滤器
<script language="JavaScript">
/**
* <input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/>
*/
("#b1").click(function(){ $("div:contains('di')").css("background","red"); }); /** * <input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/> */ ("#b2").click(function(){
("div:empty").css("background","red"); }); /** * <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/> */ ("#b3").click(function(){
("div:has(.mini)").css("background","red"); }); /** * <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/> */ ("#b4").click(function(){
("div:parent").css("background","red"); }); /** * <input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色" id="b5"/> */ ("#b5").click(function(){
$("div:not(:contains('di'))").css("background","red");
});
</script>
7、表单选择器
<script language="JavaScript">
/**
* <input type="button" value="利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
*/
("#b1").click(function(){ $("input:enabled").val("aaaa"); }); /** * <input type="button" value="利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/> */ ("#b2").click(function(){
("input:disabled").val("aaaa"); }); /** * <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/> */ ("#b3").click(function(){
("input[type='checkbox']:checked").each(function(){ alert($(this).val()); }); }); /** * <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/> */ ("#b4").click(function(){
/**
* id为job下的被选中的option元素
* @param {Object} (this */ ("#job option:selected").each(function(){
alert($(this).text());
});
});
</script>
8、层次选择器
<script language="JavaScript">
/**
* <input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/>
*/
("#b1").click(function(){ $("body div").css("background","red"); }); /** * <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/> */ ("#b2").click(function(){
("body>div").css("background","red"); }); /** * <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/> */ ("#b3").click(function(){
("#one+div").css("background","red"); }); /** * <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/> */ ("#b4").click(function(){
("#two~div").css("background","red"); }); /** * <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/> */ ("#b5").click(function(){
("#two").siblings("div").css("background","red"); }); /** * <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF,id为two的被选中" id="b6"/> */ ("#b6").click(function(){
("#two").siblings("div").css("background","red"); ("#two").css("background","red");
});
</script>
9、可见选择器
<script language="JavaScript">
/**
* <input type="button" value=" 改变所有可见的div元素的背景色为 #0000FF" id="b1"/>
*/
("#b1").click(function(){ $("div:visible").css("background","red"); }); /** * <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/> */ ("#b2").click(function(){
(":hidden").show().css("background","red"); }); /** * <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/> */ ("#b3").click(function(){
$("input:hidden").each(function(){
var obj = (this);
alert($obj.val());
});
});
</script>
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· 《HelloGitHub》第 108 期
· Windows桌面应用自动更新解决方案SharpUpdater5发布
· 我的家庭实验室服务器集群硬件清单
· Supergateway：MCP服务器的远程调试与集成工具
· C# 13 中的新增功能实操