第一例子
$(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);
});