JQuery学习(2)选择器(1)
通过标签名，属性名或内容对DOM元素进行选择，没有浏览器的兼容问题
选择器类型：
基本选择器
层次选择器
过滤选择器
表单选择器
基本选择器：JQuery中使用最频繁的选择器
使用JQuery：
$('#myp').css('background-color','red');
使用js:
document.getElementById('myp').style.backgroundColor = 'red';
按照JQuery的习惯，下面的代码应该改成第二种方式
element:根据给定的元素名称匹配所有元素，也就是<后边的元素名称
$(function () {
$('#but').click(function () {
//$('#a1').css('background-color', 'blue');
$('a').css('background-color','red');
})
})
根据类型匹配元素：若多个元素使用的类型相同，则选择多个元素
层次选择器
$('#pMid').css('display', 'block')：设置id为'pMid'的层可见
$('p span').css('display', 'block')：设置id为'pMid'的层里面的所有span元素可见，无论有几级嵌套
$('p>span').css('display', 'block')：设置id为'pMid'的层里面的第一级span元素可见，此span元素里面的span元素不可见
$('#pMid+p').css('display','block')：设置id为'pMid'的层后面的第一个p可见
$('#pMid+span').css('display', 'block')：设置id为'pMid'的层后面的第一个span可见
$('#pMid').next().css('display','block'):设置id为'pMid'的层后面的第一个元素可见,无论是什么元素
$('#pMid').nextAll().css('display', 'block')：设置id为'pMid'的层后面的所有元素可见，无论是什么元素，必须与pMid平级，平级元素里面的嵌套元素不可见
$('#pMid~p').css('display', 'block')：设置id为'pMid'的层后面的所有p元素可见，必须是平级的。
$('#pMid~span').css('display','block');：设置id为'pMid'的层后面的所有span元素可见，必须是平级的。
例:
[javascript]
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
//层次选择器
$(document).ready(function () {
$('#Button1').click(function () {
//$('#pfirst span img').hide(2000); //找到id为pfirst里的span元素下的img元素
//$('#pfirst img').hide(2000); //找到id为pfirst里所有的img元素
$('#pfirst>span img').hide(3000) //找到id为pfirst里第一级span元素里得img元素 注意！ 这个第一级是指所有pfirst下一级span元素
//$('#pfirst+p img').hide(3000) //找到和id为pfirst的元素同级的第一个紧邻他的p元素 的img元素
//$('#pfirst~p img').hide(3000) //找到和id为pfirst的元素同级的所有p元素 的img元素
//$('#pfirst').next().hide(3000); //找到和id为pfirst的元素后面的同级的第一个元素
//$('#pfirst').nextAll().hide(3000); //找到和id为pfirst的元素后面的同级的所有元素
})
})
</script>
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
//层次选择器
$(document).ready(function () {
$('#Button1').click(function () {
//$('#pfirst span img').hide(2000); //找到id为pfirst里的span元素下的img元素
//$('#pfirst img').hide(2000); //找到id为pfirst里所有的img元素
$('#pfirst>span img').hide(3000) //找到id为pfirst里第一级span元素里得img元素 注意！ 这个第一级是指所有pfirst下一级span元素
//$('#pfirst+p img').hide(3000) //找到和id为pfirst的元素同级的第一个紧邻他的p元素 的img元素
//$('#pfirst~p img').hide(3000) //找到和id为pfirst的元素同级的所有p元素 的img元素
//$('#pfirst').next().hide(3000); //找到和id为pfirst的元素后面的同级的第一个元素
//$('#pfirst').nextAll().hide(3000); //找到和id为pfirst的元素后面的同级的所有元素
})
})
</script>
[html]
<body>
<input id="Button1" type="button" value="button " />
<p id="pfirst">
<span>第一层<img src="风景/91fe451f6e8081fe492c6ae617a50274.jpg" /></span>
<span><img src="风景/cda8a8f5b72e165c153fd396db02ab64.jpg" /></span>
</p>
<p>
<img src="风景/d159717ab855f729066b333d439f630e.jpg" />
第二层
</p>
<p>
<img src="风景/f6b31d9bca975794bd23fdf71295e1c4.jpg" />
第三层
</p>
<p>
<img src="风景/f856bd37b432eb532098fa170dfbafd4.jpg" />
第四层
</p>
</body>
<body>
<input id="Button1" type="button" value="button " />
<p id="pfirst">
<span>第一层<img src="风景/91fe451f6e8081fe492c6ae617a50274.jpg" /></span>
<span><img src="风景/cda8a8f5b72e165c153fd396db02ab64.jpg" /></span>
</p>
<p>
<img src="风景/d159717ab855f729066b333d439f630e.jpg" />
第二层
</p>
<p>
<img src="风景/f6b31d9bca975794bd23fdf71295e1c4.jpg" />
第三层
</p>
<p>
<img src="风景/f856bd37b432eb532098fa170dfbafd4.jpg" />
第四层
</p>
</body>
过滤选择器
根据某类过滤规则进行元素的匹配
例
[javascript]
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//$('img:eq(1)').hide(3000); //第几个
//$('img:gt(0)').hide(3000); //大于
//$('img:lt(2)').hide(3000); //小于
//$('img:even').hide(3000); //偶数下标
//$('img:odd').hide(3000); //奇数下标
//$('img:not(#img1)').hide(3000) //除了ID为img1
//$('img:not(.imgclass1)').hide(3000)//除了样式为imgclass1
})
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//$('img:eq(1)').hide(3000); //第几个
//$('img:gt(0)').hide(3000); //大于
//$('img:lt(2)').hide(3000); //小于
//$('img:even').hide(3000); //偶数下标
//$('img:odd').hide(3000); //奇数下标
//$('img:not(#img1)').hide(3000) //除了ID为img1
//$('img:not(.imgclass1)').hide(3000)//除了样式为imgclass1
})
[html]
<body>
<img src="风景/29b56ef1ecac0a2e23fe73abb8457ed9.jpg" id="img1" class="imgclass1" />
<img src="风景/3615bd55e6db2d3eb2a45a8369653f12(1).jpg" class="imgclass" />
<img src="风景/3615bd55e6db2d3eb2a45a8369653f12.jpg" class="imgclass" />
<img src="风景/837adad119910d349f05149ad4a02ef0.jpg" class="imgclass" />
</body>
<body>
<img src="风景/29b56ef1ecac0a2e23fe73abb8457ed9.jpg" id="img1" class="imgclass1" />
<img src="风景/3615bd55e6db2d3eb2a45a8369653f12(1).jpg" class="imgclass" />
<img src="风景/3615bd55e6db2d3eb2a45a8369653f12.jpg" class="imgclass" />
<img src="风景/837adad119910d349f05149ad4a02ef0.jpg" class="imgclass" />
</body>
下一篇： 爆笑的情人节段子