标题
1：基础选择器
id #
class .
标签 div
* 通配符
群组 #box,p
css() 一个值的时候是找这个元素的值，两个值的时候是设置样式
举例 找元素的值：
alert($('p').css('color'))
举例 设置元素的样式：
$('#txt').css('color','red');
size() 返回的元素个数
举例：
alert($('p').size())
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
/*color: red;*/
font-size: 100px;
}
</style>
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p id="txt" class="t">今天真冷</p>
<p>是啊，真冷！！</p>
</body>
<script type="text/javascript">
$(function(){
// $('#txt').css('color','red');
// $('.t').css('color','yellow').css('font-size','100px')
// alert($('p').css('color'))
// alert($('p').size())
})
</script>
</html>
2：层次选择器
$('p>span') 子选择器
$('p span a') 后代选择器
$('div+p') 同级下一个节点选择器
$('div~p') 下面所有的同级节点选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
</head>
</head>
<body>
<div>
<p>是不是傻</p>
<h1>不是，不傻！！</h1>
<h2>好吧</h2>
<h2>好吧</h2>
<h2>好吧</h2>
<h2>好吧</h2>
</div>
</body>
<script type="text/javascript">
$(function(){
// $('div>p').css('border','1px solid red');
// $('p+h1').css('margin','500px')
// $('p~h2').css('color','red')
})
</script>
</html>
3:过滤选择器
:first 选中第一个元素
:last 选中最后一个元素
:not() 不选中某一个元素
:even 选中是偶数的元素（从零开始计算,第一个元素是0）
:odd 选中是奇数的元素
:eq(数字) 选中相等数字的元素（从零开始计算,第一个元素是0）
:gt(index) 选中大于数字的元素
:lt(index) 选中小于数字的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>来啊0</li>
<li>快来啊1</li>
<li>快点来啊2</li>
<li id="ss">赶快快点来啊3</li>
<li class='a'>赶快快点来啊，不然饭凉了4</li>
<p>坎坎坷坷扩扩扩</p>
</ul>
</body>
<script type="text/javascript">
$(function(){
// $('li:first').css('fontSize','100px')
// $('li:last').css('fontSize','100px')
// $('li:not(#ss,.a)').css('fontSize','100px')
// $('li:even').css('fontSize','100px')
// $('li:odd').css('fontSize','100px')
// $('li:eq(1)').css('border','1px solid red')
// $('li:gt(2)').css('border','1px solid red')
// $('li:lt(2)').css('border','1px solid red')
})
</script>
</html>
4：内容过滤选择器
p:contains('文本') 匹配包含给定文本的元素（找到p标签中包含指定文本内容的p标签）
p:has('.red') 有没有包含特定属性值的元素（找到p标签中包含指定文本内容的p标签）
p:parent() 返回该元素的父元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>你好</li>
<li class="a">我好</li>
<li>他好你</li>
<li>大家好</li>
<li>才是真的好</li>
</ul>
<div>
<p class="a">坎坎坷坷扩扩</p>
</div>
<div>
<span class="a">吞吞吐吐拖拖</span>
</div>
<p>一月又一月晕晕晕晕晕晕晕晕晕晕晕晕晕晕晕晕晕晕</p>
</body>
<script type="text/javascript">
$(function(){
// $('li:contains(你)').css('color','red').css('fontSize','100px')
// $('div:has(p)').css('color','blue')
// $('div:has(.a)').css('color','blue').css('fontSize','100px')
})
</script>
</html>
5：属性选择器
[attrbute] 匹配包含给定属性的元素
[attribute=value] 匹配input框里属性
选取 所有被选中的元素 $('input:checked')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p class="a">111111111111111111111111</p>
<p class="a">2222222222222222222222222</p>
<h1 class="a">3333333333333333333333</h1>
<h1>4444444444444444444444444</h1>
<h1 class="b">5555555555555555555555</h1>
<input type="checkbox" name="" id="" value="" checked="checked"/>
<input type="checkbox" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
</body>
<script type="text/javascript">
$(function(){
// $('[class]').css('color','red')
// $('[class=b]').css('color','#ccc')
// $('input:checked').css('width','200px').css('height','200px')
})
</script>
</html>
1182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
