jquery常用选择器（上）

来源：互联网发布：电脑绘图软件sai 编辑：程序博客网时间：2024/06/05 17:50

一基本选择器：

1 id选择器

<%@ 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><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("input[type='button']").click(function(){alert($("#i1").val());});});</script></head><body><input type="text" id="i1" name="n1"/><br><input type="button" value="输入的值为 "/></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><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("input").click(function(){$("div")[0].innerHTML="<img src='ph/4.jpg'>这里长出了一片草莓 ";$("div")[1].innerHTML="<img src='ph/3.jpg'>这里的鱼不见了";});});</script></head><body><div><img src="ph/1.jpg">这里种植了一颗草莓</div><div><img src="ph/2.jpg">这里养殖了一条鱼</div><input type="button" value="若干年后"/></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><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){var mc=$(".myClass");mc.css("background-color","darkblue");mc.css("color","white");});</script></head><body><div class="myClass">注意观察我的样式</div><div>我的样式是默认的</div></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">.change{background-color: blue}</style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("input").click(function(){$("div,span").addClass("change");});});</script></head><body><p class="default">p元素</p><div class="default">div元素</div><span class="default" id="span">ID为span的元素</span><br><input type="button" value="为div和span换肤 "></body></html>

二关系选择器：

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">#d1{background-color: blue;width: 900px;height: 99px;clear: both;text-align: center;padding-top: 10px;font-size: 9pt;}.cp{color: white;list-style: none;line-height: 20px;}</style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("div ul").addClass("cp");});</script></head><body><div><div id="d1"><ul><li>技术服务热线：400-675-1066 传真：55566666 企业邮箱：asdas@qqd.com</li><li>Copyright&copy;www.baidu.com All Reserved!</li></ul></div></div></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">input{margin: 5px;}.input{font-size: 12pt;color: #333333;background-color: #cef;border: 1px solid #000000}</style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("#change").click(function(){$("form>input").addClass("input");});$("#default").click(function(){$("form>input").removeClass("input");});});</script></head><body><form action="" name="f1" id="f1">姓  名:<input type="text" name="name" id="name"/><br/>籍  贯：<input type="text" name="native" id="native"/><br/>生  日：<input type="text" name="birthday" id="birthday"/><br/>Email：<input type="text" name="email" id="email"/><br/><span><input type="button" name="change" id="change" value="换肤"/><br/></span><input type="button" name="default" id="default" value="恢复默认 "/></form></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">.bg{background-color: blue;}body{font-size: 12px;}</style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("label+p").addClass("bg");});</script></head><body><div><label>第一个lable</label><p>第一个p</p><fieldset><label>第二个lable</label><p>第二个p</p></fieldset></div><p>div外面的p</p></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">.bg{background-color: blue;}body{font-size: 12px;}</style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("div~p").addClass("bg");});</script></head><body><div><p>第一个p</p><p>第二个p</p></div><p>div外面的p</p></body></html>

综合例子：

一张表格，实现隔行变色，鼠标指向的行变色，离开恢复颜色；

<%@ 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">table {border: 0;border-collapse: collapse;}td {font: normal 12 px /17px Arial;padding: 2px;width: 100px;}th {font: bold 12px/17px Arial;text-align: left;padding: 4px;border-bottom: 1px solid #333;}.one {background: #ffc;}.two {background: #cef;}.mo {background: #00A1DA;}</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:even:eq(0)").removeClass("two");$("tbody tr").hover(function(){$(this).addClass("mo");},function(){$(this).removeClass("mo");});});</script></head><body><table><thead><tr><th>产品名称</th><th>产地</th><th>厂商</th></tr></thead><tbody><tr><td>爱美电视机</td><td>福州</td><td>爱美电子</td></tr><tr><td>大地冰箱</td><td>北京</td><td>大地电子</td></tr><tr><td>爱美空调</td><td>福州</td><td>爱美电子</td></tr><tr><td>劲爆风扇</td><td>香港</td><td>劲爆电子</td></tr></tbody></table></body></html>

0 0