jquery实战之jquery选择器
这些虽然文档上已经写的很详细了,但自己感觉还是写一遍会更有印象
jquery选择器可以分为四大类,分别为:1.基本选择器 2.层次选择器 3.过滤选择器 4.表单选择器,不过过滤选择器还可以细分为6小类:(1).简单过滤选择器 (2).内容过滤选择器(3).可见性过滤选择器 (4).属性过滤选择器 (5).子元素过滤选择器 (6).表单对象属性过滤选择器
1.基本选择器:
选择器 功能
#id 根据给定的id匹配一个元素
element 根据给定的元素名匹配所有的元素
.class 根据给定的类匹配元素
* 匹配所有的元素
selector1,selector2.. 将每一个选择器匹配到的元素合并后一起返回
示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>BasicSelector.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src = "js/jquery-1.4.2.js"></script> <style type="text/css"> body{font-size:12px;text-align:center} .clsFrame{width:300px;height:100px;border:solid 1px #ccc;} .clsFrame div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc; margin:8px} .clsOne{background-color:#eee} </style> <script type="text/javascript"> //ID匹配元素,显示为沈亮1 $(function(){ $("#divOne").css("display","block"); }) //元素名匹配元素,即div下的span,显示为沈亮3 $(function(){ $("div span").css("display","block"); }) //类匹配元素,即.clsFrame类下的.clsOne类,显示为沈亮2 $(function(){ $(".clsFrame .clsOne").css("display","block"); }) //匹配所有元素,全部显示 $(function(){ $("*").css("display","block"); }) //合并匹配元素,这里是使用,隔开,显示两个元素下内容为沈亮1,沈亮3 $(function(){ $("#divOne,span").css("display","block"); }) </script> </head> <body> <div class = "clsFrame"> <div id = "divOne">沈亮1</div> <div class = "clsOne">沈亮2</div> <span>沈亮3</span> </div> </body> </html>
显示的效果:
最近考试没时间整理,尽快完成
希望多多交流,多多关注,共同成就梦想