Jquery选择器
程序员文章站
2022-07-16 08:35:28
...
1. Jquery选择器
1.1) 基本选择器
1.2) 属性选择器
1.3) 其他选择器
可以通过Jquery选择器能从网页文档中找到我们需要的DOM节点
1.1) 基本选择器
1.2) 属性选择器
1.3) 其他选择器
Chap02/demo01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 基本选择器
// $("#a1").css("background-color","red"); // 根据id
// $(".c1").css("background-color","red"); // 根据class类别
// $("a").css("background-color","red"); // 根据标签元素
// 属性选择器
// $("[href]").css("background-color","red");
// $("[href='#']").css("background-color","red");
// $("[href$='com']").css("background-color","red");
// 其他选择器
// $("p.c1").css("background-color","red");
// $("ul li:first").css("background-color","red");
$("ul li:last").css("background-color","red");
});
</script>
<style type="text/css">
.c1 {font-size: 40px;}
</style>
</head>
<body>
<p class="c1">Jquery选择器</p>
<ul>
<li id="i1"><a id="a1" class="c1" href="http://www.baidu.com" >baidu</a></li>
<li><a id="a2" class="c1" href="http://www.csdn.net">CSDN</a></li>
<li><a href="http://www.iteye.com">iteye</a></li>
<li><a href="http://www.cnblogs.com">博客园</a></li>
<li><a class="c1" href="#">百度</a></li>
<li><a href="http://www.google.com">谷歌</a></li>
</ul>
</body>
</html>
上一篇： 引路蜂地图API:地图对象类层次关系
下一篇： Jquery简介