<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery.min.js"></script>
<script>
/*$(function(){
document.write("<h1>Hello.world</h1>");
})*/
$(function(){
//使用jquery的各个选择器完成的字体效果,使用jQuery选择器选中的元素将被封装成jQuery对象,可以调用jquery的各种功能
//Id选择器
$("#box1").css("color","red");
//类选择器
$(".box").css("fontSize","30px");
//标签选择器
$("div").css("fontWeight","bold");
//并集选择 将box1和p1的背景颜色设置为灰色
$("#box1,#p1").css("backgroundColor","#ccc");
//交集选择器,选中各个选择器匹配的元素中重叠的部分,将所有class为big的p标签字体设置为斜体
$("p.big").css("font-style","italic");
})
</script>
</head>
<body>
<div id="box1" class="box">hello.world</div>
<div class="box">hello.world</div>
<div>how are yow</div>
<p id="p1" class="big">How are you?</p>
<p id="p2" class="big">How are you?</p>
<p id="p3">How are you?</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery.min.js"></script>
<script>
/*$(function(){
document.write("<h1>Hello.world</h1>");
})*/
$(function(){
//使用jquery的各个选择器完成的字体效果,使用jQuery选择器选中的元素将被封装成jQuery对象,可以调用jquery的各种功能
//Id选择器
$("#box1").css("color","red");
//类选择器
$(".box").css("fontSize","30px");
//标签选择器
$("div").css("fontWeight","bold");
//并集选择 将box1和p1的背景颜色设置为灰色
$("#box1,#p1").css("backgroundColor","#ccc");
//交集选择器,选中各个选择器匹配的元素中重叠的部分,将所有class为big的p标签字体设置为斜体
$("p.big").css("font-style","italic");
})
</script>
</head>
<body>
<div id="box1" class="box">hello.world</div>
<div class="box">hello.world</div>
<div>how are yow</div>
<p id="p1" class="big">How are you?</p>
<p id="p2" class="big">How are you?</p>
<p id="p3">How are you?</p>
</body>
</html>