[JQuery]学习——常规选择器

最新推荐文章于 2015-08-26 17:19:00 发布

laoda271

最新推荐文章于 2015-08-26 17:19:00 发布

阅读量374

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/chenminghe271/article/details/38052113

版权

Jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第一例子

$(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');
})

总结：

那么除了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');
})

第五，判断对象是否存在

那么对于缺失不存在的元素，我们使用jQuery 调用的话，怎么去判断是否存在呢？因
为本身返回的是jQuery 对象，可能会导致不存在元素存在与否，都会返回true。
if ($('#pox').length > 0) { //判断元素包含数量即可
$('#pox').css('color', 'red');
}

除了这种方式之外，还可以用转换为DOM 对象的方式来判断，例如：
if ($('#pox').get(0)) {} 或if ($('#pox')[0]) {} //通过数组下标也可以获取DOM 对象

项目CAS4.8笔录字体，选择器使用

// 处理笔录默认字体
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);
});