CSS选择器:
1.总共有5种:标签选择器、ID选择器、类选择器、通用选择器、群组选择器。
1】标签选择器:用于选择HTML中已有的标签元素,继承javascript中的getElementByTagName
语法:$(“element”)
Eg:标签:div、p、span
$(“div”)
2】ID选择器:获取某个具有Id属性的元素,继承javascript中的getElementById
语法:$(“#id”)
Eg:<input id=”users” type=”text” value=”abc” />
$(“#users”).val();//获取input标记的value值
注:也可将另一个选择器附加到ID选择器前,如div#users,先执行附加的。
3】类选择器
$(“.class”)
Eg:<input id=”txt” type=”text” class=”t”>
$(“.t”).css(“border” ,”2px solid blue”);
4】通用选择器
$(“*”)//对html中的所有标签起作用
5】群组选择器
$(“selector1,selector2,selector3,...,selectorN”)
Eg:$(“div,span,p.styleClass”).css(“border”,”1px solid red”);
综合例子:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" src="F://jQuery_study/jquery-1.11.1.min.js"></script>
</head>
<body>
<style type="text/css">
.one{border:1px solid #03F;float:left;margin:lem;padding:1.5em;width:106px;}
.two{background-color:#FC0;}
.three{background-color:#FCF;}
</style>
<h3>这是标题中的文本</h3>
<p><span id="span1"></span></p>
<div id="div1">div元素:id属性为div1.</div>
<div id="div2">div元素:id属性为div2.</div>
<div id="div3">div元素:id属性为div3.</div>
<script type="text/javascript">
$(function(){
$("*").css("font-size","20px");
$("div").addClass("one");
$("#div1").addClass("two");
$("#div2,#div3").addClass("three");
$("h3,p").css("color","red").attr("align","center");
$("#span1").html("本页中同时应用one类的元素一共有"+$(".one").length+"个;同时应用one和three类的元素共有"+$(".one.three").length+"个");
});
/*
$(document).ready(function(){
$("*").css("font-size","12px");
$("div").addClass("one");
$("#div1").addClass("two");
$("#div2,#div3").addClass("three");
$("h3,p").css("color","red").attr("align","center");
$("#span1").html("本页中同时应用one类的元素一共有"+$(".one").length+"个;同时应用one和three类的元素共有"+$(".one.three").length+"个");
});*/
</script>
</body>
</html>
效果图: