jquery常用选择器（下）

来源：互联网发布：淘宝付款自动关闭订单编辑：程序博客网时间：2024/05/28 11:50

一过滤选择器：

1 简单过滤器

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">td{font-size:12px;padding: 3px; }.th{background-color: #B6DF48;font-weight: bold;text-align: center;}.two{background-color: #E8F3D1;}.one{background-color: F9FCEF;}</style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("tr:even").addClass("two");$("tr:odd").addClass("one");$("tr:eq(0)").removeClass("two");$("tr:first").addClass("th");});</script></head><body><table width="98%" border="1" align="center" cellspacing="0" cellpadding="0"><tr><td width="11%" height="27">编号</td><td width="14%">祝福对象</td><td width="12%">祝福者</td><td width="33%">字条内容</td><td width="30%">发送时间</td></tr><tr><td height="27">1</td><td>琦琦</td><td>妈妈</td><td>愿你健康快乐的成长！</td><td>2011-07-05 13：06：06</td></tr><tr><td height="27">2</td><td>wgh</td><td>无语</td><td>每天有份好心情！</td><td>2011-07-05 13：26：06</td></tr><tr><td height="27">3</td><td>天净沙小晓</td><td>wgh</td><td>煮豆燃豆萁！</td><td>2011-07-05 13：36：06</td></tr><tr><td height="27">4</td><td>中国科技</td><td>wgh</td><td>啊啊！</td><td>2011-07-06 13：36：06</td></tr></table></body></html>

2 内容过滤器

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">td{font-size:12px;padding: 3px; }.th{background-color: #B6DF48;font-weight: bold;text-align: center;}.two{background-color: #E8F3D1;}.one{background-color: F9FCEF;}</style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("td:parent").css("background-color","blue");$("td:empty").html("暂无内容");$("td:contains('wgh')").css("color","red");});</script></head><body><table width="98%" border="1" align="center" cellspacing="0" cellpadding="0"><tr><td width="11%" height="27">编号</td><td width="14%">祝福对象</td><td width="12%">祝福者</td><td width="33%">字条内容</td><td width="30%">发送时间</td></tr><tr><td height="27">1</td><td>琦琦</td><td>妈妈</td><td>愿你健康快乐的成长！</td><td>2011-07-05 13：06：06</td></tr><tr><td height="27">2</td><td>wgh</td><td>无语</td><td>每天有份好心情！</td><td>2011-07-05 13：26：06</td></tr><tr><td height="27">3</td><td>天净沙小晓</td><td>wgh</td><td></td><td>2011-07-05 13：36：06</td></tr><tr><td height="27">4</td><td>中国科技</td><td>wgh</td><td></td><td>2011-07-06 13：36：06</td></tr></table><br></body></html>

3 可见过滤器

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"></style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){var v1=$("input:visible").val();var v2=$("input:hidden:eq(0)").val();var v3=$("input:hidden:eq(1)").val();alert(v1+","+v2+","+v3);});</script></head><body><form action=""><input type="text" value="显示的input元素"/><input type="text" value="我不是显示的input元素" style="display:none;"><input type="hidden" value="我是隐藏域"></form></body></html>

4 表单过滤器

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"></style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("input:checked").css("background-color","red");$("input:diabled").val("失效按钮");});function sesVal() {alert($("select option:selected").val());}</script></head><body><form action="">复选框1：<input type="checkbox" checked="checked" value="f1">复选框2：<input type="checkbox" checked="checked" value="f2">复选框3：<input type="checkbox"  value="f3"><br><input type="button" value="不可用按钮" disabled="disabled"><br><select onchange="sesVal();"><option value="l1">列表项1</option><option value="l2">列表项2</option><option value="l3">列表3</option></select></form></body></html>

5 表单选择器

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"></style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$(":checkbox").attr("checked","checked");$(":radio").attr("checked","checked");$(":image").attr("src","ph/1.jpg");$(":file").hide();$(":password").val("123");$(":text").val("123");$(":button").attr("disabled","disabled");$(":reset").val("res");$(":submit").val("submit");$("#testDiv").append($("input[type='hidden']").val());});</script></head><body><form action="">复选框：<input type="checkbox"/><br>单选按钮：<input type="radio"/><br>图像域：<input type="image"/><br>文件域：<input type="file"/><br>密码域：<input type="password"/><br>文本域：<input type="text"><br>按钮：<input type="button"/><br>重置：<input type="reset"/><br>提交：<input type="submit"/><br>隐藏域：<input type="hidden" value="这里是隐藏域的值"/><div id="testDiv"><font color="blue">隐藏域的值：</font></div></form></body></html>

0 0