<html>
<head>
<title></title>
<!-- jQuery库导入 -->
<script src="jquery.js"></script>
<script type="text/javascript">
/* document.ready在页面元素加载后，但图片加载完成前 */
/* 一般将代码放入document.ready中，此时页面DOM加载完毕 */
$(document).ready(
function(){
/* 通配符选择器* 选择所有页面元素 */
$("*").css("border","1px solid #333");
/* 元素选择器+元素名 选择指定元素名的全部元素 */
$("h1").css("font-family","arial,verdana");
/* id选择器 选择指定id元素 */
$("#idSelect").css("background-color","#00cccc");
/* class选择器 选择指定class元素 */
$(".clSelect").css({'background-color':'#cc00cc','padding':'30px'});
/* 多class选择器 选择指定多class元素 */
$(".clSelect.dlSelect").css({'background-color':'#cccc00','padding':'30px'});
/* 子元素选择器 选择指定子元素 */
$("#parentDiv h2").css({'background-color':'#cccc00','padding':'30px'});
$("#parentDiv > h2").css({'background-color':'#ffffff','padding':'30px'});
$("#parentDiv + div").css({'background-color':'#ccccff','padding':'30px'});
/* 组合选择器 组合多种元素选择 */
$("#comSelect h2,#comSelect #comIdSelect,#comSelect .comClassSelect,#comSelect #comcomSelect h2").css({'background-color':'#aabbcc','padding':'30px'});
}
)
</script>
</head>
<body>
<div>
<h2>jQuery选择器：使用通配符*为所有元素添加border</h2>
</div>
<div>
<h1>jQuery选择器：元素选择器+元素名 选择指定元素名的全部元素 设置font-family</h1>
</div>
<div id="idSelect">
<h2>jQuery选择器：id选择器 选择指定id元素 设置background-color</h2>
</div>
<div class="clSelect">
<h2>jQuery选择器：class选择器 选择指定class元素 设置padding background-color</h2>
</div>
<div class="clSelect dlSelect">
<h2>jQuery选择器：多class选择器 选择指定多class元素 设置padding background-color</h2>
</div>
<div id="parentDiv">
<h2>parentDiv直接子元素 parentDiv > h2</h2>
<div><h2>parantDiv间接子元素 parentDiv h2</h2></div>
<div><h2>parantDiv间接子元素 parentDiv h2</h2></div>
</div>
<div>
<h2>parentDiv相邻div parentDiv + div</h2>
</div>
<div>
<h2>parentDiv非相邻div parentDiv + div</h2>
</div>
<div id="comSelect">
<h2>组合元素选择 元素选择</h2>
<div id="comIdSelect">组合元素选择 id选择</div>
<div class="comClassSelect">组合元素选择 class选择</div>
<div id="comcomSelect"><h2>组合元素选择 组合元素选择</h2></div>
</div>
</body>
</html>
<head>
<title></title>
<!-- jQuery库导入 -->
<script src="jquery.js"></script>
<script type="text/javascript">
/* document.ready在页面元素加载后，但图片加载完成前 */
/* 一般将代码放入document.ready中，此时页面DOM加载完毕 */
$(document).ready(
function(){
/* 通配符选择器* 选择所有页面元素 */
$("*").css("border","1px solid #333");
/* 元素选择器+元素名 选择指定元素名的全部元素 */
$("h1").css("font-family","arial,verdana");
/* id选择器 选择指定id元素 */
$("#idSelect").css("background-color","#00cccc");
/* class选择器 选择指定class元素 */
$(".clSelect").css({'background-color':'#cc00cc','padding':'30px'});
/* 多class选择器 选择指定多class元素 */
$(".clSelect.dlSelect").css({'background-color':'#cccc00','padding':'30px'});
/* 子元素选择器 选择指定子元素 */
$("#parentDiv h2").css({'background-color':'#cccc00','padding':'30px'});
$("#parentDiv > h2").css({'background-color':'#ffffff','padding':'30px'});
$("#parentDiv + div").css({'background-color':'#ccccff','padding':'30px'});
/* 组合选择器 组合多种元素选择 */
$("#comSelect h2,#comSelect #comIdSelect,#comSelect .comClassSelect,#comSelect #comcomSelect h2").css({'background-color':'#aabbcc','padding':'30px'});
}
)
</script>
</head>
<body>
<div>
<h2>jQuery选择器：使用通配符*为所有元素添加border</h2>
</div>
<div>
<h1>jQuery选择器：元素选择器+元素名 选择指定元素名的全部元素 设置font-family</h1>
</div>
<div id="idSelect">
<h2>jQuery选择器：id选择器 选择指定id元素 设置background-color</h2>
</div>
<div class="clSelect">
<h2>jQuery选择器：class选择器 选择指定class元素 设置padding background-color</h2>
</div>
<div class="clSelect dlSelect">
<h2>jQuery选择器：多class选择器 选择指定多class元素 设置padding background-color</h2>
</div>
<div id="parentDiv">
<h2>parentDiv直接子元素 parentDiv > h2</h2>
<div><h2>parantDiv间接子元素 parentDiv h2</h2></div>
<div><h2>parantDiv间接子元素 parentDiv h2</h2></div>
</div>
<div>
<h2>parentDiv相邻div parentDiv + div</h2>
</div>
<div>
<h2>parentDiv非相邻div parentDiv + div</h2>
</div>
<div id="comSelect">
<h2>组合元素选择 元素选择</h2>
<div id="comIdSelect">组合元素选择 id选择</div>
<div class="comClassSelect">组合元素选择 class选择</div>
<div id="comcomSelect"><h2>组合元素选择 组合元素选择</h2></div>
</div>
</body>
</html>
扫一扫
1576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
