第一例子
$(document).ready(function(){
$('#box').css('color','blue'); //添加行爲})
#box{
color:red;
}
<!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 type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="box">基礎核心</div>
</body>
</html>
第二例子
div{
color:red;
}
$(document).ready(function(){
$('div').css('color','blue');
})
"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 type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="">基礎核心</div>
<div id="">基礎核心</div>
<div id="">基礎核心</div>
</body>
</html>
第三個例子
.pox{
color:red;
}
$(document).ready(function(){
$('.pox').css('color','blue');
})
<!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 type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="" class="pox">基礎核心</div>
<div id="" class="pox">基礎核心</div>
<div id="" class="pox">基礎核心</div>
</body>
</html>
總結：
那麼除了ID 選擇器之外，還有兩種基本的選擇器，分別爲：元素標籤名和類(class)：
選擇器 CSS 模式 jQuery 模式描述
元素名 div {} $('div') 獲取所有div 元素的DOM 對象
ID #box {} $('#box') 獲取一個ID 爲box 元素的DOM 對象
類(class) .box{} $('.box') 獲取所有class 爲box 的所有DOM 對象
$('div').css('color', 'red'); //元素選擇器，返回多個元素
$('#box').css('color', 'red'); //ID 選擇器，返回單個元素
$('.box').css('color', 'red'); //類(class)選擇器，返回多個元素
”id只能返回一個元素“
alert($('div').size()); //3 個
alert($('#box').size()); //1 個，後面兩個失明瞭
alert($('.box').size()); //3 個
$('.pox').eq(0).css('color','red');
第四個例子，高級選擇器，子選擇器
#box > p{
color:red;
}
$(document).ready(function(){
$('#box > p').css('color','blue');
})
<!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 type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="box">
<p>常規選擇器</p>
<p>常規選擇器</p>
<p>常規選擇器</p>
<div>
<p>常規選擇器</p>
<p>常規選擇器</p>
<p>常規選擇器</p>
</div>
</div>
</body>
</html>
第五，判斷對象是否存在
那麼對於缺失不存在的元素，我們使用jQuery 調用的話，怎麼去判斷是否存在呢？因
爲本身返回的是jQuery 對象，可能會導致不存在元素存在與否，都會返回true。
if ($('#pox').length > 0) { //判斷元素包含數量即可
$('#pox').css('color', 'red');
}
除了這種方式之外，還可以用轉換爲DOM 對象的方式來判斷，例如：
if ($('#pox').get(0)) {} 或if ($('#pox')[0]) {} //通過數組下標也可以獲取DOM 對象
項目CAS4.8筆錄字體，選擇器使用
<span class="bl_font">字號：
<span class="b_font">大</span>
<span class="c_font current">中</span>
<span class="s_font">小</span>
</span>
// 處理筆錄默認字體
var BlFontSize = $.cookie("recordFontSize");
if(BlFontSize){
$('.bl_font span').removeClass("current");
$('.bl_font span').each(function(idx, e){
var fontSize = $(e).css("font-size");
if(BlFontSize == fontSize){
$(e).addClass('current');
}
});
}
// 筆錄字體點擊時事件
$('.bl_font span').click(function(){
$('.bl_font span').removeClass('current');
$(this).addClass('current');
var fontSize = $(this).css("font-size");
$.cookie("recordFontSize", fontSize);
changeLrcFont(fontSize);
});