2、jQuery选择器的基本使用
本帖最后由 Sian 于 2016-2-16 23:08 编辑1、基本选择器
<!DOCTYPE html>
<html>
<head>
<title>jQuery基本操作</title>
<meta charset="utf-8"/>
<!--这一行非常重要，没有这一行则没有jQuery库-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// jQuery预处理
$(document).ready(function(){
// 按钮事件
$('button').click(function(){
// 将id为one的元素背景色变为粉色,只有第一个符合条件的元素生效
$('#one').css('background', 'pink');
// 将类为two的元素背景变为黄色，所有类为two的都会生效
$('.two').css('background', 'yellow');
// 所有li标签背景设置为蓝色
$('li').css('background', 'blue');
// 所有id为one，类为two的标签变为绿色（所有id为one，不是符合的第一个！）
$('#one, .two').css('background', 'green');
});
});
</script>
</head>
<body>
<button>按钮</button>
<ul>
<li id="one">星期一</li>
<li id="one">星期二</li>
<li class="two">星期三</li>
<li class="two">星期四</li>
</ul>
</body>
</html>2、层级选择器<!DOCTYPE html>
<html>
<head>
<title>jQuery基本操作</title>
<meta charset="utf-8"/>
<!--这一行非常重要，没有这一行则没有jQuery库-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// jQuery预处理
$(document).ready(function(){
// 按钮事件
$('button').click(function(){
// 类为week元素下所有的label标签字体改为红色，递归查找
$('.week label').css('color', 'red');
// 类为week元素下子元素中的label标签字体改为蓝色，只查找一层
$('.week > label').css('color', 'blue');
// 类为one元素紧接着的第一个li，如果下一个不是li则无效
$('.one + li').css('color', 'pink');
// 类为one元素以后的同级别兄弟li标签，元素之前或父层级子层级无效
$('.one ~ li').css('color', 'green');
});
});
</script>
</head>
<body>
<ul class="week">
<label>工作日</label>
<li>星期一</li>
<li class="one">星期二</li>
<li>星期三</li>
<ul>
<label>星期四</label>
<li>上午</li>
<li>下午</li>
</ul>
<label>周末</label>
<li>星期六</li>
<li>星期天</li>
</ul>
<button>按钮</button>
</body>
</html>3、属性选择器<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
// 包含id属性的标签
$('').css('color','red');
// 包含for属性并且属性值为week的标签
$('').css('color', 'green');
// 某属性不等于某个值的标签(注意：包含html及body标签在内！)
$('').css('color', 'blue');
// 某属性以某个值开头的标签
$('').css('color', 'pink');
// 某属性以某个值结尾的标签
$('').css('color', 'green');
// 某属性包含某个值的标签
$('').css('color', 'red');
// 多个条件
$('').css('color', 'green');
});
});
</script>
</head>
<body>
<ul>
<li class="one">星期一</li>
<li class="two">星期二</li>
<li id="three">星期三</li>
<li for="week">星期四</li>
</ul>
<p class="one">This is a p!</p>
<button id="btn1">按钮</button>
</body>
</html>
页:
[1]